You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
8.6 KiB
Vue
338 lines
8.6 KiB
Vue
<template>
|
|
<div class="menu">
|
|
<div v-if="false" v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
|
|
@mouseenter="getChildren(i)" @click="toLink( i.webMenuId )">
|
|
<div :class="`name`">{{ i.webMenuName }}</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div v-if="false" 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.webMenuId)">
|
|
<div class="icon">
|
|
<img :src="ii.webMenuPic" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
|
|
</div>
|
|
<div class="menuChildrenName">
|
|
<span>
|
|
{{ ii.webMenuName }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="false" 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(ii.webMenuId)">
|
|
<img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
|
|
style="width: 1vw;height: 1vw;object-fit: contain">
|
|
<div class="subMenuListTitleSpan">{{ ii.webMenuName }}</div>
|
|
<i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
|
|
</div>
|
|
<div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
|
|
@click="toLink(iii.webMenuId)">
|
|
<img :src="iii.webMenuPic" alt=""
|
|
style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
|
|
<span>
|
|
{{ iii.webMenuName }}
|
|
</span>
|
|
<el-tag size="small" v-if="kkk <1">新品</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" style="height: 4.5vw" mode="horizontal"
|
|
@select="handleSelect">
|
|
<template v-for="(i,k) in menuList">
|
|
<el-menu-item style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" :index="i.webMenuId"
|
|
@click="toLink(i)"
|
|
v-if="(i.children || []).length ===0">{{
|
|
i.webMenuName
|
|
}}
|
|
</el-menu-item>
|
|
<el-submenu :index="i.webMenuId" v-else style="height: 4.5vw;line-height: 4.5vw">
|
|
<template slot="title">
|
|
<div style="height: 4.5vw;line-height: 4.5vw;font-size: 1vw;" @click="toLink(i)">{{
|
|
i.webMenuName
|
|
}}
|
|
</div>
|
|
</template>
|
|
<template v-for="ii in i.children">
|
|
<el-menu-item :index="ii.webMenuId" @click="toLink(ii)">
|
|
{{ ii.webMenuName }}
|
|
</el-menu-item>
|
|
<!-- <el-submenu :index="ii.webMenuId" v-if="(ii.children || []).length >0">-->
|
|
<!-- <template slot="title">{{ ii.webMenuName }}</template>-->
|
|
<!-- <el-menu-item :index="iii.webMenuId" v-for="iii in ii.children">{{ iii.webMenuName }}</el-menu-item>-->
|
|
<!-- </el-submenu>-->
|
|
</template>
|
|
</el-submenu>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {selectConfigTypeList} from "@/api/menu";
|
|
import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
|
|
|
|
export default {
|
|
name: 'Index',
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
menuList: [],
|
|
subMenuList: [],
|
|
subMenuType: 0,
|
|
subMenuPath: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getMenu()
|
|
},
|
|
methods: {
|
|
toLink(e) {
|
|
let id = e.webMenuId
|
|
console.log()
|
|
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 if (e.ancestors.split(',').includes("2")) {
|
|
// this.$router.push('/contactUs#item' + id)
|
|
this.$router.push('/contactUs?id=' + id)
|
|
} else if (e.ancestors.split(',').includes("7")) {
|
|
// this.$router.push('/productCenter#item' + id)
|
|
this.$router.push('/productCenter?id=' + id)
|
|
} else if (e.ancestors.split(',').includes("24")) {
|
|
this.$router.push('/serviceSupport?type=' + id)
|
|
}else{
|
|
this.$router.push('/test?id=' + id)
|
|
}
|
|
},
|
|
getMenu() {
|
|
selectMenuTree().then(e => {
|
|
this.menuList = e.data
|
|
})
|
|
},
|
|
getChildren(e) {
|
|
console.log(e)
|
|
if (e.children) {
|
|
this.subMenuList = e.children
|
|
this.subMenuType = e.webMenuType || 1
|
|
this.subMenuPath = e.path
|
|
} else {
|
|
this.subMenuList = []
|
|
this.subMenuType = 0
|
|
this.subMenuPath = ''
|
|
}
|
|
},
|
|
clearChildren() {
|
|
this.subMenuList = []
|
|
this.subMenuType = 0
|
|
this.subMenuPath = ''
|
|
},
|
|
handleSelect(e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
/deep/ .el-submenu.is-active .el-submenu__title {
|
|
height: 4.5vw;
|
|
}
|
|
|
|
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
height: 4.5vw;
|
|
}
|
|
|
|
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
|
|
display: none;
|
|
}
|
|
|
|
/deep/ .el-submenu__title {
|
|
margin: 0 20px
|
|
}
|
|
|
|
</style>
|
|
|
|
|