From 2db01677e3f1106443c2e5a42b63de4a7bb0ba2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?= <15040126243@163.com> Date: Wed, 11 Mar 2026 11:59:47 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E6=95=B4=E4=BD=93?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=20=E6=9B=B4=E5=9C=86?= =?UTF-8?q?=E6=BB=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/btn.scss | 4 +- src/assets/styles/element-ui.scss | 124 +++++++++++++++++ src/assets/styles/index.scss | 41 ++++-- src/assets/styles/ruoyi.scss | 19 ++- src/assets/styles/sidebar.scss | 23 ++-- src/assets/styles/variables.module.scss | 151 ++++++++++++++++++++- src/layout/components/AppMain.vue | 6 +- src/layout/components/Navbar.vue | 13 +- src/layout/components/TagsView/index.vue | 17 ++- src/views/login.vue | 84 ++++++++++-- src/views/workflow/task/allTaskWaiting.vue | 64 ++++++++- 11 files changed, 487 insertions(+), 59 deletions(-) diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss index d614f2f..13a464a 100644 --- a/src/assets/styles/btn.scss +++ b/src/assets/styles/btn.scss @@ -45,7 +45,7 @@ font-size: 14px; color: #fff; padding: 14px 36px; - border-radius: 8px; + border-radius: var(--app-radius-md); border: none; outline: none; transition: 600ms ease all; @@ -95,5 +95,5 @@ margin: 0; padding: 10px 15px; font-size: 14px; - border-radius: 4px; + border-radius: var(--app-radius-sm); } diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index e38c703..106a647 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -74,6 +74,9 @@ .el-dialog { margin: 0 auto !important; + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-md); + overflow: hidden; .el-dialog__body { padding: 15px !important; @@ -108,6 +111,8 @@ // dropdown .el-dropdown-menu { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); a { display: block; } @@ -151,3 +156,122 @@ .el-message-box .el-message-box__message { word-break: break-word; } + +.el-message-box { + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-md); +} + +.el-message, +.el-notification, +.el-alert { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); +} + +// Modern rounded inputs +.el-input__wrapper, +.el-textarea__inner, +.el-select__wrapper, +.el-date-editor, +.el-range-editor, +.el-input-number, +.el-input-number__decrease, +.el-input-number__increase { + border-radius: var(--app-radius-md); + transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; +} + +.el-input__wrapper.is-focus, +.el-textarea__inner:focus, +.el-select__wrapper.is-focus, +.el-date-editor.is-focus, +.el-range-editor.is-focus { + box-shadow: 0 0 0 2px var(--el-color-primary-light-8); +} + +// Buttons +.el-button { + border-radius: var(--app-radius-md); + transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; +} + +.el-button:not(.is-text):not(.is-link):hover { + transform: translateY(-1px); + box-shadow: var(--app-shadow-sm); +} + +// Tags and badges +.el-tag { + border-radius: var(--app-radius-md); +} + +// Cards, popovers, drawers +.el-popover, +.el-tooltip__popper, +.el-popper { + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); +} + +.el-drawer { + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-md); +} + +.el-drawer__header { + margin-bottom: 0; + padding: 16px 20px; + border-bottom: 1px solid var(--el-border-color-light); +} + +// Table polish +.el-table { + border-radius: var(--app-radius-lg); + overflow: hidden; + box-shadow: var(--app-shadow-sm); + border: 1px solid var(--el-border-color-lighter); +} + +.el-table__header-wrapper, +.el-table__body-wrapper { + background: var(--el-bg-color); +} + +.el-table__row:hover td.el-table__cell { + background-color: var(--el-fill-color-light) !important; +} + +// Tabs +.el-tabs__header { + margin: 0 0 12px 0; +} + +.el-tabs__item { + border-radius: var(--app-radius-md); + margin: 0 2px; +} + +.el-tabs__nav-wrap::after { + background-color: var(--el-border-color-lighter); +} + +// Pagination +.el-pagination .btn-prev, +.el-pagination .btn-next, +.el-pagination .el-pager li { + border-radius: var(--app-radius-sm); + transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; +} + +.el-pagination .el-pager li.is-active { + box-shadow: var(--app-shadow-sm); +} + +// Breadcrumb +.el-breadcrumb { + padding: 0; + background: transparent; + border: none; + border-radius: 0; +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 7228c52..bd853d4 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -14,18 +14,20 @@ body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; + background: var(--el-bg-color-page); font-family: - Helvetica Neue, - Helvetica, - PingFang SC, - Hiragino Sans GB, - Microsoft YaHei, - Arial, + 'MiSans', + 'HarmonyOS Sans SC', + 'PingFang SC', + 'Source Han Sans SC', + 'Noto Sans SC', + 'Hiragino Sans GB', + 'Microsoft YaHei', sans-serif; } label { - font-weight: 700; + font-weight: 600; } html { @@ -116,11 +118,18 @@ aside { background: #eef1f6; padding: 8px 24px; margin-bottom: 20px; - border-radius: 2px; + border-radius: var(--app-radius-md); display: block; line-height: 32px; font-size: 16px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: + 'MiSans', + 'HarmonyOS Sans SC', + 'PingFang SC', + 'Source Han Sans SC', + 'Noto Sans SC', + 'Hiragino Sans GB', + 'Microsoft YaHei', sans-serif; color: #2c3e50; -webkit-font-smoothing: antialiased; @@ -139,21 +148,27 @@ aside { //main-container全局样式 .app-container { padding: 20px; + background: var(--app-surface-bg); + border: 1px solid var(--app-surface-border); + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-sm); } // search面板样式 .panel, .search { margin-bottom: 0.75rem; - border-radius: 0.25rem; + border-radius: var(--app-radius-lg); border: 1px solid var(--el-border-color-light); background-color: var(--el-bg-color-overlay); padding: 0.75rem; - transition: all ease 0.3s; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; &:hover { - box-shadow: 0 2px 12px #0000001a; - transition: all ease 0.3s; + box-shadow: var(--app-shadow-sm); + border-color: var(--el-border-color); + transform: translateY(-1px); } } diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index 1613411..d50f46f 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -74,7 +74,7 @@ h6 { } .el-form .el-form-item__label { - font-weight: 700; + font-weight: 600; } .el-dialog:not(.is-fullscreen) { margin-top: 6vh !important; @@ -127,7 +127,7 @@ h6 { margin-top: 5px; border: 1px solid #e5e6e7; background: #ffffff none; - border-radius: 4px; + border-radius: var(--app-radius-md); width: 100%; } @@ -190,12 +190,27 @@ h6 { .el-card__header { padding: 14px 15px 7px !important; min-height: 40px; + background: var(--el-fill-color-blank); + border-bottom: 1px solid var(--el-border-color-light); } .el-card__body { padding: 15px 20px 20px 20px !important; } +.el-card { + border-radius: var(--app-radius-lg); + box-shadow: var(--app-shadow-sm); + border-color: var(--el-border-color-lighter); + overflow: hidden; + transition: box-shadow 0.2s ease, transform 0.2s ease; +} + +.el-card:hover { + box-shadow: var(--app-shadow-md); + transform: translateY(-1px); +} + .card-box { margin-bottom: 10px; } diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 6ffcd33..534582e 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -6,6 +6,7 @@ transition: margin-left 0.28s; margin-left: $base-sidebar-width; position: relative; + background: var(--el-bg-color-page); } .sidebarHide { @@ -88,7 +89,7 @@ // menu hover .theme-dark .sub-menu-title-noDropdown, .theme-dark .el-sub-menu__title { - border-radius: 8px; + border-radius: var(--app-radius-md); margin: 1px 5px 1px 5px; &:hover { background-color: $base-sub-menu-title-hover !important; @@ -96,7 +97,7 @@ } .sub-menu-title-noDropdown, .el-sub-menu__title { - border-radius: 8px; + border-radius: var(--app-radius-md); margin: 1px 5px 1px 5px; &:hover { background-color: rgba(0, 0, 0, 0.05) !important; @@ -110,7 +111,7 @@ & .nest-menu .el-sub-menu > .el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: calc($base-sidebar-width - 20px) !important; - border-radius: 8px; + border-radius: var(--app-radius-md); height: 45px; margin: 1px 5px 1px 5px; &:not(.is-active):hover { @@ -121,7 +122,7 @@ & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-dark .el-sub-menu .el-menu-item { background-color: $base-sub-menu-background !important; - border-radius: 8px; + border-radius: var(--app-radius-md); height: 45px; margin: 1px 5px 1px 5px; @@ -137,7 +138,7 @@ & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-dark .el-menu-item { - border-radius: 8px; + border-radius: var(--app-radius-md); height: 45px; margin: 1px 5px 1px 5px; @@ -153,7 +154,7 @@ & .nest-menu .el-sub-menu > .el-sub-menu__title, & .el-menu-item { - border-radius: 8px; + border-radius: var(--app-radius-md); height: 45px; margin: 1px 5px 1px 5px; @@ -196,9 +197,9 @@ & .el-sub-menu { overflow: hidden; - border-radius: 8px; + border-radius: var(--app-radius-md); .el-sub-menu__title.el-tooltip__trigger { - border-radius: 8px; + border-radius: var(--app-radius-md); height: 45px; } @@ -286,11 +287,11 @@ } // 收起菜单后悬浮的菜单样式 .el-popper.is-pure{ - border-radius: 8px; + border-radius: var(--app-radius-md); .el-menu--popup{ - border-radius: 8px; + border-radius: var(--app-radius-md); } .el-menu-item{ - border-radius: 4px; + border-radius: var(--app-radius-sm); } } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 8f9c4bd..1c9db81 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -25,6 +25,24 @@ // 添加 tag 相关变量 --tags-view-active-bg: var(--el-color-primary); --tags-view-active-border-color: var(--el-color-primary); + + // Modern rounded style + soft shadows + --app-radius-sm: 6px; + --app-radius-md: 10px; + --app-radius-lg: 14px; + --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08); + --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12); + --app-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); + --app-surface-bg: #ffffff; + --app-surface-border: var(--el-border-color-lighter); + + // Element Plus tokens + --el-border-radius-base: var(--app-radius-md); + --el-border-radius-small: var(--app-radius-sm); + --el-border-radius-round: 999px; + --el-box-shadow-light: var(--app-shadow-sm); + --el-box-shadow: var(--app-shadow-md); + --el-bg-color-page: #f5f7fb; } html.dark { @@ -48,8 +66,103 @@ html.dark { } .el-button--primary { - --el-button-bg-color: var(--el-color-primary-dark-6); - --el-button-border-color: var(--el-color-primary-light-2); + --el-button-bg-color: #2b6bd3; + --el-button-border-color: #3a7be8; + --el-button-text-color: #eef4ff; + --el-button-hover-bg-color: #3a7be8; + --el-button-hover-border-color: #3a7be8; + --el-button-active-bg-color: #255fb8; + --el-button-active-border-color: #255fb8; + } + + .el-button--primary.is-plain { + --el-button-bg-color: rgba(43, 107, 211, 0.12); + --el-button-border-color: rgba(58, 123, 232, 0.5); + --el-button-text-color: #dbe8ff; + --el-button-hover-bg-color: rgba(58, 123, 232, 0.2); + --el-button-hover-border-color: rgba(58, 123, 232, 0.7); + --el-button-active-bg-color: rgba(43, 107, 211, 0.28); + --el-button-active-border-color: rgba(43, 107, 211, 0.8); + } + + .el-button--success { + --el-button-bg-color: #1f8a5a; + --el-button-border-color: #29a46d; + --el-button-text-color: #eefaf4; + --el-button-hover-bg-color: #29a46d; + --el-button-hover-border-color: #29a46d; + --el-button-active-bg-color: #1b784f; + --el-button-active-border-color: #1b784f; + } + + .el-button--success.is-plain { + --el-button-bg-color: rgba(31, 138, 90, 0.12); + --el-button-border-color: rgba(41, 164, 109, 0.5); + --el-button-text-color: #dbf6e8; + --el-button-hover-bg-color: rgba(41, 164, 109, 0.2); + --el-button-hover-border-color: rgba(41, 164, 109, 0.7); + --el-button-active-bg-color: rgba(31, 138, 90, 0.28); + --el-button-active-border-color: rgba(31, 138, 90, 0.8); + } + + .el-button--warning { + --el-button-bg-color: #b87922; + --el-button-border-color: #d6953b; + --el-button-text-color: #fff7e6; + --el-button-hover-bg-color: #d6953b; + --el-button-hover-border-color: #d6953b; + --el-button-active-bg-color: #a56c1d; + --el-button-active-border-color: #a56c1d; + } + + .el-button--warning.is-plain { + --el-button-bg-color: rgba(184, 121, 34, 0.12); + --el-button-border-color: rgba(214, 149, 59, 0.5); + --el-button-text-color: #ffecc8; + --el-button-hover-bg-color: rgba(214, 149, 59, 0.2); + --el-button-hover-border-color: rgba(214, 149, 59, 0.7); + --el-button-active-bg-color: rgba(184, 121, 34, 0.28); + --el-button-active-border-color: rgba(184, 121, 34, 0.8); + } + + .el-button--danger { + --el-button-bg-color: #b24a4a; + --el-button-border-color: #d16060; + --el-button-text-color: #ffecec; + --el-button-hover-bg-color: #d16060; + --el-button-hover-border-color: #d16060; + --el-button-active-bg-color: #9c3f3f; + --el-button-active-border-color: #9c3f3f; + } + + .el-button--danger.is-plain { + --el-button-bg-color: rgba(178, 74, 74, 0.12); + --el-button-border-color: rgba(209, 96, 96, 0.5); + --el-button-text-color: #ffd6d6; + --el-button-hover-bg-color: rgba(209, 96, 96, 0.2); + --el-button-hover-border-color: rgba(209, 96, 96, 0.7); + --el-button-active-bg-color: rgba(178, 74, 74, 0.28); + --el-button-active-border-color: rgba(178, 74, 74, 0.8); + } + + .el-button--info { + --el-button-bg-color: #4b5563; + --el-button-border-color: #667085; + --el-button-text-color: #f3f4f6; + --el-button-hover-bg-color: #667085; + --el-button-hover-border-color: #667085; + --el-button-active-bg-color: #3f4753; + --el-button-active-border-color: #3f4753; + } + + .el-button--info.is-plain { + --el-button-bg-color: rgba(75, 85, 99, 0.16); + --el-button-border-color: rgba(102, 112, 133, 0.55); + --el-button-text-color: #e5e7eb; + --el-button-hover-bg-color: rgba(102, 112, 133, 0.22); + --el-button-hover-border-color: rgba(102, 112, 133, 0.75); + --el-button-active-bg-color: rgba(75, 85, 99, 0.3); + --el-button-active-border-color: rgba(75, 85, 99, 0.85); } .el-switch { @@ -62,9 +175,41 @@ html.dark { --el-tag-border-color: var(--el-color-primary-light-2); } + .el-tag--success { + --el-tag-bg-color: rgba(31, 138, 90, 0.18); + --el-tag-border-color: rgba(41, 164, 109, 0.6); + --el-tag-text-color: #c7f2df; + } + + .el-tag--warning { + --el-tag-bg-color: rgba(184, 121, 34, 0.18); + --el-tag-border-color: rgba(214, 149, 59, 0.6); + --el-tag-text-color: #ffe6bb; + } + + .el-tag--danger { + --el-tag-bg-color: rgba(178, 74, 74, 0.18); + --el-tag-border-color: rgba(209, 96, 96, 0.6); + --el-tag-text-color: #ffd0d0; + } + + .el-tag--info { + --el-tag-bg-color: rgba(75, 85, 99, 0.18); + --el-tag-border-color: rgba(102, 112, 133, 0.6); + --el-tag-text-color: #e5e7eb; + } + // 在深色模式下使用更深的颜色 --tags-view-active-bg: var(--el-color-primary-dark-6); --tags-view-active-border-color: var(--el-color-primary-light-2); + + // Modern rounded style + soft shadows (dark) + --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.25); + --app-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.35); + --app-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.4); + --app-surface-bg: #151922; + --app-surface-border: var(--el-border-color); + --el-bg-color-page: #0f1115; // vxe-table 主题 --vxe-font-color: #98989e; --vxe-primary-color: #2c7ecf; @@ -137,4 +282,4 @@ $base-sidebar-width: 200px; dangerColor: $--color-danger; infoColor: $--color-info; warningColor: $--color-warning; -} \ No newline at end of file +} diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index b6c7b61..3c007aa 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -89,11 +89,11 @@ function addIframe() { } ::-webkit-scrollbar-track { - background-color: #f1f1f1; + background-color: var(--el-fill-color-lighter); } ::-webkit-scrollbar-thumb { - background-color: #c0c0c0; - border-radius: 3px; + background-color: var(--el-text-color-placeholder); + border-radius: 999px; } diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 667b012..d39c81a 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -238,8 +238,9 @@ watch( height: 50px; overflow: hidden; position: relative; - //background: #fff; - box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + background: var(--el-bg-color); + border-bottom: 1px solid var(--el-border-color-lighter); + box-shadow: none; display: flex; align-items: center; // padding: 0 8px; @@ -258,7 +259,7 @@ watch( margin-right: 8px; &:hover { - background: rgba(0, 0, 0, 0.025); + background: var(--el-fill-color-lighter); } } @@ -304,7 +305,7 @@ watch( padding: 0 8px; height: 100%; font-size: 18px; - color: #5a5e66; + color: var(--el-text-color-regular); vertical-align: text-bottom; &.hover-effect { @@ -312,7 +313,7 @@ watch( transition: background 0.3s; &:hover { - background: rgba(0, 0, 0, 0.025); + background: var(--el-fill-color-lighter); } } } @@ -328,7 +329,7 @@ watch( cursor: pointer; width: 40px; height: 40px; - border-radius: 10px; + border-radius: var(--app-radius-md); margin-top: 10px; } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index e9ee675..92c52a3 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -244,9 +244,8 @@ onMounted(() => { width: 100%; background-color: var(--el-bg-color); border: 1px solid var(--el-border-color-light); - box-shadow: - 0 1px 3px 0 rgba(0, 0, 0, 0.12), - 0 0 3px 0 rgba(0, 0, 0, 0.04); + border-radius: var(--app-radius-md); + box-shadow: var(--app-shadow-sm); .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -261,9 +260,13 @@ onMounted(() => { font-size: 12px; margin-left: 5px; margin-top: 4px; - border-radius: 4px; + border-radius: var(--app-radius-md); + transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; &:hover { color: var(--el-color-primary); + border-color: var(--el-color-primary-light-5); + box-shadow: var(--app-shadow-sm); + transform: translateY(-1px); } &:first-of-type { margin-left: 15px; @@ -302,16 +305,16 @@ onMounted(() => { position: absolute; list-style-type: none; padding: 5px 0; - border-radius: 4px; + border-radius: var(--app-radius-md); font-size: 12px; font-weight: 400; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); + box-shadow: var(--app-shadow-md); li { margin: 0; padding: 7px 16px; cursor: pointer; &:hover { - background: #eee; + background: var(--el-fill-color-light); } } } diff --git a/src/views/login.vue b/src/views/login.vue index 9225ac9..a890c63 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -240,29 +240,38 @@ onMounted(() => { height: 100%; background-image: url('../assets/images/login-background.jpg'); background-size: cover; + background-position: center; } .title-box { display: flex; + align-items: center; + gap: 8px; .title { - margin: 0px auto 30px auto; + margin: 0px auto 26px auto; text-align: center; - color: #707070; + color: var(--el-text-color-primary); + font-weight: 600; + letter-spacing: 0.5px; } :deep(.lang-select--style) { line-height: 0; - color: #7483a3; + color: var(--el-text-color-secondary); } } .login-form { - border-radius: 6px; - background: #ffffff; - width: 400px; - padding: 25px 25px 5px 25px; + border-radius: var(--app-radius-lg); + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(255, 255, 255, 0.5); + width: min(420px, 90vw); + padding: 32px 30px 12px 30px; z-index: 1; + box-shadow: var(--app-shadow-lg); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); .el-input { height: 40px; input { @@ -283,14 +292,48 @@ onMounted(() => { color: #bfbfbf; } +.login-form :deep(.el-input__wrapper) { + background-color: rgba(255, 255, 255, 0.9); +} + +.login-form :deep(.el-input__wrapper.is-focus) { + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); +} + +.login-form :deep(.el-button--primary) { + border-radius: var(--app-radius-md); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25); +} + +.login-form :deep(.el-button.is-circle) { + background: rgba(15, 23, 42, 0.04); + border: 1px solid rgba(15, 23, 42, 0.08); + color: var(--el-text-color-regular); +} + +.login-form :deep(.el-button.is-circle:hover) { + background: rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.2); +} + .login-code { - width: 33%; + width: calc(37% - 10px); height: 40px; float: right; + margin-left: 10px; + box-sizing: border-box; + border-radius: var(--app-radius-sm); + overflow: hidden; + background: rgba(255, 255, 255, 0.9); + border: 1px solid var(--el-border-color-light); img { cursor: pointer; vertical-align: middle; + display: block; + width: 100%; + height: 40px; + object-fit: cover; } } @@ -301,7 +344,7 @@ onMounted(() => { bottom: 0; width: 100%; text-align: center; - color: #fff; + color: rgba(255, 255, 255, 0.75); font-family: Arial, serif; font-size: 12px; letter-spacing: 1px; @@ -309,6 +352,27 @@ onMounted(() => { .login-code-img { height: 40px; - padding-left: 12px; + padding-left: 0; +} + +:global(html.dark) { + .login-form { + background: rgba(17, 24, 39, 0.9); + border-color: rgba(148, 163, 184, 0.2); + } + + .login-form :deep(.el-input__wrapper) { + background-color: rgba(17, 24, 39, 0.7); + } + + .login-form :deep(.el-button.is-circle) { + background: rgba(148, 163, 184, 0.12); + border-color: rgba(148, 163, 184, 0.25); + color: #e5e7eb; + } + + .el-login-footer { + color: rgba(226, 232, 240, 0.65); + } } diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue index eef3c0a..1610559 100644 --- a/src/views/workflow/task/allTaskWaiting.vue +++ b/src/views/workflow/task/allTaskWaiting.vue @@ -27,8 +27,12 @@