CQLJQWXY/webM/src/views/layout/index.vue

<template>
  <div class="layout">
    <!-- tab -->
    <div class="all" v-show="$route.meta.myInd" :class="{ activeAll: cutTab }" @click="cutTab = !cutTab"></div>
    <div class="tab" :class="{ active: cutTab }" v-show="cutTab">
      <div class="small small1" :class="{ activeSmall: $route.meta.myInd === 1 }" @click="jump('tab1')">
        <img :src="require(`@/assets/imgM/${$route.meta.myInd === 1 ? 'tab1Ac' : 'tab1'
          }.png`)
          " alt="" />
        <p>数字史馆</p>
      </div>
      <!-- <div
        class="small small2"
        :class="{ activeSmall: $route.meta.myInd === 2 }"
        @click="jump('tab2')"
      >
        <img
          :src="
            require(`@/assets/imgM/${
              $route.meta.myInd === 2 ? 'tab2Ac' : 'tab2'
            }.png`)
          "
          alt=""
        />
        <p>校园全景</p>
      </div> -->
      <div class="small small3" :class="{ activeSmall: $route.meta.myInd === 3 }" @click="jump('tab2')">
        <img :src="require(`@/assets/imgM/${$route.meta.myInd === 3 ? 'tab3Ac' : 'tab3'
          }.png`)
          " alt="" />
        <p>文物典藏</p>
      </div>
      <div class="small small4" :class="{ activeSmall: $route.meta.myInd === 4 }" @click="jump('tab3')">
        <img :src="require(`@/assets/imgM/${$route.meta.myInd === 4 ? 'tab4Ac' : 'tab4'
          }.png`)
          " alt="" />
        <p>信息检索</p>
      </div>
    </div>
    <!-- 切换的组件页面 -->
    <Router-view />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cutTab: false,
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击tab栏
    jump(url) {
      this.$router.replace(url).catch(() => { })
      // if (url === "tab1") url = "/index?m=TEST";
      // this.$router.replace(url).catch(() => {});
      // if (url === "/index?m=TEST") {
      //   this.$nextTick(() => {
      //     setTimeout(() => {
      //       location.reload(true);
      //     }, 300);
      //   });
      // }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.layout {
  width: 100vw;
  height: 100vh;
}
.all {
  z-index: 100;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  background: url("../../assets/imgM/all.png");
  background-size: 100% 100%;
}
.activeAll {
  background: url("../../assets/imgM/allAc.png");
  background-size: 100% 100%;
}

.tab {
  transform: translate(50px, 50px);
  border-radius: 50%;
  z-index: 99;
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: transparent;
  bottom: 0px;
  right: 0px;
  .small {
    z-index: 101;
    text-align: center;
    width: 60px;
    height: 50px;
    position: absolute;
    bottom: 56px;
    left: 16px;
    color: #fff;
    font-size: 14px;
    & > img {
      width: 40px;
      height: 40px;
    }
    & > p {
      transform: scale(0.7) translateY(-10px);
    }
  }
  .small1 {
    & > p {
      transform: scale(0.7) translateY(-15px);
    }
  }
  .small2 {
    bottom: 97px;
    left: 8px;
  }
  .small3 {
    bottom: 119px;
    left: 24px;
  }
  .small4 {
    bottom: 136px;
    left: 90px;
  }
  .activeSmall {
    color: #b92e2e;
  }
}
.active {
  &::after {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 98%;
    height: 98%;
    top: 5px;
    left: 5px;
    border: 1px solid #b92e2e;
  }
  &::before {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 95%;
    height: 95%;
    top: 8px;
    left: 8px;
    border: 1px solid #b92e2e;
  }
  background-color: rgba(194, 181, 162, 0.8);
}
//@import url(); 引入公共css类</style>