feat: 大屏

src/styles/common/_dark.scss

@@ -0,0 +1,36 @@
+@import './var.scss';
+
+$dark: (
+  // 文字颜色
+    color: $--color-text-4,
+  //背景
+    background-color: $--color-dark-bg-1,
+    background-color1: $--color-dark-bg-1,
+    background-color1-shallow: $--color-dark-bg-1-shallow,
+    background-color2: $--color-dark-bg-2,
+    background-color2-shallow: $--color-dark-bg-2-shallow,
+    background-color3: $--color-dark-bg-3,
+    background-color3-shallow: $--color-dark-bg-3-shallow,
+    background-color4: $--color-dark-bg-4,
+    background-color4-shallow: $--color-dark-bg-4-shallow,
+    background-color5: $--color-dark-bg-5,
+    background-color5-shallow: $--color-dark-bg-5-shallow,
+  // 毛玻璃背景
+    filter-color: $--filter-color-login-dark,
+    filter-color-shallow: $--filter-color-login-dark-shallow,
+  //渐变背景
+    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)
+    ),
+  // hover 边框颜色
+    hover-border-color: $--color-dark-bg-5,
+    hover-border-color-shallow: $--color-dark-bg-3,
+  // 阴影
+    box-shadow: 0 8px 10px #1e1e1e1f
+    
+);

src/styles/common/_light.scss

@@ -0,0 +1,37 @@
+@import './var.scss';
+
+$light: (
+  // 文字颜色
+    color: $--color-text,
+  // aside 背景
+    aside-background-color: $--color-light-bg-1,
+  //背景
+    background-color: $--color-light-bg-3,
+    background-color1: $--color-light-bg-1,
+    background-color1-shallow: $--color-light-bg-1-shallow,
+    background-color2: $--color-light-bg-2,
+    background-color2-shallow: $--color-light-bg-2-shallow,
+    background-color3: $--color-light-bg-3,
+    background-color3-shallow: $--color-light-bg-3-shallow,
+    background-color4: $--color-light-bg-4,
+    background-color4-shallow: $--color-light-bg-4-shallow,
+    background-color5: $--color-light-bg-5,
+    background-color5-shallow: $--color-light-bg-5-shallow,
+  // 毛玻璃背景
+    filter-color: $--filter-color-login-light,
+    filter-color-shallow: $--filter-color-login-light-shallow,
+  //渐变背景
+    background-image:
+    linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),
+  // 斑点背景
+    background-point:
+    (
+      linear-gradient($--color-light-bg-1 14px, transparent 0),
+      linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
+    ),
+  // hover 边框颜色
+    hover-border-color: $--color-light-bg-4,
+    hover-border-color-shallow: $--color-light-bg-3,
+    // 阴影
+    box-shadow: 0 8px 10px #00000012
+);

src/styles/common/animation.scss

@@ -0,0 +1,68 @@
+// 闪烁
+.go-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;
+}
+
+.v-modal-leave {
+  animation: v-modal-out 0.2s ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// 渐变
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .2s ease;
+}
+
+// 移动动画
+.list-complete-item {
+  transition: all 1s;
+}
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.list-complete-leave-active {
+  position: absolute;
+}

src/styles/common/format.scss

@@ -0,0 +1,23 @@
+body {
+  overflow: hidden;
+}
+
+* {
+  list-style: none;
+}
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+  border-radius: 2px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: #a3a3a3;
+}
+

src/styles/common/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'go';
+$theme-light: 'light';
+$theme-dark: 'dark';
+$state-prefix: 'is-';

src/styles/common/mixins/function.scss

@@ -0,0 +1,3 @@
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}

src/styles/common/mixins/mixins.scss

