diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index df36fcf..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index 8055e1c..601f725 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/public/small_logo.jpg b/public/small_logo.jpg new file mode 100644 index 0000000..3c665b3 Binary files /dev/null and b/public/small_logo.jpg differ diff --git a/src/assets/img/QQ.svg b/src/assets/img/QQ.svg deleted file mode 100644 index ca3c1b2..0000000 --- a/src/assets/img/QQ.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/avatar_01.jpg b/src/assets/img/avatar_01.jpg deleted file mode 100644 index 35a035a..0000000 Binary files a/src/assets/img/avatar_01.jpg and /dev/null differ diff --git a/src/assets/img/background.jpg b/src/assets/img/background.jpg deleted file mode 100644 index 716a0a6..0000000 Binary files a/src/assets/img/background.jpg and /dev/null differ diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png deleted file mode 100644 index 329ae42..0000000 Binary files a/src/assets/img/logo.png and /dev/null differ diff --git a/src/assets/img/logo_white.png b/src/assets/img/logo_white.png deleted file mode 100644 index 03882ee..0000000 Binary files a/src/assets/img/logo_white.png and /dev/null differ diff --git a/src/assets/img/radio-select.svg b/src/assets/img/radio-select.svg deleted file mode 100644 index 93cd719..0000000 --- a/src/assets/img/radio-select.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/radio.svg b/src/assets/img/radio.svg deleted file mode 100644 index 211001a..0000000 --- a/src/assets/img/radio.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/其它.svg b/src/assets/img/其它.svg deleted file mode 100644 index 8db5238..0000000 --- a/src/assets/img/其它.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/微信.svg b/src/assets/img/微信.svg deleted file mode 100644 index 23a3df4..0000000 --- a/src/assets/img/微信.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/短信.svg b/src/assets/img/短信.svg deleted file mode 100644 index 5a94f23..0000000 --- a/src/assets/img/短信.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/sass/_variable.scss b/src/assets/sass/_variable.scss index 5f4d22c..afc39e4 100644 --- a/src/assets/sass/_variable.scss +++ b/src/assets/sass/_variable.scss @@ -1,64 +1,67 @@ +@import "./theme-color.scss"; + // 深色主题 -$dark-primary: #8276c9; -$dark-font-color: rgb(255, 255, 255, .87); +$dark-color: rgb(255, 255, 255, .87); $dark-main: #232429; $dark-aside: #27282e; $dark-input: #191a1f; $dark-border: #434343; // 浅色主题 -$light-primary: #587df1; -$light-font-color: #333; +$light-color: #333; $light-main: #ededed; $light-aside: #ffffff; $light-input: rgb(86, 87, 88, .04); $light-border: #434343; - -// 通用主题 -$success: #87d068; -$failure: #f50; -$warning: #E6A23C; -$info: #909399; - @mixin flex($justify) { display: flex; justify-content: $justify; align-items: center; } -// 按钮混合 -@mixin primary-color($color) { - background-color: $color; - color:$dark-font-color; +// 切换主色 +@mixin primary-bgColor($bgColor: map-get($primary, 1), $color: $dark-color) { + background-color: $bgColor !important; + color: $color !important; - [data-theme="dark-theme"] & { - background-color: $dark-primary; - } - - [data-theme="light-theme"] & { - background-color: $light-primary; + @each $key, + $val in $primary { + [primary-theme="primary.#{$key}"] & { + background-color: #{$val} !important; + } } } +// 主色文字 +@mixin primary-color($color: map-get($primary, 1)) { + color: $color; + + @each $key, + $val in $primary { + [primary-theme="primary.#{$key}"] & { + color: #{$val}; + } + } +} // 文字混合 @mixin font-color($color) { color: $color; [data-theme="dark-theme"] & { - color: $dark-font-color !important; + color: $dark-color; } [data-theme="light-theme"] & { - color: $light-font-color !important; + color: $light-color; } } // 主题背景 @mixin input-color($color) { background-color: $color; - @include font-color($dark-font-color); + @include font-color($dark-color); [data-theme="dark-theme"] & { background-color: $dark-input; @@ -86,41 +89,30 @@ $info: #909399; padding: 20px; height: 100%; background-color: $color; - color: $dark-font-color; + color: $dark-color; box-shadow: 0 1px 5px 0 rgb(57 66 60 / 20%); [data-theme="dark-theme"] & { background-color: $dark-aside; - - span, - p,i { - color: $dark-font-color !important; - } } [data-theme="light-theme"] & { background-color: $light-aside; - - span, - p,i { - color: $light-font-color !important; - font-weight: 600 !important; - } } } @mixin bg-model-color($color) { background-color: $color; - color: $dark-font-color; + color: $dark-color; [data-theme="dark-theme"] & { background-color: $dark-aside; - color: $dark-font-color ; + color: $dark-color ; } [data-theme="light-theme"] & { background-color: $light-aside; - color: $light-font-color ; + color: $light-color ; font-weight: 600; } } \ No newline at end of file diff --git a/src/assets/sass/theme-color.scss b/src/assets/sass/theme-color.scss new file mode 100644 index 0000000..ef7fc0a --- /dev/null +++ b/src/assets/sass/theme-color.scss @@ -0,0 +1,18 @@ +$primary: ( + 1: #9373EE, + 2: #5F80E9, + 3: #587DF1, + 4: #9A7D56, + 5: #00C3EE, + 6: #039E74, + 7: #FA8C16, + 8: #E86CA4, + 9: #FD6874, + 10: #8E8374, +); + +// 通用主题 +$success: #87d068; +$failure: #f50; +$warning: #E6A23C; +$info: #909399; \ No newline at end of file diff --git a/src/assets/style/home/index.scss b/src/assets/style/home/index.scss index 023e18e..3cdd708 100644 --- a/src/assets/style/home/index.scss +++ b/src/assets/style/home/index.scss @@ -11,19 +11,12 @@ border: none; background-color: transparent; margin-top: 20px; + } - &-item { - - i, - span { - font-size: 12px; - color: rgb(255, 255, 255, 0.87); - } - - span { - margin-right: 80px; - } - } + i, + span { + font-size: 12px; + @include font-color($dark-color) } } } \ No newline at end of file diff --git a/src/assets/style/public.scss b/src/assets/style/public.scss index 0965060..398ad5a 100644 --- a/src/assets/style/public.scss +++ b/src/assets/style/public.scss @@ -37,7 +37,7 @@ span { padding: 0; margin: 0; font-family: 'SRL'; - color: rgb(255, 255, 255, 0.87); + @include font-color($dark-color); font-size: 14px; } @@ -105,16 +105,6 @@ th { border-bottom: 0px !important; } -.el-tabs__item { - background-color: #212121 -} - -.el-tabs__item.is-active { - span { - color: #8276c9 !important; - } -} - h2 { font-size: 16px; font-family: 800; @@ -126,7 +116,7 @@ h2:before { display: inline-block; width: 3px; height: 18px; - background: #ff9347; + @include primary-bgColor(map-get($primary, 1), $dark-color); border-radius: 2px; position: relative; top: 12px; @@ -138,15 +128,23 @@ h2:before { cursor: pointer; margin-right: 15px; border: none; - @include primary-color($dark-primary); - .el-tag__close { - @include font-color($dark-font-color); + &__item.is-active { + @include primary-bgColor(map-get($primary, 1), $dark-color); } - .el-tag__close:hover { - background-color: rgb(255, 255, 255, 0.87) !important; - color: $dark-primary !important; + &__item:hover, + &__item:focus { + @include primary-bgColor(map-get($primary, 1), $dark-color); + } + + &__close { + color: $dark-color !important; + } + + &__close:hover { + background-color: $dark-color !important; + color: $light-color !important; } } @@ -166,7 +164,7 @@ h2:before { width: 100%; text-align: center; position: relative; - @include primary-color($dark-primary); + color: rgb(255, 255, 255, 0.87); border: none; } @@ -183,23 +181,13 @@ h2:before { .el-button { font-size: 12px; border-radius: 2px; + border: none; + + &--primary { + @include primary-bgColor(map-get($primary, 1), $dark-color); - &--default { span { - color: $dark-primary; - } - } - - &--primary, - &--primary:hover, - &--primary:focus { - @include primary-color($dark-primary); - border: none; - } - - &--text { - span { - color: $dark-primary; + color: $dark-color !important; } } } @@ -302,7 +290,7 @@ input[type="number"] { &__inner:hover, &__inner:focus { - border: 1px solid $dark-primary; + border: 1px solid map-get($primary, 1); } &.is-disabled &__inner { @@ -313,20 +301,22 @@ input[type="number"] { .el-select { .el-input.is-focus .el-input__inner { - border: 1px solid $dark-primary; + border: 1px solid map-get($primary, 1); } .el-input__inner:focus { - border: 1px solid $dark-primary; + border: 1px solid map-get($primary, 1); } &-dropdown { - background-color: #232429; + @include bg-aside-color($dark-aside); border: none; + height: auto; + padding: 10px; &__item:hover, &__item.hover { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1)); color: rgb(255, 255, 255, 0.87); } } @@ -334,7 +324,7 @@ input[type="number"] { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { - @include primary-color($dark-primary); + color: rgb(255, 255, 255, 0.87); } @@ -347,12 +337,12 @@ input[type="number"] { &__inner:hover, &__inner:focus { - border: 1px solid $dark-primary; + border: 1px solid map-get($primary, 1); } } .el-pagination.is-background .el-pager li:not(.disabled).active { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); } .ace-tm { @@ -376,7 +366,7 @@ input[type="number"] { } .el-popover { - background-color: #232429; + @include input-color($dark-input); border: none; } @@ -402,26 +392,22 @@ input[type="number"] { } .el-radio__input.is-checked .el-radio__inner { - @include primary-color($dark-primary); - border: 1px solid $dark-primary; + + border: 1px solid map-get($primary, 1); } -.el-radio__input.is-checked+.el-radio__label { - color: $dark-primary; -} +.el-radio__input.is-checked+.el-radio__label {} -.el-checkbox__input.is-checked+.el-checkbox__label { - color: $dark-primary; -} +.el-checkbox__input.is-checked+.el-checkbox__label {} .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { - @include primary-color($dark-primary); - border: 1px solid $dark-primary; + + border: 1px solid map-get($primary, 1); } .el-notification { - background-color: #232429; + border: none; &__title { @@ -445,7 +431,7 @@ input[type="number"] { } .el-picker-panel { - background-color: #232429; + border: none; &__icon-btn { @@ -461,13 +447,13 @@ input[type="number"] { color: rgb(255, 255, 255, 0.87); } -.el-date-table td.current:not(.disabled) span { - @include primary-color($dark-primary); -} +.el-date-table td.current:not(.disabled) span {} .el-dropdown-menu { - background-color: #232429; + @include bg-aside-color($dark-aside); border: none; + height: auto; + padding: 10px; &__item { color: rgb(255, 255, 255, 0.87); @@ -476,12 +462,11 @@ input[type="number"] { .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { - @include primary-color($dark-primary); - color: rgb(255, 255, 255, 0.87); + @include primary-bgColor(map-get($primary, 1)); } .el-cascader__dropdown { - background-color: #232429; + @include primary-bgColor(map-get($primary, 1)); border: none; } @@ -492,11 +477,11 @@ input[type="number"] { .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1)); } .el-cascader-node.in-active-path { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1)); } .el-cascader-menu { @@ -534,23 +519,31 @@ input[type="number"] { &-node__content:hover { border-radius: 6px; - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); } &-node:focus>&-node__content { border-radius: 6px; - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); } } .el-step { &__line { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); } &__icon { - color: rgb(255, 255, 255, 0.87); - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); + + + &-inner { + font-size: 12px; + } + } + + &__icon.is-text { + border: none; } &__head.is-success { @@ -558,19 +551,15 @@ input[type="number"] { } &__title.is-success { - color: $dark-primary; + @include primary-color(map-get($primary, 1)); } &__title.is-finish { - color: $dark-primary; + @include primary-color(map-get($primary, 1)); } &__title.is-process { - color: $dark-primary; - } - - &__icon-inner { - font-size: 12px; + @include primary-color(map-get($primary, 1)); } } diff --git a/src/assets/style/user.scss b/src/assets/style/user.scss deleted file mode 100644 index 1d9db6f..0000000 --- a/src/assets/style/user.scss +++ /dev/null @@ -1,59 +0,0 @@ -.el-container { - height: 100%; - background: url("~@/assets/img/background.jpg") center no-repeat; - - .el-main { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - - .form-box { - width: 350px; - - .el-image { - width: 200px; - margin-bottom: 20px; - } - - .el-button { - width: 100%; - } - - .el-form { - width: 100%; - padding: 20px 50px; - background-color: #fff; - border-radius: 20px; - - .el-form-item { - width: 100%; - - ::v-deep .el-input__inner { - border-radius: 2px; - font-family: "SRL"; - } - } - - .el-row { - margin-top: 10px; - - .el-image { - width: 30px; - margin-right: 20px; - } - - .el-input { - margin-right: 20px; - } - - .el-button { - width: 120px; - border-radius: 2px; - } - } - - } - } - } -} \ No newline at end of file diff --git a/src/components/FecrTable.vue b/src/components/FecrTable.vue index b53054b..6f43cb7 100644 --- a/src/components/FecrTable.vue +++ b/src/components/FecrTable.vue @@ -196,8 +196,8 @@ export default { cursor: pointer; } -::v-deep .el-table th { - @include primary-color($dark-primary); +::v-deep .el-table th.el-table__cell { + @include primary-bgColor(map-get($primary, 1), $dark-color); } /* 表格内背景颜色 */ diff --git a/src/components/FecrTranTable.vue b/src/components/FecrTranTable.vue index cb09cc5..6bc33b5 100644 --- a/src/components/FecrTranTable.vue +++ b/src/components/FecrTranTable.vue @@ -163,7 +163,7 @@ export default { } ::v-deep .el-table th { - @include primary-color($dark-primary); + } /* 表格内背景颜色 */ diff --git a/src/view/home/aside/bell.vue b/src/view/home/aside/bell.vue index ec8bf44..35fd907 100644 --- a/src/view/home/aside/bell.vue +++ b/src/view/home/aside/bell.vue @@ -115,7 +115,7 @@ export default { } .active-bell { - @include primary-color($dark-primary); + color: #fff; padding: 5px 10px; border-radius: 6px; diff --git a/src/view/home/aside/index.vue b/src/view/home/aside/index.vue index 9969ca0..5d6c673 100644 --- a/src/view/home/aside/index.vue +++ b/src/view/home/aside/index.vue @@ -60,7 +60,7 @@ import logo from "assets/img/small_logo.jpg"; import search from "./search"; import bell from "./bell"; import theme from "./theme"; -import request from "@/api/request" +import request from "@/api/request"; export default { components: { search, bell, theme }, props: { @@ -75,7 +75,7 @@ export default { avatar, searchVisible: false, bellVisible: false, - themeVisible: false, + themeVisible: true, data: this.$store.state.user, menu: [ { @@ -124,6 +124,7 @@ export default { methods: { async init() { const res = await request.get("user/detail"); + this.data = res; this.$store.commit("set_user", res); if (res.role !== "管理员") { this.menu = this.menu.filter((item) => { @@ -193,7 +194,7 @@ export default { background-color: transparent !important; i, span { - color: #8276c9 !important; + @include primary-color(map-get($primary, 1)); } } @@ -241,6 +242,6 @@ export default { .menu-p:hover, .menu-p:active, .menu-p:focus { - color: $dark-primary; + @include primary-color(map-get($primary, 1)); } \ No newline at end of file diff --git a/src/view/home/aside/theme.vue b/src/view/home/aside/theme.vue index dcf0679..adb8bc9 100644 --- a/src/view/home/aside/theme.vue +++ b/src/view/home/aside/theme.vue @@ -145,6 +145,10 @@

