takeout-wechat/src/components/NavTitle.vue

<template>
    <div
        class="header"
        style="height:44px"
        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
    >
        <span class="name" :style="{ color: fontColor }"><slot></slot></span>
        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            colorType: 'light'
        };
    },
    computed: {
        ...mapState(['systemInfo']),
        fontColor() {
            if (this.colorType == 'light') {
                return '#fff';
            } else {
                return '#000';
            }
        }
    }
};
</script>

<style lang="less" scoped>
.header {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 100;
    transition: all ease-in-out 0.3s;
    padding: 0 15px;
    .flex();

    .name {
        padding: 0 100px;
        position: absolute;
        left: 0;
        right: 0;
        height: 44px;
        bottom: 0;
        font-size: 17px;
        line-height: 44px;
        text-align: center;
        z-index: 100;
    }

    ._van-icon {
        position: relative;
        z-index: 100;
    }
}
</style>