pointsMall/src/components/AppHeader.vue

<template>
    <div style="position: relative;height: 5rem;">
        <nav class="header-box" :class="{'visible':visible}">
            <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">
                    <el-badge :value="2" class="item">
                        <i class="el-icon-message-solid"></i>
                    </el-badge>
                    通知中心
                </div>
            </router-link>
            <router-link to="/pointsRank">
                <div class="header-item">
                    <i class="el-icon-trophy"></i>积分排行
                </div>
            </router-link>
        </nav>
    </div>
</template>
<script lang="ts">
export default {
    props:['visible'],
}
</script>

<style>
.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 80px;
}

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>