浅色

+

主色

+ +
+ @@ -156,9 +160,25 @@ export default { data() { return { subVisible: false, + data: [ + { title: "primary.1", color: " #9373EE" }, + { title: "primary.2", color: "#5F80E9" }, + { title: "primary.3", color: "#587DF1" }, + { title: "primary.4", color: "#9A7D56" }, + { title: "primary.5", color: "#00C3EE" }, + { title: "primary.6", color: "#039E74" }, + { title: "primary.7", color: "#FA8C16" }, + { title: "primary.8", color: "#E86CA4" }, + { title: "primary.9", color: "#FD6874" }, + { title: "primary.10", color: "#8E8374" }, + ], }; }, + created() { + // this.setTheme("light-theme") + }, + methods: { cancel() { this.$emit("cancel", false); @@ -167,17 +187,19 @@ export default { setTheme(theme) { window.document.documentElement.setAttribute("data-theme", theme); }, + + setPrimaryColor(val){ + window.document.documentElement.setAttribute("primary-theme",val.title) + } }, watch: { visible: { handler(newVal) { - console.log(newVal); this.subVisible = newVal; }, - immediate:true + immediate: true, }, - }, }; @@ -204,4 +226,11 @@ span { margin-left: 20px; cursor: pointer; } + +.color-badge { + width: 30px; + height: 30px; + border-radius: 50%; + cursor: pointer; +} \ No newline at end of file diff --git a/src/view/home/content/category/model.vue b/src/view/home/content/category/model.vue index 02cd63b..fd18651 100644 --- a/src/view/home/content/category/model.vue +++ b/src/view/home/content/category/model.vue @@ -179,7 +179,7 @@ export default { } .subcategory { - @include primary-color($dark-primary); + padding: 10px 20px; border-radius: 6px; } diff --git a/src/view/home/content/indicators/details.vue b/src/view/home/content/indicators/details.vue index 4a34ef8..80497fd 100644 --- a/src/view/home/content/indicators/details.vue +++ b/src/view/home/content/indicators/details.vue @@ -4,7 +4,7 @@

{{ data.cname }} - + {{ data.category }}

@@ -192,6 +192,11 @@ export default { overflow: auto; } +.header-tag { + margin-left: 20px; + @include primary-bgColor(map-get($primary, 1), $dark-color); +} + ::v-deep .el-card__body { height: calc(100% - 150px); } diff --git a/src/view/home/content/indicators/index.vue b/src/view/home/content/indicators/index.vue index 6f17df7..a11a51a 100644 --- a/src/view/home/content/indicators/index.vue +++ b/src/view/home/content/indicators/index.vue @@ -338,12 +338,12 @@ export default { } p:hover { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); border-radius: 6px; } .tree-active { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); border-radius: 6px; } } diff --git a/src/view/home/content/model/details.vue b/src/view/home/content/model/details.vue index adafe24..4225aa1 100644 --- a/src/view/home/content/model/details.vue +++ b/src/view/home/content/model/details.vue @@ -4,7 +4,7 @@

