pointsMall/src/components/AppHeader.vue

<template>
    <div style="position: relative;height: 5rem;">
        <nav class="header-box" :class="{'visible':visible}">
            <img class="logo" src="./../assets/image/logo.png"/>
            <router-link to="/home">
                <div class="header-item">
                    <i class="icon-mall-gongnengguanli"></i>首页
                </div>
            </router-link>
            <router-link to="/noticeCenter">
                <div class="header-item">
                    <i v-if="userInfo.unreadNum==0" class="el-icon-message-solid"></i>
                    <el-badge v-else :value="userInfo.unreadNum" :max="99" class="item">
                        <i class="el-icon-message-solid"></i>
                    </el-badge>
                    消息中心
                </div>
            </router-link>
            <router-link to="/myCenter">
                <div class="header-item">
                    <i class="icon-mall-gerenzhongxin"></i>个人中心
                </div>
            </router-link>
            <!-- <router-link to="/pointsRank">
                <div class="header-item">
                    <i class="el-icon-trophy"></i>积分排行
                </div>
            </router-link> -->
            <div class="userInfo flex-center">
                <!-- <el-tooltip content="联系我们" effect="dark" placement="bottom">
                    <div style="font-size: 20px;margin-right: 10px;cursor: pointer;">
                        <i class="el-icon-service" @click="childMethod()"></i>
                    </div>
                </el-tooltip> -->
                <el-avatar fit="fill" :size="50" :src="avatar"></el-avatar>
                <div class="nameAndIntegral">
                    <div>姓名: {{ userInfo.userName }}</div>
                    <div style="display: flex;align-items: center;">
                        积分: <span class="blue">{{ userInfo.surplusIntegral }}</span>
                        <router-link to="/ipay">
                            <span class="ipay-btn">充值</span>
                        </router-link>
                        <img style="height: 24px;margin-left: 10px;" src="@/assets/image/gift.png" alt="返奖">
                    </div>
                    
                </div>
            </div>
        </nav>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    props:['visible'],
    data() {
        return {};
    },
    computed: {
        // 将 getter 映射到当前组件的计算属性
        ...mapGetters(['userInfo','avatar'])
    },
    created() {},
    methods: {
        childMethod() {
            this.$parent.fatherMethod();
        },
    },
}
</script>

<style>
.logo{
    position: absolute;
    left: 80px;
    width: 160px;
}
.userInfo{
    position: absolute;
    right: 80px;
    
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nameAndIntegral{
    margin-left: 10px;
    font-size: 14px;
    color: #252933;
    line-height: px;
    line-height: 23px;
}
.blue {
    color: #1e80ff;
}
.ipay-btn{
    font-weight: normal;
    margin-left: 10px;
    display: inline-block;
    color: #b87100;
    width: 56px;
    height: 24px;
    line-height: 24px;
    background: linear-gradient(270deg, #f8c883 0, #fae8d0 100%);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
}
.header-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  height: 5rem;
  z-index: 250;
  transition: all .2s;
  transform: translate3d(0,-100%,0);
}

.header-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 120px;
}

nav a {
  font-weight: bold;
  color: #515767;
}

nav a.route-active {
  color: #1e80ff;
}


.header-item i {
  font-size: 30px;
  margin-bottom: 5px;
}
.header-box.visible{
    transform: translateZ(0);
}
</style>