From e48137c53bd78960f98434436cd2de3303ccf9e8 Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期二, 16 一月 2024 21:27:58 +0800
Subject: [PATCH] 更新样式
---
src/container/home/index.vue | 269 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 185 insertions(+), 84 deletions(-)
diff --git a/src/container/home/index.vue b/src/container/home/index.vue
index 8053e10..a29f5de 100644
--- a/src/container/home/index.vue
+++ b/src/container/home/index.vue
@@ -2,56 +2,14 @@
<Home>
<template slot="menu">
<div class="menu-container">
- <ul class="">
- <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">鐘舵�佺洃鎺�</li>
- <li :class="activeId ==='0' ? 'active' : ''" @click="navigateTo('0')">澶у睆灞曠ず</li>
- <li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')">
+ <ul class="nav">
+ <li v-for="item in navs" :key="item.id" :class="activeId === item.id ? 'active' : ''" @click="goTo(item)">
<span>
- 杞﹂棿鍦板浘
+ {{ item.label }}
+ <i class="el-icon-caret-bottom" v-show="item.children && item.children.length > 0"></i>
</span>
-
- </li>
- <li :class="activeId ==='3' ? 'active' : ''" @click="navigateTo('3')">
- <span>
- 杞﹂棿鍒楄〃<i class="el-icon-caret-bottom"></i>
- </span>
- <ul v-if="showSub">
- <li v-for="item in workshopList" :key="item.id" @click.stop="navigateTo('3',item)">{{ item.name }}</li>
- </ul>
- </li>
- <li :class="activeId ==='4' ? 'active' : ''" @click="navigateTo('4')">
- <span>
- 璁惧淇濆吇<i class="el-icon-caret-bottom"></i>
- </span>
- <!-- <ul v-if="showSub">
- <li>2鍘�</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
- </ul> -->
- </li>
- <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')">
- <span>
- 鎶ヨ〃鐢熸垚<i class="el-icon-caret-bottom"></i>
- </span>
- <ul v-if="showSub">
- <li>2鍘�</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
- </ul>
- </li>
- <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">鐝璁剧疆</li>
- <li :class="activeId ==='7' ? 'active' : ''" @click="navigateTo('7')">宸ヤ欢淇℃伅</li>
- <li :class="activeId ==='8' ? 'active' : ''" @click="navigateTo('8')">
- <span>
- 鏇村鑿滃崟<i class="el-icon-caret-bottom"></i>
- </span>
- <ul v-if="showSub">
- <li @click="navigateTo('ledger')">鍙拌处</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
- <li>2鍘�</li>
+ <ul class="nav-sub" v-if="item.children && item.children.length > 0 && activeId === item.id && showSub">
+ <li v-for="child in item.children" @click="goTo(child)">{{ child.label }}</li>
</ul>
</li>
</ul>
@@ -75,12 +33,163 @@
},
data () {
return {
+ navs: [
+ {
+ label: '鐘舵�佺洃鎺�',
+ pathName: '',
+ id: 1,
+ chilren: []
+ },
+ {
+ label: '澶у睆灞曠ず',
+ pathName: 'preview',
+ id: 2,
+ chilren: []
+ },
+ {
+ label: '杞﹂棿鍦板浘',
+ pathName: '',
+ id: 3,
+ children: [
+ {
+ label: '鍦板浘灞曠ず',
+ pathName: 'mapPreview'
+ },
+ {
+ label: '鍦板浘缂栬緫',
+ pathName: 'map'
+ }
+ ]
+ },
+ {
+ label: '杞﹂棿鍒楄〃',// workshop
+ id: 4,
+ children: []
+ },
+ {
+ label: '璁惧淇濆吇',
+ id: 5,
+ children:[
+ {
+ label: '鏃ュ父淇濆吇',
+ pathName: 'maintenance',
+ params: {style: 1},
+ query: {}
+ },
+ {
+ label: '涓�绾т繚鍏�',
+ pathName: 'maintenance',
+ params: {style: 2},
+ query: {}
+ },
+ {
+ label: '浜岀骇淇濆吇',
+ pathName: 'maintenance',
+ params: {style: 3},
+ query: {}
+ },
+ {
+ label: '涓夌骇淇濆吇',
+ pathName: 'maintenance',
+ params: {style: 4},
+ query: {}
+ },
+ ]
+ },
+ {
+ label: '鎶ヨ〃鐢熸垚',
+ id: 6,
+ children: [
+ {
+ label: '璁捐鍣�',
+ href: '/mdc/ureport/designer'
+ },
+ {
+ label: '鎶ヨ〃鐢熸垚1'
+ },
+ {
+ label: '鎶ヨ〃鐢熸垚1'
+ },
+ {
+ label: '鎶ヨ〃鐢熸垚1'
+ },
+ ]
+ },
+ {
+ label: '鐝璁剧疆',
+ id: 7,
+ chilren: []
+ },
+ {
+ label: '宸ヤ欢淇℃伅',
+ pathName: 'component',
+ id: 8,
+ chilren: []
+ },
+ {
+ label: '鏇村鑿滃崟',
+ id: 9,
+ children: [
+ {
+ label: '鍙拌处绠＄悊',
+ pathName: 'ledger'
+ },
+ {
+ label: '璁惧绫诲瀷',
+ pathName: 'deviceType'
+ },
+ {
+ label: '鏈哄簥閲囬泦',
+ pathName: 'machineList'
+ }
+ ]
+ },
+ ],
activeId: '',
showSub: false,
}
},
computed: {
...mapGetters(['userInfo','workshopList'])
+ },
+ watch: {
+ workshopList() {
+ this.$set(this.navs,3 ,{
+ ...this.navs[3],
+ children: this.workshopList.map(item => {
+ return {
+ label: item.name,
+ value: item.id,
+ pathName: 'workshop',
+ params: {
+ id: item.id
+ },
+ query: {
+ name: item.name
+ }
+ }
+ })
+ })
+ }
+ },
+ created () {
+ this.$set(this.navs, 3 ,{
+ ...this.navs[3],
+ children: this.workshopList.map(item => {
+ return {
+ label: item.name,
+ value: item.id,
+ pathName: 'workshop',
+ params: {
+ id: item.id
+ },
+ query: {
+ name: item.name
+ }
+ }
+ })
+ })
+ // this.navs[3].children = workshopList
},
methods: {
logout() {
@@ -89,40 +198,23 @@
this.$router.push('/')
})
},
- navigateTo (name,v) {
- let routers = {
- 2: 'map',
- 3: 'workshop',
- 4: 'maintenance',
- 7: 'component',
- ledger: 'ledger',
+ goTo (item) {
+ if (item.id) {
+ if (item.id === this.activeId) {
+ this.showSub = !this.showSub
+ } else {
+ this.showSub = true
+ }
+ this.activeId = item.id || this.activeId
+ if(item.pathName) {
+ this.$router.push({name: item.pathName,params: item.params,query: item.query})
+ }
+ } else if(item.pathName){//浜岀骇鑿滃崟
+ this.$router.push({name: item.pathName,params: item.params,query: item.query})
+ } else if(item.href) {
+ window.open(item.href)
}
- console.log(name, '>>>>>>>')
- if (name === this.activeId) {
- this.showSub = !this.showSub
- } else {
- this.showSub = true
- }
- if (['3','5','8'].includes(name)) {
- this.activeId = name
- console.log(v)
- this.$router.push({name: routers[name],params: {id: v.id},query: {
- ...v
- }})
- this.$nextTick(() => {
- this.showSub = false
- })
- } else {
- this.activeId = name
- console.log(name)
- // this.$router.push('/home/map')
- this.$router.push({name: routers[name]})
- this.$nextTick(() => {
- this.showSub = false
- })
- }
-
- }
+ },
},
}
</script>
@@ -140,21 +232,30 @@
list-style: none;
display: flex;
& > li {
+ width: 112px;
+ height: 40px;
+ line-height: 38px;
+ text-align: center;
cursor: pointer;
- background: #27394E;
- padding: 0 12px;
+ // background: #27394E;
+ background: url('./nav-li.png') 100% 100% no-repeat;
+ background-size: contain;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
ul {
display: none;
+ font-size: 14px;
}
// user-select:none;
}
& > li.active {
- & > ul {
+ background: url('./nav-li-active.png') 100% 100% no-repeat;
+ background-size: contain;
+ & > ul.nav-sub {
padding: 0;
margin: 0;
+ margin-top: 5px;
padding-inline: 0;
list-style: none;
min-width: 100%;
--
Gitblit v1.9.3