首页美化一下
This commit is contained in:
@@ -14,24 +14,26 @@
|
||||
GLOBAL RESET
|
||||
------------------------------ */
|
||||
:root {
|
||||
--tech-bg: #0a0b0f;
|
||||
--tech-bg-2: #0c0e14;
|
||||
--tech-panel: #11151f;
|
||||
--tech-panel-2: #141a28;
|
||||
--tech-border: #1e2535;
|
||||
--tech-border-2: #252d42;
|
||||
--tech-text: #e2e8f0;
|
||||
--tech-text-strong: #f1f5f9;
|
||||
--tech-text-muted: #94a3b8;
|
||||
--tech-accent: #7c3aed;
|
||||
--tech-accent-2: #8b5cf6;
|
||||
--tech-highlight: #a78bfa;
|
||||
--tech-silver: #cbd5e1;
|
||||
--tech-glow: #22d3ee;
|
||||
--tech-success: #34d399;
|
||||
--tech-warning: #fbbf24;
|
||||
--tech-bg: #fdfcfb;
|
||||
--tech-bg-2: #fefefc;
|
||||
--tech-panel: #ffffff;
|
||||
--tech-panel-2: #fcfaf8;
|
||||
--tech-sub-surface: #faf9f7;
|
||||
--tech-border: #e5e0d9;
|
||||
--tech-border-2: #e8e3dc;
|
||||
--tech-text: #111827;
|
||||
--tech-text-strong: #0f172a;
|
||||
--tech-text-muted: #6b7280;
|
||||
--tech-accent: #f97316;
|
||||
--tech-accent-2: #f59e0b;
|
||||
--tech-accent-soft: #fffbeb;
|
||||
--tech-highlight: #fbbf24;
|
||||
--tech-accent-alt: #8b5cf6;
|
||||
--tech-glow: #fbbf24;
|
||||
--tech-success: #22c55e;
|
||||
--tech-warning: #f59e0b;
|
||||
--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 {
|
||||
margin: 0;
|
||||
@@ -68,7 +70,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: var(--tech-shadow);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@@ -80,8 +82,8 @@
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: rgba(167, 139, 250, 0.5);
|
||||
box-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
|
||||
background: rgba(245, 158, 11, 0.35);
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -93,7 +95,7 @@
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
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 {
|
||||
@@ -113,7 +115,7 @@
|
||||
transition: 0.2s;
|
||||
}
|
||||
.logout-btn:hover {
|
||||
color: var(--tech-accent-2);
|
||||
color: var(--tech-accent);
|
||||
}
|
||||
.header h2 {
|
||||
color: var(--tech-text-strong);
|
||||
@@ -133,9 +135,9 @@
|
||||
------------------------------ */
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
background: var(--tech-bg-2);
|
||||
background: var(--tech-panel-2);
|
||||
border-right: 1px solid var(--tech-border);
|
||||
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: var(--tech-shadow);
|
||||
}
|
||||
|
||||
/* Element 菜单自定义美化 */
|
||||
@@ -155,15 +157,15 @@
|
||||
position: relative;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background: rgba(124, 58, 237, 0.18) !important;
|
||||
background: var(--tech-accent-soft) !important;
|
||||
color: var(--tech-text-strong) !important;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
background: rgba(124, 58, 237, 0.25) !important;
|
||||
color: var(--tech-accent-2) !important;
|
||||
background: var(--tech-accent-soft) !important;
|
||||
color: var(--tech-accent) !important;
|
||||
font-weight: 600;
|
||||
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35),
|
||||
0 0 12px rgba(167, 139, 250, 0.35);
|
||||
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25),
|
||||
0 0 10px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
.el-menu-item.is-active::before {
|
||||
content: "";
|
||||
@@ -172,17 +174,17 @@
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 3px;
|
||||
background: var(--tech-accent-2);
|
||||
box-shadow: 0 0 10px rgba(167, 139, 250, 0.7);
|
||||
background: var(--tech-accent);
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-menu-item i {
|
||||
color: #a1adc2 !important;
|
||||
color: var(--tech-text-muted) !important;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.el-menu-item.is-active i,
|
||||
.el-menu-item:hover i {
|
||||
color: var(--tech-accent-2) !important;
|
||||
color: var(--tech-accent) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------
|
||||
@@ -200,8 +202,8 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(37, 45, 66, 0.6) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(37, 45, 66, 0.6) 1px, transparent 1px);
|
||||
linear-gradient(rgba(232, 227, 220, 0.7) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(232, 227, 220, 0.7) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
@@ -213,8 +215,8 @@
|
||||
right: 12px;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: rgba(167, 139, 250, 0.45);
|
||||
box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
|
||||
background: rgba(245, 158, 11, 0.35);
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
|
||||
pointer-events: none;
|
||||
}
|
||||
.content > * {
|
||||
@@ -257,10 +259,10 @@
|
||||
TECH THEME OVERRIDES
|
||||
------------------------------ */
|
||||
a {
|
||||
color: var(--tech-accent);
|
||||
color: var(--tech-accent-alt);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--tech-accent-2);
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
@@ -299,8 +301,8 @@
|
||||
border-color: var(--tech-danger) !important;
|
||||
}
|
||||
.el-button--info {
|
||||
background: #64748b !important;
|
||||
border-color: #64748b !important;
|
||||
background: #6b7280 !important;
|
||||
border-color: #6b7280 !important;
|
||||
}
|
||||
.el-button--success:hover,
|
||||
.el-button--warning:hover,
|
||||
@@ -323,7 +325,7 @@
|
||||
color: var(--tech-accent) !important;
|
||||
}
|
||||
.el-button--text {
|
||||
color: var(--tech-accent) !important;
|
||||
color: var(--tech-accent-alt) !important;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
@@ -371,7 +373,7 @@
|
||||
border-right: 1px solid var(--tech-border) !important;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background: #161c28 !important;
|
||||
background: var(--tech-accent-soft) !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
@@ -381,10 +383,19 @@
|
||||
.el-pagination .el-pager li:hover {
|
||||
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 span {
|
||||
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-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
@@ -400,13 +411,13 @@
|
||||
color: var(--tech-text-muted) !important;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: var(--tech-accent) !important;
|
||||
color: var(--tech-accent-alt) !important;
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: var(--tech-accent) !important;
|
||||
color: var(--tech-accent-alt) !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background: var(--tech-accent) !important;
|
||||
background: var(--tech-accent-alt) !important;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
@@ -477,9 +488,9 @@
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
:default-active="currentView"
|
||||
background-color="#0c0e14"
|
||||
text-color="#94a3b8"
|
||||
active-text-color="#8b5cf6"
|
||||
background-color="#fcfaf8"
|
||||
text-color="#6b7280"
|
||||
active-text-color="#f97316"
|
||||
@select="handleSelect">
|
||||
|
||||
<el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||||
background: #0a0b0f;
|
||||
background: #fdfcfb;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -31,10 +31,10 @@
|
||||
.login-container {
|
||||
width: 400px;
|
||||
padding: 40px 36px 32px 36px;
|
||||
background-color: #11151f;
|
||||
border: 1px solid #1e2535;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e0d9;
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -47,7 +47,7 @@
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
color: #8b5cf6;
|
||||
color: #f97316;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
@@ -58,14 +58,14 @@
|
||||
}
|
||||
.el-input__inner {
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #252d42;
|
||||
background: #141a28;
|
||||
color: #e2e8f0;
|
||||
border: 1.5px solid #e5e0d9;
|
||||
background: #fcfaf8;
|
||||
color: #111827;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border-color: #8b5cf6;
|
||||
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
|
||||
border-color: #f97316;
|
||||
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
@@ -73,19 +73,19 @@
|
||||
.login-button {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: #7c3aed;
|
||||
background: #f97316;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
.login-button:hover, .login-button:focus {
|
||||
background: #8b5cf6;
|
||||
background: #f59e0b;
|
||||
}
|
||||
.error-message {
|
||||
color: #f87171;
|
||||
color: #ef4444;
|
||||
margin-top: 18px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
@@ -95,9 +95,9 @@
|
||||
height: 60px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
|
||||
background: #141a28;
|
||||
border: 1px solid #252d42;
|
||||
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
|
||||
background: #fcfaf8;
|
||||
border: 1px solid #e5e0d9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -105,7 +105,7 @@
|
||||
.login-footer {
|
||||
margin-top: 28px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@@ -356,13 +356,13 @@
|
||||
|
||||
.plugin-detail-container::-webkit-scrollbar-thumb,
|
||||
.config-container::-webkit-scrollbar-thumb {
|
||||
background: #2d3748;
|
||||
background: #d7d1c8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.plugin-detail-container::-webkit-scrollbar-track,
|
||||
.config-container::-webkit-scrollbar-track {
|
||||
background: #141a28;
|
||||
background: #fcfaf8;
|
||||
}
|
||||
|
||||
/* ... 现有样式保持不变 ... */
|
||||
|
||||
Reference in New Issue
Block a user