{{ data.name }} - + {{ data.major_category }} / {{ data.subcategory }} @@ -371,6 +371,11 @@ export default { overflow: auto; } +.header-tag { + margin-left: 20px; + @include primary-bgColor(map-get($primary, 1), $dark-color); +} + ::v-deep .el-card__body { padding: 0 20px; } @@ -381,25 +386,14 @@ export default { } } -.el-tab-pane { - height: 100%; +::v-deep .el-tabs__item { + color: $dark-color; } -.el-tabs { - height: calc(100% - 80px); - ::v-deep &__item { - color: rgb(255, 255, 255, 0.87) !important; - } - ::v-deep &__item.is-active { - color: $dark-primary !important; - } - - ::v-deep &__item:hover, - ::v-deep &__item:focus { - color: $dark-primary !important; - } +::v-deep .el-tabs__nav-wrap::after{ + height: 0px; } .edit { @@ -410,10 +404,6 @@ export default { width: 138px; } -::v-deep .el-textarea__inner { - min-height: 200px !important; -} - .el-select { width: 100%; } diff --git a/src/view/home/content/model/index.vue b/src/view/home/content/model/index.vue index 3b44094..be17a13 100644 --- a/src/view/home/content/model/index.vue +++ b/src/view/home/content/model/index.vue @@ -226,12 +226,11 @@ export default { } p:hover { - @include primary-color($dark-primary); border-radius: 6px; } .tree-active { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); border-radius: 6px; } } diff --git a/src/view/home/content/process/fourthStep.vue b/src/view/home/content/process/fourthStep.vue index fbb8c3c..2d03607 100644 --- a/src/view/home/content/process/fourthStep.vue +++ b/src/view/home/content/process/fourthStep.vue @@ -203,7 +203,7 @@ export default { .question { font-size: 24px; - color: $dark-primary; + } } diff --git a/src/view/home/content/process/secondStep.vue b/src/view/home/content/process/secondStep.vue index 338ae6e..0687721 100644 --- a/src/view/home/content/process/secondStep.vue +++ b/src/view/home/content/process/secondStep.vue @@ -183,12 +183,12 @@ export default { } p:hover { - @include primary-color($dark-primary); + border-radius: 6px; } .tree-active { - @include primary-color($dark-primary); + border-radius: 6px; } diff --git a/src/view/home/index.vue b/src/view/home/index.vue index f99622d..971fb98 100644 --- a/src/view/home/index.vue +++ b/src/view/home/index.vue @@ -186,59 +186,12 @@ export default { } .tabs-tag:hover { - @include primary-color($dark-primary); + @include primary-bgColor(map-get($primary, 1), $dark-color); } .is-active { - @include primary-color($dark-primary); - color: $dark-font-color !important; - - ::v-deep .el-tag__close { - color: $dark-font-color !important; - } + @include primary-bgColor(map-get($primary, 1), $dark-color); } -.el-tabs { - height: 100%; - ::v-deep &__item { - margin-right: 10px; - border-radius: 6px; - - span { - font-size: 12px; - } - } - - ::v-deep &__item.is-top:nth-child(2) { - padding-left: 20px !important; - } - - ::v-deep &__item.is-top:last-child { - padding-right: 20px !important; - } - - ::v-deep &__nav-wrap::after { - background-color: transparent; - } - - ::v-deep &__content { - height: calc(100% - 50px); - } - - ::v-deep &__active-bar { - background-color: transparent; - } - - .el-tab-pane { - height: 100%; - overflow: hidden; - - .pane-box { - width: calc(100% + 5px); - height: 100%; - overflow: auto; - } - } -} \ No newline at end of file