fix: 完成首页静态展示内容

src/styles/common/_dark.scss

@@ -1,13 +1,22 @@
 @import './var.scss';
 
 $dark: (
+  // 文字颜色
+    color: $--color-text-4,
   //背景
     background-color: $--color-dark-bg-1,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
+  // 斑点背景
+    background-point:
+    (
+      linear-gradient($--color-dark-bg-1 14px, transparent 0),
+      linear-gradient(90deg, transparent 14px, $--color-text-2 0)
+    ),
   //毛玻璃
     filter-color: $--filter-color-login-dark,
   // 物料市场背景
-    items-top-bg: linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0))
+    items-top-bg:
+    linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0))
 );

src/styles/common/_light.scss

@@ -1,11 +1,19 @@
 @import './var.scss';
 
 $light: (
+  // 文字颜色
+    color: $--color-text,
   //背景
     background_color: $--color-light-fill-3,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
+  // 斑点背景
+    background-point:
+    (
+      linear-gradient($--color-light-fill-1 14px, transparent 0),
+      linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
+    ),
   //毛玻璃
-    filter-color: $--filter-color-login-light,
+    filter-color: $--filter-color-login-light
 );

src/styles/common/animation.scss

@@ -1,3 +1,21 @@
+// 闪烁
+.animation-twinkle {
+  animation: twinkle 2s ease;
+  animation-iteration-count: infinite;
+  opacity: 1;
+}
+@keyframes twinkle {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 // 淡入淡出
 .v-modal-enter {
   animation: v-modal-in 0.2s ease;
@@ -34,4 +52,4 @@
 }
 .list-complete-leave-active {
   position: absolute;
-}
+}

src/styles/common/mixins/mixins.scss

@@ -9,6 +9,12 @@
   }
 }
 
+@mixin deep() {
+  ::v-deep *{
+    @content;
+  }
+}
+
 @mixin when($state) {
   @at-root {
     &.#{$state-prefix + $state} {
@@ -46,10 +52,10 @@
   }
 }
 
-//获取字体颜色
-@mixin font-color($target) {
+//获取斑点渐变颜色
+@mixin background-point($target) {
   @include themeify {
-    color: themed($target);
+    background-image: themed($target);
   }
 }
 
@@ -58,4 +64,4 @@
   @include themeify {
     border-color: themed($target);
   }
-}
+}

src/styles/common/style.scss

@@ -1,7 +1,26 @@
 @import './var.scss';
 @import './animation.scss';
+@import './mixins/mixins.scss';
 
 // extends
+// 过度
+.go-transition {
+  transition: all 0.2s;
+}
+
+.go-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.go-absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;
@@ -15,6 +34,12 @@
   overflow: hidden;
 }
 
+// 背景斑点需配合 @mixin background-point 使用
+.go-point-bg {
+  @include fetch-theme('background-color');
+  background-size: 15px 15px, 15px 15px;
+}
+
 // todo 使用 scss 循环写一套完整的
 // margin
 .go-mt-0 {
@@ -41,4 +66,4 @@
 .go-px-0 {
   @extend .go-pt-0;
   @extend .go-pb-0;
-}
+}

src/styles/common/var.scss

@@ -4,11 +4,11 @@ $--color-warn: #fcbc40;
 $--color-success: #34c749;
 
 // 文字
-$--color-text: hsla(0, 0%, 100%, 1);
-$--color-text-1: hsla(0, 0%, 100%, 0.9);
-$--color-text-2: hsla(0, 0%, 100%, 0.7);
-$--color-text-3: hsla(0, 0%, 100%, 0.5);
-$--color-text-4: hsla(0, 0%, 100%, 0.3);
+$--color-text: #1d2129;
+$--color-text-1: #4e5969;
+$--color-text-2: #86909c;
+$--color-text-3: #c9cdd4;
+$--color-text-4: #f2f3f5;
 
 // 白色
 $--color-light-fill: #fff;