From cfb882c734ba51450071dba9723f8126c07d97cc Mon Sep 17 00:00:00 2001 From: wangdan Date: Fri, 17 Feb 2023 16:39:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=91=E8=89=B2=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/element-dark.scss | 72 ++++++++++++------- frontend/src/styles/element.scss | 2 + frontend/src/views/app-store/apps/index.vue | 2 +- frontend/src/views/app-store/detail/index.vue | 2 +- frontend/src/views/app-store/index.scss | 2 +- frontend/src/views/home/app/index.vue | 4 +- frontend/src/views/home/index.vue | 2 +- 7 files changed, 54 insertions(+), 32 deletions(-) diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss index 053af3a6f..359dba4d0 100644 --- a/frontend/src/styles/element-dark.scss +++ b/frontend/src/styles/element-dark.scss @@ -1,24 +1,25 @@ html.dark { - --el-border-color-lighter: rgb(64, 67, 67); - --el-fill-color-blank: rgb(49, 51, 51); + --el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important; + --el-border-color-lighter: #1d2023; + --el-fill-color-blank: #111417; --el-bg-color: rgba(0, 11, 21, 1); // --el-text-color-primary: #999999; - --el-text-color-regular: #cfd3dc; - --el-fill-color-light: rgb(49, 51, 51); - --el-border-color: rgb(64, 67, 67); + --el-text-color-regular: #bbbfc4 !important; + --el-fill-color-light: #111417; + --el-border-color: #303438; --el-bg-color-overlay: rgba(0, 11, 21, 1); - --el-border-color-light: rgb(64, 67, 67); + --el-border-color-light: #1d2023; // * menu --el-menu-bg-color: #111417 !important; - --el-menu-item-bg-color: rgba(0, 11, 21, 1); + --el-menu-item-bg-color: #111417; --el-menu-text-color: #ffffff; --el-menu-item-bg-color-active: rgb(44, 45, 46); // * panel-admin --panel-text-color: rgb(174, 166, 153); - --panel-border: 1px solid rgb(64, 67, 67); - --panel-main-bg-color: rgb(41, 43, 43); - --panel-button-active: rgb(44, 45, 46); + --panel-border: 1px solid #303438; + --panel-main-bg-color: rgba(12, 12, 12, 1); + --panel-button-active: var(--el-color-primary); --panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%); --panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%); @@ -30,13 +31,16 @@ html.dark { --el-tag-border-color: rgb(64, 67, 67); } .el-tag.el-tag--light { - --el-tag-bg-color: rgb(49, 51, 51); - --el-tag-border-color: rgb(64, 67, 67); + --el-tag-bg-color: #111417; + --el-tag-border-color: var(--el-color-primary); + } + .el-tag.el-tag--success { + --el-tag-border-color: var(--el-color-success); } .el-card { - --el-card-border-color: rgb(64, 67, 67); - --el-card-bg-color: rgba(0, 11, 21, 1); - color: rgb(174, 166, 153); + --el-card-bg-color: #111417; + color: #ffffff; + border: none !important; } .el-table { @@ -56,7 +60,7 @@ html.dark { .el-input { --el-input-bg-color: rgb(47 48 48); - --el-input-border-color: rgb(64, 67, 67); + --el-input-border-color: #303438; } .el-pagination { @@ -107,8 +111,11 @@ html.dark { } .el-menu { .el-menu-item { + &:hover { + background: rgba(37, 39, 44, 1); + } &.is-active { - background: #005eeb; + background: var(--el-color-primary); color: #ffffff; &:hover { .el-icon { @@ -140,9 +147,6 @@ html.dark { border-top: var(--panel-border); } } - .el-descriptions__body { - background-color: rgba(0, 11, 21, 1); - } .system-label { color: var(--el-menu-text-color); } @@ -151,6 +155,10 @@ html.dark { .el-radio-button__inner { background: none; } + .el-radio-button__original-radio:checked + .el-radio-button__inner { + color: #ffffff; + box-shadow: none !important; + } } // content-box .content-box { @@ -170,18 +178,18 @@ html.dark { box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset; } .el-radio-button__inner { - background: rgb(49, 51, 51); + background: #1d2023; } .el-button--primary.is-plain.is-disabled { - background: rgb(49, 51, 51); - border-color: rgb(64, 67, 67); + background: #1d2023; + border-color: #303438; } .el-button--primary.is-plain { - background: rgb(49, 51, 51); - border-color: rgb(64, 67, 67); + background: #1d2023; + border-color: #303438; } .el-button.is-disabled { - border-color: rgb(64, 67, 67); + border-color: #303438; } .el-popper.is-dark { color: rgb(171 173 173); @@ -198,7 +206,9 @@ html.dark { transition: background-color 1000s ease-out 0.5s; } .el-avatar { - --el-avatar-bg-color: var(--el-bg-color) !important; + --el-avatar-bg-color: #111417 !important; + box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1); + border: 0.5px solid #1f2022; } .el-page-header__content { color: rgb(174, 166, 153); @@ -238,4 +248,12 @@ html.dark { .el-loading-mask { background-color: rgba(0, 0, 0, 0.8); } + + .h-app-card { + .h-app-content { + .h-app-title { + color: #f2f8ff; + } + } + } } diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss index 05e481c4e..15624224d 100644 --- a/frontend/src/styles/element.scss +++ b/frontend/src/styles/element.scss @@ -1,5 +1,7 @@ html { --el-box-shadow-light: 0px 0px 4px rgba(0, 94, 235, 0.1) !important; + + --el-text-color-regular: #646a73 !important; // * menu --el-menu-bg-color: rgba(0, 94, 235, 0.1) !important; --el-menu-item-bg-color: rgba(255, 255, 255, 0.3); diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue index 04e77f5ab..565e9fcd4 100644 --- a/frontend/src/views/app-store/apps/index.vue +++ b/frontend/src/views/app-store/apps/index.vue @@ -218,7 +218,7 @@ onMounted(() => { .desc { font-size: 14px; - color: #646a73; + color: var(--el-text-color-regular); } } diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue index c8dfec3fa..0b347b82e 100644 --- a/frontend/src/views/app-store/detail/index.vue +++ b/frontend/src/views/app-store/detail/index.vue @@ -162,7 +162,7 @@ onMounted(() => { margin-top: 10px; span { font-size: 14px; - color: #646a73; + color: var(--el-text-color-regular); } } diff --git a/frontend/src/views/app-store/index.scss b/frontend/src/views/app-store/index.scss index 7f30e0eeb..6d1457fd8 100644 --- a/frontend/src/views/app-store/index.scss +++ b/frontend/src/views/app-store/index.scss @@ -40,7 +40,7 @@ .description { margin-top: 10px; font-size: 14px; - color: #646a73; + color: var(--el-text-color-regular); } } .d-button { diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue index d9334e150..e6a0774b5 100644 --- a/frontend/src/views/home/app/index.vue +++ b/frontend/src/views/home/app/index.vue @@ -33,6 +33,7 @@ +
@@ -108,13 +109,14 @@ defineExpose({ .h-app-title { font-weight: 500; font-size: 15px; + color: #1f2329; } .h-app-desc { span { font-weight: 400; font-size: 12px; - color: #646a73; + color: var(--el-text-color-regular); } } } diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue index 3d862c513..8fc0c7571 100644 --- a/frontend/src/views/home/index.vue +++ b/frontend/src/views/home/index.vue @@ -584,7 +584,7 @@ onBeforeUnmount(() => { span:first-child { font-size: 14px; - color: #646a73; + color: var(--el-text-color-regular); } .count {