spfm-market-front/src/pages/main/terminals/terminalhome.vue

<template>
  <div class="inner-container">
    <div class="tabBox">
      <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>
    <div class="infoBox">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "",
      showList: [],
      routerList: [
        {
          label: "测试终端管理",
          path: "/terminal",
          name: "terminal",
        },
        {
          label: "测试终端申请",
          path: "/terminalApply",
          name: "terminalApply",
        },
        {
          label: "终端型号管理",
          path: "/terminalModel",
          name: "terminalModel",
        },
        {
          label: "终端台账管理",
          path: "/terminalStandbook",
          name: "terminalStandbook",
        },
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      this.routerList.map((item) => {
        this.showList.map((row) => {
          if (item.path == row) {
            arr.push(item);
          }
        });
      });
      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;
}
.inner-container {
//   display: flex;
//   justify-content: space-between;
}
.tabBox {
  border-bottom: 1px solid #e1e1e1;
  height: 55px;
  margin-top: 10px;
}
.infoBox {
  background: #f4f4f4 !important;
  height: 100%;
//   width: calc(100% - 135px);
    margin-left: 20px;
}
::v-deep .el-tabs__item {
  width: 166px;
  text-align: center;
  border-left: 10px solid #ffffff;
  border-right: 10px solid #ffffff;
  padding: 0;
}
::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>