spfm-market-front/src/pages/main/antiSpoofing/home.vue

<template>
  <div class="inner-container">
    <div v-if="menuList.indexOf(activeName) >= 0">
      <div class="box">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item, index) in routerList"
            :key="index"
            :name="item.path"
            :label="item.label"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <el-row>
        <!-- <el-col :span="21" style="background: #f4f4f4;"> -->
        <div style="height: 100%">
          <router-view />
        </div>
      </el-row>
    </div>
    <div v-else>
      <div style="height: 100%; background: #f4f4f4">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "",
      showList: [],
      routerList: [
        {
          label: "区县考核报表",
          path: "/districtCounty",
          name: "districtCounty",
        },
        { label: "人员考核报表", path: "/personnel", name: "personnel" },
        { label: "渠道考核报表", path: "/channel", name: "channel" },
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      this.routerList.map((item) => {
        this.showList.map((row) => {
          if (item.path == row) {
            arr.push(item.path);
          }
        });
      });
      return arr;
    },
  },
  methods: {
    handleClick(val) {
      if (this.$route.path != this.activeName) {
        this.$router.push(this.activeName);
      }
    },
  },
  mounted() {
    this.activeName = this.$route.path;
  },
  created() {
    JSON.parse(sessionStorage.childrenMenus).map((item) => {
      this.showList.push(item.jspUrl);
    });
  },
  watch: {
    $route(to, from) {
      this.activeName = this.$route.path;
    },
  },
};
</script>
<style lang="scss" scoped>

.el-tabs__content {
  display: none;
}
.box{
  border-bottom: 1px solid #e1e1e1;
  height: 55px;
  margin-top:10px ;
}
::v-deep .el-tabs__item {
  width: 166px;
  text-align: center;
  border-left: 10px solid #ffffff;
  padding: 0;
  border-right: 10px solid #ffffff;
}
::v-deep .el-tabs__header {
  margin: 0px;
  background: #d8eaf6;
  color: black;
  margin-left: 20px;
  display: inline-block;
}
::v-deep .is-active {
  background: #0583cd;
  color: white;
}

::v-deep .el-tabs__item:hover {
  color: black;
}
::v-deep .is-active:hover {
  background: #0583cd;
  color: white;
}
::v-deep .el-tabs__active-bar{
  width: 0px !important;;
}
</style>