portal_website/src/components/menu/index.vue

<template>
  <div class="menu">
    <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
         @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? i.path:'')">
      <div :class="`name`">{{ i.name }}</div>
      <div class="line"></div>
    </div>
    <div class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1" @mouseleave="clearChildren">
      <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
           @click="toLink(subMenuPath,ii.configTypeId)">
        <div class="icon">
          <img :src="ii.configTypeIcon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
        </div>
        <div class="menuChildrenName">
          <span>
            {{ ii.configTypeName }}
          </span>
        </div>
      </div>
    </div>

    <div class="subMenu1" :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
         v-show="(subMenuList||[]).length>0 && subMenuType === 2"
         @mouseleave="clearChildren">
      <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
           v-for="(ii,k) in subMenuList">
        <div class="subMenuListTitle" @click="toLink(subMenuPath,ii.configTypeId)">
          <img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
               style="width: 1vw;height: 1vw;object-fit: contain">
          <div class="subMenuListTitleSpan">{{ ii.configTypeName }}</div>
          <i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
        </div>
        <div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
             @click="toLink(subMenuPath,iii.configTypeId,true)">
          <img :src="iii.configTypeIcon" alt=""
               style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
          <span>
            {{ iii.configTypeName }}
          </span>
          <el-tag size="small" v-if="kkk <1">新品</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wlw from "@/assets/icon/wlw.png";
import znzz from "@/assets/icon/znzz.png";
import kdwl from "@/assets/icon/kdwl.png";
import znlt from "@/assets/icon/znlt.png";
import {getPortalConfigTypeList} from "@/api/menu";

export default {
  name: 'Index',
  data() {
    return {
      menuList: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '关于海威',
          path: '/aboutHW',
          type: 1,
          children: []
        },
        {
          name: '产品中心',
          path: '/productCenter',
          type: 2,
          children: []
        },
        {
          name: '行业方案',
          path: '/industryPlan',
          type: 2,
          children: []
        },
        {
          name: '服务支持',
          path: '/serviceSupport',
          type: 1,
          children: []
        },
      ],
      subMenuList: [],
      subMenuType: 0,
      subMenuPath: '',
    }
  },
  mounted() {
    console.log(this.$route)
    this.getMenu()
    let query = this.$route.path
    console.log(this.$route)
  },
  methods: {
    toLink(e, id, isDetail) {
      console.log(e)
      if (!e) return
      let path = e
      if (isDetail) {
        path = path + '/detail'
      }
      if (id) {
        path = path + '?id=' + id
      }
      this.$router.push(path)
    },
    getChildren(e) {
      if (e.children) {
        this.subMenuList = e.children
        this.subMenuType = e.type
        this.subMenuPath = e.path
      } else {
        this.subMenuList = []
        this.subMenuType = 0
        this.subMenuPath = ''
      }
    },
    clearChildren() {
      this.subMenuList = []
      this.subMenuType = 0
      this.subMenuPath = ''
    },
    getMenu() {
      getPortalConfigTypeList({
        configTypeClassfication: 3,
        parentId: 0,
      }).then(e => {
        this.menuList[1].children = e.rows
      })
      getPortalConfigTypeList({
        configTypeClassfication: 4,
        parentId: 0,
      }).then(e => {
        this.menuList[2].children = e.rows
      })
      getPortalConfigTypeList({
        configTypeClassfication: 5,
        parentId: 0,
      }).then(e => {
        this.menuList[3].children = e.rows
      })
      getPortalConfigTypeList({
        configTypeClassfication: 6,
        parentId: 0,
      }).then(e => {
        this.menuList[4].children = e.rows
      })
    }
  }
}
</script>

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

.menu {
  position: relative;

  .focus, .menuItem:hover {
    font-weight: 700;
    color: #3076f8;
    background-color: #ebf1ff;

    .line {
      width: 100%;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #3076f8;
    }
  }

  .menuItem {
    //width: 120px;
    padding: 0 2vw;
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;


    .name {
      line-height: @top-height;
      font-size: 1vw;
      letter-spacing: 2px;
    }
  }


  .subMenu {
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: @menuHeight;
    display: flex;
    justify-content: center;
    background-color: #fff;
    z-index: -1;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);


    .topMenuItem.active, .topMenuItem:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      .menuChildrenName {
        color: @standard-color;
      }
    }

    .topMenuItem {
      width: @menuHeight;
      height: @menuHeight;
      transition: all 0.2s;

      .icon {
        width: 100%;
        height: 36%;
        margin-top: 22%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .menuName {
        height: 20%;
        font-size: 0.9vw;
        color: #111;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .subMenuList {
      position: absolute;
      width: 80%;
      height: @menuHeight;
    }
  }

  .subMenu1 {
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    min-height: @menuHeight;
    display: flex;
    justify-content: center;
    background-color: #fff;
    z-index: -1;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);


    .subMenuList {
      max-width: 14vw;
      display: inline-block;
      text-align: left;
      vertical-align: top;
      border-right: 1px solid #0001;

      &:last-child {
        border-right: 0;
      }

      .subMenuListTitle {
        height: 50px;
        cursor: pointer;
        position: relative;

        .subMenuListTitleIcon {
          position: absolute;
          top: 50%;
          left: 2vw;
          width: 1vw;
          height: 1vw;
          transform: translateY(-50%);
        }

        .subMenuListTitleIcon1 {
          position: absolute;
          top: 50%;
          right: 2vw;
          width: 1vw;
          height: 1vw;
          font-size: 1vw;
          transform: translateY(-50%);
        }

        .subMenuListTitleSpan {
          position: absolute;
          letter-spacing: 0.1vw;
          top: 50%;
          left: calc(2vw + 1vw + 0.5vw);
          transform: translateY(-50%);
          font-size: 1vw;
          font-weight: 500;
        }
      }

      .subMenuListItem {
        padding-left: 2vw;
        cursor: pointer;
        font-size: 14px;
        line-height: 40px;

        &:hover {
          color: @standard-color;
          background-color: #0001;
        }
      }
    }
  }
}


@menuHeight: 11vw;


</style>