第一稿暂存

src/App.vue

@@ -23,6 +23,13 @@ export default {
 @font-face
   font-family Pangmenzhengdao
   src url(./assets/font/pangmenzhengdao.ttf)
+$mask()
+  content ''
+  width 20%
+  height 95%
+  position absolute
+  bottom 0
+  z-index 2
 html, body
   background-color #000 !important
   width 100%
@@ -37,6 +44,15 @@ html, body
   font-size .1rem
   overflow: hidden
   color #fff
+  position relative
+  &:before
+    $mask()
+    left 0
+    background linear-gradient(to right, rgba(0,0,0,.7), rgba(0,0,0,.1))
+  &:after
+    $mask()
+    right 0
+    background linear-gradient(to left, rgba(0,0,0,.7), rgba(0,0,0,.1))
 
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {

src/assets/css/variables.styl

@@ -2,11 +2,12 @@
 $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
 $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
 $color-map(opacity = 0.3)
-  rgba(91, 213, 255, opacity)
+  rgba(0, 118, 255, opacity)
 $color-green = #82DF12
 $color-blue = #01BFFD
 $color-red = #ff1e1e
 $color-yellow = #ffd400
+$color-orange = #ff9c25
 $layout(gap = 0.06rem)
   width 100%
   height 100%
@@ -25,7 +26,7 @@ $selected()
   border 0.01rem solid $edgeColor
   background-color rgba(0,242,255,0.1)
 $fontColor = #70A7E0
-$edgeColor = #47B3FF
+$edgeColor = #5ad1fb
 $cardBg = rgba(49,94,139,.3)
 
 $cardBorder = 0.01rem solid #1c425f
@@ -37,3 +38,6 @@ $flex-center()
   justify-content center
 $section-bg = rgba(51,145,255,.1)
 $section-hover = rgba(51,145,255,.2)
+$unit()
+  font-size .08rem
+  color #999