portal_website/src/components/menu/index.vue

<template>
  <div class="menu">
    <div v-for="(i,k) in menuList" :class="`menuItem ${k === -1 ? 'focus':''}`" @mouseenter="getChildren(i)">
      <div :class="`name `" @click="toLink(i.path)">{{ i.name }}</div>
      <div class="line"></div>
    </div>
    <div class="subMenu" v-if="(subMenuList||[]).length>0" @mouseleave="clearChildren">
      <div :class="`topMenuItem${k===0 ? ' active':''}`" v-for="(ii,k) in subMenuList" @click="toLink(ii.path)">
        <div class="icon">
          <img :src="ii.icon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
        </div>
        <div class="menuChildrenName">
          <span>
            {{ ii.name }}
          </span>
        </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: '产品中心',
          children: [
            {
              name: '工业互联网',
              icon: wlw,
              path: '/productCenter/industrialInternet'
            },
            {
              name: '智能制造',
              icon: znzz,
              path: '/'
            },
            {
              name: '快递物流',
              icon: kdwl,
              path: '/'
            },
            {
              name: '智能轮胎',
              icon: znlt,
              path: '/'
            },
          ]
        },
        {
          name: '案例与客户',
          children: [
            {
              name: '工业物联网案例',
              icon: wlw,
              path: '/casesAndClients/IOT'
            },
            {
              name: '智能制造案例',
              icon: znzz,
              path: '/'
            },
            {
              name: '快递物流案例',
              icon: kdwl,
              path: '/'
            },
            {
              name: '智能轮胎案例',
              icon: znlt,
              path: '/'
            },
            {
              name: '合作客户',
              icon: znlt,
              path: '/'
            },
          ]
        },
        {
          name: '新闻中心',
          path: '/newsCenter'
        },
        {
          name: '关于我们',
          path: '/contactUs'
        },
      ],
      subMenuList: [],
      firstMenu: '',
      secondMenu: '',
    }
  },
  mounted() {
    this.getMenu()
    let query = this.$route.path
    console.log(this.$route.path.split("/"))
  },
  methods: {
    toLink(e) {
      if (!e) return
      this.$router.push(e)
    },
    getChildren(e) {
      if (e.children) {
        this.subMenuList = e.children
      } else {
        this.subMenuList = []
      }
    },
    clearChildren() {
      this.subMenuList = []
    },
    getMenu() {
      getPortalConfigTypeList({
        configTypeClassfication: 1,
        parentId: 0,
        pageNum: 1,
        pageSize: 111
      }).then(e => {
        // this.menuList[1].children = e.rows.map(v => {
        //   return {
        //     name: v.configTypeName,
        //     icon: v.homeConfigTypePic,
        //     path: ''
        //   }
        // })
      })
    }
  }
}
</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;
      }
    }
  }
}


@menuHeight: 11vw;


</style>