liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页美化一下

Browse Source
This commit is contained in:
liuwei
2026-02-27 13:03:07 +08:00
parent 10a3f18540
commit 2f08f4b867
3 changed files with 80 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
admin/dashboard/templates/base.html
View File

@@ -14,24 +14,26 @@
GLOBAL RESET GLOBAL RESET
------------------------------ */ ------------------------------ */
:root { :root {
--tech-bg: #0a0b0f; --tech-bg: #fdfcfb;
--tech-bg-2: #0c0e14; --tech-bg-2: #fefefc;
--tech-panel: #11151f; --tech-panel: #ffffff;
--tech-panel-2: #141a28; --tech-panel-2: #fcfaf8;
--tech-border: #1e2535; --tech-sub-surface: #faf9f7;
--tech-border-2: #252d42; --tech-border: #e5e0d9;
--tech-text: #e2e8f0; --tech-border-2: #e8e3dc;
--tech-text-strong: #f1f5f9; --tech-text: #111827;
--tech-text-muted: #94a3b8; --tech-text-strong: #0f172a;
--tech-accent: #7c3aed; --tech-text-muted: #6b7280;
--tech-accent-2: #8b5cf6; --tech-accent: #f97316;
--tech-highlight: #a78bfa; --tech-accent-2: #f59e0b;
--tech-silver: #cbd5e1; --tech-accent-soft: #fffbeb;
--tech-glow: #22d3ee; --tech-highlight: #fbbf24;
--tech-success: #34d399; --tech-accent-alt: #8b5cf6;
--tech-warning: #fbbf24; --tech-glow: #fbbf24;
--tech-success: #22c55e;
--tech-warning: #f59e0b;
--tech-danger: #f87171; --tech-danger: #f87171;
--tech-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); --tech-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
} }
body { body {
margin: 0; margin: 0;
@@ -68,7 +70,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); box-shadow: var(--tech-shadow);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -80,8 +82,8 @@
right: 12px; right: 12px;
bottom: 0; bottom: 0;
height: 1px; height: 1px;
background: rgba(167, 139, 250, 0.5); background: rgba(245, 158, 11, 0.35);
box-shadow: 0 0 10px rgba(167, 139, 250, 0.5); box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
} }
.header-left { .header-left {
@@ -93,7 +95,7 @@
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: 8px; margin-right: 8px;
filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45)); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.25));
} }
.header-right { .header-right {
@@ -113,7 +115,7 @@
transition: 0.2s; transition: 0.2s;
} }
.logout-btn:hover { .logout-btn:hover {
color: var(--tech-accent-2); color: var(--tech-accent);
} }
.header h2 { .header h2 {
color: var(--tech-text-strong); color: var(--tech-text-strong);
@@ -133,9 +135,9 @@
------------------------------ */ ------------------------------ */
.sidebar { .sidebar {
width: 190px; width: 190px;
background: var(--tech-bg-2); background: var(--tech-panel-2);
border-right: 1px solid var(--tech-border); border-right: 1px solid var(--tech-border);
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35); box-shadow: var(--tech-shadow);
} }
/* Element 菜单自定义美化 */ /* Element 菜单自定义美化 */
@@ -155,15 +157,15 @@
position: relative; position: relative;
} }
.el-menu-item:hover { .el-menu-item:hover {
background: rgba(124, 58, 237, 0.18) !important; background: var(--tech-accent-soft) !important;
color: var(--tech-text-strong) !important; color: var(--tech-text-strong) !important;
} }
.el-menu-item.is-active { .el-menu-item.is-active {
background: rgba(124, 58, 237, 0.25) !important; background: var(--tech-accent-soft) !important;
color: var(--tech-accent-2) !important; color: var(--tech-accent) !important;
font-weight: 600; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35), box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25),
0 0 12px rgba(167, 139, 250, 0.35); 0 0 10px rgba(245, 158, 11, 0.2);
} }
.el-menu-item.is-active::before { .el-menu-item.is-active::before {
content: ""; content: "";
@@ -172,17 +174,17 @@
top: 10px; top: 10px;
bottom: 10px; bottom: 10px;
width: 3px; width: 3px;
background: var(--tech-accent-2); background: var(--tech-accent);
box-shadow: 0 0 10px rgba(167, 139, 250, 0.7); box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
border-radius: 2px; border-radius: 2px;
} }
.el-menu-item i { .el-menu-item i {
color: #a1adc2 !important; color: var(--tech-text-muted) !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: var(--tech-accent-2) !important; color: var(--tech-accent) !important;
} }
/* ------------------------------ /* ------------------------------
@@ -200,8 +202,8 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: background-image:
linear-gradient(rgba(37, 45, 66, 0.6) 1px, transparent 1px), linear-gradient(rgba(232, 227, 220, 0.7) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 45, 66, 0.6) 1px, transparent 1px); linear-gradient(90deg, rgba(232, 227, 220, 0.7) 1px, transparent 1px);
background-size: 28px 28px; background-size: 28px 28px;
opacity: 0.35; opacity: 0.35;
pointer-events: none; pointer-events: none;
@@ -213,8 +215,8 @@
right: 12px; right: 12px;
top: 0; top: 0;
height: 1px; height: 1px;
background: rgba(167, 139, 250, 0.45); background: rgba(245, 158, 11, 0.35);
box-shadow: 0 0 12px rgba(167, 139, 250, 0.6); box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
pointer-events: none; pointer-events: none;
} }
.content > * { .content > * {
@@ -257,10 +259,10 @@
TECH THEME OVERRIDES TECH THEME OVERRIDES
------------------------------ */ ------------------------------ */
a { a {
color: var(--tech-accent); color: var(--tech-accent-alt);
} }
a:hover { a:hover {
color: var(--tech-accent-2); color: #a78bfa;
} }
.el-card__header { .el-card__header {
@@ -299,8 +301,8 @@
border-color: var(--tech-danger) !important; border-color: var(--tech-danger) !important;
} }
.el-button--info { .el-button--info {
background: #64748b !important; background: #6b7280 !important;
border-color: #64748b !important; border-color: #6b7280 !important;
} }
.el-button--success:hover, .el-button--success:hover,
.el-button--warning:hover, .el-button--warning:hover,
@@ -323,7 +325,7 @@
color: var(--tech-accent) !important; color: var(--tech-accent) !important;
} }
.el-button--text { .el-button--text {
color: var(--tech-accent) !important; color: var(--tech-accent-alt) !important;
} }
.el-input__inner, .el-input__inner,
@@ -371,7 +373,7 @@
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: #161c28 !important; background: var(--tech-accent-soft) !important;
} }
.el-pagination .el-pager li.active { .el-pagination .el-pager li.active {
@@ -381,10 +383,19 @@
.el-pagination .el-pager li:hover { .el-pagination .el-pager li:hover {
color: var(--tech-accent) !important; color: var(--tech-accent) !important;
} }
.el-pagination .el-pager li {
background: var(--tech-panel-2) !important;
border: 1px solid var(--tech-border) !important;
color: var(--tech-text) !important;
}
.el-pagination button, .el-pagination button,
.el-pagination span { .el-pagination span {
color: var(--tech-text-muted) !important; color: var(--tech-text-muted) !important;
} }
.el-pagination button {
background: var(--tech-panel-2) !important;
border: 1px solid var(--tech-border) !important;
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li { .el-pagination.is-background .el-pager li {
@@ -400,13 +411,13 @@
color: var(--tech-text-muted) !important; color: var(--tech-text-muted) !important;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: var(--tech-accent) !important; color: var(--tech-accent-alt) !important;
} }
.el-tabs__item:hover { .el-tabs__item:hover {
color: var(--tech-accent) !important; color: var(--tech-accent-alt) !important;
} }
.el-tabs__active-bar { .el-tabs__active-bar {
background: var(--tech-accent) !important; background: var(--tech-accent-alt) !important;
} }
.el-tag { .el-tag {
@@ -477,9 +488,9 @@
<div class="sidebar"> <div class="sidebar">
<el-menu <el-menu
:default-active="currentView" :default-active="currentView"
background-color="#0c0e14" background-color="#fcfaf8"
text-color="#94a3b8" text-color="#6b7280"
active-text-color="#8b5cf6" active-text-color="#f97316"
@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>

36
admin/dashboard/templates/login.html
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: #0a0b0f; background: #fdfcfb;
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: #11151f; background-color: #ffffff;
border: 1px solid #1e2535; border: 1px solid #e5e0d9;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
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: #8b5cf6; color: #f97316;
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 #252d42; border: 1.5px solid #e5e0d9;
background: #141a28; background: #fcfaf8;
color: #e2e8f0; color: #111827;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.el-input__inner:focus { .el-input__inner:focus {
border-color: #8b5cf6; border-color: #f97316;
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); box-shadow: 0 0 0 2px rgba(245, 158, 11, 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: #7c3aed; background: #f97316;
border: none; border: none;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); box-shadow: 0 8px 16px rgba(17, 24, 39, 0.12);
transition: background 0.2s; transition: background 0.2s;
} }
.login-button:hover, .login-button:focus { .login-button:hover, .login-button:focus {
background: #8b5cf6; background: #f59e0b;
} }
.error-message { .error-message {
color: #f87171; color: #ef4444;
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 6px 14px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
background: #141a28; background: #fcfaf8;
border: 1px solid #252d42; border: 1px solid #e5e0d9;
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: #94a3b8; color: #6b7280;
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
} }

4
admin/dashboard/templates/plugins_manage.html
View File

@@ -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: #2d3748; background: #d7d1c8;
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: #141a28; background: #fcfaf8;
} }
/* ... 现有样式保持不变 ... */ /* ... 现有样式保持不变 ... */