From df7f58f8141e97b90627e3725f12cf62a8920e94 Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期三, 06 十二月 2023 16:16:15 +0800
Subject: [PATCH] 大屏修改
---
web/src/views/LayoutIndex/components/LayoutAside.vue | 198 ++++++++++++++++++++++++-------------------------
1 files changed, 97 insertions(+), 101 deletions(-)
diff --git a/web/src/views/LayoutIndex/components/LayoutAside.vue b/web/src/views/LayoutIndex/components/LayoutAside.vue
index 8d29a32..097dbf4 100644
--- a/web/src/views/LayoutIndex/components/LayoutAside.vue
+++ b/web/src/views/LayoutIndex/components/LayoutAside.vue
@@ -1,72 +1,44 @@
<!-- 导航菜单 -->
<template>
<div class="menu_index">
- <el-menu
- unique-opened
- :default-active="$route.path"
- class="el-menu-vertical-demo"
- background-color="transparent"
- text-color="#EAEAEA"
- @select="changeRouter">
- <template v-for="item in routerList">
- <template v-if="item.children && item.children.length > 1">
- <el-submenu :key="item.name" :index="item.path">
- <template slot="title">
- <span>{{item.meta.title}}</span>
- </template>
- <!-- <template v-for="items in item.children">
- <el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
- </template> -->
+ <el-menu unique-opened :default-active="$route.path" class="el-menu-vertical-demo" background-color="transparent"
+ text-color="#EAEAEA" @select="changeRouter">
+ <template v-for="(item, index) in routerList">
-
- <template v-for="three in item.children">
- <template v-if="three.children && three.children.length > 1">
- <el-submenu :key="three.name" :index="three.path" class="titles_two">
- <template slot="title">
- <span>{{three.meta.title}}</span>
- </template>
- <template v-for="items in three.children">
- <el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
- </template>
- </el-submenu>
- </template>
- <template v-else-if="three.children && three.children.length === 1">
- <el-submenu :key="three.name" :index="three.path">
- <template slot="title">
- <span>{{three.meta.title}}</span>
- </template>
- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">{{three.children[0].meta.title}}</el-menu-item>
- </el-submenu>
- <!-- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">
- <span slot="title">{{three.children[0].meta.title}}</span>
- </el-menu-item> -->
- </template>
- <template v-else>
- <el-menu-item :index="three.path" :key="three.name">
- <span slot="title">{{three.meta.title}}</span>
+ <template v-if="item.children && item.children.length >= 1">
+ <el-submenu :key="item.name" :index="item.path">
+ <template slot="title">
+ <i class="icon"><img :src="menuIcons[index] ? menuIcons[index] : menuIcons[0]"></i>
+ <span>{{ item.meta.title }}</span>
+ </template>
+ <template v-for=" three in item.children ">
+ <template v-if="three.children && three.children.length >= 1">
+ <el-submenu :key="three.name" :index="three.path" class="titles_two">
+ <template slot="title">
+ <span>{{ three.meta.title }}</span>
+ </template>
+ <el-menu-item class="three-menu-item" v-for=" items in three.children " :index="items.path"
+ :key="items.name">
+ {{ items.meta.title }}
</el-menu-item>
- </template>
+ </el-submenu>
</template>
-
-
- </el-submenu>
- </template>
-
-
-
-
-
- <template v-else-if="item.children && item.children.length === 1">
- <el-menu-item :index="item.children[0].path" :key="item.children[0].name">
- <span slot="title">{{item.children[0].meta.title}}</span>
- </el-menu-item>
- </template>
- <template v-else>
- <el-menu-item :index="item.path" :key="item.name">
- <span slot="title">{{item.meta.title}}</span>
- </el-menu-item>
- </template>
+ <template v-else>
+ <el-menu-item class="two-menu-item" :index="three.path" :key="three.name">
+ <span slot="title">{{ three.meta.title }}</span>
+ </el-menu-item>
+ </template>
+ </template>
+ </el-submenu>
</template>
+
+ <template v-else>
+ <el-menu-item :index="item.path" :key="item.name">
+ <span slot="title" >{{ item.meta.title }}</span>
+ </el-menu-item>
+ </template>
+
+ </template>
</el-menu>
</div>
</template>
@@ -77,7 +49,21 @@
data() {
return {
routerList: [], // 导航栏数据
+ menuIcons: []
};
+ },
+ created() {
+ this.menuIcons = [
+ require('@/assets/icon/icon0.png'),
+ require('@/assets/icon/icon1.png'),
+ require('@/assets/icon/icon2.png'),
+ require('@/assets/icon/icon3.png'),
+ require('@/assets/icon/icon4.png'),
+ require('@/assets/icon/icon5.png'),
+ require('@/assets/icon/icon6.png'),
+ require('@/assets/icon/icon7.png'),
+ require('@/assets/icon/icon8.png'),
+ ]
},
mounted() {
this.routerList = this.$router.options.routes
@@ -86,7 +72,7 @@
// 切换路由
changeRouter(path) {
this.$router.push(path).catch(err => {
- console.log(err,"--");
+ console.log(err, "--");
})
}
},
@@ -97,66 +83,76 @@
.menu_index {
height: 100%;
overflow-y: auto;
- border-top: 1px solid rgba(57,181,254,0.16);
-
+ border-top: 1px solid rgba(57, 181, 254, 0.16);
+
+ .icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 5px;
+ width: 24px;
+ text-align: center;
+
+ img {
+ width: 65%;
+ }
+ }
&::-webkit-scrollbar {
width: 4px;
}
-
- &::-webkit-scrollbar-thumb {
- border-radius: 10px;
- box-shadow: inset 0 0 5px transparent;
- background: rgba(57, 181, 254, .6);
- }
-
- &::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px transparent;
- border-radius: 10px;
- background: rgba(57, 181, 254, .5) 5%,;
- }
}
-.titles_two{
- padding-left: 15px;
+.titles_two {
+ text-indent: 30px;
+
+ /deep/ .el-menu {
+ padding: 14px 0;
+ background: rgba(33, 83, 139, .75) !important;
+ }
}
/deep/ .el-menu {
border-right: 0;
}
-/deep/ .el-submenu .el-menu-item {
- height: 40px;
- line-height: 40px;
+/deep/ .three-menu-item {
+ padding-left: 50px !important;
+ height: 45px;
+ line-height: 45px;
+}
+
+/deep/ .two-menu-item {
+ height: 45px;
+ text-indent: 20px;
+ line-height: 45px;
}
/deep/ .el-menu-item.is-active {
- padding-left: 45px!important;
position: relative;
- margin-left: 10px;
- color: #3DC8FF;
+ color: #EAEAEA;
border-radius: 3px;
- background: linear-gradient(
- 90deg,
- rgba(57, 181, 254, .5) 5%,
- transparent 95%) !important;
+ background: linear-gradient(90deg, rgba(57, 181, 254, .5) 5%, rgba(57, 181, 254, .1) 100%) !important;
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 4px;
- height: 100%;
- background: #3DC8FF;
- border-radius: 3px 0 0 3px;
- }
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 100%;
+ background: #3DC8FF;
+ border-radius: 3px 0 0 3px;
+ }
+}
+
+.three_item {
+ background: #0B5274 !important;
}
/deep/ .el-submenu .el-submenu__title:hover {
color: #3DC8FF;
- background: rgba(57,181,254,0.7) !important;
+ background: rgba(57, 181, 254, 0.7) !important;
}
/deep/ .el-menu-item:hover {
--
Gitblit v1.9.3