@@ -0,0 +1,84 @@
+@import './config.scss';
+@import './function.scss';
+@import '../theme.scss';
+
+@mixin go($block) {
+  $B: $namespace + '-' + $block;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-theme='dark'] {
+    @content;
+  }
+}
+
+@mixin goId($block) {
+  $B: $namespace + '-' + $block;
+  ##{$B} {
+    @content;
+  }
+}
+
+@mixin deep() {
+  :deep() {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin themeify {
+  @each $theme-name, $theme-map in $themes {
+    $theme-map: $theme-map !global;
+    [data-theme='#{$theme-name}'] & {
+      @content;
+    }
+  }
+}
+
+@mixin fetch-theme($param) {
+  @include themeify {
+    #{$param}: themed($param);
+  }
+}
+
+@mixin fetch-theme-custom ($key, $value) {
+  @include themeify {
+    #{$key}: themed($value);
+  }
+}
+
+//获取背景颜色
+@mixin fetch-bg-color($target) {
+  @include themeify {
+    background-color: themed($target);
+  }
+}
+
+//获取背景渐变颜色
+@mixin background-image($target) {
+  @include themeify {
+    background-image: themed($target);
+  }
+}
+
+//设置边框颜色
+@mixin fetch-border-color($target) {
+  @include themeify {
+    border-color: themed($target);
+  }
+}
+@mixin hover-border-color($target) {
+  @include themeify {
+    border: 1px solid themed($target);
+  }
+}

src/styles/common/style.scss

@@ -0,0 +1,127 @@
+@import "./var.scss";
+@import "./format.scss";
+@import "./animation.scss";
+@import "./mixins/mixins.scss";
+
+// 过度
+.go-transition {
+  transition: all 0.4s;
+}
+
+.go-transition-quick {
+  transition: all 0.2s;
+}
+
+.go-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.go-flex-items-center {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.go-flex-no-wrap {
+  flex-wrap: nowrap !important;
+}
+
+.go-absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// cursor 小手
+.go-cursor-pointer {
+  cursor: pointer;
+}
+
+// IE盒模型
+.go-boderbox {
+  box-sizing: border-box;
+}
+
+// 毛玻璃
+.go-background-filter {
+  backdrop-filter: $--filter-blur-base;
+  @include fetch-bg-color("filter-color");
+  box-shadow: $--border-shadow;
+}
+
+// 毛玻璃
+.go-background-filter-shallow {
+  backdrop-filter: $--filter-blur-base;
+  @include fetch-bg-color("filter-color-shallow");
+  box-shadow: $--border-shadow;
+}
+
+// 边框圆角
+.go-border-radius {
+  border-radius: $--border-radius-base;
+  overflow: hidden;
+}
+
+// 背景斑点需配合 @mixin background-image 使用
+.go-point-bg {
+  @include fetch-theme-custom("background-color", "background-color1");
+  background-size: 15px 15px, 15px 15px;
+}
+
+// 省略号
+.go-ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+// class:m-1 => margin：1em
+// class:mt-1 => margin-top：1em
+// m-0|mt-0|mx-0|my-0|p-0|pt-0|...
+
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .go-#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .go-#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .go-#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .go-#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .go-#{$typekey} {
+    #{$type}: 0 !important;
+  }
+}
+
+.go-d-inline-block {
+  display: inline-block;
+}
+.go-d-block {
+  display: block;
+}

src/styles/common/theme.scss

@@ -0,0 +1,10 @@
+@import './mixins/config.scss';
+@import './_dark.scss';
+@import './_light.scss';
+
+$themes: (
+  // 亮白
+  #{$theme-light}: $light,
+  // 暗黑
+  #{$theme-dark}: $dark
+);

src/styles/common/var.scss

@@ -0,0 +1,87 @@
+// 颜色
+$--color-red: #fc625d;
+$--color-warn: #fcbc40;
+$--color-success: #34c749;
+
+// 文字
+$--color-text: #1d2129;
+$--color-text-1: #4e5969;
+$--color-text-2: #86909c;
+$--color-text-3: #c9cdd4;
+$--color-text-4: #f2f3f5;
+
+//.mt-1 => margin top
+//spacing
+$spacing-base-size: 1em;
+
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+
+$spacing-sizes: (
+  0: 0,
+  1: 0.25,
+  2: 0.5,
+  3: 1,
+  4: 1.5,
+  5: 2.5,
+);
+
+// 变亮值
+$--light-shalow: 2%;
+
+// 白色
+$--color-light-bg: #fff;
+$--color-light-bg-1: #fafafc;
+$--color-light-bg-1-shallow: lighten($--color-light-bg-1, $--light-shalow);
+$--color-light-bg-2: #f2f3f5;
+$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
+$--color-light-bg-3: #e5e6eb;
+$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
+$--color-light-bg-4: #e3e3e4;
+$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
+$--color-light-bg-5: #bebebe;
+$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
+
+// 变暗值
+$--dark-shalow: 2%;
+
+// 黑色
+$--color-dark-black: #000;
+$--color-dark-bg-1: #18181c;
+$--color-dark-bg-1-shallow: darken($--color-dark-bg-1, $--dark-shalow);
+$--color-dark-bg-2: #232324;
+$--color-dark-bg-2-shallow: darken($--color-dark-bg-2, $--dark-shalow);
+$--color-dark-bg-3: #2a2a2b;
+$--color-dark-bg-3-shallow: darken($--color-dark-bg-3, $--dark-shalow);
+$--color-dark-bg-4: #313132;
+$--color-dark-bg-4-shallow: darken($--color-dark-bg-4, $--dark-shalow);
+$--color-dark-bg-5: #373739;
+$--color-dark-bg-5-shallow: darken($--color-dark-bg-5, $--dark-shalow);
+
+// 最大宽度
+$--max-width: 1920px;
+// 顶部距离
+$--header-height: 60px;
+// 底部距离
+$--footer-height: 50px;
+// 模糊
+$--filter-blur-base: blur(20px);
+// 毛玻璃
+$--filter-color-login-dark: rgba(35,35,36, 0.7);
+$--filter-color-login-dark-shallow: rgba(35,35,36, 0.3);
+$--filter-color-login-light: rgba(240, 240, 240, 0.7);
+$--filter-color-login-light-shallow: rgba(240, 240, 240, 0.3);
+
+// 边框
+$--border-radius-base: 8px;
+// 阴影
+$--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

src/styles/pages/index.scss

@@ -0,0 +1,21 @@
+// 页面全局样式
+// 去除高德地图 logo
+.amap-logo {
+  display: none !important;
+  opacity: 0 !important;
+}
+.amap-copyright {
+  opacity: 0 !important;
+}
+
+// 默认白色背景
+body {
+  background-color: #ffffff;
+}
+
+// 暗色主题背景
+[data-theme='dark'] {
+  body {
+    background-color: #18181c;
+  }
+}