style: 样式优化

template/admin/src/layout/navBars/breadcrumb/setings.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout-breadcrumb-seting">
     <el-drawer
+      title="主题编辑"
       :visible.sync="getThemeConfig.isDrawer"
       direction="rtl"
       destroy-on-close
@@ -355,7 +356,7 @@ export default {
     },
     setLocalTheme(val) {
       let themeSelect = themeList[val];
-
+      console.log(this.getThemeConfig.layout);
       if (['theme-1', 'theme-3', 'theme-5', 'theme-7'].includes(val)) {
         // 这几个为黑色背景主题
         if (['classic', 'transverse'].includes(this.getThemeConfig.layout)) {
@@ -379,6 +380,37 @@ export default {
             themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';
             themeSelect['--prev-color-primary'] = '#f34d37';
           }
+        } else {
+          if (val == 'theme-1') {
+            themeSelect['--prev-bg-menuBar'] = '#282c34';
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#1890ff';
+            themeSelect['--prev-color-primary'] = '#1890ff';
+            themeSelect['--prev-bg-topBarColor'] = '#282c34';
+            themeSelect['--prev-bg-topBar'] = '#fff';
+            themeSelect['--prev-bg-menuBarColor'] = '#fff';
+            themeSelect['--prev-MenuActiveColor'] = '#fff';
+          } else if (val == 'theme-3') {
+            themeSelect['--prev-bg-menuBar'] = '#282c34';
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';
+            themeSelect['--prev-color-primary'] = '#fff';
+            themeSelect['--prev-bg-topBarColor'] = '#515a6e';
+            themeSelect['--prev-bg-menuBarColor'] = '#fff';
+            themeSelect['--prev-MenuActiveColor'] = '#fff';
+          } else if (val == 'theme-5') {
+            themeSelect['--prev-bg-menuBar'] = '#282c34';
+            themeSelect['--prev-bg-topBarColor'] = '#282c34';
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';
+            themeSelect['--prev-color-primary'] = '#fff';
+            themeSelect['--prev-bg-menuBarColor'] = '#fff';
+            themeSelect['--prev-MenuActiveColor'] = '#fff';
+          } else if (val == 'theme-7') {
+            themeSelect['--prev-bg-menuBar'] = '#282c34';
+            themeSelect['--prev-bg-topBarColor'] = '#515a6e';
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37'; 
+            themeSelect['--prev-color-primary'] = '#fff';
+            themeSelect['--prev-bg-menuBarColor'] = '#fff';
+            themeSelect['--prev-MenuActiveColor'] = '#fff';
+          }
         }
       } else {
         if (this.getThemeConfig.layout === 'columns') {
@@ -531,7 +563,7 @@ export default {
 .mr5 {
   margin-right: 5px;
 }
-/deep/ .el-radio-button--mini .el-radio-button__inner{
+/deep/ .el-radio-button--mini .el-radio-button__inner {
   padding: 7px 8px;
 }
 .layout-breadcrumb-seting-bar {

template/admin/src/layout/navBars/breadcrumb/theme.js

@@ -3,27 +3,31 @@ export const themeList = {
     '--prev-bg-menuBar': '#282c34',
     '--prev-bg-menuBarColor': '#fff',
     '--prev-color-primary': '#fff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#1890ff',
     '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
     '--prev-bg-topBarColor': '#282c34',
     '--prev-bg-columnsMenuBar': '#282c34',
     '--prev-bg-columnsMenuBarColor': '#fff',
-    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#1890ff',
     '--prev-tag-active-color': '#1890ff',
     '--prev-color-primary-light-9': '#e8f4ff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
   },
   'theme-2': {
     '--prev-bg-menuBar': '#ffffff',
     '--prev-bg-menuBarColor': '#515a6e',
     '--prev-color-primary': '#1890ff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#e8f4ff',
     '--prev-bg-topBar': '#ffffff',
     '--prev-bg-topBarColor': '#515a6e',
     '--prev-bg-columnsMenuBar': '#fff',
     '--prev-bg-columnsMenuBarColor': '#515a6e',
     '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#1890ff',
+
+    '--prev-bg-columnsMenuActiveBgColor': '#1890ff',
     '--prev-tag-active-color': '#1890ff',
     '--prev-color-primary-light-9': '#e8f4ff',
   },
@@ -31,13 +35,14 @@ export const themeList = {
     '--prev-bg-menuBar': '#282c34',
     '--prev-bg-menuBarColor': '#fff',
     '--prev-color-primary': '#fff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#41b584', // 菜单选中背景色
     '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
     '--prev-bg-topBarColor': '#282c34',
     '--prev-bg-columnsMenuBar': '#282c34',
     '--prev-bg-columnsMenuBarColor': '#fff',
     '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#41b584',
     '--prev-color-primary-light-9': '#ecf8f3',
     '--prev-tag-active-color': '#41b584',
     '--prev-color-primary-light-9': '#ecf8f3',
@@ -46,13 +51,15 @@ export const themeList = {
     '--prev-bg-menuBar': '#ffffff',
     '--prev-bg-menuBarColor': '#515a6e',
     '--prev-color-primary': '#41b584',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#ecf8f3',
     '--prev-bg-topBar': '#ffffff',
     '--prev-bg-topBarColor': '#515a6e',
     '--prev-bg-columnsMenuBar': '#fff',
     '--prev-bg-columnsMenuBarColor': '#515a6e',
-    '--prev-bg-columnsMenuActiveColor': '#ecf8f3',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#41b584',
+
     '--prev-tag-active-color': '#41b584',
     '--prev-color-primary-light-9': '#ecf8f3',
   },
@@ -60,13 +67,15 @@ export const themeList = {
     '--prev-bg-menuBar': '#282c34',
     '--prev-bg-menuBarColor': '#fff',
     '--prev-color-primary': '#fff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#6954f0', // 菜单选中背景色
     '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
     '--prev-bg-topBarColor': '#282c34',
     '--prev-bg-columnsMenuBar': '#282c34',
     '--prev-bg-columnsMenuBarColor': '#fff',
     '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#6954f0',
+
     '--prev-color-primary-light-9': '#f0eefe',
     '--prev-tag-active-color': '#6954f0',
   },
@@ -74,13 +83,14 @@ export const themeList = {
     '--prev-bg-menuBar': '#ffffff',
     '--prev-bg-menuBarColor': '#515a6e',
     '--prev-color-primary': '#6954f0',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#e8f4ff',
     '--prev-bg-topBar': '#ffffff',
     '--prev-bg-topBarColor': '#515a6e',
     '--prev-bg-columnsMenuBar': '#fff',
     '--prev-bg-columnsMenuBarColor': '#515a6e',
     '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#6954f0',
     '--prev-color-primary-light-9': '#f0eefe',
     '--prev-tag-active-color': '#6954f0',
   },
@@ -88,20 +98,21 @@ export const themeList = {
     '--prev-bg-menuBar': '#282c34',
     '--prev-bg-menuBarColor': '#fff',
     '--prev-color-primary': '#fff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#f34d37', // 菜单选中背景色
     '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
     '--prev-bg-topBarColor': '#282c34',
     '--prev-bg-columnsMenuBar': '#282c34',
     '--prev-bg-columnsMenuBarColor': '#fff',
     '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-MenuActiveColor': '#f34d37',
     '--prev-tag-active-color': '#f34d37',
   },
   'theme-8': {
     '--prev-bg-menuBar': '#ffffff',
     '--prev-bg-menuBarColor': '#515a6e',
     '--prev-color-primary': '#f34d37',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#feedeb',
     '--prev-bg-topBar': '#ffffff',
     '--prev-bg-topBarColor': '#515a6e',
@@ -109,13 +120,14 @@ export const themeList = {
     '--prev-bg-columnsMenuBarColor': '#515a6e',
     '--prev-bg-columnsMenuActiveColor': '#fff',
     '--prev-color-primary-light-9': '#feedeb',
+    '--prev-MenuActiveColor': '#f34d37',
     '--prev-tag-active-color': '#f34d37',
   },
   'theme-9': {
     '--prev-bg-menuBar': '#ffffff',
     '--prev-bg-menuBarColor': '#515a6e',
     '--prev-color-primary': '#1890ff',
-    '--prev-color-text-white': '#515a6e',
+    '--prev-color-text-white': '#fff',
     '--prev-bg-menu-hover-ba-color': '#e8f4ff',
     '--prev-bg-topBar': '#ffffff',
     '--prev-bg-topBarColor': '#515a6e',

template/admin/src/layout/navBars/breadcrumb/user.vue

@@ -47,9 +47,8 @@
     </div>
     <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
       <i
-        class="iconfont"
         :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
-        :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
+        :class="!isScreenfull ? 'el-icon-full-screen' : 'el-icon-crop'"
       ></i>
     </div>
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onDropdownCommand">
@@ -206,8 +205,9 @@ export default {
                     removeCookies('expires_time');
                     removeCookies('uuid');
                     // window.location.reload()
+                    done();
+
                     setTimeout(() => {
-                      done();
                       setTimeout(() => {
                         instance.confirmButtonLoading = false;
                       }, 300);

template/admin/src/layout/navBars/tagsView/tagsView.vue

@@ -363,7 +363,7 @@ export default {
         right: 0;
         bottom: 0;
         left: 0;
-        background: var(--prev-color-primary);
+        background: var(--prev-tag-active-color);
         z-index: -1;
         opacity: 0;
         transform: scale3d(0.7, 1, 1);

template/admin/src/theme/element.scss

@@ -125,7 +125,7 @@
 .el-menu--horizontal > .el-submenu:hover .el-submenu__title,
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
 .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
-  color: var(--prev-color-primary) !important;
+  color: var(--prev-MenuActiveColor) !important;
 }
 .el-menu.el-menu--horizontal {
   border-bottom: none !important;
@@ -151,10 +151,10 @@
 // 默认 hover 时
 .el-menu-item:hover,
 .el-submenu__title:hover {
-  color: var(--prev-color-primary) !important;
+  color: var(--prev-MenuActiveColor) !important;
   background-color: var(--prev-bg-menu-hover-ba-color) !important;
   i {
-    color: var(--prev-color-primary) !important;
+    color: var(--prev-MenuActiveColor) !important;
   }
 }
 // 鼠标 hover 时颜色
@@ -163,7 +163,7 @@
 }
 // 高亮时
 .el-menu-item.is-active {
-  color: var(--prev-color-primary) !important;
+  color: var(--prev-MenuActiveColor) !important;
   //   background-color: var(--prev-bg-menu-hover-ba-color) !important;
 }
 .el-menu-item.is-active,