nsgk_mobile/src/components/common/nav_footer.vue

<template>
  <div class="tb-toolbar-container">
    <!--<router-link to="/index" class="tab" active-class="active" exact>
      <span class="icon"><van-icon name="wap-home-o" size="25" /></span>
      <p class="text">首页</p>
    </router-link>
    <router-link to="/project" class="tab" active-class="active">
      <span class="icon"><van-icon name="notes-o" size="25" /></span>
      <p class="text">挂牌项目</p>
    </router-link>
    <router-link to="/user" class="tab" active-class="active">
      <span class="icon"><van-icon name="contact" size="25" /></span>
      <p class="text">我的</p>
    </router-link>-->
<!--    <router-link to="/addressBook" class="tab" active-class="active">-->
<!--      <span class="icon"><van-icon name="orders-o" size="20" /></span>-->
<!--      <p class="text">通讯录</p>-->
<!--    </router-link>-->
<!--    <router-link to="/mynsgk" class="tab" active-class="active">-->
<!--      <span class="icon"><van-icon name="contact" size="20" /></span>-->
<!--      <p class="text">我的</p>-->
<!--    </router-link>-->
  </div>
</template>
<script>
export default {
  name: "toolbar",
};
</script>
<style scoped lang="scss">
.tb-toolbar-container {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1001;
  background-color: #fff;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #f8f8f8;
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  position: fixed;
  padding: 10px 40px;
  .tab {
    color: #5d656b;
    text-align: center;
    &.active {
      color: #007b76;
    }
    .icon {
      padding-bottom: 3px;
    }
  }
}
</style>