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 class="menu">
<div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`" <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:'')"> @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 class="line"></div>
</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" <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
@click="toLink(ii.path)"> @click="toLink(ii.path)">
<div class="icon"> <div class="icon">
@ -18,6 +18,20 @@
</div> </div>
</div> </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> </div>
</template> </template>
@ -39,35 +53,367 @@ export default {
}, },
{ {
name: '关于海威', name: '关于海威',
path: '/productCenter/industrialInternet', path: '/productCenter/aboutHW',
children: [] 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: '产品中心', name: '产品中心',
path: '/productCenter/industrialInternet', 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: '行业方案', name: '行业方案',
path: '/casesAndClients/IOT', 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: '服务支持', 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: [], subMenuList: [],
subMenuType: [],
firstMenu: '', firstMenu: '',
secondMenu: '', secondMenu: '',
} }
}, },
mounted() { mounted() {
this.getMenu() // this.getMenu()
let query = this.$route.path let query = this.$route.path
console.log(this.$route) console.log(this.$route)
}, },
@ -79,12 +425,15 @@ export default {
getChildren(e) { getChildren(e) {
if (e.children) { if (e.children) {
this.subMenuList = e.children this.subMenuList = e.children
this.subMenuType = e.type
} else { } else {
this.subMenuList = [] this.subMenuList = []
this.subMenuType = 0
} }
}, },
clearChildren() { clearChildren() {
this.subMenuList = [] this.subMenuList = []
this.subMenuType = 0
}, },
getMenu() { getMenu() {
getPortalConfigTypeList({ 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; 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;" style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
:src="banner" :src="banner"
fit="contain"></el-image> fit="contain"></el-image>
<div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div> <div class="bannerInfo">
青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
</div>
<div class="tabs"> <div class="tabs">
<div class="content"> <div class="content">
<div @click="checkTabs(k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in tabsList"> <div @click="checkTabs(k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in tabsList">

Write Preview
Loading…
Cancel
Save