修改首页和行业方案
suixy
3 weeks ago
parent
a91ca52bcb
commit
05b8fbeb60
@ -0,0 +1,351 @@
|
||||
<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)">
|
||||
<div style="width: 100%;text-align: center">{{ ii.webMenuName }}</div>
|
||||
|
||||
</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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-submenu {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
transform: translateX(calc(-90px + 4vw)) !important;
|
||||
|
||||
}
|
||||
.el-menu-item > div {
|
||||
font-size: 1vw !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue