From 0cf2375b6de4c9b65a10aa1c9d4cef9bb5936fe1 Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期一, 19 九月 2022 18:02:40 +0800
Subject: [PATCH] 页面重构
---
src/views/layout/components/Menu/index.vue | 223 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 162 insertions(+), 61 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 8ad84aa..422737c 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -1,19 +1,149 @@
<template>
- <div class="Menu">
- <!-- 鑿滃崟鏍� -->
- <el-aside width="200px" class="menu">
+ <div>
+ <!-- 渚ц竟瀵艰埅鏍� -->
+ <el-aside width="200px">
<h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2>
- <el-scrollbar class="MenuScroll">
+ <el-scrollbar>
<!-- 璺敱 -->
- <el-menu class="el-menu-vertical">
- <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
+ <el-menu router class="el-menu-vertical" :default-active="$route.path" >
+ <!-- 绯荤粺璁剧疆妯″潡 -->
+ <el-submenu index="/home/system" class="firstMenu">
<template slot="title" class="firstSpan">
- <span slot="prefix" class="icon-padding fisrtSpan">
- <svg-icon :icon-class="item.icon"></svg-icon>
+ <!-- <i class="el-icon-reading"></i> -->
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="system"></svg-icon>
</span>
- <span class="fisrtSpan">{{item.name}}</span>
+ <span class="fisrtSpan">绯荤粺璁剧疆</span>
</template>
- </el-menu-item>
+ <!-- 鍩烘湰璁剧疆 -->
+ <el-submenu index="/home/system/base" class="secondMenu">
+ <template slot="title">
+ <span class="secondSpan">鍩烘湰璁剧疆</span>
+ </template>
+ <!-- 鐢ㄦ埛绠＄悊 -->
+ <el-submenu index="/home/system/base/user" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">鐢ㄦ埛绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/system/user">鐢ㄦ埛鍒楄〃</el-menu-item>
+ </el-submenu>
+ <!-- 瑙掕壊绠＄悊 -->
+ <el-submenu index="/home/system/base/role" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">瑙掕壊绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/system/role">瑙掕壊绠＄悊鍒楄〃</el-menu-item>
+ </el-submenu>
+ <!-- 鏉冮檺绠＄悊 -->
+ <el-submenu index="/home/system/base/authority" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">鏉冮檺绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/system/authority">璁剧疆鏉冮檺</el-menu-item>
+ </el-submenu>
+ <!-- 閮ㄩ棬绠＄悊 -->
+ <el-submenu index="/home/system/base/department" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">閮ㄩ棬绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/system/department">閮ㄩ棬绠＄悊</el-menu-item>
+ </el-submenu>
+ </el-submenu>
+ <!-- 骞冲彴璁剧疆 -->
+ <el-submenu index="/home/article/add" class="secondMenu">
+ <template slot="title">
+ <span class="secondSpan">骞冲彴璁剧疆</span>
+ </template>
+ <el-menu-item index="/home/system/portalSetting">闂ㄦ埛璁剧疆</el-menu-item>
+ <el-menu-item index="/home/system/otherInterface">绗笁鏂规帴鍙ｇ鐞�</el-menu-item>
+ </el-submenu>
+ </el-submenu>
+ <!-- 杩愯惀绠＄悊妯″潡 -->
+ <el-submenu index="/home/operate" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="operate"></svg-icon>
+ </span>
+ <span class="fisrtSpan">杩愯惀绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/article/add">鎵ф硶绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">璋冨害绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">搴楅摵绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">杞﹁締绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">鍥剧墖绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">瑙嗛绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">娑堟伅绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">瀹℃牳绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article/add">鐭俊绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article">绠楁硶妯″瀷绠＄悊</el-menu-item>
+ <el-menu-item index="/home/article">鏃ュ織绠＄悊</el-menu-item>
+ </el-submenu>
+ <!-- 瑙嗛宸℃煡妯″潡 -->
+ <el-submenu index="/home/video" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="video"></svg-icon>
+ </span>
+ <span slot="title" class="fisrtSpan">瑙嗛宸℃煡</span>
+ </template>
+ <el-menu-item index="/home/video">瑙嗛宸℃煡</el-menu-item>
+ </el-submenu>
+ <!-- 娌圭儫淇℃伅鏌ヨ妯″潡 -->
+ <el-submenu index="/home/lampblack" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="intelligence"></svg-icon>
+ </span>
+ <span class="fisrtSpan">娌圭儫淇℃伅鏌ヨ</span>
+ </template>
+ <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
+ <!-- 鎵ф硶绠＄悊妯″潡 -->
+ <el-submenu index="/home/law" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="intelligence"></svg-icon>
+ </span>
+ <span class="fisrtSpan">鎵ф硶绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
+ <!-- 鏅鸿兘宸℃煡妯″潡 -->
+ <el-submenu index="/home/intellect" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="intelligence"></svg-icon>
+ </span>
+ <span class="fisrtSpan">鏅鸿兘宸℃煡</span>
+ </template>
+ <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
+ <!-- 骞冲彴鍩烘湰淇℃伅 -->
+ <el-submenu index="/home/info" class="firstMenu">
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="intelligence"></svg-icon>
+ </span>
+ <span class="fisrtSpan">骞冲彴鍩烘湰淇℃伅</span>
+ </template>
+ <el-menu-item index="/home/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/home/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/home/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/home/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/home/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
@@ -22,38 +152,7 @@
<script>
export default {
- data() {
- return {
- menu: [
- {
- name: "绯荤粺璁剧疆", icon: "system", index: "/home/system",
- },
- {
- name: "杩愯惀绠＄悊", icon: "operate", index: "/home/operate",
- },
- {
- name: "瑙嗛宸℃煡", icon: "video", index: "/home/video",
- },
- {
- name: "娌圭儫淇℃伅鏌ヨ", icon: "intelligence", index: "/home/lampblack",
- },
- {
- name: "鎵ф硶绠＄悊", icon: "intelligence", index: "/home/law",
- },
- {
- name: "鏅鸿兘宸℃煡", icon: "intelligence", index: "/home/intellect",
- },
- {
- name: "骞冲彴鍩烘湰淇℃伅", icon: "intelligence", index: "/home/info",
- }
- ],
- }
- },
- methods:{
- Jump(url){
- this.$router.push(url);
- }
- }
+
};
</script>
@@ -61,7 +160,7 @@
.icon-padding {
padding-right: 10px;
}
-.menu {
+.el-aside {
background: #07162e;
color: #e9eef3;
text-align: center;
@@ -78,48 +177,50 @@
top: 0;
left: 0;
z-index: 999;
- background-color: #08162f;
+ // box-shadow: 0 -5px 5px #0ff inset;
}
-
- .MenuScroll {
+ .el-scrollbar {
height: calc(100vh - 66px);
- box-sizing: border-box;
margin-top: 66px;
+ box-sizing: border-box;
.el-menu {
background: linear-gradient(#07162e, #0f2b56);
border: 0;
-
.firstMenu {
- background: #07162e;
+ background: #07162e;
text-align: left;
- &:hover .fisrtSpan {
- color: #fff;
+ &:hover .fisrtSpan{
+ color: #22d3eb;
}
-
- span {
+ span,span {
color: #e9eef3;
}
-
.el-menu-item {
- color: #c3c3c4;
+ color: #e9eef3;
background-color: #07162e;
&:hover {
- color: #fff;
- background-color: #0c2c4c;
+ color: #22d3eb;
}
}
-
.is-active {
background-color: #07162e;
color: #22d3eb;
}
}
-
+ .secondMenu{
+ &:hover .secondSpan{
+ color: #22d3eb;
+ }
+ }
+ .thirdMenu{
+ &:hover .thirdSpan{
+ color: #22d3eb;
+ }
+ }
.is-active {
- background-color: #07162e;
+ background-color: #092c4a;
}
}
-
.el-scrollbar__wrap {
overflow-x: hidden;
}
--
Gitblit v1.8.0