first

library/styles/vab.scss

@@ -0,0 +1,16 @@
+@use 'normalize.css';
+@use 'element-plus/theme-chalk/src/index';
+@use './var.scss' as *;
+
+// 基础样式
+body {
+  font-size: var(--el-font-size-base);
+  color: var(--el-color-black);
+  background: var(--el-background-color);
+}
+
+// 卡片样式
+.vab-card {
+  border-radius: var(--el-border-radius-base);
+  transition: var(--el-transition);
+} 

library/styles/var.scss

@@ -0,0 +1,36 @@
+@use './variables.scss' as *;
+
+:root {
+  //背景色
+  --el-background-color: #f6f8f9;
+  //菜单背景色
+  --el-menu-background-color: #282c34;
+  //菜单文字颜色
+  --el-menu-color-text: #ffffff;
+  
+  // 主题色
+  --el-color-primary: #{$base-color-primary};
+  --el-color-primary-light-1: #{$vab-color-primary-light-1};
+  --el-color-primary-light-2: #{$vab-color-primary-light-2};
+  --el-color-primary-light-3: #{$vab-color-primary-light-3};
+  --el-color-primary-light-4: #{$vab-color-primary-light-4};
+  --el-color-primary-light-5: #{$vab-color-primary-light-5};
+  --el-color-primary-light-6: #{$vab-color-primary-light-6};
+  --el-color-primary-light-7: #{$vab-color-primary-light-7};
+  --el-color-primary-light-8: #{$vab-color-primary-light-8};
+  --el-color-primary-light-9: #{$vab-color-primary-light-9};
+  
+  // 成功色
+  --el-color-success: #{$base-color-success};
+  --el-color-success-light: #{$vab-color-success-light};
+  --el-color-success-lighter: #{$vab-color-success-lighter};
+  
+  // 白色
+  --el-color-white: #ffffff;
+  
+  --el-color-warning: #{$base-color-warning};
+  --el-color-danger: #{$base-color-danger};
+  
+  --el-transition-duration: 0.25s;
+  --el-transition: all var(--el-transition-duration) cubic-bezier(0.42, 0, 0.58, 1);
+} 

library/styles/variables.scss

@@ -0,0 +1,26 @@
+@use "sass:color";
+
+/**
+ * @description 全局主题变量配置
+ */
+$base-color-primary: #4e88f3;
+$base-color-success: #13ce66;
+$base-color-warning: #e6a23c;
+$base-color-danger: #fd4e4e;
+$base-color-error: #fd4e4e;
+$base-color-text: #909399;
+
+$vab-color-primary: $base-color-primary;
+$vab-color-primary-light-1: color.mix(white, $base-color-primary, 10%);
+$vab-color-primary-light-2: color.mix(white, $base-color-primary, 20%);
+$vab-color-primary-light-3: color.mix(white, $base-color-primary, 30%);
+$vab-color-primary-light-4: color.mix(white, $base-color-primary, 40%);
+$vab-color-primary-light-5: color.mix(white, $base-color-primary, 50%);
+$vab-color-primary-light-6: color.mix(white, $base-color-primary, 60%);
+$vab-color-primary-light-7: color.mix(white, $base-color-primary, 70%);
+$vab-color-primary-light-8: color.mix(white, $base-color-primary, 80%);
+$vab-color-primary-light-9: color.mix(white, $base-color-primary, 90%);
+
+$vab-color-success: $base-color-success;
+$vab-color-success-light: color.mix(white, $base-color-success, 80%);
+$vab-color-success-lighter: color.mix(white, $base-color-success, 90%);