feat: 首页架构

src/styles/common/_dark.scss

@@ -4,7 +4,8 @@ $dark: (
   //背景
     background-color: $--color-dark-bg-1,
   //渐变背景
-    background-image: linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-2 100%),
+    background-image:
+    linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
   //毛玻璃
-    filter-color: $--filter-color-login-dark
+    filter-color: $--filter-color-login-dark,
 );

src/styles/common/_light.scss

@@ -4,7 +4,11 @@ $light: (
   //背景
     background_color: $--color-light-fill-3,
   //渐变背景
-    background-image: linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
+    background-image:
+    linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
   //毛玻璃
-    filter-color: $--filter-color-login-light
+    filter-color: $--filter-color-login-light,
+  // 侧边栏
+    aside-bg: #fff,
+    aside-color: rgb(239, 239, 245)
 );

src/styles/common/mixins/mixins.scss

@@ -33,7 +33,7 @@
 }
 
 //获取背景颜色
-@mixin filter-color($target) {
+@mixin filter-bg-color($target) {
   @include themeify {
     background-color: themed($target);
   }
@@ -52,3 +52,10 @@
     color: themed($target);
   }
 }
+
+//获取边框颜色
+@mixin filter-border-color($target) {
+  @include themeify {
+    border-color: themed($target);
+  }
+}

src/styles/common/style.scss

@@ -14,3 +14,31 @@
   border-radius: $--border-radius-base;
   overflow: hidden;
 }
+
+// todo 使用 scss 循环写一套完整的
+// margin
+.go-mt-0 {
+  margin-top: 0;
+}
+
+.go-mb-0 {
+  margin-bottom: 0;
+}
+
+.go-mx-0 {
+  @extend .go-mt-0;
+  @extend .go-mb-0;
+}
+
+.go-pt-0 {
+  padding-top: 0;
+}
+
+.go-pb-0 {
+  padding-bottom: 0;
+}
+
+.go-px-0 {
+  @extend .go-pt-0;
+  @extend .go-pb-0;
+}

src/styles/common/var.scss

@@ -19,7 +19,7 @@ $--color-light-fill-4: #c9cdd4;
 
 // 黑色
 $--color-dark-black: #000;
-$--color-dark-bg-1: #17171a;
+$--color-dark-bg-1: #18181c;
 $--color-dark-bg-2: #232324;
 $--color-dark-bg-3: #2a2a2b;
 $--color-dark-bg-4: #313132;