From 16efe8bf50837297c8d43a12757fbcd9ab0d2409 Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期五, 16 九月 2022 18:16:19 +0800
Subject: [PATCH] 修改登录页面,首页侧边栏以及新增创建用户界面
---
src/views/layout/components/SiderBar/index.vue | 183 ++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 52 deletions(-)
diff --git a/src/views/layout/components/SiderBar/index.vue b/src/views/layout/components/SiderBar/index.vue
index e11e4da..1f2cb74 100644
--- a/src/views/layout/components/SiderBar/index.vue
+++ b/src/views/layout/components/SiderBar/index.vue
@@ -6,37 +6,68 @@
<el-scrollbar>
<!-- 璺敱 -->
<el-menu router class="el-menu-vertical" :default-active="$route.path" >
- <!-- 瑙嗛宸℃煡 -->
- <el-submenu index="/home/video">
- <template slot="title">
- <span slot="prefix" class="icon-padding">
- <svg-icon icon-class="video"></svg-icon>
+ <!-- 绯荤粺璁剧疆妯″潡 -->
+ <el-submenu index="/home/system" class="firstMenu">
+ <template slot="title" class="firstSpan">
+ <!-- <i class="el-icon-reading"></i> -->
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="system"></svg-icon>
</span>
- <span slot="title">瑙嗛宸℃煡</span>
+ <span class="fisrtSpan">绯荤粺璁剧疆</span>
</template>
- <el-menu-item index="/home/video">瑙嗛宸℃煡</el-menu-item>
+ <!-- 鍩烘湰璁剧疆 -->
+ <el-submenu index="/admin/system/base" class="secondMenu">
+ <template slot="title">
+ <span class="secondSpan">鍩烘湰璁剧疆</span>
+ </template>
+ <!-- 鐢ㄦ埛绠＄悊 -->
+ <el-submenu index="/admin/system/base/user" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">鐢ㄦ埛绠＄悊</span>
+ </template>
+ <el-menu-item index="/home/createUser">鏂板缓鐢ㄦ埛(璐︽埛)</el-menu-item>
+ <el-menu-item index="/admin/system/base/userList">鐢ㄦ埛鍒楄〃</el-menu-item>
+ </el-submenu>
+ <!-- 瑙掕壊绠＄悊 -->
+ <el-submenu index="/admin/system/base/role" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">瑙掕壊绠＄悊</span>
+ </template>
+ <el-menu-item index="/admin/system/base/role/createRole">鏂板缓瑙掕壊</el-menu-item>
+ <el-menu-item index="/admin/system/base/roleList">瑙掕壊绠＄悊鍒楄〃</el-menu-item>
+ </el-submenu>
+ <!-- 鏉冮檺绠＄悊 -->
+ <el-submenu index="/admin/system/base/authority" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">鏉冮檺绠＄悊</span>
+ </template>
+ <el-menu-item index="/admin/system/base/authority">璁剧疆鏉冮檺</el-menu-item>
+ </el-submenu>
+ <!-- 閮ㄩ棬绠＄悊 -->
+ <el-submenu index="/admin/system/base/department" class="thirdMenu">
+ <template slot="title">
+ <span class="thirdSpan">閮ㄩ棬绠＄悊</span>
+ </template>
+ <el-menu-item index="/admin/system/base/department/createDepartment">鍒涘缓閮ㄩ棬</el-menu-item>
+ <el-menu-item index="/admin/system/base/department/controle">閮ㄩ棬绠＄悊</el-menu-item>
+ </el-submenu>
+ </el-submenu>
+ <!-- 骞冲彴璁剧疆 -->
+ <el-submenu index="/admin/article/add" class="secondMenu">
+ <template slot="title">
+ <span class="secondSpan">骞冲彴璁剧疆</span>
+ </template>
+ <el-menu-item index="/admin/article">闂ㄦ埛璁剧疆</el-menu-item>
+ <el-menu-item index="/admin/article">绗笁鏂规帴鍙ｇ鐞�</el-menu-item>
+ </el-submenu>
</el-submenu>
- <!-- 鏅鸿兘宸℃煡 -->
- <el-submenu index="/admin/article1">
+ <!-- 杩愯惀绠＄悊妯″潡 -->
+ <el-submenu index="/home/operate" class="firstMenu">
<template slot="title">
- <span slot="prefix" class="icon-padding">
- <svg-icon icon-class="intelligence"></svg-icon>
- </span>
- <span>鏅鸿兘宸℃煡</span>
- </template>
- <el-menu-item index="/admin/article/add">棰勮鐮斿垽</el-menu-item>
- <el-menu-item index="/admin/article">杩濊妫�绱�</el-menu-item>
- <el-menu-item index="/admin/article">瓒嬪娍鍒嗘瀽</el-menu-item>
- <el-menu-item index="/admin/article">鏁版嵁缁熻</el-menu-item>
- <el-menu-item index="/admin/article">杩愯鎶ュ憡</el-menu-item>
- </el-submenu>
- <!-- 杩愯惀绠＄悊 -->
- <el-submenu index="/admin/article2">
- <template slot="title">
- <span slot="prefix" class="icon-padding">
+ <span slot="prefix" class="icon-padding fisrtSpan">
<svg-icon icon-class="operate"></svg-icon>
</span>
- <span>杩愯惀绠＄悊</span>
+ <span class="fisrtSpan">杩愯惀绠＄悊</span>
</template>
<el-menu-item index="/admin/article/add">鎵ф硶绠＄悊</el-menu-item>
<el-menu-item index="/admin/article/add">璋冨害绠＄悊</el-menu-item>
@@ -50,33 +81,71 @@
<el-menu-item index="/admin/article">绠楁硶妯″瀷绠＄悊</el-menu-item>
<el-menu-item index="/admin/article">鏃ュ織绠＄悊</el-menu-item>
</el-submenu>
- <!-- 绯荤粺璁剧疆 -->
- <el-submenu index="/admin/article3">
+ <!-- 瑙嗛宸℃煡妯″潡 -->
+ <el-submenu index="/home/video" class="firstMenu">
<template slot="title">
- <!-- <i class="el-icon-reading"></i> -->
- <span slot="prefix" class="icon-padding">
- <svg-icon icon-class="system"></svg-icon>
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon icon-class="video"></svg-icon>
</span>
- <span>绯荤粺璁剧疆</span>
+ <span slot="title" class="fisrtSpan">瑙嗛宸℃煡</span>
</template>
- <!-- 鍩烘湰璁剧疆 -->
- <el-submenu index="/admin/article/add">
- <template slot="title">
- <span>鍩烘湰璁剧疆</span>
- </template>
- <el-menu-item index="/admin/article">鐢ㄦ埛绠＄悊</el-menu-item>
- <el-menu-item index="/admin/article">瑙掕壊绠＄悊</el-menu-item>
- <el-menu-item index="/admin/article">鏉冮檺绠＄悊</el-menu-item>
- <el-menu-item index="/admin/article">閮ㄩ棬绠＄悊</el-menu-item>
- </el-submenu>
- <!-- 骞冲彴璁剧疆 -->
- <el-submenu index="/admin/article/add">
- <template slot="title">
- <span>骞冲彴璁剧疆</span>
- </template>
- <el-menu-item index="/admin/article">闂ㄦ埛璁剧疆</el-menu-item>
- <el-menu-item index="/admin/article">绗笁鏂规帴鍙ｇ鐞�</el-menu-item>
- </el-submenu>
+ <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="/admin/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/admin/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/admin/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/admin/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/admin/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="/admin/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/admin/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/admin/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/admin/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/admin/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
+ <!-- 鏅鸿兘宸℃煡妯″潡 -->
+ <el-submenu index="/admin/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="/admin/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/admin/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/admin/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/admin/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/admin/article">杩愯鎶ュ憡</el-menu-item>
+ </el-submenu>
+ <!-- 骞冲彴鍩烘湰淇℃伅 -->
+ <el-submenu index="/admin/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="/admin/article/add">棰勮鐮斿垽</el-menu-item>
+ <el-menu-item index="/admin/article">杩濊妫�绱�</el-menu-item>
+ <el-menu-item index="/admin/article">瓒嬪娍鍒嗘瀽</el-menu-item>
+ <el-menu-item index="/admin/article">鏁版嵁缁熻</el-menu-item>
+ <el-menu-item index="/admin/article">杩愯鎶ュ憡</el-menu-item>
</el-submenu>
</el-menu>
</el-scrollbar>
@@ -120,13 +189,13 @@
.el-menu {
background: linear-gradient(#07162e, #0f2b56);
border: 0;
- .el-submenu {
+ .firstMenu {
background: #07162e;
text-align: left;
- &:hover span {
+ &:hover .fisrtSpan{
color: #22d3eb;
}
- span {
+ span,span {
color: #e9eef3;
}
.el-menu-item {
@@ -141,6 +210,16 @@
color: #22d3eb;
}
}
+ .secondMenu{
+ &:hover .secondSpan{
+ color: #22d3eb;
+ }
+ }
+ .thirdMenu{
+ &:hover .thirdSpan{
+ color: #22d3eb;
+ }
+ }
.is-active {
background-color: #092c4a;
}
--
Gitblit v1.8.0