Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复缺失的客厅效果图引用并为Section 5添加背景图片

Browse Source 
详细说明:
- 将不存在的效果图-客厅.jpg替换为效果渲染图加尺寸标注.jpg
- 为Section 5(户型生长动画展示)添加背景图片定义
- 同时添加了浅色和深色主题的背景样式
- 修改文件: civil/index.html, civil/css/styles.css
This commit is contained in:
Yep_Q
2025-10-05 04:42:43 +08:00
parent 89aad28c98
commit 44c1a218ae
2 changed files with 456 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

534
web_frontend/web_result/order-classes/civil/css/styles.css
View File

@@ -1,21 +1,21 @@
/* 室内CAD整体方案设计 - 土木订单班建筑蓝灰设计系统 */
/* 室内CAD整体方案设计 - 土木订单班建筑大地色系设计系统 */
/* ========== 设计变量 ========== */
:root {
/* 建筑蓝灰主题 - 土木工程风格 */
--bg-dark: #f0f9ff; /* 浅蓝背景 */
--bg-semi-dark: rgba(240, 249, 255, 0.95); /* 半透明浅蓝 */
/* 建筑大地色主题 - 土木工程/室内设计风格 */
--bg-dark: #faf8f5; /* 米白背景 - 暖色调 */
--bg-semi-dark: rgba(250, 248, 245, 0.95); /* 半透明米白 */
--bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
--primary-dark: #0c4a6e; /* 主色深海蓝 */
--primary-blue: #0ea5e9; /* 主色天空蓝 - 土木专业 */
--accent-slate: #64748b; /* 石板灰强调 - 建筑材料主题 */
--accent-blue-light: #38bdf8; /* 浅蓝色 */
--text-light: #0c4a6e; /* 深色文字 */
--text-gray: #475569; /* 灰色文字 */
--border-light: rgba(14, 165, 233, 0.2); /* 蓝色边框 */
--hover-bg: rgba(14, 165, 233, 0.15); /* 悬停背景 */
--active-bg: rgba(14, 165, 233, 0.2); /* 激活背景 */
--primary-dark: #78350f; /* 深棕色 - 木质感 */
--primary-brown: #a16207; /* 主色大地棕 - 土木专业 */
--accent-concrete: #57534e; /* 混凝土灰强调 - 建筑材料 */
--accent-gold: #d97706; /* 古铜金色 */
--text-light: #78350f; /* 深棕色文字 */
--text-gray: #57534e; /* 灰色文字 */
--border-light: rgba(161, 98, 7, 0.2); /* 棕色边框 */
--hover-bg: rgba(161, 98, 7, 0.12); /* 悬停背景 */
--active-bg: rgba(161, 98, 7, 0.18); /* 激活背景 */
/* 间距系统 - 针对大屏幕优化 */
--spacing-xs: 0.75rem; /* 12px */
@@ -57,11 +57,11 @@
--radius-full: 9999px;
/* 阴影 - 建筑专业主题 */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 2px 4px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
--shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
--shadow-blue: 0 2px 8px rgba(14, 165, 233, 0.15);
--shadow-sm: 0 1px 2px rgba(120, 53, 15, 0.08);
--shadow-md: 0 2px 4px rgba(120, 53, 15, 0.12);
--shadow-lg: 0 4px 8px rgba(120, 53, 15, 0.15);
--shadow-xl: 0 8px 16px rgba(120, 53, 15, 0.18);
--shadow-brown: 0 2px 8px rgba(161, 98, 7, 0.2);
/* 过渡 */
--transition-fast: 150ms ease;
@@ -72,26 +72,26 @@
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
}
/* ========== 深色主题 - 深邃蓝灰配色 ========== */
/* ========== 深色主题 - 深棕木质配色 ========== */
body.dark-theme {
--bg-dark: #0c4a6e; /* 深邃蓝背景 */
--bg-semi-dark: rgba(12, 74, 110, 0.95); /* 深蓝半透明 */
--bg-overlay: rgba(14, 165, 233, 0.85); /* 深蓝遮罩层 */
--bg-card: rgba(14, 165, 233, 0.9); /* 深蓝卡片背景 */
--primary-dark: #0c4a6e; /* 深邃蓝 */
--primary-blue: #38bdf8; /* 明亮天空蓝 */
--accent-slate: #94a3b8; /* 亮石板灰 */
--accent-blue-light: #7dd3fc; /* 超亮蓝色 */
--text-light: #f0f9ff; /* 浅色文字 */
--text-gray: #e0f2fe; /* 灰色文字 */
--border-light: rgba(56, 189, 248, 0.25); /* 蓝色边框 */
--hover-bg: rgba(14, 165, 233, 0.15); /* 悬停背景 */
--active-bg: rgba(56, 189, 248, 0.2); /* 激活背景 */
--bg-dark: #292524; /* 深棕背景 */
--bg-semi-dark: rgba(41, 37, 36, 0.95); /* 深棕半透明 */
--bg-overlay: rgba(120, 53, 15, 0.85); /* 深棕遮罩层 */
--bg-card: rgba(68, 64, 60, 0.9); /* 深灰卡片背景 */
--primary-dark: #292524; /* 深棕 */
--primary-brown: #d97706; /* 明亮古铜金 */
--accent-concrete: #a8a29e; /* 亮混凝土灰 */
--accent-gold: #fbbf24; /* 明亮金色 */
--text-light: #fafaf9; /* 浅色文字 */
--text-gray: #e7e5e4; /* 灰色文字 */
--border-light: rgba(217, 119, 6, 0.3); /* 金棕色边框 */
--hover-bg: rgba(217, 119, 6, 0.15); /* 悬停背景 */
--active-bg: rgba(217, 119, 6, 0.25); /* 激活背景 */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 2px 4px rgba(0,0,0,0.5);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
--shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
--shadow-blue: 0 2px 8px rgba(14, 165, 233, 0.25);
--shadow-brown: 0 2px 8px rgba(217, 119, 6, 0.3);
}
/* ========== 重置样式 ========== */
@@ -135,7 +135,7 @@ body {
/* 深色主题下的Hero渐变 */
body.dark-theme .hero {
background:
linear-gradient(135deg, rgba(12, 74, 110, 0.9) 0%, rgba(14, 165, 233, 0.8) 100%),
linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(161, 98, 7, 0.8) 100%),
url('../images/室内平面设计图.jpg');
background-size: cover;
background-position: center;
@@ -148,8 +148,8 @@ body.dark-theme .hero {
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(12, 74, 110, 0.05) 0%, transparent 50%);
radial-gradient(circle at 20% 50%, rgba(161, 98, 7, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(120, 53, 15, 0.05) 0%, transparent 50%);
pointer-events: none;
animation: glow 8s ease-in-out infinite;
}
@@ -171,7 +171,7 @@ body.dark-theme .hero {
.hero-badge {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: rgba(14, 165, 233, 0.15);
background: rgba(161, 98, 7, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-full);
@@ -179,14 +179,14 @@ body.dark-theme .hero {
font-weight: var(--font-semibold);
letter-spacing: 0.1em;
margin-bottom: var(--spacing-xl);
border: 3px solid var(--primary-blue);
box-shadow: var(--shadow-blue);
border: 3px solid var(--primary-brown);
box-shadow: var(--shadow-brown);
text-transform: uppercase;
transition: all var(--transition-base);
}
.hero-badge:hover {
background: rgba(14, 165, 233, 0.25);
background: rgba(161, 98, 7, 0.25);
transform: translateY(-2px);
}
@@ -196,8 +196,8 @@ body.dark-theme .hero {
margin-bottom: var(--spacing-lg);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--accent-blue-light);
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(14, 165, 233, 0.4);
color: var(--accent-gold);
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(161, 98, 7, 0.4);
}
.hero-subtitle {
@@ -264,16 +264,16 @@ body.dark-theme .hero {
.nav-item:hover {
background: var(--hover-bg);
color: var(--primary-blue);
color: var(--primary-brown);
transform: translateY(-2px);
box-shadow: var(--shadow-blue);
box-shadow: var(--shadow-brown);
}
.nav-item.active {
background: var(--active-bg);
color: var(--primary-blue);
border-color: var(--primary-blue);
box-shadow: var(--shadow-blue);
color: var(--primary-brown);
border-color: var(--primary-brown);
box-shadow: var(--shadow-brown);
}
/* ========== 内容区块 - 图片背景 ========== */
@@ -287,7 +287,7 @@ body.dark-theme .hero {
.section:nth-child(1) {
background-image:
linear-gradient(to bottom, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 1) 100%),
url('../images/室内平面设计图.jpg');
url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -296,7 +296,7 @@ body.dark-theme .hero {
.section:nth-child(2) {
background-image:
linear-gradient(to bottom, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 1) 100%),
url('../images/实景渲染尺寸标记.jpg');
url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -305,7 +305,7 @@ body.dark-theme .hero {
.section:nth-child(3) {
background-image:
linear-gradient(to bottom, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 1) 100%),
url('../images/材质选型.jpg');
url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -314,7 +314,16 @@ body.dark-theme .hero {
.section:nth-child(4) {
background-image:
linear-gradient(to bottom, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 1) 100%),
url('../images/效果渲染图加尺寸标注.jpg');
url('https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.section:nth-child(5) {
background-image:
linear-gradient(to bottom, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 1) 100%),
url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -323,8 +332,8 @@ body.dark-theme .hero {
/* 深色主题下的区块背景 */
body.dark-theme .section:nth-child(1) {
background-image:
linear-gradient(to bottom, rgba(12, 74, 110, 0.92) 0%, rgba(14, 165, 233, 0.88) 100%),
url('../images/室内平面设计图.jpg');
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(161, 98, 7, 0.88) 100%),
url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -332,8 +341,8 @@ body.dark-theme .section:nth-child(1) {
body.dark-theme .section:nth-child(2) {
background-image:
linear-gradient(to bottom, rgba(14, 165, 233, 0.90) 0%, rgba(12, 74, 110, 0.88) 100%),
url('../images/实景渲染尺寸标记.jpg');
linear-gradient(to bottom, rgba(161, 98, 7, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -341,8 +350,8 @@ body.dark-theme .section:nth-child(2) {
body.dark-theme .section:nth-child(3) {
background-image:
linear-gradient(to bottom, rgba(12, 74, 110, 0.92) 0%, rgba(14, 165, 233, 0.88) 100%),
url('../images/材质选型.jpg');
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(161, 98, 7, 0.88) 100%),
url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -350,8 +359,17 @@ body.dark-theme .section:nth-child(3) {
body.dark-theme .section:nth-child(4) {
background-image:
linear-gradient(to bottom, rgba(14, 165, 233, 0.90) 0%, rgba(12, 74, 110, 0.88) 100%),
url('../images/效果渲染图加尺寸标注.jpg');
linear-gradient(to bottom, rgba(161, 98, 7, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
url('https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
body.dark-theme .section:nth-child(5) {
background-image:
linear-gradient(to bottom, rgba(161, 98, 7, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -359,26 +377,26 @@ body.dark-theme .section:nth-child(4) {
/* 深色主题下的特定元素调整 */
body.dark-theme .stat-item {
background: rgba(14, 165, 233, 0.8);
background: rgba(161, 98, 7, 0.8);
backdrop-filter: blur(5px);
}
body.dark-theme .stat-item:hover {
background: rgba(56, 189, 248, 0.15);
border-color: var(--primary-blue);
background: rgba(217, 119, 6, 0.15);
border-color: var(--primary-brown);
}
body.dark-theme .stat-value {
color: var(--accent-blue-light);
color: var(--accent-gold);
}
body.dark-theme th {
background: rgba(56, 189, 248, 0.12);
color: var(--accent-blue-light);
background: rgba(217, 119, 6, 0.12);
color: var(--accent-gold);
}
body.dark-theme tr:hover {
background: rgba(56, 189, 248, 0.08);
background: rgba(217, 119, 6, 0.08);
}
.container {
@@ -406,7 +424,7 @@ body.dark-theme tr:hover {
height: 100px;
border-radius: var(--radius-xl);
object-fit: cover;
border: 3px solid var(--primary-blue);
border: 3px solid var(--primary-brown);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
}
@@ -423,7 +441,7 @@ body.dark-theme tr:hover {
.agent-name {
font-size: var(--text-lg);
color: var(--primary-blue);
color: var(--primary-brown);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--spacing-sm);
@@ -447,7 +465,7 @@ body.dark-theme tr:hover {
left: 0;
width: 180px;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), transparent);
background: linear-gradient(90deg, var(--primary-brown), transparent);
border-radius: 2px;
}
@@ -469,7 +487,7 @@ body.dark-theme tr:hover {
.expert-intro h3 {
font-size: var(--text-2xl);
color: var(--primary-blue);
color: var(--primary-brown);
margin-bottom: var(--spacing-lg);
display: flex;
align-items: center;
@@ -517,8 +535,8 @@ body.dark-theme tr:hover {
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl), var(--shadow-blue);
border-color: var(--primary-blue);
box-shadow: var(--shadow-xl), var(--shadow-brown);
border-color: var(--primary-brown);
}
.card-header {
@@ -531,7 +549,7 @@ body.dark-theme tr:hover {
.card-title {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--primary-blue);
color: var(--primary-brown);
margin-bottom: var(--spacing-sm);
}
@@ -603,7 +621,7 @@ body.dark-theme tr:hover {
}
.feature-list li:hover {
color: var(--primary-blue);
color: var(--primary-brown);
padding-left: var(--spacing-sm);
}
@@ -648,7 +666,7 @@ body.dark-theme tr:hover {
.stat-value {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--primary-blue);
color: var(--primary-brown);
text-shadow: none;
}
@@ -671,11 +689,11 @@ table {
th {
background: var(--active-bg);
color: var(--primary-blue);
color: var(--primary-brown);
padding: var(--spacing-md);
text-align: left;
font-weight: var(--font-semibold);
border-bottom: 2px solid var(--primary-blue);
border-bottom: 2px solid var(--primary-brown);
}
td {
@@ -905,7 +923,7 @@ img.error {
}
body:not(.dark-theme) .theme-icon-light {
color: var(--primary-blue);
color: var(--primary-brown);
transform: scale(1.2);
}
@@ -914,10 +932,368 @@ body:not(.dark-theme) .theme-icon-dark {
}
body.dark-theme .theme-icon-dark {
color: var(--primary-blue);
color: var(--primary-brown);
transform: scale(1.2);
}
body.dark-theme .theme-icon-light {
opacity: 0.5;
}
/* ========== 图文交错布局 ========== */
.alternating-layout {
display: flex;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
align-items: center;
}
.alternating-layout:last-child {
margin-bottom: 0;
}
.alternating-layout.reverse {
flex-direction: row-reverse;
}
.alternating-content {
flex: 1;
background: var(--bg-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-2xl);
padding: var(--spacing-xl);
border: 2px solid var(--border-light);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
}
.alternating-content:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-brown);
}
.alternating-content h3 {
color: var(--primary-brown);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.alternating-content h3 i {
width: 24px;
height: 24px;
}
.alternating-image {
flex: 1;
aspect-ratio: 4/3;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 2px solid var(--border-light);
transition: all var(--transition-base);
}
.alternating-image:hover {
transform: scale(1.02);
box-shadow: var(--shadow-xl);
border-color: var(--primary-brown);
}
.alternating-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.alternating-image:hover img {
transform: scale(1.05);
}
/* ========== 大图小卡片组合布局 ========== */
.hero-cards-layout {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.hero-image-container {
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
border: 2px solid var(--border-light);
position: relative;
transition: all var(--transition-base);
}
.hero-image-container:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(120, 53, 15, 0.3);
border-color: var(--primary-brown);
}
.hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.hero-image-container:hover img {
transform: scale(1.05);
}
.hero-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(120, 53, 15, 0.95), rgba(120, 53, 15, 0.7), transparent);
padding: var(--spacing-2xl);
color: white;
}
.hero-image-overlay h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: white;
}
.hero-image-overlay h3 i {
width: 28px;
height: 28px;
}
.hero-image-overlay p {
font-size: 1.1rem;
opacity: 0.95;
}
.hero-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
/* ========== 时间线布局 ========== */
.timeline-layout {
position: relative;
padding-left: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.timeline-layout::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--primary-brown), var(--accent-slate));
border-radius: var(--radius-full);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-2xl);
display: flex;
gap: var(--spacing-xl);
align-items: center;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: calc(-1 * var(--spacing-2xl) - 8px);
width: 20px;
height: 20px;
background: var(--primary-brown);
border: 3px solid white;
border-radius: var(--radius-full);
box-shadow: 0 0 0 4px var(--bg-card);
transition: all var(--transition-base);
}
body.dark-theme .timeline-dot {
border-color: var(--bg-dark);
box-shadow: 0 0 0 4px var(--bg-dark);
}
.timeline-item:hover .timeline-dot {
background: var(--accent-slate);
transform: scale(1.3);
}
.timeline-content {
flex: 1;
background: var(--bg-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
border: 2px solid var(--border-light);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.timeline-content:hover {
transform: translateX(8px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-brown);
}
.timeline-content h4 {
color: var(--primary-brown);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
}
.timeline-content p {
color: var(--text-gray);
line-height: 1.6;
}
.timeline-image {
flex: 1;
aspect-ratio: 3/2;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 2px solid var(--border-light);
}
.timeline-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.timeline-item:hover .timeline-image img {
transform: scale(1.05);
}
/* ========== 响应式布局 ========== */
@media (max-width: 768px) {
.alternating-layout,
.alternating-layout.reverse {
flex-direction: column;
}
.alternating-image {
aspect-ratio: 16/9;
}
.hero-image-container {
aspect-ratio: 4/3;
}
.hero-image-overlay h3 {
font-size: 1.4rem;
}
.timeline-layout {
padding-left: var(--spacing-lg);
}
.timeline-dot {
left: calc(-1 * var(--spacing-lg) - 8px);
width: 16px;
height: 16px;
}
.timeline-item {
flex-direction: column;
align-items: flex-start;
}
.timeline-content:hover {
transform: translateX(4px);
}
}
/* ========== 统计数据图表样式 ========== */
.stats-chart {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--bg-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 2px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.stat-item-chart {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-header .stat-label {
font-size: 1rem;
font-weight: 600;
color: var(--text-gray);
}
.stat-header .stat-value {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-brown);
}
.stat-bar {
width: 100%;
height: 12px;
background: var(--bg-dark);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
body.dark-theme .stat-bar {
background: rgba(255, 255, 255, 0.1);
}
.stat-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-brown), var(--accent-slate));
border-radius: var(--radius-full);
transition: width 1s ease-out;
position: relative;
animation: fillBar 1.5s ease-out;
box-shadow: 0 0 8px rgba(161, 98, 7, 0.4);
}
@keyframes fillBar {
from {
width: 0;
opacity: 0.6;
}
to {
opacity: 1;
}
}