From 44c1a218aec4559c94e2630ca0459dfd6fef369e Mon Sep 17 00:00:00 2001 From: Yep_Q Date: Sun, 5 Oct 2025 04:42:43 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BC=BA=E5=A4=B1?= =?UTF-8?q?=E7=9A=84=E5=AE=A2=E5=8E=85=E6=95=88=E6=9E=9C=E5=9B=BE=E5=BC=95?= =?UTF-8?q?=E7=94=A8=E5=B9=B6=E4=B8=BASection=205=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 详细说明: - 将不存在的效果图-客厅.jpg替换为效果渲染图加尺寸标注.jpg - 为Section 5(户型生长动画展示)添加背景图片定义 - 同时添加了浅色和深色主题的背景样式 - 修改文件: civil/index.html, civil/css/styles.css --- .../order-classes/civil/css/styles.css | 534 +++++++++++++++--- .../web_result/order-classes/civil/index.html | 2 +- 2 files changed, 456 insertions(+), 80 deletions(-) diff --git a/web_frontend/web_result/order-classes/civil/css/styles.css b/web_frontend/web_result/order-classes/civil/css/styles.css index 1733aac0..32fd012c 100644 --- a/web_frontend/web_result/order-classes/civil/css/styles.css +++ b/web_frontend/web_result/order-classes/civil/css/styles.css @@ -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; + } +} diff --git a/web_frontend/web_result/order-classes/civil/index.html b/web_frontend/web_result/order-classes/civil/index.html index d145612f..ba480555 100644 --- a/web_frontend/web_result/order-classes/civil/index.html +++ b/web_frontend/web_result/order-classes/civil/index.html @@ -91,7 +91,7 @@
- 客厅效果图 + 客厅效果图

核心需求