主题样式

src/assets/styles/index.scss

@@ -127,6 +127,10 @@ aside {
   padding: 20px;
   height: 100%;
   width: 100%;
+  background: #fff;
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
+  border-radius: 8px;
+  overflow-y: auto;
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -86,7 +86,13 @@
     }
 
     & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
+      // color: $base-menu-color-active !important;
+      color: #fff !important;
+      background-color: #f23f4a !important;
+    }
+    & .theme-dark .is-active > .el-submenu__title i {
+      // color: $base-menu-color-active !important;
+      color: #fff !important;
     }
 
     & .nest-menu .el-submenu > .el-submenu__title,
@@ -100,10 +106,13 @@
 
     & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      // background-color: $base-sub-menu-background !important;
+      background-color: #faf7f7;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        // background-color: $base-sub-menu-hover !important;
+        color: #f8414d !important;
+        background-color: rgba(255, 72, 83, 0.2) !important;
       }
     }
   }

src/assets/styles/variables.scss

@@ -1,20 +1,20 @@
 // base color
 $blue: #324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
+$base-menu-color: #4c4949;
 $base-menu-color-active: #f4f4f5;
 $base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
@@ -50,5 +50,5 @@ $base-sidebar-width: 200px;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
 }

src/layout/components/AppMain.vue

@@ -10,26 +10,27 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
-    }
-  }
-}
+      return this.$route.path;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  // min-height: calc(100vh - 50px);
+  height: 100% !important;
   width: 100%;
   position: relative;
   overflow: hidden;

src/layout/components/MyHead/index.vue

@@ -41,7 +41,8 @@ export default {
 // @import "@/assets/styles/element-variables.scss";
 .header-container {
   height: 60px;
-  background: linear-gradient(90deg, #f8414d, #dc393e);
+  background: url("~@/assets/images/title-bg@2x.png");
+  background-size: cover;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/layout/components/Sidebar/index.vue

@@ -1,14 +1,30 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    :class="{ 'has-logo': showLogo }"
+    :style="{
+      backgroundColor:
+        settings.sideTheme === 'theme-dark'
+          ? 'transparent'
+          : 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"
+        :background-color="
+          settings.sideTheme === 'theme-dark'
+            ? 'transparent'
+            : variables.menuLightBackground
+        "
+        :text-color="
+          settings.sideTheme === 'theme-dark'
+            ? variables.menuColor
+            : variables.menuLightColor
+        "
         :unique-opened="true"
-                :active-text-color="settings.theme"
+        :active-text-color="'#F23F4A'"
         :collapse-transition="false"
         mode="vertical"
       >
@@ -51,7 +67,7 @@ export default {
     },
     isCollapse() {
       return !this.sidebar.opened;
-        }
-    }
+    },
+  },
 };
 </script>

src/layout/index.vue

@@ -106,8 +106,12 @@ export default {
     align-items: center;
     .left-sidebar {
       height: 100%;
+      background: url("~@/assets/images/sidebar.png");
+      background-size: cover;
     }
     .right-page {
+      background: #f5f5f5;
+      padding: 13px;
       height: 100%;
       flex: 1;
       overflow: hidden;