diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md index 2489aa3c..db033ce7 100644 --- a/vue-admin-wonderful-next-docs/docs/config/README.md +++ b/vue-admin-wonderful-next-docs/docs/config/README.md @@ -217,11 +217,14 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts'; - 2.2、当只有 :root 选择器或者 html 选择器时，`document.documentElement.style.getPropertyValue` 获取到的值为空 ```ts -// 获取值 -document.documentElement.style.getPropertyValue('--main-bg-color'); +// 读取变量 +document.documentElement.style.getPropertyValue('--main-bg-color').trim(); -// 设置值 +// 设置变量 document.documentElement.style.setProperty('--main-bg-color', 'blue'); + +// 删除变量 +document.body.style.removeProperty('--main-bg-color'); ``` #### 2、配置目录别名 `@`，方便引用 diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index 9de6b915..ec4dd211 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -1,4 +1,9 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/main.ts b/vue-admin-wonderful-next/src/main.ts index 5fb33661..14a16445 100644 --- a/vue-admin-wonderful-next/src/main.ts +++ b/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.scss'; +import '/@/theme/index.scss'; -createApp(App).use(ElementPlus).mount('#app') +createApp(App).use(ElementPlus, { size: 'small' }).mount('#app') diff --git a/vue-admin-wonderful-next/src/style/base.scss b/vue-admin-wonderful-next/src/style/base.scss deleted file mode 100644 index 82728be2..00000000 --- a/vue-admin-wonderful-next/src/style/base.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import 'common/transition.scss'; -@import 'common/var.scss'; - -.el-button--primary { - color: #ffffff; - background-color: setColor(primary); - border-color: setColor(primary); -} - -// .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: setColor(primary) !important; - background-color: setColor(primary) !important; -} - -.el-tabs__item:hover, -.el-tabs__item.is-active { - color: setColor(primary) !important; -} -.el-tabs__active-bar { - background-color: setColor(primary) !important; -} - -.el-menu-item.is-active, -.el-submenu.is-active .el-submenu__title { - color: setColor(primary) !important; - border-bottom-color: setColor(primary) !important; -} diff --git a/vue-admin-wonderful-next/src/style/common/var.scss b/vue-admin-wonderful-next/src/style/common/var.scss deleted file mode 100644 index 738b1e53..00000000 --- a/vue-admin-wonderful-next/src/style/common/var.scss +++ /dev/null @@ -1,64 +0,0 @@ -/* 定义初始颜色 -------------------------------- */ -$root: ( - primary: #409eff, - success: #67c23a, - warning: #e6a23c, - danger: #f56c6c, - info: #909399, -); - -/* 循环赋值给: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; -} diff --git a/vue-admin-wonderful-next/src/style/index.scss b/vue-admin-wonderful-next/src/style/index.scss deleted file mode 100644 index 6437da4b..00000000 --- a/vue-admin-wonderful-next/src/style/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './base.scss'; diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss new file mode 100644 index 00000000..895ea3f7 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/app.scss @@ -0,0 +1,11 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; +} diff --git a/vue-admin-wonderful-next/src/theme/base.scss b/vue-admin-wonderful-next/src/theme/base.scss new file mode 100644 index 00000000..ed9216fa --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/base.scss @@ -0,0 +1,2 @@ +@import 'common/transition.scss'; +@import 'common/var.scss'; diff --git a/vue-admin-wonderful-next/src/style/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss similarity index 53% rename from vue-admin-wonderful-next/src/style/common/transition.scss rename to vue-admin-wonderful-next/src/theme/common/transition.scss index 4f860f60..12e07126 100644 --- a/vue-admin-wonderful-next/src/style/common/transition.scss +++ b/vue-admin-wonderful-next/src/theme/common/transition.scss @@ -1,32 +1,40 @@ +/* 定义重用混入指令 +------------------------------- */ +@mixin transition($second: 0.3) { + transition: all #{$second}s; +} + +@mixin translateX($opacity: 0, $offsetX: 0) { + opacity: $opacity; + transform: translateX(#{$offsetX}px); +} + /* 页面切换动画 ------------------------------- */ .fade-transform-enter-active, .fade-transform-leave-active { will-change: transform; - transition: all 0.3s; + @include transition(); } .fade-transform-enter { - opacity: 0; - transform: translateX(-30px); + @include translateX(-30); } .fade-transform-leave-active { - opacity: 0; - transform: translateX(30px); + @include translateX(30); } /* Breadcrumb 面包屑过渡动画 ------------------------------- */ .breadcrumb-enter-active, .breadcrumb-leave-active { - transition: all 0.3s; + @include transition(); } .breadcrumb-enter, .breadcrumb-leave-active { - opacity: 0; - transform: translateX(20px); + @include translateX(20); } .breadcrumb-move { - transition: all 0.3s; + @include transition(); } .breadcrumb-leave-active { position: absolute; diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss new file mode 100644 index 00000000..c0dae4c4 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/common/var.scss @@ -0,0 +1,39 @@ +/* 定义初始颜色 +------------------------------- */ +// $root: ( +// primary: #409eff, +// success: #67c23a, +// warning: #e6a23c, +// danger: #f56c6c, +// info: #909399, +// whites: #ffffff, +// blacks: #000000, +// ); + +/* 循环赋值给:root +------------------------------- */ +// :root { +// @each $key, $value in $root { +// --color-#{$key}: #{$value}; +// } +// } + +$--color-primary: #409eff !default; +$--color-white: #ffffff !default; +$--color-black: #000000 !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; +// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; +// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; +// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; +// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; +// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; +// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; +// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; +// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; + +:root { + --color-primary: #{$--color-primary}; + --color-white: #{$--color-white}; + --color-black: #{$--color-black}; + --color-primary-light-1: #{$--color-primary-light-1}; +} diff --git a/vue-admin-wonderful-next/src/theme/index.scss b/vue-admin-wonderful-next/src/theme/index.scss new file mode 100644 index 00000000..c44ded9d --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/index.scss @@ -0,0 +1,4 @@ +@import './app.scss'; +@import './base.scss'; +@import './reset-element.scss'; +@import './media.scss'; diff --git a/vue-admin-wonderful-next/src/theme/media.scss b/vue-admin-wonderful-next/src/theme/media.scss new file mode 100644 index 00000000..b41428bd --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/media.scss @@ -0,0 +1 @@ +// 540/720/960/1140 \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/theme/mixins/function.scss b/vue-admin-wonderful-next/src/theme/mixins/function.scss new file mode 100644 index 00000000..3ce18f1b --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/mixins/function.scss @@ -0,0 +1,5 @@ +/* 颜色调用函数 +------------------------------- */ +@function set-color($key) { + @return var(--color-#{$key}); +} diff --git a/vue-admin-wonderful-next/src/theme/mixins/mixins.scss b/vue-admin-wonderful-next/src/theme/mixins/mixins.scss new file mode 100644 index 00000000..6e0b0d7f --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/mixins/mixins.scss @@ -0,0 +1,18 @@ +/* 文本不换行 +------------------------------- */ +@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; +} diff --git a/vue-admin-wonderful-next/src/theme/reset-element.scss b/vue-admin-wonderful-next/src/theme/reset-element.scss new file mode 100644 index 00000000..10ac8f63 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/reset-element.scss @@ -0,0 +1,13 @@ +@import 'mixins/function.scss'; + +/* Button 按钮 +------------------------------- */ +.el-button--primary { + background-color: set-color(primary); + border-color: set-color(primary); + &:hover, + &:focus { + background: set-color(primary-light-1); + border-color: set-color(primary-light-1); + } +}