feat: 修改主题样式

src/layout/components/AppMain.vue

@@ -32,7 +32,7 @@ export default {
   /*padding: 10px 20px 10px;*/
 }
 .fixed-header+.app-main {
-  padding-top: 55px;
+  padding-top: 52px;
 }
 .hasTagsView {
   .app-main {

src/layout/components/NavHeader/index.vue

@@ -88,7 +88,7 @@ export default {
 <style lang="scss" scoped>
   @import "~@/styles/variables.scss";
 
-  $header-height: 55px;
+  $header-height: 52px;
   .navbar {
     position: relative;
     height: $header-height;
@@ -104,7 +104,7 @@ export default {
         display: inline-block;
         vertical-align: middle;
 
-        & > > > .el-submenu__title {
+        & >>> .el-submenu__title {
           font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
           padding: 0 8px;
           line-height: $header-height;

src/layout/components/NavLeft/Logo.vue

@@ -55,8 +55,8 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 55px;
-  line-height: 55px;
+  height: 52px;
+  line-height: 52px;
   // background: #2b2f3a;
   text-align: center;
   overflow: hidden;

src/layout/components/NavLeft/index.vue

@@ -126,22 +126,23 @@ export default {
   @import "~@/styles/variables.scss";
   .nav-header {
     overflow: hidden;
-    background: $subMenuBg url('~@/assets/img/header-profile.png') no-repeat center center;
+    background-color: var(--color-primary);
   }
 
   .nav-logo {
-    height: 55px;
+    height: 52px;
   }
 
   .nav-title {
     box-sizing: border-box;
-    margin: 17px 0 17px 20px;
-    font-size: 15px;
-    font-weight: 460;
-    color: #fff;
+    padding: 17px 0 17px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #1F2329;
     overflow: hidden;
     white-space: nowrap;
     cursor: pointer;
+    background-color: var(--menu-bg);
   }
 
   .collapsed {
@@ -155,8 +156,10 @@ export default {
   .nav-footer {
     display: block;
     width: 100%;
-    height: 40px;
+    height: 48px;
+    line-height: 48px;
     background-color: $subMenuBg;
+    border: 1px solid red;
 
     .toggle-bar {
       width: 55px;

src/layout/components/Page/PageHeading.vue

@@ -38,21 +38,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .page-heading {
-    border-top: 0;
-    padding: 12px 30px 13px 25px;
+    position: relative;
+    height: 52px;
+    line-height: 52px;
     background-color: #ffffff;
-    min-height: 1px;
+    .el-row {
+      width: 100%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      padding-left: 24px;
+    }
   }
 
   .page-heading-left, h2 {
-    font-size: 18px;
-    font-weight: 300;
-    line-height: 1.5;
-    /*margin-bottom: 12px;*/
-    height: 30px;
-    max-height: 32px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1F2329;
   }
 
   .page-heading-right {

src/styles/default-theme.scss

@@ -1,29 +1,31 @@
 :root {
-  --color-primary: #1ab394;
+  --color-primary: #2b937c;
   --color-success: #2793d7;
   --color-info: #1c84c6;
   --color-warning: #f8ac59;
   --color-danger: #ed5565;
-  --menu-bg: #2f4050;
-  --menu-text: #a7b1c2;
-  --menu-hover: #293846;
-  --submenu-bg: #1f2d3d;
-  --submenu-hover: #001528;
-  --menu-active-text: white;
-  --menu-active-left: #1ab394;
+  --menu-bg: #ffffff;
+  --menu-text: #646A73;
+  --menu-hover: #f4faf9;
+  --submenu-bg: #ffffff;
+  --submenu-hover: #f4faf9;
+  --submenu-active-text: #2b937c;
+  --menu-active-text: #1F2329;
+  --menu-active-left: #2b937c;
 }
 
 :export {
-  --color-primary: #1ab394;
+  --color-primary: #2b937c;
   --color-success: #2793d7;
   --color-info: #1c84c6;
   --color-warning: #f8ac59;
   --color-danger: #ed5565;
-  --menu-bg: #2f4050;
-  --menu-text: #a7b1c2;
-  --menu-hover: #293846;
-  --submenu-bg: #1f2d3d;
-  --submenu-hover: #001528;
-  --menu-active-text: white;
-  --menu-active-left: #1ab394;
+  --menu-bg: #ffffff;
+  --menu-text: #646A73;
+  --menu-hover: #f4faf9;
+  --submenu-bg: #ffffff;
+  --submenu-hover: #f4faf9;
+  --submenu-active-text: #2b937c;
+  --menu-active-text: #1F2329;
+  --menu-active-left: #2b937c;
 }

src/styles/menu.scss

@@ -15,7 +15,7 @@
         color: $menuActiveText;
       }
       i {
-        color: $menuText;
+        color: $menuActiveText;
       }
     }
   }
@@ -23,11 +23,11 @@
     background-color: $subMenuBg;
     color: $menuText;
     &.is-active{
-      color: $menuActiveText;
+      color: $subMenuActiveText;
     }
     &:hover {
       background-color: $subMenuHover;
-      color: $menuActiveText;
+      color: $--color-primary;
     }
     i {
       color: $menuText;
@@ -44,15 +44,15 @@
   }
 
   .el-submenu .el-menu-item {
-    height: 32px;
-    line-height: 2;
+    height: 48px;
+    line-height: 48px;
     padding: 0 52px;
     min-width: 200px;
   }
 
   .nest-menu .el-submenu__title {
-    height: 32px;
-    line-height: 2;
+    height: 48px;
+    line-height: 48px;
     padding: 0 52px;
     min-width: 200px;
   }
@@ -62,12 +62,14 @@
   }
 
   .el-menu-item, .el-submenu__title {
-    height: 46px;
-    line-height: 46px;
+    height: 48px;
+    line-height: 48px;
+    font-weight: 400;
+    font-size: 14px;
   }
 
   .el-menu-item:hover, .el-menu-item:focus {
-    color: white;
+    color: $subMenuActiveText;
   }
 
   .navbar li.is-active, .navbar li.is-opened {
@@ -87,7 +89,7 @@
   }
 
   .el-submenu.is-opened {
-    background-color: $subMenuBg ;
+    background-color: $subMenuBg;
     .el-submenu__title {
       background-color: $subMenuBg!important;
     }

src/styles/variables.scss

@@ -23,6 +23,7 @@ $menuTextWeight: 600;
 $menuHover: var(--menu-hover);
 $subMenuBg: var(--submenu-bg);
 $subMenuHover: var(--submenu-hover);
+$subMenuActiveText: var(--submenu-active-text);
 $sideBarWidth: 220px;
 
 :export {