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(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 class="subMenu1" 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">
          {{ ii.name }} >
        </div>
        <div class="subMenuListItem" v-for="(iii,kkk) in ii.children" @click="toLink(iii.path)">
          <img :src="iii.icon" alt=""
               style="width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">{{
            iii.name
          }}
          <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: '/productCenter/aboutHW',
          type: 1,
          children: [
            {
              name: '公司概况',
              path: '/aboutUs/companyIntroduction',
              icon: znzz
            },
            {
              name: '媒体中心',
              path: '/aboutUs/managementTeam',
              icon: znlt
            },
            {
              name: '荣誉资质',
              path: '/aboutUs/developmentHistory',
              icon: kdwl
            },
            {
              name: '合作伙伴',
              path: '/contactUs',
              icon: wlw
            },
            {
              name: '联系我们',
              path: '/contactUs',
              icon: wlw
            },
          ]
        },
        {
          name: '产品中心',
          path: '/productCenter/industrialInternet',
          type: 2,
          children: [
            {
              name: '轮胎RFID',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '超高频RFID',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '高频RFID',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '传感器',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '物联终端',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '工业软件',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
          ]
        },
        {
          name: '行业方案',
          path: '/casesAndClients/IOT',
          type: 2,
          children: [
            {
              name: '智能轮胎',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '轮胎工厂',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '快递物流',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '新能源',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '畜牧食品',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '智能制造',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
            {
              name: '工业物联',
              path: '/productCenter/industrialInternet',
              icon: znzz,
              children: [
                {
                  name: '产品1',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品2',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
                {
                  name: '产品3',
                  path: '/productCenter/industrialInternet',
                  icon: znzz
                },
              ]
            },
          ]
        },
        {
          name: '服务支持',
          path: '/contactUs',
          type: 1,
          children: [
            {
              name: '售前服务',
              path: '/aboutUs/developmentHistory',
              icon: kdwl
            },
            {
              name: '售后服务',
              path: '/contactUs',
              icon: wlw
            },
            {
              name: '资料下载',
              path: '/contactUs',
              icon: wlw
            }
          ]
        },
      ],
      subMenuList: [],
      subMenuType: [],
      firstMenu: '',
      secondMenu: '',
    }
  },
  mounted() {
    // this.getMenu()
    let query = this.$route.path
    console.log(this.$route)
  },
  methods: {
    toLink(e) {
      if (!e) return
      this.$router.push(e)
    },
    getChildren(e) {
      if (e.children) {
        this.subMenuList = e.children
        this.subMenuType = e.type
      } else {
        this.subMenuList = []
        this.subMenuType = 0
      }
    },
    clearChildren() {
      this.subMenuList = []
      this.subMenuType = 0
    },
    getMenu() {
      getPortalConfigTypeList({
        configTypeClassfication: 1,
        parentId: 0,
        pageNum: 1,
        pageSize: 111
      }).then(e => {
        console.log(e)
        this.menuList[2].children = e.rows.map(v => {
          return {
            name: v.configTypeName,
            icon: v.configTypeIcon,
            path: '/productCenter/industrialInternet?portalConfigTypeId=' + v.configTypeId
          }
        })
      })
      getPortalConfigTypeList({
        configTypeClassfication: 2,
        parentId: 0,
        pageNum: 1,
        pageSize: 111
      }).then(e => {
        console.log(e)
        this.menuList[3].children = e.rows.map(v => {
          return {
            name: v.configTypeName,
            icon: v.configTypeIcon,
            path: '/casesAndClients/IOT?portalConfigTypeId=' + v.configTypeId
          }
        })
      })
    }
  }
}
</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%);
    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: @menuHeight;
      display: inline-block;
      text-align: left;
      vertical-align: top;

      .subMenuListTitle {
        font-weight: 900;
        line-height: 40px;
      }

      .subMenuListItem {
        cursor: pointer;
        font-size: 14px;
        line-height: 40px;

        &:hover {
          color: @standard-color;
        }
      }
    }
  }
}


@menuHeight: 11vw;


</style>