zhgdyun/src/components/centerChange.vue

<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      trigger="hover"
      width="450"
      class="popover"
      :visible-arrow="false"
      v-model="visible"
    >
      <div class="changeBox">
        <div class="center-classify">
          <span>个人中心</span>
          <div class="row-line"></div>
          <div class="classify-item">
            <div
              @click="jumpRouter('/workSpace')"
              :class="isActive('/workSpace') ? 'active-item' : ''"
            >
              工作台
            </div>
            <div
              @click="jumpRouter('/userCenter/userConfig')"
              :class="isActive('/userCenter/userConfig') ? 'active-item' : ''"
            >
              用户中心
            </div>
            <div
              @click="jumpRouter('/infoCenter/allInfo')"
              :class="isActive('/infoCenter/allInfo') ? 'active-item' : ''"
            >
              消息中心
            </div>
          </div>
        </div>
      </div>
      <!-- 点击内容 -->
      <div slot="reference" class="click-content">
        <!-- <i class="el-icon-trophy-1"></i> -->
        <img src="@/assets/images/headerImg/icon2.png" />
        <span>工作台</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    isActive(val) {
      return this.$route.path.indexOf(val) != -1 ? true : false;
    },
    jumpRouter(routeName) {
      // 判断当前页面是不是设备中台
      if (window.location.href.indexOf("equipmentCenter.html") != -1) {
        window.open("/#" + routeName, "_self");
      } else {
        this.$router.push(routeName);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.flexStyle() {
  display: flex;
  align-items: center;
}
.activeStyle() {
  color: white;
  background-color: #478cf7;
}
.changeBox {
  .center-classify {
    width: 180px;
    > span:nth-child(1) {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
    }
    .row-line {
      width: 100%;
      height: 2px;
      background-color: #e1e1e1;
      margin-top: 5px;
    }
    .classify-item {
      margin-top: 10px;
      div {
        padding: 6px 0px;
        text-indent: 0.5em;
        border-radius: 3px;
        cursor: pointer;
      }
      div:hover,
      .active-item {
        .activeStyle();
      }
      div:not(:last-child) {
        margin-bottom: 7px;
      }
    }
  }
}
.click-content {
  cursor: pointer;
  .flexStyle();
  img {
    width: 20px;
    height: 20px;
  }
  > span {
    margin: 0px 10px;
  }
}
</style>
<style>
.el-popover {
  box-sizing: content-box !important;
}
</style>