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

详细说明:
- 将不存在的效果图-客厅.jpg替换为效果渲染图加尺寸标注.jpg
- 为Section 5(户型生长动画展示)添加背景图片定义
- 同时添加了浅色和深色主题的背景样式
- 修改文件: civil/index.html, civil/css/styles.css

web_frontend/web_result/order-classes/civil/css/styles.css

@@ -1,21 +1,21 @@
-/* 室内CAD整体方案设计 - 土木订单班建筑蓝灰设计系统 */
+/* 室内CAD整体方案设计 - 土木订单班建筑大地色系设计系统 */
 
 /* ========== 设计变量 ========== */
 :root {
-    /* 建筑蓝灰主题 - 土木工程风格 */
+    /* 建筑大地色主题 - 土木工程/室内设计风格 */
-    --bg-dark: #f0f9ff;              /* 浅蓝背景 */
+    --bg-dark: #faf8f5;              /* 米白背景 - 暖色调 */
-    --bg-semi-dark: rgba(240, 249, 255, 0.95);  /* 半透明浅蓝 */
+    --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-dark: #78350f;         /* 深棕色 - 木质感 */
-    --primary-blue: #0ea5e9;         /* 主色天空蓝 - 土木专业 */
+    --primary-brown: #a16207;        /* 主色大地棕 - 土木专业 */
-    --accent-slate: #64748b;         /* 石板灰强调 - 建筑材料主题 */
+    --accent-concrete: #57534e;      /* 混凝土灰强调 - 建筑材料 */
-    --accent-blue-light: #38bdf8;    /* 浅蓝色 */
+    --accent-gold: #d97706;          /* 古铜金色 */
-    --text-light: #0c4a6e;           /* 深色文字 */
+    --text-light: #78350f;           /* 深棕色文字 */
-    --text-gray: #475569;            /* 灰色文字 */
+    --text-gray: #57534e;            /* 灰色文字 */
-    --border-light: rgba(14, 165, 233, 0.2);  /* 蓝色边框 */
+    --border-light: rgba(161, 98, 7, 0.2);    /* 棕色边框 */
-    --hover-bg: rgba(14, 165, 233, 0.15);     /* 悬停背景 */
+    --hover-bg: rgba(161, 98, 7, 0.12);       /* 悬停背景 */
-    --active-bg: rgba(14, 165, 233, 0.2);     /* 激活背景 */
+    --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-sm: 0 1px 2px rgba(120, 53, 15, 0.08);
-    --shadow-md: 0 2px 4px rgba(0,0,0,0.08);
+    --shadow-md: 0 2px 4px rgba(120, 53, 15, 0.12);
-    --shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
+    --shadow-lg: 0 4px 8px rgba(120, 53, 15, 0.15);
-    --shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
+    --shadow-xl: 0 8px 16px rgba(120, 53, 15, 0.18);
-    --shadow-blue: 0 2px 8px rgba(14, 165, 233, 0.15);
+    --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-dark: #292524;                      /* 深棕背景 */
-    --bg-semi-dark: rgba(12, 74, 110, 0.95); /* 深蓝半透明 */
+    --bg-semi-dark: rgba(41, 37, 36, 0.95);  /* 深棕半透明 */
-    --bg-overlay: rgba(14, 165, 233, 0.85);   /* 深蓝遮罩层 */
+    --bg-overlay: rgba(120, 53, 15, 0.85);   /* 深棕遮罩层 */
-    --bg-card: rgba(14, 165, 233, 0.9);       /* 深蓝卡片背景 */
+    --bg-card: rgba(68, 64, 60, 0.9);        /* 深灰卡片背景 */
-    --primary-dark: #0c4a6e;                 /* 深邃蓝 */
+    --primary-dark: #292524;                 /* 深棕 */
-    --primary-blue: #38bdf8;                 /* 明亮天空蓝 */
+    --primary-brown: #d97706;                /* 明亮古铜金 */
-    --accent-slate: #94a3b8;                 /* 亮石板灰 */
+    --accent-concrete: #a8a29e;              /* 亮混凝土灰 */
-    --accent-blue-light: #7dd3fc;            /* 超亮蓝色 */
+    --accent-gold: #fbbf24;                  /* 明亮金色 */
-    --text-light: #f0f9ff;                   /* 浅色文字 */
+    --text-light: #fafaf9;                   /* 浅色文字 */
-    --text-gray: #e0f2fe;                    /* 灰色文字 */
+    --text-gray: #e7e5e4;                    /* 灰色文字 */
-    --border-light: rgba(56, 189, 248, 0.25); /* 蓝色边框 */
+    --border-light: rgba(217, 119, 6, 0.3);  /* 金棕色边框 */
-    --hover-bg: rgba(14, 165, 233, 0.15);     /* 悬停背景 */
+    --hover-bg: rgba(217, 119, 6, 0.15);     /* 悬停背景 */
-    --active-bg: rgba(56, 189, 248, 0.2);    /* 激活背景 */
+    --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 20% 50%, rgba(161, 98, 7, 0.1) 0%, transparent 50%),
-        radial-gradient(circle at 80% 80%, rgba(12, 74, 110, 0.05) 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);
+    border: 3px solid var(--primary-brown);
-    box-shadow: var(--shadow-blue);
+    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);
+    color: var(--accent-gold);
-    text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(14, 165, 233, 0.4);
+    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);
+    color: var(--primary-brown);
-    border-color: var(--primary-blue);
+    border-color: var(--primary-brown);
-    box-shadow: var(--shadow-blue);
+    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%),
+        linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(161, 98, 7, 0.88) 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;
@@ -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%),
+        linear-gradient(to bottom, rgba(161, 98, 7, 0.90) 0%, rgba(120, 53, 15, 0.88) 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;
@@ -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%),
+        linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(161, 98, 7, 0.88) 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;
@@ -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%),
+        linear-gradient(to bottom, rgba(161, 98, 7, 0.90) 0%, rgba(120, 53, 15, 0.88) 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;
+}
+
+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);
+    background: rgba(217, 119, 6, 0.15);
-    border-color: var(--primary-blue);
+    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);
+    background: rgba(217, 119, 6, 0.12);
-    color: var(--accent-blue-light);
+    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);
+    box-shadow: var(--shadow-xl), var(--shadow-brown);
-    border-color: var(--primary-blue);
+    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;
+    }
+}

web_frontend/web_result/order-classes/civil/index.html

@@ -91,7 +91,7 @@
 
                 <div class="alternating-layout reverse">
                     <div class="alternating-image">
-                        <img data-src="images/效果图-客厅.jpg" alt="客厅效果图" loading="lazy">
+                        <img data-src="images/效果渲染图加尺寸标注.jpg" alt="客厅效果图" loading="lazy">
                     </div>
                     <div class="alternating-content">
                         <h3><i data-lucide="target"></i> 核心需求</h3>