canglan/SharedClassManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.1更新

Browse Source
This commit is contained in:
canglan
2026-05-26 13:47:01 +08:00
parent c575d711ee
commit f84c9d3efb
26 changed files with 1482 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
frontend/assets/css/style.css
View File

@@ -9,6 +9,43 @@
* 版权所有 © Sea Network Technology Studio
*/
:root {
/* 主色调 */
--color-primary: #4361ee;
--color-primary-light: #eef0ff;
--color-primary-dark: #3651d4;
--color-primary-hover: #3a56d4;
/* 语义色 */
--color-danger: #e53e3e;
--color-danger-light: #fff5f5;
--color-danger-dark: #c53030;
--color-success: #38a169;
--color-success-light: #f0fff4;
--color-warning: #d69e2e;
--color-warning-light: #fffff0;
/* 灰度 */
--color-text: #1a202c;
--color-text-secondary: #4a5568;
--color-text-muted: #a0aec0;
--color-bg: #f5f7fb;
--color-card: #ffffff;
--color-border: #e2e8f0;
--color-border-light: #edf2f7;
--color-hover: #f7fafc;
/* 按钮 */
--btn-primary-bg: var(--color-primary);
--btn-primary-text: #ffffff;
--btn-outline-bg: transparent;
--btn-outline-border: var(--color-primary);
--btn-outline-text: var(--color-primary);
--btn-danger-bg: var(--color-danger);
--btn-danger-text: #ffffff;
--btn-ghost-text: var(--color-text-secondary);
}
* {
margin: 0;
padding: 0;
@@ -17,10 +54,10 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #f5f7fb;
background: var(--color-bg);
min-height: 100vh;
font-size: 14px;
color: #333;
color: var(--color-text);
}
/* ========== 登录页面 ========== */
@@ -41,12 +78,12 @@ body {
.login-header h1 {
font-size: 24px;
color: #333;
color: var(--color-text);
margin-bottom: 8px;
}
.login-header p {
color: #666;
color: var(--color-text-secondary);
font-size: 14px;
}
@@ -57,14 +94,14 @@ body {
.login-form label {
display: block;
margin-bottom: 6px;
color: #555;
color: var(--color-text-secondary);
font-weight: 500;
}
.login-form input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
@@ -72,13 +109,13 @@ body {
.login-form input:focus {
outline: none;
border-color: #667eea;
border-color: var(--color-primary);
}
.btn-login {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, var(--color-primary) 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
@@ -93,8 +130,8 @@ body {
}
.error-msg {
background: #fee;
color: #c33;
background: var(--color-danger-light);
color: var(--color-danger);
padding: 10px;
border-radius: 8px;
margin-top: 15px;
@@ -106,8 +143,8 @@ body {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #999;
border-top: 1px solid var(--color-border-light);
color: var(--color-text-muted);
font-size: 12px;
}
@@ -126,7 +163,7 @@ body {
.header h1 {
font-size: 18px;
color: #333;
color: var(--color-text);
}
.header-info {
@@ -136,12 +173,12 @@ body {
}
.user-name {
color: #666;
color: var(--color-text-secondary);
font-weight: 500;
}
.user-role {
background: #667eea;
background: var(--color-primary);
color: white;
padding: 2px 8px;
border-radius: 20px;
@@ -149,7 +186,7 @@ body {
}
.btn-logout {
background: #e53e3e;
background: var(--color-danger);
color: white;
border: none;
padding: 6px 16px;
@@ -160,14 +197,14 @@ body {
}
.btn-logout:hover {
background: #c53030;
background: var(--color-danger-dark);
}
/* ========== 导航菜单 ========== */
.nav {
background: white;
padding: 0 24px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--color-border-light);
display: flex;
gap: 4px;
overflow-x: auto;
@@ -177,7 +214,7 @@ body {
padding: 12px 20px;
background: none;
border: none;
color: #666;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
@@ -187,12 +224,12 @@ body {
}
.nav-item:hover {
color: #667eea;
color: var(--color-primary);
}
.nav-item.active {
color: #667eea;
border-bottom-color: #667eea;
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* ========== 容器 ========== */
@@ -216,8 +253,8 @@ body {
font-weight: bold;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #667eea;
color: #333;
border-bottom: 2px solid var(--color-primary);
color: var(--color-text);
}
/* ========== 统计卡片网格 ========== */
@@ -239,12 +276,12 @@ body {
.stat-value {
font-size: 32px;
font-weight: bold;
color: #667eea;
color: var(--color-primary);
margin: 10px 0;
}
.stat-label {
color: #666;
color: var(--color-text-secondary);
font-size: 13px;
}
@@ -261,17 +298,17 @@ table {
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--color-border-light);
}
th {
background: #f8f9fa;
background: var(--color-hover);
font-weight: 600;
color: #555;
color: var(--color-text-secondary);
}
tr:hover {
background: #f8f9fa;
background: var(--color-hover);
}
/* ========== 状态标签 ========== */
@@ -324,57 +361,94 @@ tr:hover {
}
.btn-primary {
background: #667eea;
color: white;
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border: 1px solid transparent;
}
.btn-primary:hover {
background: #5a67d8;
background: var(--color-primary-hover);
}
.btn-danger {
background: #e53e3e;
color: white;
background: var(--btn-danger-bg);
color: var(--btn-danger-text);
border: 1px solid transparent;
}
.btn-danger:hover {
background: #c53030;
background: var(--color-danger-dark);
}
.btn-success {
background: #38a169;
color: white;
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid #c6f6d5;
}
.btn-success:hover {
background: #2f855a;
background: #c6f6d5;
}
.btn-warning {
background: #d69e2e;
color: white;
background: var(--color-warning-light);
color: var(--color-warning);
border: 1px solid #fefcbf;
}
.btn-warning:hover {
background: #b7791f;
background: #fefcbf;
}
.btn-info {
background: #3182ce;
color: white;
background: #e3f2fd;
color: #1565c0;
border: 1px solid #bbdefb;
}
.btn-info:hover {
background: #2b6cb0;
background: #bbdefb;
}
.btn-secondary {
background: #718096;
color: white;
background: var(--color-hover);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.btn-secondary:hover {
background: #4a5568;
background: var(--color-border-light);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary-light);
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.btn-ghost:hover {
background: var(--color-hover);
border-color: var(--color-text-muted);
}
.btn-outline-danger {
background: transparent;
color: var(--color-danger);
border: 1px solid var(--color-danger);
}
.btn-outline-danger:hover {
background: var(--color-danger-light);
}
.btn-sm {
@@ -412,12 +486,12 @@ tr:hover {
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--color-border-light);
}
.modal-header h3 {
font-size: 18px;
color: #333;
color: var(--color-text);
}
.modal-close {
@@ -425,13 +499,13 @@ tr:hover {
border: none;
font-size: 24px;
cursor: pointer;
color: #999;
color: var(--color-text-muted);
}
.modal-footer {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eee;
border-top: 1px solid var(--color-border-light);
display: flex;
justify-content: flex-end;
gap: 12px;
@@ -446,7 +520,7 @@ tr:hover {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #555;
color: var(--color-text-secondary);
}
.form-group input,
@@ -454,7 +528,7 @@ tr:hover {
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 14px;
}
@@ -463,12 +537,12 @@ tr:hover {
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
border-color: var(--color-primary);
}
.form-group small {
display: block;
color: #999;
color: var(--color-text-muted);
font-size: 12px;
margin-top: 4px;
}
@@ -513,7 +587,7 @@ tr:hover {
.search-bar input {
padding: 8px 12px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
border-radius: 6px;
width: 200px;
}
@@ -530,10 +604,10 @@ tr:hover {
.pagination a, .pagination span {
padding: 6px 12px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
border-radius: 4px;
text-decoration: none;
color: #666;
color: var(--color-text-secondary);
cursor: pointer;
min-width: 36px;
text-align: center;
@@ -542,22 +616,22 @@ tr:hover {
}
.pagination a:hover {
background: #f0f0ff;
border-color: #667eea;
color: #667eea;
background: var(--color-primary-light);
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination .active {
background: #667eea;
background: var(--color-primary);
color: white;
border-color: #667eea;
border-color: var(--color-primary);
}
.pagination .ellipsis {
border: none;
cursor: default;
padding: 6px 4px;
color: #999;
color: var(--color-text-muted);
min-width: auto;
}
@@ -567,13 +641,13 @@ tr:hover {
gap: 4px;
margin-left: 8px;
font-size: 13px;
color: #666;
color: var(--color-text-secondary);
}
.pagination .page-jump input {
width: 50px;
padding: 5px 8px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
border-radius: 4px;
text-align: center;
font-size: 13px;
@@ -581,8 +655,8 @@ tr:hover {
}
.pagination .page-jump input:focus {
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.15);
}
.pagination .page-nav {
@@ -605,11 +679,11 @@ tr:hover {
}
.toast-success {
background: #38a169;
background: var(--color-success);
}
.toast-error {
background: #e53e3e;
background: var(--color-danger);
}
.toast-warning {
@@ -632,8 +706,8 @@ tr:hover {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-top-color: #667eea;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -646,14 +720,14 @@ tr:hover {
.footer {
text-align: center;
padding: 20px;
color: #999;
color: var(--color-text-muted);
font-size: 12px;
}
/* ========== 记录项 ========== */
.record-item {
padding: 12px 0;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--color-border-light);
display: flex;
justify-content: space-between;
align-items: center;
@@ -664,22 +738,22 @@ tr:hover {
}
.record-points.plus {
color: #38a169;
color: var(--color-success);
}
.record-points.minus {
color: #e53e3e;
color: var(--color-danger);
}
.record-reason {
flex: 1;
margin: 0 15px;
color: #555;
color: var(--color-text-secondary);
}
.record-time {
font-size: 12px;
color: #999;
color: var(--color-text-muted);
}
.view-more {
@@ -688,7 +762,7 @@ tr:hover {
}
.view-more a {
color: #667eea;
color: var(--color-primary);
text-decoration: none;
}
@@ -700,7 +774,7 @@ tr:hover {
.score-number {
font-size: 64px;
font-weight: bold;
color: #667eea;
color: var(--color-primary);
}
/* ========== 响应式 ========== */
@@ -755,9 +829,9 @@ tr:hover {
}
.action-dropdown-toggle {
background: #f7fafc;
color: #4a5568;
border: 1px solid #e2e8f0;
background: var(--color-hover);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
@@ -767,13 +841,13 @@ tr:hover {
}
.action-dropdown-toggle:hover {
background: #edf2f7;
background: var(--color-border-light);
border-color: #cbd5e0;
}
.action-dropdown-toggle.open {
background: #edf2f7;
border-color: #a0aec0;
background: var(--color-border-light);
border-color: var(--color-text-muted);
}
.action-dropdown-menu {
@@ -785,7 +859,7 @@ tr:hover {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border: 1px solid #e2e8f0;
border: 1px solid var(--color-border);
min-width: 120px;
z-index: 200;
overflow: hidden;
@@ -799,7 +873,7 @@ tr:hover {
.action-dropdown-menu a {
display: block;
padding: 8px 14px;
color: #4a5568;
color: var(--color-text-secondary);
font-size: 13px;
cursor: pointer;
text-decoration: none;
@@ -808,20 +882,20 @@ tr:hover {
}
.action-dropdown-menu a:hover {
background: #f7fafc;
background: var(--color-hover);
color: #2d3748;
}
.action-dropdown-menu a.danger {
color: #e53e3e;
border-top: 1px solid #edf2f7;
color: var(--color-danger);
border-top: 1px solid var(--color-border-light);
margin-top: 4px;
padding-top: 10px;
}
.action-dropdown-menu a.danger:hover {
background: #fff5f5;
color: #c53030;
background: var(--color-danger-light);
color: var(--color-danger-dark);
}
@media (max-width: 768px) {
@@ -829,4 +903,26 @@ tr:hover {
right: auto;
left: 0;
}
}
}
/* ========== 链接 ========== */
.link {
color: var(--color-primary);
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
/* ========== 文本工具类 ========== */
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-muted); }
/* ========== 标签 ========== */
.tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.tag-success { background: #e8f5e9; color: #2e7d32; }
.tag-danger { background: #ffebee; color: #c62828; }
.tag-warning { background: #fff3e0; color: #e65100; }
.tag-info { background: #e3f2fd; color: #1565c0; }