美文网首页
h5自己写的header

h5自己写的header

作者: 秀萝卜 | 来源:发表于2022-03-07 13:34 被阅读0次
    <v-header title="APP下载" bgColor="F6FAFB"></v-header>
    
    <template>
        <div class="common_header" :style="{background:'#'+bgColor}">
            <div class="common_left_array" @click="goBack()">
                <van-icon name="arrow-left" class="common_array_icon" :style="{color:'#'+iconColor}" />
            </div>
            <div class="common_title">{{title}}</div>
        </div>
    </template>
    
    <script>
    export default {
        props: {
            title: {
                type: String,
                default: '',
            },
            bgColor: {
                type: String,
                default: 'fff',
                // 全局body的颜色F6FAFB
            },
            iconColor: {
                type: String,
                default: '444',
            }
        },
        data() {
            return {
            }
        },
        methods: {
            goBack() {
                this.$router.go(-1); //返回上一层
            }
        },
        created() {
        },
    }
    </script>
    <style lang="scss" scoped>
    .common_header {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        position: relative;
        .common_left_array {
            position: absolute;
            top: 0;
            left: 0.2rem;
            bottom: 0;
            width: 0.4rem;
            display: flex;
            align-items: center;
        }
        .common_array_icon {
            position: absolute;
            font-size: 0.4rem;
        }
    }
    </style>
    

    下面是旧版本的:

            <div class="common_header">
                <div class="common_return" @click="goBack()">
                    <img src="~@/../static/images/about/return.png" alt="" />
                </div>
                <div class="common_title common_center">关于我们</div>
            </div>
    
    .common_header {
        z-index: 999;
        top: 0;
        width: 100%;
        // background: #296fc7;
        background: #fff;
        height: 0.88rem;
        position: fixed;
        display: flex;
        align-items: center;
        .common_return {
            width: 0.52rem;
            height: 0.88rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            img {
                width: 0.22rem;
                height: 0.4rem;
            }
        }
        .common_title {
            font-size: 0.34rem;
            color: #3b3849;
            padding-left: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 6.5rem;
        }
        .common_center {
            margin-right: 0.52rem;
            text-align: center;
            padding-right: 0.3rem;
        }
    }
    

    相关文章

      网友评论

          本文标题:h5自己写的header

          本文链接:https://www.haomeiwen.com/subject/gxqnrrtx.html