diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index a69b89f..d9a7711 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -192,7 +192,7 @@ // Buttons .el-button { - border-radius: var(--app-radius-md); + border-radius: var(--el-border-radius-base); transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 819dd7c..90685db 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -115,7 +115,7 @@ div:focus { } aside { - background: #eef1f6; + background: var(--el-fill-color-light); padding: 8px 24px; margin-bottom: 20px; border-radius: var(--app-radius-md); @@ -131,43 +131,43 @@ aside { 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; - color: #2c3e50; + color: var(--el-text-color-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; a { - color: #337ab7; + color: var(--el-color-primary); cursor: pointer; &:hover { - color: rgb(32, 160, 255); + color: var(--el-color-primary-light-3); } } } //main-container全局样式 .app-container { - padding: 20px; - background: var(--app-surface-bg); - border: 1px solid var(--app-surface-border); - border-radius: var(--app-radius-base); - box-shadow: var(--app-shadow-sm); + padding: 16px; + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; } // search面板样式 .panel, .search { - margin-bottom: 0.75rem; + margin-bottom: 12px; border-radius: var(--app-radius-base); - border: 1px solid var(--el-border-color-light); - padding: 0.75rem; - 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; + border: 1px solid var(--el-border-color-lighter); + padding: 16px; + background: var(--app-surface-bg); + box-shadow: var(--app-shadow-sm); + transition: box-shadow 0.2s ease, border-color 0.2s ease; &:hover { - box-shadow: var(--app-shadow-sm); - border-color: var(--el-border-color); - transform: translateY(-1px); + box-shadow: var(--app-shadow-md); + border-color: var(--el-border-color-light); } } diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index d50f46f..c78b2c3 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -77,7 +77,7 @@ h6 { font-weight: 600; } .el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; + margin-top: 0 !important; } .el-dialog.scrollbar .el-dialog__body { @@ -125,8 +125,8 @@ h6 { /* tree border */ .tree-border { margin-top: 5px; - border: 1px solid #e5e6e7; - background: #ffffff none; + border: 1px solid var(--el-border-color-light); + background: var(--el-bg-color); border-radius: var(--app-radius-md); width: 100%; } @@ -203,12 +203,11 @@ h6 { 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; + transition: box-shadow 0.2s ease; } .el-card:hover { box-shadow: var(--app-shadow-md); - transform: translateY(-1px); } .card-box { diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index cf5ae6e..004f196 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -27,9 +27,10 @@ --tags-view-active-border-color: var(--el-color-primary); // Modern rounded style + soft shadows - --app-radius-base: 14px; - --app-radius-sm: calc(var(--app-radius-base) - 8px); - --app-radius-md: calc(var(--app-radius-base) - 4px); + --app-radius-base: 8px; + --app-radius-sm: calc(var(--app-radius-base) * 0.6); + --app-radius-md: var(--app-radius-base); + --app-radius-lg: calc(var(--app-radius-base) * 1.4); --app-radius-lg: var(--app-radius-base); --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); @@ -53,7 +54,7 @@ html.dark { --menuHover: #171819; --subMenuBg: #1d1e1f; - --subMenuActiveText: #1d1e1f; + --subMenuActiveText: #f4f4f5; --subMenuHover: #171819; --subMenuTitleHover: #171819; diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index d39c81a..a862ded 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -38,7 +38,7 @@