dd

src/assets/styles/variables.scss

@@ -21,6 +21,23 @@ $base-logo-light-title-color: #001529;
 $base-sub-menu-background:#1f2d3d;
 $base-sub-menu-hover:#001528;
 
+// sidebar
+$menuText:#fff;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#fff; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#141B29;
+$menuHover:#263445;
+$sidebarTitle: #ffffff;
+
+$menuLightBg:#ffffff;
+$menuLightHover:#f0f1f5;
+$sidebarLightTitle: #001529;
+
+$subMenuBg:#141B29;
+$subMenuHover:#4774cc;
+
+$sideBarWidth: 185px;
 // 自定义暗色菜单风格
 /**
 $base-menu-color:hsla(0,0%,100%,.65);
@@ -41,14 +58,27 @@ $base-sidebar-width: 200px;
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  menuColor: $base-menu-color;
-  menuLightColor: $base-menu-light-color;
-  menuColorActive: $base-menu-color-active;
-  menuBackground: $base-menu-background;
-  menuLightBackground: $base-menu-light-background;
-  subMenuBackground: $base-sub-menu-background;
-  subMenuHover: $base-sub-menu-hover;
-  sideBarWidth: $base-sidebar-width;
-  logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  // menuColor: $base-menu-color;
+  // menuLightColor: $base-menu-light-color;
+  // menuColorActive: $base-menu-color-active;
+  // menuBackground: $base-menu-background;
+  // menuLightBackground: $base-menu-light-background;
+  // subMenuBackground: $base-sub-menu-background;
+  // subMenuHover: $base-sub-menu-hover;
+  // sideBarWidth: $base-sidebar-width;
+  // logoTitleColor: $base-logo-title-color;
+  // logoLightTitleColor: $base-logo-light-title-color
+
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  menuLightBg: $menuLightBg;
+  menuLightHover: $menuLightHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+  sidebarTitle: $sidebarTitle;
+  sidebarLightTitle: $sidebarLightTitle
 }

src/components/Hamburger/index.vue

@@ -36,6 +36,7 @@ export default {
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  background: #AAA5A5;
 }
 
 .hamburger.is-active {

src/components/shortcutMenu/index.vue

@@ -2,7 +2,7 @@
 	<div class="shortcut" :style="{ height: moreStatus ? 'auto' : '50px' }" @mouseleave="moreClose">
 		<div class="tags" @mouseenter="moreOpen">
 			<router-link v-for="i in 20" :key="i" to="/" class="tag">
-				<span>系统管理</span>
+				<span class="font_name">系统管理</span>
 				<i class="el-icon-error" v-show="delStatus"></i>
 			</router-link>
 		</div>
@@ -50,8 +50,8 @@
 
 <style scoped lang="scss">
 	.shortcut {
-		min-height: 50px;
-		line-height: 50px;
+		height: 40px;
+		line-height: 40px;
 		padding: 0 10px;
 		overflow: hidden;
 		display: flex;
@@ -59,10 +59,15 @@
 			flex: 1;
 			.tag {
 				font-size: 14px;
-				color: #999093;
-				margin-right: 20px;
+				color: #fff;
+				margin-right: 5px;
 				display: inline-block;
 				position: relative;
+				background: #4c9898;
+				border: #4c9898 1px solid;
+				border-radius: 5px;
+				margin-top: 7px;
+				padding: 0 15px;
 				i {
 					position: absolute;
 					top: 20%;

src/layout/components/Navbar.vue

@@ -95,7 +95,7 @@
 		min-height: 50px;
 		overflow: hidden;
 		position: relative;
-		background: #fff;
+		background: rgb(10, 10, 10);
 		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 		.shortcut-menu {
 			flex: 1;
@@ -140,7 +140,7 @@
 				padding: 0 8px;
 				height: 100%;
 				font-size: 18px;
-				color: #5a5e66;
+				color: #fff;
 				vertical-align: text-bottom;
 
 				&.hover-effect {

src/layout/components/Sidebar/Logo.vue

@@ -5,8 +5,8 @@
     :style="{
       backgroundColor:
         sideTheme === 'theme-dark'
-          ? variables.menuBackground
-          : variables.menuLightBackground,
+          ? variables.menuBg
+          : variables.menuLightBg,
     }"
   >
     <transition name="sidebarLogoFade">
@@ -32,7 +32,7 @@
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1
+        <!-- <h1
           class="sidebar-title"
           :style="{
             color:
@@ -42,7 +42,7 @@
           }"
         >
           {{ title }}
-        </h1>
+        </h1> -->
       </router-link>
     </transition>
   </div>
@@ -90,7 +90,7 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 87px;
   line-height: 50px;
   background: #2b2f3a;
   text-align: center;
@@ -101,10 +101,11 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 170px;
+      height: 79px;
       vertical-align: middle;
-      margin-right: 12px;
+      // margin-right: 12px;
+      margin-top: 7px;
     }
 
     & .sidebar-title {

src/layout/components/Sidebar/index.vue

@@ -1,57 +1,52 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical"
-            >
-                <sidebar-item
-                    v-for="(route, index) in sidebarRouters"
-                    :key="route.path  + index"
-                    :item="route"
-                    :base-path="route.path"
-                />
-            </el-menu>
-        </el-scrollbar>
-    </div>
+	<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
+		<logo v-if="showLogo" :collapse="isCollapse" />
+		<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+			<el-menu
+				:default-active="activeMenu"
+				:collapse="isCollapse"
+				:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"
+				:text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
+				:unique-opened="true"
+				:active-text-color="settings.theme"
+				:collapse-transition="false"
+				mode="vertical"
+			>
+				<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
+			</el-menu>
+		</el-scrollbar>
+	</div>
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
-import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
-import variables from "@/assets/styles/variables.scss";
+import { mapGetters, mapState } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/assets/styles/variables.scss'
 
 export default {
-    components: { SidebarItem, Logo },
-    computed: {
-        ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
-        activeMenu() {
-            const route = this.$route;
-            const { meta, path } = route;
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu;
-            }
-            return path;
-        },
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo;
-        },
-        variables() {
-            return variables;
-        },
-        isCollapse() {
-            return !this.sidebar.opened;
-        }
-    }
-};
+	components: { SidebarItem, Logo },
+	computed: {
+		...mapState(['settings']),
+		...mapGetters(['sidebarRouters', 'sidebar']),
+		activeMenu() {
+			const route = this.$route
+			const { meta, path } = route
+			// if set path, the sidebar will highlight the path you set
+			if (meta.activeMenu) {
+				return meta.activeMenu
+			}
+			return path
+		},
+		showLogo() {
+			return this.$store.state.settings.sidebarLogo
+		},
+		variables() {
+			return variables
+		},
+		isCollapse() {
+			return !this.sidebar.opened
+		}
+	}
+}
 </script>

src/layout/components/TagsView/ScrollPane.vue

@@ -1,94 +1,96 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
+	<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+		<slot />
+	</el-scrollbar>
 </template>
 
 <script>
 const tagAndTagSpacing = 4 // tagAndTagSpacing
 
 export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  mounted() {
-    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
-  },
-  beforeDestroy() {
-    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    emitScroll() {
-      this.$emit('scroll')
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
+	name: 'ScrollPane',
+	data() {
+		return {
+			left: 0
+		}
+	},
+	computed: {
+		scrollWrapper() {
+			return this.$refs.scrollContainer.$refs.wrap
+		}
+	},
+	mounted() {
+		this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+	},
+	beforeDestroy() {
+		this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+	},
+	methods: {
+		handleScroll(e) {
+			const eventDelta = e.wheelDelta || -e.deltaY * 40
+			const $scrollWrapper = this.scrollWrapper
+			$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+		},
+		emitScroll() {
+			this.$emit('scroll')
+		},
+		moveToTarget(currentTag) {
+			const $container = this.$refs.scrollContainer.$el
+			const $containerWidth = $container.offsetWidth
+			const $scrollWrapper = this.scrollWrapper
+			const tagList = this.$parent.$refs.tag
 
-      let firstTag = null
-      let lastTag = null
+			let firstTag = null
+			let lastTag = null
 
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
+			// find first tag and last tag
+			if (tagList.length > 0) {
+				firstTag = tagList[0]
+				lastTag = tagList[tagList.length - 1]
+			}
 
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
+			if (firstTag === currentTag) {
+				$scrollWrapper.scrollLeft = 0
+			} else if (lastTag === currentTag) {
+				$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+			} else {
+				// find preTag and nextTag
+				const currentIndex = tagList.findIndex(item => item === currentTag)
+				const prevTag = tagList[currentIndex - 1]
+				const nextTag = tagList[currentIndex + 1]
 
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+				// the tag's offsetLeft after of nextTag
+				const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
 
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+				// the tag's offsetLeft before of prevTag
+				const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
 
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
+				if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+					$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+				} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+					$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+				}
+			}
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
 .scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
+	white-space: nowrap;
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	background: rgb(10, 10, 10);
+  border-top: 2px solid #535559;
+	::v-deep {
+		.el-scrollbar__bar {
+			bottom: 0px;
+		}
+		.el-scrollbar__wrap {
+			height: 49px;
+		}
+	}
 }
 </style>

src/layout/components/TagsView/index.vue

@@ -102,8 +102,9 @@ export default {
     activeStyle(tag) {
       if (!this.isActive(tag)) return {};
       return {
-        "background-color": this.theme,
-        "border-color": this.theme,
+        "background-color": '#535559',
+        "border-color": '#535559',
+        "border-radius": '5px'
       };
     },
     isAffix(tag) {

src/views/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div></div>
+	<div class="main1"></div>
 </template>
 
 <script>
@@ -11,4 +11,12 @@ export default {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main1 {
+  height: calc(100vh - 83px);
+//   padding: 10px 10px 0 10px;
+  box-shadow: #dac488 0px 0px 14px inset;
+//   margin-top: -10px;
+//   margin-left: -10px;
+  background-color: #000;
+}</style>