美文网首页
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