portal_website/src/components/menu/index.vue

<template>
  <div>
    <div class="topMenu">
      <div class="item" v-for="(i,k) in menuList">
        <div class="menuItem" :class="{active: k == activeIndex}" @click="toLink1(i)">{{ i.webMenuName }}</div>
        <div class="itemChildren" v-if="i.children.length > 0">
          <div class="itemChildrenBg">
            <div class="menuChildrenItem" @click="toLink2(ii)" v-for="ii in i.children">{{ ii.webMenuName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {selectConfigTypeList} from "@/api/menu";
import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";

const indexRoute = [
  '/index',
  '/newsDetail'
]
const contactUsRoute = ['/contactUs']
const industrySolutionsRoute = ['/industrySolutions']
const productCenterRoute = ['/productCenter']
const serviceSupportRoute = ['/serviceSupport']

export default {
  name: 'Index',
  data() {
    return {
      activeIndex: 0,
      menuList: [],
      subMenuList: [],
      subMenuType: 0,
      subMenuPath: ''
    }
  },
  watch: {
    '$route': {
      handler() {
        let path = this.$route.path;
        if (indexRoute.includes(path)) {
          this.activeIndex = 0
        } else if (contactUsRoute.includes(path)) {
          this.activeIndex = 1
        } else if (industrySolutionsRoute.includes(path)) {
          this.activeIndex = 2
        } else if (productCenterRoute.includes(path)) {
          this.activeIndex = 3
        } else if (serviceSupportRoute.includes(path)) {
          this.activeIndex = 4
        } else {
          this.activeIndex = -1
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getMenu()
  },
  methods: {
    toLink1(e) {
      let id = e.webMenuId
      if (!id) return
      if (id === 7) {
        this.$router.push('/productCenter')
      } else if (id === 2) {
        this.$router.push('/contactUs')
      } else if (id === 4) {
        this.$router.push('/industrySolutions')
      } else if (id === 24) {
        this.$router.push('/serviceSupport')
      } else if (id === 1) {
        this.$router.push('/index')
      } else {
        this.$router.push('/test?id=' + id)
      }
    },
    toLink2(e) {
      let id = e.webMenuId
      if (!id) return
      if (e.ancestors.split(',').includes("2")) {
        this.$router.push('/contactUs?id=' + id)
      } else if (e.ancestors.split(',').includes("7")) {
        this.$router.push('/productCenter?id=' + id)
      } else if (e.ancestors.split(',').includes("24")) {
        this.$router.push('/serviceSupport?type=' + id)
      } else if (e.ancestors.split(',').includes("4")) {
        this.$router.push('/industrySolutions?id=' + id)
      } else {
        this.$router.push('/test?id=' + id)
      }
    },
    getMenu() {
      selectMenuTree().then(e => {
        this.menuList = e.data
        console.log(e)
      })
    },
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.topMenu {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  white-space: nowrap;

  .item {
    display: inline-block;
    vertical-align: top;
    line-height: @top-height;
    font-size: 1.1vw;
    padding: 0 2vw;
    cursor: pointer;
    user-select: none;
    position: relative;
    color: #666;

    .active {
      color: #000;

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #419EFF;
      }
    }

    &:hover {
      color: #000;

      .itemChildren {
        visibility: visible;
        opacity: 1;
      }
    }

    .itemChildren {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 2vw;
      font-size: 0.9vw;
      color: #666;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
      0 6px 20px 0 rgba(0, 0, 0, 0.08);

      .itemChildrenBg {
        margin-top: 4px;
        border-radius: 4px;
        padding: 4px 1.4vw;
        background-color: #fff;

        .menuChildrenItem {
          &:hover {
            color: #000
          }
        }
      }
    }
  }
}

</style>