yangxiangyuan
445 lines
11 KiB
CSS
445 lines
11 KiB
CSS
/* 活力运动风格：清爽蓝/绿/橙系配色方案 */
|
|
:root{
|
|
/* 主色调：清爽蓝色系 */
|
|
--primary: #00a8ff; /* 活力蓝 */
|
|
--primary-light: #4cdfff; /* 浅蓝 */
|
|
--primary-dark: #0077cc; /* 深蓝 */
|
|
|
|
/* 辅助色：绿色和橙色系 */
|
|
--accent-green: #00d8a7; /* 活力绿 */
|
|
--accent-orange: #ff9f43; /* 活力橙 */
|
|
--accent-yellow: #feca57; /* 阳光黄 */
|
|
|
|
/* 中性色 */
|
|
--secondary: #4a4a4a; /* 深灰 */
|
|
--danger: #ff6b6b; /* 活力红 */
|
|
--success: #00d8a7; /* 成功绿 */
|
|
--warning: #ff9f43; /* 警告橙 */
|
|
|
|
/* 背景与表面 */
|
|
--bg: #f8fafc; /* 浅灰背景 */
|
|
--surface: #ffffff; /* 白色表面 */
|
|
--border: #e1e8ed; /* 浅灰边框 */
|
|
--hover: #f0f7ff; /* 悬停蓝色 */
|
|
|
|
/* 文字色 */
|
|
--text-primary: #2c3e50; /* 深蓝灰 */
|
|
--text-secondary: #7f8c8d; /* 中灰 */
|
|
--text-muted: #95a5a6; /* 浅灰 */
|
|
}
|
|
|
|
*{ box-sizing:border-box; }
|
|
body{ margin:0; font-family:'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background:var(--bg); color:var(--text-primary); line-height:1.6; }
|
|
|
|
/* 顶部导航（运动风格） */
|
|
.nav{
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
padding:16px 20px;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-green) 100%);
|
|
color:white;
|
|
box-shadow: 0 4px 20px rgba(0,168,255,0.15);
|
|
position:sticky; top:0; z-index:10;
|
|
}
|
|
.nav-left{
|
|
font-weight:700; font-size:20px;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.nav a{ text-decoration:none; }
|
|
.nav-right{
|
|
display:flex; flex-wrap:nowrap;
|
|
overflow-x:auto; -webkit-overflow-scrolling:touch;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 25px;
|
|
padding: 4px;
|
|
}
|
|
.nav-right::-webkit-scrollbar{ display:none; }
|
|
.nav-right a{
|
|
position:relative; margin:0 2px;
|
|
padding:8px 16px;
|
|
color:rgba(255,255,255,0.9);
|
|
text-decoration:none;
|
|
border-radius:20px;
|
|
transition:all 0.3s ease;
|
|
font-weight:500;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-right a:hover{
|
|
color:white;
|
|
background:rgba(255,255,255,0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
.nav-right a.active{
|
|
color:var(--primary);
|
|
background:white;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.container{ max-width:1080px; margin:24px auto; padding:0 20px; }
|
|
|
|
/* 通用控件 - 运动风格 */
|
|
label{ display:block; font-size:14px; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
|
|
input,select,button{
|
|
padding:12px 16px;
|
|
font-size:14px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
input:focus, select:focus{
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(0,168,255,0.1);
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.primary{
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:12px;
|
|
font-weight:600;
|
|
box-shadow: 0 4px 12px rgba(0,168,255,0.3);
|
|
cursor: pointer;
|
|
}
|
|
.primary:hover{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,168,255,0.4);
|
|
}
|
|
.secondary{
|
|
background: linear-gradient(135deg, var(--accent-green) 0%, #00e6b8 100%);
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:12px;
|
|
font-weight:600;
|
|
box-shadow: 0 4px 12px rgba(0,216,167,0.3);
|
|
cursor: pointer;
|
|
}
|
|
.secondary:hover{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,216,167,0.4);
|
|
}
|
|
.danger{
|
|
background: linear-gradient(135deg, var(--danger) 0%, #ff8e8e 100%);
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:12px;
|
|
font-weight:600;
|
|
box-shadow: 0 4px 12px rgba(255,107,107,0.3);
|
|
cursor: pointer;
|
|
}
|
|
.danger:hover{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255,107,107,0.4);
|
|
}
|
|
|
|
.link{
|
|
color:var(--primary);
|
|
text-decoration:none;
|
|
margin-left:8px;
|
|
font-weight:500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.link:hover{
|
|
color:var(--primary-dark);
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.muted{ color:var(--text-muted); }
|
|
|
|
/* 卡片样式 */
|
|
.card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
|
margin-bottom: 24px;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 3px solid var(--primary);
|
|
}
|
|
.card-header h3 {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.stat-card {
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin: 8px 0;
|
|
}
|
|
.stat-label {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
.stat-icon {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Table */
|
|
.table-responsive { overflow-x: auto; }
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.data-table th {
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0,168,255,0.1) 100%);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
padding: 16px 20px;
|
|
border-bottom: 2px solid var(--primary);
|
|
text-align: left;
|
|
}
|
|
.data-table td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.data-table tr:nth-child(odd) {
|
|
background: #fcfdff;
|
|
}
|
|
.data-table tr:hover {
|
|
background: var(--hover);
|
|
}
|
|
|
|
.weekly-warning {
|
|
margin-top: 16px;
|
|
padding: 12px 16px;
|
|
border: 2px solid var(--danger);
|
|
border-radius: 12px;
|
|
background: rgba(255, 107, 107, 0.08);
|
|
color: var(--danger);
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 100;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
.modal-content {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 16px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.tool-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 16px 0 24px 0;
|
|
}
|
|
.tab-btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
background: white;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
.tab-btn.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(0,168,255,0.3);
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.health-metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.stats-filter-grid { grid-template-columns: 1fr; }
|
|
.filter-actions-right { text-align: left; width: 100%; }
|
|
.mobile-input { width: 100%; }
|
|
.health-metrics-grid {
|
|
gap: 8px; /* 减小间距 */
|
|
}
|
|
.health-metrics-grid label, .health-metrics-grid input {
|
|
font-size: 12px; /* 减小字体 */
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.btn-sm { padding: 6px 10px; font-size: 12px; }
|
|
.health-metrics-grid {
|
|
gap: 4px; /* 进一步减小间距 */
|
|
}
|
|
.health-metrics-grid label, .health-metrics-grid input {
|
|
font-size: 10px; /* 进一步减小字体 */
|
|
}
|
|
}
|
|
|
|
.card-complete {
|
|
background: linear-gradient(135deg, rgba(0,216,167,0.1) 0%, rgba(0,216,167,0.05) 100%);
|
|
border-left: 4px solid var(--accent-green);
|
|
position: relative;
|
|
}
|
|
.card-incomplete {
|
|
background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,107,107,0.05) 100%);
|
|
border-left: 4px solid var(--danger);
|
|
position: relative;
|
|
}
|
|
.num-remain { color: var(--danger); font-weight: 700; }
|
|
.num-goal { color: var(--primary); font-weight: 700; }
|
|
.num-done { color: var(--accent-green); font-weight: 700; }
|
|
.flag {
|
|
position: absolute; right: 16px; top: 16px;
|
|
width: 56px; height: 56px;
|
|
background-size: contain; background-repeat: no-repeat; background-position: center;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.container { padding: 0 12px; }
|
|
.tool-tabs { flex-wrap: wrap; row-gap: 8px; }
|
|
.tab-btn { padding: 8px 12px; }
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
|
.card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
|
|
.stat-value { font-size: 28px; }
|
|
.screen-card canvas { height: 180px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.card { padding: 16px; }
|
|
.data-table th, .data-table td { padding: 10px; }
|
|
.modal-content { width: 96%; }
|
|
}
|
|
|
|
/* 设置页表格 - 列宽与操作列固定 */
|
|
#section-settings .data-table { table-layout: fixed; }
|
|
#section-settings .data-table th:nth-child(1),
|
|
#section-settings .data-table td:nth-child(1) { width: 40%; }
|
|
#section-settings .data-table th:nth-child(2),
|
|
#section-settings .data-table td:nth-child(2) { width: 16%; }
|
|
#section-settings .data-table th:nth-child(3),
|
|
#section-settings .data-table td:nth-child(3) { width: 16%; }
|
|
#section-settings .data-table th:nth-child(4),
|
|
#section-settings .data-table td:nth-child(4) { width: 12%; }
|
|
#section-settings .data-table th:nth-child(5),
|
|
#section-settings .data-table td:nth-child(5) { width: 16%; }
|
|
#section-settings .data-table th:last-child,
|
|
#section-settings .data-table td:last-child { position: sticky; right: 0; z-index: 3; background: #fff; }
|
|
#section-settings input[type="text"],
|
|
#section-settings input[type="number"],
|
|
#section-settings select { width: 100%; box-sizing: border-box; }
|
|
|
|
|
|
/* 完成奖励红旗（使用本地图片） */
|
|
.card-complete::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 16px;
|
|
width: 56px;
|
|
height: 56px;
|
|
background-image: url('images/qizi.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
/* Waiting Box Styles */
|
|
.waiting-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-top: 16px;
|
|
}
|
|
.waiting-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.waiting-step.pending { opacity: 0.6; }
|
|
.waiting-step.active { color: var(--primary); font-weight: 600; }
|
|
.waiting-step.done { color: var(--success); }
|
|
.waiting-step.error { color: var(--danger); }
|
|
.step-icon {
|
|
width: 20px; height: 20px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
.spinner {
|
|
width: 16px; height: 16px;
|
|
border: 2px solid var(--primary);
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin { 100% { transform: rotate(360deg); } }
|