首页美化一下

This commit is contained in:
liuwei
2026-02-27 12:22:07 +08:00
parent 44297e0448
commit 10a3f18540
8 changed files with 179 additions and 133 deletions

View File

@@ -14,24 +14,32 @@
GLOBAL RESET GLOBAL RESET
------------------------------ */ ------------------------------ */
:root { :root {
--tech-bg: #0b1d33; --tech-bg: #0a0b0f;
--tech-bg-2: #0f2545; --tech-bg-2: #0c0e14;
--tech-accent: #5bd3ff; --tech-panel: #11151f;
--tech-accent-2: #41bff0; --tech-panel-2: #141a28;
--tech-panel: #f9fbff; --tech-border: #1e2535;
--tech-panel-2: #f2f7ff; --tech-border-2: #252d42;
--tech-border: #d6e6ff; --tech-text: #e2e8f0;
--tech-text: #22324a; --tech-text-strong: #f1f5f9;
--tech-text-muted: #6b86a8; --tech-text-muted: #94a3b8;
--tech-shadow: 0 6px 16px rgba(11, 29, 51, 0.06); --tech-accent: #7c3aed;
--tech-accent-2: #8b5cf6;
--tech-highlight: #a78bfa;
--tech-silver: #cbd5e1;
--tech-glow: #22d3ee;
--tech-success: #34d399;
--tech-warning: #fbbf24;
--tech-danger: #f87171;
--tech-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f2f6fb; background: var(--tech-bg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
color: #22324a; color: var(--tech-text);
overflow: hidden; /* 禁止 body 出滚动条 */ overflow: hidden; /* 禁止 body 出滚动条 */
} }
@@ -55,12 +63,12 @@
.header { .header {
height: 58px; height: 58px;
padding: 0 16px; padding: 0 16px;
background: #0b1d33; background: var(--tech-panel);
border-bottom: 1px solid #0f2a4a; border-bottom: 1px solid var(--tech-border);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 2px 10px rgba(0, 163, 255, 0.12); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -72,8 +80,8 @@
right: 12px; right: 12px;
bottom: 0; bottom: 0;
height: 1px; height: 1px;
background: rgba(91, 211, 255, 0.35); background: rgba(167, 139, 250, 0.5);
box-shadow: 0 0 8px rgba(91, 211, 255, 0.4); box-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
} }
.header-left { .header-left {
@@ -85,7 +93,7 @@
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: 8px; margin-right: 8px;
filter: drop-shadow(0 0 6px rgba(91, 211, 255, 0.35)); filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45));
} }
.header-right { .header-right {
@@ -96,19 +104,19 @@
.user-info { .user-info {
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
color: #cfe6ff; color: var(--tech-text-muted);
} }
.logout-btn { .logout-btn {
color: #9fd7ff; color: var(--tech-text);
font-weight: 500; font-weight: 500;
transition: 0.2s; transition: 0.2s;
} }
.logout-btn:hover { .logout-btn:hover {
color: #5bd3ff; color: var(--tech-accent-2);
} }
.header h2 { .header h2 {
color: #e6f3ff; color: var(--tech-text-strong);
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@@ -125,9 +133,9 @@
------------------------------ */ ------------------------------ */
.sidebar { .sidebar {
width: 190px; width: 190px;
background: #0b1d33; background: var(--tech-bg-2);
border-right: 1px solid #0f2a4a; border-right: 1px solid var(--tech-border);
box-shadow: 4px 0 14px rgba(0, 163, 255, 0.12); box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
} }
/* Element 菜单自定义美化 */ /* Element 菜单自定义美化 */
@@ -142,20 +150,20 @@
line-height: 46px !important; line-height: 46px !important;
margin: 4px 2px !important; margin: 4px 2px !important;
border-radius: 6px !important; border-radius: 6px !important;
color: #cfe6ff !important; color: var(--tech-text-muted) !important;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important; transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
position: relative; position: relative;
} }
.el-menu-item:hover { .el-menu-item:hover {
background: rgba(60, 203, 255, 0.12) !important; background: rgba(124, 58, 237, 0.18) !important;
color: #e9f6ff !important; color: var(--tech-text-strong) !important;
} }
.el-menu-item.is-active { .el-menu-item.is-active {
background: rgba(60, 203, 255, 0.18) !important; background: rgba(124, 58, 237, 0.25) !important;
color: #5bd3ff !important; color: var(--tech-accent-2) !important;
font-weight: 600; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(91, 211, 255, 0.35), box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35),
0 0 10px rgba(91, 211, 255, 0.25); 0 0 12px rgba(167, 139, 250, 0.35);
} }
.el-menu-item.is-active::before { .el-menu-item.is-active::before {
content: ""; content: "";
@@ -164,17 +172,17 @@
top: 10px; top: 10px;
bottom: 10px; bottom: 10px;
width: 3px; width: 3px;
background: #5bd3ff; background: var(--tech-accent-2);
box-shadow: 0 0 10px rgba(91, 211, 255, 0.6); box-shadow: 0 0 10px rgba(167, 139, 250, 0.7);
border-radius: 2px; border-radius: 2px;
} }
.el-menu-item i { .el-menu-item i {
color: #8db7e6 !important; color: #a1adc2 !important;
margin-right: 6px; margin-right: 6px;
} }
.el-menu-item.is-active i, .el-menu-item.is-active i,
.el-menu-item:hover i { .el-menu-item:hover i {
color: #5bd3ff !important; color: var(--tech-accent-2) !important;
} }
/* ------------------------------ /* ------------------------------
@@ -184,7 +192,7 @@
flex: 1; flex: 1;
padding: 16px; padding: 16px;
overflow-y: auto; overflow-y: auto;
background: #f2f6fb; background: var(--tech-bg);
position: relative; position: relative;
} }
.content::before { .content::before {
@@ -192,9 +200,9 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: background-image:
linear-gradient(rgba(91, 211, 255, 0.08) 1px, transparent 1px), linear-gradient(rgba(37, 45, 66, 0.6) 1px, transparent 1px),
linear-gradient(90deg, rgba(91, 211, 255, 0.08) 1px, transparent 1px); linear-gradient(90deg, rgba(37, 45, 66, 0.6) 1px, transparent 1px);
background-size: 24px 24px; background-size: 28px 28px;
opacity: 0.35; opacity: 0.35;
pointer-events: none; pointer-events: none;
} }
@@ -205,8 +213,8 @@
right: 12px; right: 12px;
top: 0; top: 0;
height: 1px; height: 1px;
background: rgba(91, 211, 255, 0.4); background: rgba(167, 139, 250, 0.45);
box-shadow: 0 0 10px rgba(91, 211, 255, 0.6); box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
pointer-events: none; pointer-events: none;
} }
.content > * { .content > * {
@@ -217,9 +225,9 @@
/* 全局卡片样式统一 */ /* 全局卡片样式统一 */
.el-card { .el-card {
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: 0 6px 18px rgba(11, 29, 51, 0.06) !important; box-shadow: var(--tech-shadow) !important;
border: 1px solid #d6e6ff !important; border: 1px solid var(--tech-border) !important;
background: #ffffff !important; background: var(--tech-panel) !important;
} }
.el-card__body { .el-card__body {
padding: 12px !important; padding: 12px !important;
@@ -262,14 +270,14 @@
} }
.el-button--primary { .el-button--primary {
background: #2f6bff !important; background: var(--tech-accent) !important;
border-color: #2f6bff !important; border-color: var(--tech-accent) !important;
color: #ffffff !important; color: #ffffff !important;
} }
.el-button--primary:hover, .el-button--primary:hover,
.el-button--primary:focus { .el-button--primary:focus {
background: #1f5ad6 !important; background: var(--tech-accent-2) !important;
border-color: #1f5ad6 !important; border-color: var(--tech-accent-2) !important;
color: #ffffff !important; color: #ffffff !important;
} }
.el-button--success, .el-button--success,
@@ -278,6 +286,22 @@
.el-button--info { .el-button--info {
color: #ffffff !important; color: #ffffff !important;
} }
.el-button--success {
background: var(--tech-success) !important;
border-color: var(--tech-success) !important;
}
.el-button--warning {
background: var(--tech-warning) !important;
border-color: var(--tech-warning) !important;
}
.el-button--danger {
background: var(--tech-danger) !important;
border-color: var(--tech-danger) !important;
}
.el-button--info {
background: #64748b !important;
border-color: #64748b !important;
}
.el-button--success:hover, .el-button--success:hover,
.el-button--warning:hover, .el-button--warning:hover,
.el-button--danger:hover, .el-button--danger:hover,
@@ -289,9 +313,9 @@
color: #ffffff !important; color: #ffffff !important;
} }
.el-button--default { .el-button--default {
background: #ffffff !important; background: var(--tech-panel-2) !important;
border-color: var(--tech-border) !important; border-color: var(--tech-border) !important;
color: #2a3b55 !important; color: var(--tech-text) !important;
} }
.el-button--default:hover, .el-button--default:hover,
.el-button--default:focus { .el-button--default:focus {
@@ -304,18 +328,31 @@
.el-input__inner, .el-input__inner,
.el-textarea__inner { .el-textarea__inner {
background: #f7faff !important; background: var(--tech-panel-2) !important;
border-color: var(--tech-border) !important; border-color: var(--tech-border) !important;
color: var(--tech-text) !important; color: var(--tech-text) !important;
} }
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
color: var(--tech-text-muted) !important;
}
.el-input__inner:focus, .el-input__inner:focus,
.el-textarea__inner:focus { .el-textarea__inner:focus {
border-color: var(--tech-accent) !important; border-color: var(--tech-accent) !important;
box-shadow: 0 0 0 2px rgba(91, 211, 255, 0.15) !important; box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2) !important;
} }
.el-table { .el-table {
color: var(--tech-text) !important; color: var(--tech-text) !important;
background: var(--tech-panel) !important;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
background: var(--tech-panel) !important;
}
.el-table tr {
background: var(--tech-panel) !important;
} }
.el-table th { .el-table th {
background: var(--tech-panel-2) !important; background: var(--tech-panel-2) !important;
@@ -334,12 +371,12 @@
border-right: 1px solid var(--tech-border) !important; border-right: 1px solid var(--tech-border) !important;
} }
.el-table__row:hover > td { .el-table__row:hover > td {
background: #eef6ff !important; background: #161c28 !important;
} }
.el-pagination .el-pager li.active { .el-pagination .el-pager li.active {
background: var(--tech-accent) !important; background: var(--tech-accent) !important;
color: #0b1d33 !important; color: #ffffff !important;
} }
.el-pagination .el-pager li:hover { .el-pagination .el-pager li:hover {
color: var(--tech-accent) !important; color: var(--tech-accent) !important;
@@ -348,6 +385,16 @@
.el-pagination span { .el-pagination span {
color: var(--tech-text-muted) !important; color: var(--tech-text-muted) !important;
} }
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
background-color: var(--tech-panel-2) !important;
color: var(--tech-text-muted) !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: var(--tech-accent) !important;
color: #ffffff !important;
}
.el-tabs__item { .el-tabs__item {
color: var(--tech-text-muted) !important; color: var(--tech-text-muted) !important;
@@ -371,6 +418,7 @@
.el-dialog, .el-dialog,
.el-message-box { .el-message-box {
border: 1px solid var(--tech-border) !important; border: 1px solid var(--tech-border) !important;
background: var(--tech-panel) !important;
} }
.el-dialog__header, .el-dialog__header,
.el-message-box__header { .el-message-box__header {
@@ -381,18 +429,15 @@
.el-message-box__title { .el-message-box__title {
color: var(--tech-text) !important; color: var(--tech-text) !important;
} }
.el-dialog__body,
.el-message-box__content {
color: var(--tech-text) !important;
}
/* Disable dialog mask to allow page interaction */ /* Keep mask invisible but clickable for close-on-click */
.v-modal { .v-modal {
background-color: transparent !important; background-color: transparent !important;
opacity: 0 !important; opacity: 0 !important;
pointer-events: none !important;
}
.el-dialog__wrapper {
pointer-events: none;
}
.el-dialog {
pointer-events: auto;
} }
</style> </style>
@@ -432,9 +477,9 @@
<div class="sidebar"> <div class="sidebar">
<el-menu <el-menu
:default-active="currentView" :default-active="currentView"
background-color="#0b1d33" background-color="#0c0e14"
text-color="#cfe6ff" text-color="#94a3b8"
active-text-color="#5bd3ff" active-text-color="#8b5cf6"
@select="handleSelect"> @select="handleSelect">
<el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item> <el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item>

View File

@@ -374,7 +374,7 @@
</el-dialog> </el-dialog>
<!-- 聊天对话框 --> <!-- 聊天对话框 -->
<el-dialog title="聊天" {% raw %}:visible.sync="chatDialogVisible" {% endraw %} width="60%" :close-on-click-modal="false"> <el-dialog title="聊天" {% raw %}:visible.sync="chatDialogVisible" {% endraw %} width="60%" :close-on-click-modal="true">
<div class="chat-container"> <div class="chat-container">
<!-- 消息列表 --> <!-- 消息列表 -->
<div class="message-list" ref="messageList"> <div class="message-list" ref="messageList">
@@ -956,14 +956,14 @@
.stat-title { .stat-title {
font-size: 16px; font-size: 16px;
color: #6b86a8; color: var(--tech-text-muted);
margin-bottom: 10px; margin-bottom: 10px;
} }
.stat-value { .stat-value {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #5bd3ff; color: var(--tech-accent-2);
} }
.pagination-container { .pagination-container {
@@ -973,7 +973,7 @@
.section-title { .section-title {
margin: 20px 0 15px 0; margin: 20px 0 15px 0;
border-bottom: 1px solid #d6e6ff; border-bottom: 1px solid var(--tech-border);
padding-bottom: 10px; padding-bottom: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -983,7 +983,7 @@
.section-title h3 { .section-title h3 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #2a3b55; color: var(--tech-text);
} }
.chat-container { .chat-container {
@@ -996,8 +996,8 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px;
background: #f2f7ff; background: var(--tech-panel-2);
border: 1px solid #d6e6ff; border: 1px solid var(--tech-border);
} }
.message-item { .message-item {
@@ -1014,27 +1014,27 @@
max-width: 70%; max-width: 70%;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background: #ffffff; background: var(--tech-panel);
color: #22324a; color: var(--tech-text);
border: 1px solid #d6e6ff; border: 1px solid var(--tech-border);
box-shadow: 0 2px 8px rgba(11, 29, 51, 0.06); box-shadow: var(--tech-shadow);
} }
.message-self .message-content { .message-self .message-content {
background: #5bd3ff; background: var(--tech-accent);
color: #0b1d33; color: #ffffff;
} }
.message-time { .message-time {
font-size: 12px; font-size: 12px;
color: #7a94b8; color: var(--tech-text-muted);
margin-top: 5px; margin-top: 5px;
} }
.input-area { .input-area {
padding: 20px; padding: 20px;
background: #f9fbff; background: var(--tech-panel-2);
border-top: 1px solid #d6e6ff; border-top: 1px solid var(--tech-border);
} }
.toolbar { .toolbar {

View File

@@ -708,9 +708,9 @@
height: 100px; height: 100px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #f9fbff; background: var(--tech-panel);
border: 1px solid #d6e6ff; border: 1px solid var(--tech-border);
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06); box-shadow: var(--tech-shadow);
} }
.stats-card::before { .stats-card::before {
content: ""; content: "";
@@ -719,24 +719,24 @@
right: 0; right: 0;
top: 0; top: 0;
height: 2px; height: 2px;
background: #5bd3ff; background: var(--tech-accent-2);
box-shadow: 0 0 10px rgba(91, 211, 255, 0.5); box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
} }
.chart-container { .chart-container {
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px; padding: 8px;
background-color: #f7faff; background-color: var(--tech-panel-2);
border-radius: 4px; border-radius: 4px;
border: 1px solid #d6e6ff; border: 1px solid var(--tech-border);
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06); box-shadow: var(--tech-shadow);
} }
.chart-container h3 { .chart-container h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
color: #2a3b55; color: var(--tech-text);
} }
/* 用户信息卡片样式 */ /* 用户信息卡片样式 */
@@ -756,7 +756,8 @@
height: 100% !important; height: 100% !important;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 163, 255, 0.15); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
background: var(--tech-panel-2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -781,14 +782,14 @@
} }
.user-info-label { .user-info-label {
color: #6b86a8; color: var(--tech-text-muted);
width: 45px; width: 45px;
flex-shrink: 0; flex-shrink: 0;
font-weight: bold; font-weight: bold;
} }
.user-info-value { .user-info-value {
color: #24344c; color: var(--tech-text-strong);
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -798,20 +799,20 @@
.user-info-empty { .user-info-empty {
text-align: center; text-align: center;
color: #7a94b8; color: var(--tech-text-muted);
padding: 6px 0; padding: 6px 0;
} }
/* 首页卡片统一冷色面板感 */ /* 首页卡片统一冷色面板感 */
.content .el-card { .content .el-card {
background: #f9fbff; background: var(--tech-panel);
border: 1px solid #d6e6ff; border: 1px solid var(--tech-border);
box-shadow: 0 6px 16px rgba(11, 29, 51, 0.06); box-shadow: var(--tech-shadow);
} }
.content .el-card__header { .content .el-card__header {
background: #f2f7ff; background: var(--tech-panel-2);
border-bottom: 1px solid #d6e6ff; border-bottom: 1px solid var(--tech-border);
color: #2a3b55; color: var(--tech-text);
} }
.content .el-card__body { .content .el-card__body {
padding: 10px !important; padding: 10px !important;

View File

@@ -22,7 +22,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
background: #0b1d33; background: #0a0b0f;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -31,10 +31,10 @@
.login-container { .login-container {
width: 400px; width: 400px;
padding: 40px 36px 32px 36px; padding: 40px 36px 32px 36px;
background-color: #0f2545; background-color: #11151f;
border: 1px solid #1b3d66; border: 1px solid #1e2535;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 163, 255, 0.16); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -47,7 +47,7 @@
.login-title { .login-title {
text-align: center; text-align: center;
margin-bottom: 32px; margin-bottom: 32px;
color: #5bd3ff; color: #8b5cf6;
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
letter-spacing: 2px; letter-spacing: 2px;
@@ -58,14 +58,14 @@
} }
.el-input__inner { .el-input__inner {
border-radius: 6px; border-radius: 6px;
border: 1.5px solid #1f3f66; border: 1.5px solid #252d42;
background: #0b1f3a; background: #141a28;
color: #e6f3ff; color: #e2e8f0;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.el-input__inner:focus { .el-input__inner:focus {
border-color: #5bd3ff; border-color: #8b5cf6;
box-shadow: 0 0 0 2px rgba(91, 211, 255, 0.12); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
} }
.el-form-item__content { .el-form-item__content {
margin-left: 0 !important; margin-left: 0 !important;
@@ -73,19 +73,19 @@
.login-button { .login-button {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
background: #5bd3ff; background: #7c3aed;
border: none; border: none;
color: #0b1d33; color: #ffffff;
font-weight: 600; font-weight: 600;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 6px 16px rgba(0, 163, 255, 0.18); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
transition: background 0.2s; transition: background 0.2s;
} }
.login-button:hover, .login-button:focus { .login-button:hover, .login-button:focus {
background: #41bff0; background: #8b5cf6;
} }
.error-message { .error-message {
color: #ff8a8a; color: #f87171;
margin-top: 18px; margin-top: 18px;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
@@ -95,9 +95,9 @@
height: 60px; height: 60px;
margin-bottom: 18px; margin-bottom: 18px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 2px 12px rgba(0, 163, 255, 0.2); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
background: #0b213b; background: #141a28;
border: 1px solid #1b3d66; border: 1px solid #252d42;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -105,7 +105,7 @@
.login-footer { .login-footer {
margin-top: 28px; margin-top: 28px;
text-align: center; text-align: center;
color: #7fa6d8; color: #94a3b8;
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
} }

View File

@@ -1137,13 +1137,13 @@ new Vue({
} }
.stat-title { .stat-title {
font-size: 14px; font-size: 14px;
color: #6b86a8; color: var(--tech-text-muted);
margin-bottom: 10px; margin-bottom: 10px;
} }
.stat-value { .stat-value {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #5bd3ff; color: var(--tech-accent-2);
} }
.batch-toolbar { .batch-toolbar {
margin-bottom: 15px; margin-bottom: 15px;
@@ -1152,7 +1152,7 @@ new Vue({
} }
.selected-count { .selected-count {
margin-left: 15px; margin-left: 15px;
color: #6b86a8; color: var(--tech-text-muted);
} }
</style> </style>
{% endblock %} {% endblock %}

View File

@@ -328,12 +328,12 @@
.config-container { .config-container {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
background-color: #0f2545; background-color: var(--tech-panel-2);
border: 1px solid #1b3d66; border: 1px solid var(--tech-border);
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
font-size: 12px; font-size: 12px;
color: #cfe6ff; color: var(--tech-text);
} }
.config-container pre { .config-container pre {
@@ -356,13 +356,13 @@
.plugin-detail-container::-webkit-scrollbar-thumb, .plugin-detail-container::-webkit-scrollbar-thumb,
.config-container::-webkit-scrollbar-thumb { .config-container::-webkit-scrollbar-thumb {
background: #2a4d78; background: #2d3748;
border-radius: 3px; border-radius: 3px;
} }
.plugin-detail-container::-webkit-scrollbar-track, .plugin-detail-container::-webkit-scrollbar-track,
.config-container::-webkit-scrollbar-track { .config-container::-webkit-scrollbar-track {
background: #0b1d33; background: #141a28;
} }
/* ... 现有样式保持不变 ... */ /* ... 现有样式保持不变 ... */
@@ -379,7 +379,7 @@
} }
.config-error { .config-error {
color: #ff8a8a; color: var(--tech-danger);
font-size: 12px; font-size: 12px;
margin-top: 5px; margin-top: 5px;
} }

View File

@@ -124,7 +124,7 @@
:label="group.name" :label="group.name"
:value="group.wxid"> :value="group.wxid">
<span style="float: left">{% raw %}{{ group.name }}{% endraw %}</span> <span style="float: left">{% raw %}{{ group.name }}{% endraw %}</span>
<span style="float: right; color: #6b86a8; font-size: 13px">{% raw %}{{ group.wxid }}{% endraw %}</span> <span style="float: right; color: #94a3b8; font-size: 13px">{% raw %}{{ group.wxid }}{% endraw %}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>

View File

@@ -171,13 +171,13 @@
flex: 1; flex: 1;
overflow-y: auto !important; overflow-y: auto !important;
overflow-x: scroll !important; overflow-x: scroll !important;
background-color: #0f2545; background-color: var(--tech-panel-2);
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #1b3d66; border: 1px solid var(--tech-border);
box-sizing: border-box; box-sizing: border-box;
min-height: 0; min-height: 0;
color: #cfe6ff; color: var(--tech-text);
} }
.log-content pre { .log-content pre {