suixy
/
portal_website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改菜单

Browse Source
master
夜笙歌 1 month ago
parent 2a9b6ab954
commit d3ef9f404e
2 changed files with 406 additions and 28 deletions
Show Stats Download Patch File Download Diff File

430
src/components/menu/index.vue
Unescape Escape View File

@ -2,10 +2,10 @@
<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="`name`">{{ i.name }}</div>
<div class="line"></div>
</div>
<div class="subMenu" v-if="(subMenuList||[]).length>0" @mouseleave="clearChildren">
<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">
@ -18,6 +18,20 @@
</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>
@ -39,35 +53,367 @@ export default {
},
{
name: '关于海威',
path: '/productCenter/industrialInternet',
children: []
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',
children: []
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',
children: []
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: '/newsCenter'
// },
{
name: '服务支持',
path: '/contactUs'
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()
// this.getMenu()
let query = this.$route.path
console.log(this.$route)
},
@ -79,12 +425,15 @@ export default {
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({
@ -117,21 +466,6 @@ export default {
}
})
})
getPortalConfigTypeList({
configTypeClassfication: 3,
parentId: 0,
pageNum: 1,
pageSize: 111
}).then(e => {
console.log(e)
this.menuList[1].children = e.rows.map(v => {
return {
name: v.configTypeName,
icon: v.configTypeIcon,
path: '/casesAndClients/IOT?portalConfigTypeId=' + v.configTypeId
}
})
})
}
}
}
@ -220,6 +554,48 @@ export default {
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;
}
}
}
}
}

4
src/views/contactUs/index.vue
Unescape Escape View File

@ -5,7 +5,9 @@
style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
:src="banner"
fit="contain"></el-image>
<div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
<div class="bannerInfo">
青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
</div>
<div class="tabs">
<div class="content">
<div @click="checkTabs(k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in tabsList">

Write Preview
Loading…
Cancel
Save