主题样式

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,25 +1,25 @@
 // base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$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-background:#ffffff;
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
 
 // 自定义暗色菜单风格
 /**
@@ -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,26 +1,42 @@
 <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'
+          ? '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'
+            ? 'transparent'
+            : variables.menuLightBackground
+        "
+        :text-color="
+          settings.sideTheme === 'theme-dark'
+            ? variables.menuColor
+            : variables.menuLightColor
+        "
+        :unique-opened="true"
+        :active-text-color="'#F23F4A'"
+        :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>
@@ -30,28 +46,28 @@ 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/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;