'admin-20.12.18'

vue-admin-wonderful-next/src/App.vue

@@ -7,8 +7,9 @@
     <el-button type="warning">警告按钮</el-button>
     <el-button type="danger">危险按钮</el-button>
   </el-row>
-  <div class="aa">
+  <div class="Selector1">
     22
+    <div class="aaa">66</div>
     <div class="bb">33</div>
     <div class="red">44</div>
   </div>
@@ -61,8 +62,8 @@ export default {
     }
     function onSwitchChange1() {
       document.documentElement.style.setProperty(
-        "--grey-model",
-        state.value1 ? "100%" : "0%"
+        "--color-grayscale",
+        state.value1 ? 1 : 0
       );
     }
     return {

vue-admin-wonderful-next/src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
-import '/@/style/index.css';
+import '/@/style/index.scss';
 
 createApp(App).use(ElementPlus).mount('#app')
 

vue-admin-wonderful-next/src/style/base.scss

@@ -0,0 +1,33 @@
+@import 'common/transition.scss';
+@import 'common/var.scss';
+
+// .el-button--primary {
+//   color: #ffffff;
+//   background-color: var(--primary-color);
+//   border-color: var(--primary-color);
+// }
+
+// .el-button--primary:hover {
+//   color: #ffffff;
+//   background-color: var(--primary--color-hover);
+//   border-color: var(--primary--color-hover);
+// }
+
+// .el-switch.is-checked .el-switch__core {
+//   border-color: var(--primary-color) !important;
+//   background-color: var(--primary-color) !important;
+// }
+
+// .el-tabs__item:hover,
+// .el-tabs__item.is-active {
+//   color: var(--primary-color) !important;
+// }
+// .el-tabs__active-bar {
+//   background-color: var(--primary-color) !important;
+// }
+
+// .el-menu-item.is-active,
+// .el-submenu.is-active .el-submenu__title {
+//   color: var(--primary-color) !important;
+//   border-bottom-color: var(--primary-color) !important;
+// }

vue-admin-wonderful-next/src/style/common/transition.scss

@@ -1,4 +1,5 @@
-/* 页面切换动画 */
+/* 页面切换动画
+------------------------------- */
 .fade-transform-enter-active,
 .fade-transform-leave-active {
   will-change: transform;
@@ -13,7 +14,8 @@
   transform: translateX(30px);
 }
 
-/* Breadcrumb 面包屑过渡动画 */
+/* Breadcrumb 面包屑过渡动画
+------------------------------- */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
   transition: all 0.3s;

vue-admin-wonderful-next/src/style/common/var.scss

@@ -0,0 +1,69 @@
+/* 定义初始颜色
+------------------------------- */
+$root: (
+  primary: #409eff,
+  success: #67c23a,
+  warning: #e6a23c,
+  danger: #f56c6c,
+  info: #909399,
+);
+
+:root {
+  --grayscales: 0;
+}
+
+/* 循环赋值给:root
+------------------------------- */
+:root {
+  @each $key, $value in $root {
+    --color-#{$key}: #{$value};
+  }
+}
+
+/* 颜色调用函数
+------------------------------- */
+@function setColor($key) {
+  @return var(--color-#{$key});
+}
+
+/* 文本不换行
+------------------------------- */
+@mixin text-no-wrap() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 多行文本溢出
+------------------------------- */
+@mixin text-ellipsis($line: 2) {
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+// 使用方式:
+// .text{
+//     @include multiEllipsis(3)  // 表示只显示三行,多出来的显示省略号
+// }
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.aaa {
+  color: setColor(primary);
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  border: 1px solid red;
+  filter: grayscale(red);
+}

vue-admin-wonderful-next/src/style/element-variables.scss

@@ -1,3 +0,0 @@
-$--color-primary: #09f;
-
-@import 'element-plus/packages/theme-chalk/src/index';

vue-admin-wonderful-next/src/style/index.css

@@ -1,51 +0,0 @@
-@import './transition.scss';
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  --primary-color: #409eff;
-  --primary--color-hover: #66b1ff;
-  --grey-model: 0%;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  filter: grayscale(var(--grey-model));
-}
-
-.el-button--primary {
-  color: #ffffff;
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.el-button--primary:hover {
-  color: #ffffff;
-  background-color: var(--primary--color-hover);
-  border-color: var(--primary--color-hover);
-}
-
-.el-switch.is-checked .el-switch__core {
-  border-color: var(--primary-color) !important;
-  background-color: var(--primary-color) !important;
-}
-
-.el-tabs__item:hover,
-.el-tabs__item.is-active {
-  color: var(--primary-color) !important;
-}
-.el-tabs__active-bar {
-  background-color: var(--primary-color) !important;
-}
-
-.el-menu-item.is-active,
-.el-submenu.is-active .el-submenu__title {
-  color: var(--primary-color) !important;
-  border-bottom-color: var(--primary-color) !important;
-}

vue-admin-wonderful-next/src/style/index.scss

@@ -0,0 +1 @@
+@import './base.scss';