From 9f5e18cc415cd3fef13f105ffeabae3c01ba9665 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 13:02:18 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/index.scss | 35 ++++----
src/views/customerService/feedbackRegistration/components/formDia.vue | 2
src/layout/components/Navbar.vue | 23 ++---
src/assets/styles/element-ui.scss | 35 ++++----
src/settings.js | 2
src/views/customerService/components/viewDia.vue | 2
src/assets/styles/variables.module.scss | 41 +++++-----
src/store/modules/settings.js | 2
src/utils/theme.js | 6 +
src/assets/styles/ruoyi.scss | 7 +
src/views/login.vue | 8 +-
src/layout/components/Sidebar/Logo.vue | 2
src/components/TopNav/index.vue | 19 ++--
src/layout/components/Settings/index.vue | 4
src/assets/image copy.png | 0
15 files changed, 102 insertions(+), 86 deletions(-)
diff --git a/src/assets/image copy.png b/src/assets/image copy.png
new file mode 100644
index 0000000..7e69227
--- /dev/null
+++ b/src/assets/image copy.png
Binary files differ
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 7e772a7..330c034 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -149,11 +149,7 @@
box-sizing: content-box;
}
-.el-menu--collapse
- > div
- > .el-submenu
- > .el-submenu__title
- .el-submenu__icon-arrow {
+.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
@@ -201,25 +197,32 @@
}
.el-table {
- --el-table-border-color: var(--surface-border);
- --el-table-header-bg-color: #f2f7ff;
- --el-table-row-hover-bg-color: #f8fbff;
- --el-table-current-row-bg-color: #edf4ff;
- border-radius: var(--radius-md);
+ --el-table-border-color: var(--surface-border-strong);
+ --el-table-header-bg-color: var(--table-header-bg-custom, #ede9fe);
+ --el-table-row-hover-bg-color: rgba(var(--el-color-primary-rgb), 0.04);
+ --el-table-current-row-bg-color: rgba(var(--el-color-primary-rgb), 0.08);
+ border-radius: 0;
+ border: 1px solid var(--surface-border-strong);
background: rgba(255, 255, 255, 0.94) !important;
}
.el-table th.el-table__cell {
- background: #f2f7ff !important;
- color: #3b4f6c;
- font-weight: 600;
+ background: var(--el-table-header-bg-color) !important;
+ color: var(--table-header-text-custom, #1e293b) !important;
+ font-weight: 700;
+ font-size: 14px;
+ border-bottom: 1px solid var(--surface-border-strong) !important;
}
-.el-table tr,
+.el-table tr {
+ background: rgba(255, 255, 255, 0.92) !important;
+}
+
.el-table td.el-table__cell,
.el-table__body tr > td.el-table__cell {
background: rgba(255, 255, 255, 0.92) !important;
color: var(--text-secondary);
+ border-bottom: 1px solid var(--surface-border-strong) !important;
}
.el-table .el-table__body tr:hover > td.el-table__cell {
@@ -231,13 +234,13 @@
}
.el-table .el-table__footer-wrapper {
- border-top: 1px solid var(--surface-border);
+ border-top: 1px solid var(--surface-border-strong);
}
.el-table .el-table__footer-wrapper tbody td.el-table__cell,
.el-table .el-table__footer-wrapper tfoot td.el-table__cell {
background: var(--surface-base) !important;
- border-top: 1px solid var(--surface-border);
+ border-top: 1px solid var(--surface-border-strong);
font-weight: 600;
}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index c44943f..91a59b7 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -13,8 +13,8 @@
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
- background: radial-gradient(circle at 9% -6%, rgba(59, 130, 246, 0.14), transparent 36%), radial-gradient(circle at 88% -8%, rgba(56, 189, 248, 0.12), transparent 30%),
- linear-gradient(165deg, #f3f7fc 0%, #eef5ff 54%, #f8fbff 100%);
+ background: radial-gradient(circle at 9% -6%, rgba(139, 92, 246, 0.14), transparent 36%), radial-gradient(circle at 88% -8%, rgba(168, 85, 247, 0.12), transparent 30%),
+ linear-gradient(165deg, #faf5ff 0%, #f3e8ff 54%, #fbf8ff 100%);
color: var(--text-primary);
}
@@ -134,18 +134,18 @@
//main-container鍏ㄥ眬鏍峰紡
.app-container {
- --radius-lg: 0px;
- --radius-md: 0px;
- --radius-sm: 0px;
- --radius-xs: 0px;
- --el-border-radius-base: 0px;
- --el-border-radius-small: 0px;
- --el-border-radius-round: 0px;
- --el-border-radius-circle: 0px;
-
+ --radius-lg: 0px;
+ --radius-md: 0px;
+ --radius-sm: 0px;
+ --radius-xs: 0px;
+ --el-border-radius-base: 0px;
+ --el-border-radius-small: 0px;
+ --el-border-radius-round: 0px;
+ --el-border-radius-circle: 0px;
+
padding: 20px;
background-color: var(--surface-base, #ffffff);
- border-radius: 0;
+ border-radius: 0;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
border: 1px solid var(--surface-border, #e2e8f0);
min-height: calc(100vh - var(--topbar-height, 64px) - var(--content-gap, 16px) - 20px);
@@ -153,7 +153,7 @@
@media (max-width: 768px) {
padding: 12px;
- border-radius: 0;
+ border-radius: 0;
}
}
.search_form {
@@ -195,7 +195,7 @@
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
- background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+ background: linear-gradient(90deg, rgba(168, 85, 247, 1) 0%, rgba(139, 92, 246, 1) 100%);
.subtitle {
font-size: 20px;
@@ -217,7 +217,7 @@
cursor: pointer;
&:hover {
- color: #2563eb;
+ color: #7c3aed;
}
}
@@ -237,10 +237,13 @@
.el-card,
.el-dialog,
.el-drawer,
- .el-table,
.el-descriptions,
.el-collapse-item__wrap,
.el-tabs__content {
border-radius: var(--radius-md);
}
}
+
+.el-table {
+ border-radius: 0 !important;
+}
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index 3170a9c..6ecf408 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -77,10 +77,11 @@
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
word-break: break-word;
- background-color: #F0F1F5 !important;
- color: #515a6e;
+ background-color: var(--el-table-header-bg-color) !important;
+ color: var(--table-header-text-custom, #1e293b) !important;
height: 40px !important;
- font-size: 13px;
+ font-weight: 700;
+ font-size: 14px;
}
}
.el-table__body-wrapper {
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 625d3b0..ce6acfa 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -12,11 +12,11 @@
$menuText: #5a6478;
$menuActiveText: #ffffff;
$menuBg: #f8fafb;
-$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
+$menuHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);
// light theme - 浣跨敤涓婚鑹�
$menuLightBg: #f8fafb;
-$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
+$menuLightHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);
$menuLightText: #3d4858;
$menuLightActiveText: #ffffff;
@@ -27,13 +27,13 @@
// sidebar - 浼樺寲鍚庣殑渚ц竟鏍忛厤鑹�
$base-menu-color: #5a6478;
-$base-menu-color-active: #0d9488;
+$base-menu-color-active: #8b5cf6;
$base-menu-background: #f8fafb;
$base-sub-menu-background: #f0f5f4;
$base-sub-menu-hover: #ffffff;
// component - 浼樺寲鍚庣殑涓婚鑹�
-$--color-primary: #0d9488;
+$--color-primary: #8b5cf6;
$--color-success: #67c23a;
$--color-warning: #d89b41;
$--color-danger: #d25b52;
@@ -73,19 +73,19 @@
--content-radius: 10px;
--layout-header-z: 20;
- --el-color-primary: #008c8c;
- --el-color-primary-rgb: 0, 140, 140;
+ --el-color-primary: #8b5cf6;
+ --el-color-primary-rgb: 139, 92, 246;
--el-color-success: #14b8a6;
--el-color-warning: #f59e0b;
--el-color-danger: #ef4444;
- --sidebar-bg: #304156;
- --sidebar-text: #bfcbd9;
+ --sidebar-bg: #f8fafb;
+ --sidebar-text: #5a6478;
--sidebar-muted: #8b9bb4;
- --menu-hover: #263445;
- --menu-active-bg: transparent;
- --menu-active-text: #409eff;
- --menu-surface: #304156;
+ --menu-hover: rgba(139, 92, 246, 0.08);
+ --menu-active-bg: rgba(139, 92, 246, 0.1);
+ --menu-active-text: #8b5cf6;
+ --menu-surface: #ffffff;
--menu-active-glow: none;
--app-bg: #f8fafc;
@@ -94,7 +94,7 @@
--surface-soft: rgba(255, 255, 255, 0.9);
--surface-muted: #f1f5f9;
--surface-border: #e2e8f0;
- --surface-border-strong: #cbd5e1;
+ --surface-border-strong: #94a3b8;
--text-primary: #0f172a;
--text-secondary: #334155;
--text-tertiary: #64748b;
@@ -111,7 +111,7 @@
--el-border-radius-round: 999px;
--el-border-radius-circle: 50%;
- --navbar-bg: rgba(30, 41, 59, 0.85);
+ --navbar-bg: #4b23a0;
--navbar-text: #f8fafc;
--navbar-hover: rgba(255, 255, 255, 0.08);
@@ -122,7 +122,7 @@
--tags-item-hover: #f1f5f9;
--tags-close-hover: rgba(239, 68, 68, 0.1);
- --accent-primary: #008c8c;
+ --accent-primary: #8b5cf6;
--accent-light: #3b82f6;
--accent-lighter: #60a5fa;
@@ -231,16 +231,17 @@
}
.el-table {
- --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
- --el-table-header-text-color: var(--el-text-color-regular) !important;
- --el-table-border-color: var(--el-border-color-light) !important;
+ --el-table-header-bg-color: var(--table-header-bg-custom, #e9d5ff) !important;
+ --el-table-header-text-color: var(--table-header-text-custom, #1e293b) !important;
+ --el-table-border-color: rgba(148, 163, 184, 0.4) !important;
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
+ border-radius: 0;
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
- background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
- color: var(--el-text-color-regular, #515a6e);
+ background-color: var(--el-table-header-bg-color) !important;
+ color: var(--el-table-header-text-color) !important;
}
}
}
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 27de555..2151eb5 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -21,7 +21,7 @@
<sidebar-item v-for="(routeItem, index) in topbarRouters"
:key="routeItem.path + index"
:item="routeItem"
- :base-path="routeItem.path" />
+ :base-path="routeItem.path" />
</el-menu>
</div>
<button v-show="showArrows"
@@ -174,10 +174,12 @@
:deep(.top-nav-menu.el-menu--horizontal > .el-menu-item),
:deep(.top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title) {
- height: var(--topbar-height);
+ height: 100%;
line-height: var(--topbar-height);
+ display: flex;
+ align-items: center;
padding: 0 12px;
- color: var(--text-secondary);
+ color: var(--navbar-text);
border-bottom: 2px solid transparent;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@@ -188,8 +190,8 @@
:deep(
.top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title:hover
) {
- background: rgba(var(--el-color-primary-rgb), 0.06);
- color: var(--el-color-primary);
+ background: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
}
:deep(.top-nav-menu.el-menu--horizontal > .el-menu-item.is-active),
@@ -198,10 +200,10 @@
> .el-sub-menu.is-active
> .el-sub-menu__title
) {
- background: rgba(var(--el-color-primary-rgb), 0.06);
- color: var(--el-color-primary);
+ background: rgba(255, 255, 255, 0.15);
+ color: #ffffff;
font-weight: 600;
- border-bottom-color: var(--el-color-primary);
+ border-bottom-color: #ffffff;
}
:deep(.top-nav-menu.el-menu--horizontal > .el-menu-item .svg-icon),
@@ -212,5 +214,6 @@
.svg-icon
) {
margin-right: 8px;
+ vertical-align: middle;
}
</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 771c3f3..5be2b8e 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -231,10 +231,10 @@
align-items: center;
justify-content: space-between;
padding: 0 24px 0 0;
- background: #fff;
- border-bottom: 1px solid #d8dce5;
+ background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
z-index: var(--layout-header-z);
+ color: var(--navbar-text);
}
.navbar-left {
@@ -252,13 +252,12 @@
transition: width 0.25s ease;
overflow: hidden;
flex-shrink: 0;
- background-color: #fff; // 寮哄埗璁句负鐧借壊鑳屾櫙
- // border-right: 1px solid #d8dce5; // 澧炲姞鍙充晶杈规浠ュ尯鍒嗗鑸爮涓讳綋
+ background-color: transparent;
}
.top-nav-wrapper {
display: flex;
- align-items: center;
+ align-items: stretch; /* 鍗犳弧楂樺害 */
height: 100%;
min-width: 0;
flex: 1;
@@ -290,15 +289,15 @@
display: flex;
align-items: center;
justify-content: center;
- color: var(--text-secondary);
+ color: var(--navbar-text);
border-radius: 50%; // 鍦嗗舰鑳屾櫙
- background: rgba(0, 0, 0, 0.04); // 娴呮祬鐨勫渾褰㈡搴曡壊
+ background: rgba(255, 255, 255, 0.1); // 娴呮祬鐨勫渾褰㈡搴曡壊
transition: all 0.2s ease;
cursor: pointer;
&:hover {
- background: rgba(0, 0, 0, 0.08); // 鎮仠鍔犳繁
- color: var(--el-color-primary);
+ background: rgba(255, 255, 255, 0.2); // 鎮仠鍔犳繁
+ color: #fff;
}
:deep(.svg-icon) {
@@ -335,7 +334,7 @@
transition: 0.2s ease;
&:hover {
- background: rgba(0, 0, 0, 0.05);
+ background: rgba(255, 255, 255, 0.1);
}
}
@@ -349,7 +348,7 @@
.user-name {
font-size: 13px;
font-weight: 500;
- color: var(--text-primary);
+ color: var(--navbar-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -387,7 +386,7 @@
}
.caret-icon {
- color: var(--text-secondary);
+ color: var(--navbar-text);
opacity: 0.76;
font-size: 12px;
transition: 0.2s ease;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 69398f2..eb6edd2 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -153,10 +153,10 @@
const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore);
const predefineColors = ref([
- "#008C8C",
+ "#5BA0D2",
"#81D8D0",
"#E85827",
- "#008C8C",
+ "#5BA0D2",
"#F9DC24",
"#B05923",
"#003153",
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 569f843..2a12c6d 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -138,7 +138,7 @@
.sidebar-title {
display: inline-block;
margin: 0;
- color: #333; // 鐧借壊鑳屾櫙涓嬮渶瑕佹繁鑹插瓧浣�
+ color: #fff;
font-weight: 600;
line-height: var(--topbar-height, 64px);
font-size: 16px;
diff --git a/src/settings.js b/src/settings.js
index 678de16..d94153e 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -6,7 +6,7 @@
/**
* 渚ц竟鏍忎富棰� 娣辫壊涓婚theme-dark锛屾祬鑹蹭富棰榯heme-light
*/
- sideTheme: 'theme-dark',
+ sideTheme: 'theme-light',
/**
* 鏄惁绯荤粺甯冨眬閰嶇疆
*/
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index cbaa912..b55a824 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -17,7 +17,7 @@
const useSettingsStore = defineStore("settings", () => {
const title = ref("");
- const theme = ref(storageSetting.theme || "#008C8C");
+ const theme = ref(storageSetting.theme || "#5BA0D2");
const sideThemeValue = ref(storageSetting.sideTheme || sideTheme);
const showSettingsValue = ref(showSettings);
const topNavValue = ref(storageSetting.topNav === undefined ? topNav : storageSetting.topNav);
diff --git a/src/utils/theme.js b/src/utils/theme.js
index a992ae1..9d6ef0d 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -53,6 +53,12 @@
document.documentElement.style.setProperty("--menu-hover", `rgba(${r}, ${g}, ${b}, ${isDarkTheme ? 0.12 : 0.08})`);
document.documentElement.style.setProperty("--navbar-hover", `rgba(${r}, ${g}, ${b}, 0.1)`);
+ // 琛ㄦ牸琛ㄥご棰滆壊鑱斿姩 (璺熼殢涓婚锛屼絾棰滆壊杈冩祬)
+ const tableHeaderBg = getLightColor(primary, 0.92);
+ const tableHeaderText = getDarkColor(primary, 0.6); // 濮嬬粓鍥哄畾涓烘繁鑹诧紝浠ヨ鐩栨祬鑹茬増鏈殑闇�姹�
+ document.documentElement.style.setProperty("--table-header-bg-custom", tableHeaderBg);
+ document.documentElement.style.setProperty("--table-header-text-custom", tableHeaderText);
+
// 杈规棰滆壊鑱斿姩
document.documentElement.style.setProperty("--surface-border", `rgba(${r}, ${g}, ${b}, 0.12)`);
}
diff --git a/src/views/customerService/components/viewDia.vue b/src/views/customerService/components/viewDia.vue
index 262151a..2730161 100644
--- a/src/views/customerService/components/viewDia.vue
+++ b/src/views/customerService/components/viewDia.vue
@@ -154,7 +154,7 @@
transform: translateY(-50%);
width: 4px;
height: 1rem;
- background-color: #008c8c;
+ background-color: #8b5cf6;
border-radius: 2px;
}
</style>
diff --git a/src/views/customerService/feedbackRegistration/components/formDia.vue b/src/views/customerService/feedbackRegistration/components/formDia.vue
index a26d065..ef153a2 100644
--- a/src/views/customerService/feedbackRegistration/components/formDia.vue
+++ b/src/views/customerService/feedbackRegistration/components/formDia.vue
@@ -522,7 +522,7 @@
transform: translateY(-50%);
width: 4px;
height: 1rem;
- background-color: #008c8c; /* Element 榛樿绾㈣壊 */
+ background-color: #8b5cf6; /* Element 榛樿绾㈣壊 */
border-radius: 2px;
}
</style>
diff --git a/src/views/login.vue b/src/views/login.vue
index b14cad6..02278fb 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -3,10 +3,10 @@
:style="{ backgroundImage: `url(${backgroundImage})` }">
<main class="page">
<section class="login-wrap">
- <div class="time">
+ <!-- <div class="time">
<span>{{ todayLabel }}</span>
{{ clockLabel }}
- </div>
+ </div> -->
<form class="login-card"
@submit.prevent="handleLogin">
<div class="brand card-brand">
@@ -266,8 +266,8 @@
<style scoped lang="scss">
.login-page {
- --accent: var(--accent-primary, var(--el-color-primary, #008c8c));
- --accent-rgb: var(--el-color-primary-rgb, 22, 116, 88);
+ --accent: var(--accent-primary, var(--el-color-primary, #8b5cf6));
+ --accent-rgb: var(--el-color-primary-rgb, 139, 92, 246);
--text: #0f172a;
--muted: #64748b;
--border: rgba(15, 23, 42, 0.1);
--
Gitblit v1.9.3