Header组件

        样式

        说明

                属性        

属性名	含义	类型	是否必填	默认值
linkUrl	图标点击后链接界面	String	否	javascript:;(none)

属性名	含义	类型	是否必填	默认值
url	图片路径	String	是	无

                样式

                        @mainColor -> 主题颜色

        代码

<template>
    <div class="header-container">
        <a class="img-box" :href="linkUrl">
            <img :src="url">
        </a>
    </div>
</template>

<script>
export default {
    props:{
        linkUrl:{
            type:String,
            require: false,
            default:"javascript:;"
        },
        url:{
            type:String,
            require: true
        },
    }
}
</script>

<style lang="less" scoped>
@import url("~@/styles/init.less");
    .header-container{
        width: 100%;
        height: 6vh;
        display: flex;
        background-color: @mainColor;
        .img-box{
            width: 6rem;
            height: 2.3rem;
            margin-left: 3.5rem;
            margin-top: 0.6rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

        页面参考：yostar通行证