diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index 046c36f5..0b7198a7 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -7,8 +7,9 @@ 警告按钮 危险按钮 -
+
22 +
66
33
44
@@ -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 { diff --git a/vue-admin-wonderful-next/src/assets/11.png b/vue-admin-wonderful-next/src/assets/11.png deleted file mode 100644 index 7e7c8efd..00000000 Binary files a/vue-admin-wonderful-next/src/assets/11.png and /dev/null differ diff --git a/vue-admin-wonderful-next/src/assets/logo-web-element.svg b/vue-admin-wonderful-next/src/assets/logo-web-element.svg new file mode 100644 index 00000000..6e08cae7 --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/logo-web-element.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/assets/logo-web-vue.svg b/vue-admin-wonderful-next/src/assets/logo-web-vue.svg new file mode 100644 index 00000000..331a341d --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/logo-web-vue.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/assets/logo-web-white.svg b/vue-admin-wonderful-next/src/assets/logo-web-white.svg new file mode 100644 index 00000000..1a4d3ac0 --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/logo-web-white.svg @@ -0,0 +1,6 @@ + + + + \ 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 6eabb22e..5fb33661 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.css'; +import '/@/style/index.scss'; createApp(App).use(ElementPlus).mount('#app') diff --git a/vue-admin-wonderful-next/src/style/base.scss b/vue-admin-wonderful-next/src/style/base.scss new file mode 100644 index 00000000..c66d575b --- /dev/null +++ b/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; +// } diff --git a/vue-admin-wonderful-next/src/style/transition.scss b/vue-admin-wonderful-next/src/style/common/transition.scss similarity index 80% rename from vue-admin-wonderful-next/src/style/transition.scss rename to vue-admin-wonderful-next/src/style/common/transition.scss index 34e5ec5d..4f860f60 100644 --- a/vue-admin-wonderful-next/src/style/transition.scss +++ b/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; diff --git a/vue-admin-wonderful-next/src/style/common/var.scss b/vue-admin-wonderful-next/src/style/common/var.scss new file mode 100644 index 00000000..4f6f0aa1 --- /dev/null +++ b/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); +} diff --git a/vue-admin-wonderful-next/src/style/element-icons.ttf b/vue-admin-wonderful-next/src/style/element-icons.ttf deleted file mode 100644 index 91b74de3..00000000 Binary files a/vue-admin-wonderful-next/src/style/element-icons.ttf and /dev/null differ diff --git a/vue-admin-wonderful-next/src/style/element-icons.woff b/vue-admin-wonderful-next/src/style/element-icons.woff deleted file mode 100644 index 02b9a253..00000000 Binary files a/vue-admin-wonderful-next/src/style/element-icons.woff and /dev/null differ diff --git a/vue-admin-wonderful-next/src/style/element-variables.scss b/vue-admin-wonderful-next/src/style/element-variables.scss deleted file mode 100644 index d7c7f800..00000000 --- a/vue-admin-wonderful-next/src/style/element-variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -$--color-primary: #09f; - -@import 'element-plus/packages/theme-chalk/src/index'; diff --git a/vue-admin-wonderful-next/src/style/index.css b/vue-admin-wonderful-next/src/style/index.css deleted file mode 100644 index bf1f5d96..00000000 --- a/vue-admin-wonderful-next/src/style/index.css +++ /dev/null @@ -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; -} diff --git a/vue-admin-wonderful-next/src/style/index.scss b/vue-admin-wonderful-next/src/style/index.scss new file mode 100644 index 00000000..6437da4b --- /dev/null +++ b/vue-admin-wonderful-next/src/style/index.scss @@ -0,0 +1 @@ +@import './base.scss';