diff --git a/web_frontend/web_result/order-classes/civil/agent-avatars b/web_frontend/web_result/order-classes/civil/agent-avatars
new file mode 120000
index 00000000..ad374f2f
--- /dev/null
+++ b/web_frontend/web_result/order-classes/civil/agent-avatars
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/土木/agent头像
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/civil/css/styles.css b/web_frontend/web_result/order-classes/civil/css/styles.css
new file mode 100644
index 00000000..1733aac0
--- /dev/null
+++ b/web_frontend/web_result/order-classes/civil/css/styles.css
@@ -0,0 +1,923 @@
+/* 室内CAD整体方案设计 - 土木订单班建筑蓝灰设计系统 */
+
+/* ========== 设计变量 ========== */
+:root {
+ /* 建筑蓝灰主题 - 土木工程风格 */
+ --bg-dark: #f0f9ff; /* 浅蓝背景 */
+ --bg-semi-dark: rgba(240, 249, 255, 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); /* 激活背景 */
+
+ /* 间距系统 - 针对大屏幕优化 */
+ --spacing-xs: 0.75rem; /* 12px */
+ --spacing-sm: 1.25rem; /* 20px */
+ --spacing-md: 2rem; /* 32px */
+ --spacing-lg: 3rem; /* 48px */
+ --spacing-xl: 4rem; /* 64px */
+ --spacing-2xl: 6rem; /* 96px */
+ --spacing-3xl: 8rem; /* 128px */
+
+ /* 字体系统 */
+ --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
+ --font-display: 'Inter', sans-serif;
+
+ /* 字体大小 - 针对大屏幕优化 */
+ --text-xs: 0.875rem; /* 14px */
+ --text-sm: 1rem; /* 16px */
+ --text-base: 1.125rem; /* 18px */
+ --text-lg: 1.375rem; /* 22px */
+ --text-xl: 1.625rem; /* 26px */
+ --text-2xl: 2rem; /* 32px */
+ --text-3xl: 2.5rem; /* 40px */
+ --text-4xl: 3rem; /* 48px */
+ --text-5xl: 4rem; /* 64px */
+
+ /* 字重 */
+ --font-light: 300;
+ --font-normal: 400;
+ --font-medium: 500;
+ --font-semibold: 600;
+ --font-bold: 700;
+
+ /* 圆角 */
+ --radius-sm: 0.375rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-2xl: 1.5rem;
+ --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);
+
+ /* 过渡 */
+ --transition-fast: 150ms ease;
+ --transition-base: 250ms ease;
+ --transition-slow: 350ms ease;
+
+ /* 布局 */
+ --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); /* 激活背景 */
+ --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);
+}
+
+/* ========== 重置样式 ========== */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font-family: var(--font-primary);
+ font-size: var(--text-base);
+ line-height: 1.6;
+ color: var(--text-light);
+ background-color: var(--bg-dark);
+ overflow-x: hidden;
+}
+
+/* ========== Hero 区域 - 全屏图片背景 ========== */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:
+ linear-gradient(135deg, rgba(240, 249, 255, 0.9) 0%, rgba(224, 242, 254, 0.95) 100%),
+ url('../images/室内平面设计图.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+ position: relative;
+ overflow: hidden;
+}
+
+/* 深色主题下的Hero渐变 */
+body.dark-theme .hero {
+ background:
+ linear-gradient(135deg, rgba(12, 74, 110, 0.9) 0%, rgba(14, 165, 233, 0.8) 100%),
+ url('../images/室内平面设计图.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.hero::before {
+ content: '';
+ position: absolute;
+ 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%);
+ pointer-events: none;
+ animation: glow 8s ease-in-out infinite;
+}
+
+@keyframes glow {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.6; }
+}
+
+.hero-content {
+ text-align: center;
+ color: var(--text-light);
+ z-index: 1;
+ position: relative;
+ padding: var(--spacing-xl);
+ max-width: 900px;
+}
+
+.hero-badge {
+ display: inline-block;
+ padding: var(--spacing-md) var(--spacing-xl);
+ background: rgba(14, 165, 233, 0.15);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-radius: var(--radius-full);
+ font-size: var(--text-lg);
+ 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);
+ text-transform: uppercase;
+ transition: all var(--transition-base);
+}
+
+.hero-badge:hover {
+ background: rgba(14, 165, 233, 0.25);
+ transform: translateY(-2px);
+}
+
+.hero-title {
+ font-size: clamp(3.5rem, 10vw, 6.5rem);
+ font-weight: var(--font-bold);
+ 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);
+}
+
+.hero-subtitle {
+ font-size: clamp(1.5rem, 4vw, 2.5rem);
+ font-weight: var(--font-light);
+ opacity: 0.95;
+ margin-bottom: var(--spacing-xl);
+ color: var(--text-light);
+}
+
+.hero-description {
+ font-size: var(--text-xl);
+ opacity: 0.85;
+ max-width: 800px;
+ margin: 0 auto;
+ line-height: 1.8;
+}
+
+/* ========== 导航 - 深色玻璃态 ========== */
+.nav {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background: var(--bg-semi-dark);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-bottom: 1px solid var(--border-light);
+ padding: var(--spacing-md) 0;
+ box-shadow: var(--shadow-md);
+}
+
+.nav-container {
+ display: flex;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ flex-wrap: wrap;
+ padding: 0 var(--spacing-md);
+}
+
+.nav-item {
+ padding: var(--spacing-sm) var(--spacing-lg);
+ background: var(--bg-overlay);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--border-light);
+ border-radius: var(--radius-lg);
+ cursor: pointer;
+ transition: all var(--transition-base);
+ font-weight: var(--font-medium);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ color: var(--text-gray);
+}
+
+.nav-item i {
+ width: 20px;
+ height: 20px;
+ stroke-width: 2;
+}
+
+.nav-item span {
+ font-size: var(--text-base);
+}
+
+.nav-item:hover {
+ background: var(--hover-bg);
+ color: var(--primary-blue);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-blue);
+}
+
+.nav-item.active {
+ background: var(--active-bg);
+ color: var(--primary-blue);
+ border-color: var(--primary-blue);
+ box-shadow: var(--shadow-blue);
+}
+
+/* ========== 内容区块 - 图片背景 ========== */
+.section {
+ padding: var(--spacing-2xl) 0;
+ background: var(--bg-dark);
+ position: relative;
+}
+
+/* 浅色图片背景 - 每个区块使用不同图片 */
+.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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 深色主题下的区块背景 */
+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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+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');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 深色主题下的特定元素调整 */
+body.dark-theme .stat-item {
+ background: rgba(14, 165, 233, 0.8);
+ backdrop-filter: blur(5px);
+}
+
+body.dark-theme .stat-item:hover {
+ background: rgba(56, 189, 248, 0.15);
+ border-color: var(--primary-blue);
+}
+
+body.dark-theme .stat-value {
+ color: var(--accent-blue-light);
+}
+
+body.dark-theme th {
+ background: rgba(56, 189, 248, 0.12);
+ color: var(--accent-blue-light);
+}
+
+body.dark-theme tr:hover {
+ background: rgba(56, 189, 248, 0.08);
+}
+
+.container {
+ max-width: var(--container-max);
+ margin: 0 auto;
+ padding: 0 var(--spacing-md);
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-xl);
+ padding: var(--spacing-lg);
+ background: var(--bg-card);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border-radius: var(--radius-xl);
+ border: 2px solid var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.agent-avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: var(--radius-xl);
+ object-fit: cover;
+ border: 3px solid var(--primary-blue);
+ box-shadow: var(--shadow-md);
+ transition: all var(--transition-base);
+}
+
+.agent-avatar:hover {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--accent-slate);
+}
+
+.agent-info {
+ flex: 1;
+}
+
+.agent-name {
+ font-size: var(--text-lg);
+ color: var(--primary-blue);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ margin-bottom: var(--spacing-sm);
+ font-weight: var(--font-semibold);
+}
+
+.section-title {
+ font-size: var(--text-4xl);
+ font-weight: var(--font-bold);
+ color: var(--text-light);
+ letter-spacing: -0.01em;
+ text-shadow: none;
+ position: relative;
+ padding-bottom: var(--spacing-sm);
+}
+
+.section-title::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 180px;
+ height: 4px;
+ background: linear-gradient(90deg, var(--primary-blue), transparent);
+ border-radius: 2px;
+}
+
+.section-content {
+ max-width: 100%;
+ margin: 0 auto;
+}
+
+.expert-intro {
+ background: var(--bg-card);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border-radius: var(--radius-xl);
+ padding: var(--spacing-lg);
+ margin-bottom: var(--spacing-xl);
+ border: 2px solid var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.expert-intro h3 {
+ font-size: var(--text-2xl);
+ color: var(--primary-blue);
+ margin-bottom: var(--spacing-lg);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.expert-intro p {
+ color: var(--text-gray);
+ line-height: 1.8;
+ font-size: var(--text-lg);
+}
+
+/* ========== 网格布局 - 针对大屏幕优化 ========== */
+.grid {
+ display: grid;
+ gap: var(--spacing-2xl);
+}
+
+.grid-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-4 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+/* ========== 卡片 - 图片优先布局 ========== */
+.card {
+ background: var(--bg-card);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-radius: var(--radius-2xl);
+ overflow: hidden;
+ border: 2px solid var(--border-light);
+ transition: all var(--transition-base);
+ box-shadow: var(--shadow-md);
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.card:hover {
+ transform: translateY(-8px);
+ box-shadow: var(--shadow-xl), var(--shadow-blue);
+ border-color: var(--primary-blue);
+}
+
+.card-header {
+ padding: var(--spacing-xl);
+ background: var(--bg-semi-dark);
+ border-bottom: 2px solid var(--border-light);
+ order: 2;
+}
+
+.card-title {
+ font-size: var(--text-2xl);
+ font-weight: var(--font-semibold);
+ color: var(--primary-blue);
+ margin-bottom: var(--spacing-sm);
+}
+
+.card-body {
+ padding: var(--spacing-xl);
+ order: 3;
+ flex: 1;
+}
+
+/* ========== 图片容器 - 突出展示 ========== */
+.image-container {
+ width: 100%;
+ aspect-ratio: 3/2;
+ overflow: hidden;
+ border-radius: 0;
+ margin-bottom: 0;
+ background: rgba(0,0,0,0.5);
+ position: relative;
+ box-shadow: none;
+ border: none;
+ transition: all var(--transition-base);
+ order: 1;
+ flex-shrink: 0;
+}
+
+.image-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform var(--transition-slow);
+ filter: brightness(0.9);
+}
+
+.image-container:hover img {
+ transform: scale(1.1);
+ filter: brightness(1.1);
+}
+
+.image-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: var(--spacing-md);
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+ color: var(--text-light);
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ text-align: center;
+ transform: translateY(100%);
+ transition: transform var(--transition-base);
+}
+
+.image-container:hover .image-caption {
+ transform: translateY(0);
+}
+
+/* ========== 列表 ========== */
+.feature-list {
+ list-style: none;
+ padding: 0;
+}
+
+.feature-list li {
+ padding: var(--spacing-sm) 0;
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-gray);
+ transition: all var(--transition-fast);
+}
+
+.feature-list li:hover {
+ color: var(--primary-blue);
+ padding-left: var(--spacing-sm);
+}
+
+.feature-list li:last-child {
+ border-bottom: none;
+}
+
+/* ========== 统计数据 ========== */
+.stats {
+ display: flex;
+ gap: var(--spacing-md);
+ padding: var(--spacing-lg);
+ background: var(--bg-overlay);
+ backdrop-filter: blur(10px);
+ border-radius: var(--radius-lg);
+ border: 1px solid var(--border-light);
+}
+
+.stat-item {
+ flex: 1;
+ text-align: center;
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ background: var(--bg-card);
+ border: 1px solid transparent;
+ transition: all var(--transition-base);
+}
+
+.stat-item:hover {
+ background: var(--hover-bg);
+ transform: translateY(-4px);
+ border-color: var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.stat-label {
+ font-size: var(--text-sm);
+ color: var(--text-gray);
+ margin-bottom: var(--spacing-xs);
+}
+
+.stat-value {
+ font-size: var(--text-2xl);
+ font-weight: var(--font-bold);
+ color: var(--primary-blue);
+ text-shadow: none;
+}
+
+/* ========== 表格 ========== */
+.table-container {
+ overflow-x: auto;
+ margin: var(--spacing-xl) 0;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-lg);
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ background: var(--bg-card);
+ backdrop-filter: blur(10px);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+}
+
+th {
+ background: var(--active-bg);
+ color: var(--primary-blue);
+ padding: var(--spacing-md);
+ text-align: left;
+ font-weight: var(--font-semibold);
+ border-bottom: 2px solid var(--primary-blue);
+}
+
+td {
+ padding: var(--spacing-md);
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-gray);
+}
+
+tr:last-child td {
+ border-bottom: none;
+}
+
+tr:hover {
+ background: var(--hover-bg);
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 768px) {
+ :root {
+ --spacing-sm: 0.75rem;
+ --spacing-md: 1rem;
+ --spacing-lg: 1.5rem;
+ --spacing-xl: 2rem;
+ --spacing-2xl: 3rem;
+ --spacing-3xl: 4rem;
+ }
+
+ .hero {
+ background-attachment: scroll;
+ }
+
+ .section:nth-child(odd),
+ .section:nth-child(even) {
+ background-attachment: scroll;
+ }
+
+ .hero-content {
+ padding: var(--spacing-lg);
+ }
+
+ .nav-container {
+ gap: var(--spacing-xs);
+ }
+
+ .nav-item {
+ padding: var(--spacing-xs) var(--spacing-md);
+ font-size: var(--text-sm);
+ }
+
+ .section {
+ padding: var(--spacing-2xl) 0;
+ }
+
+ .grid-2,
+ .grid-3,
+ .grid-4 {
+ grid-template-columns: 1fr;
+ }
+
+ .section-header {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .stats {
+ flex-direction: column;
+ }
+}
+
+/* ========== 动画 ========== */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.fade-in {
+ animation: fadeIn 0.6s ease forwards;
+}
+
+.slide-in {
+ animation: slideIn 0.6s ease forwards;
+}
+
+/* ========== 工具类 ========== */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.mt-xl { margin-top: var(--spacing-xl); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+
+.hidden { display: none; }
+.block { display: block; }
+.flex { display: flex; }
+.grid { display: grid; }
+
+.gap-sm { gap: var(--spacing-sm); }
+.gap-md { gap: var(--spacing-md); }
+.gap-lg { gap: var(--spacing-lg); }
+
+/* ========== 图片加载状态 ========== */
+img {
+ transition: opacity var(--transition-base);
+}
+
+img.loaded {
+ opacity: 1;
+}
+
+img.error {
+ opacity: 0.5;
+ filter: grayscale(1);
+}
+
+/* ========== SVG图标尺寸统一管理 ========== */
+.hero-description i[data-lucide] {
+ width: 24px !important;
+ height: 24px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.agent-name i[data-lucide] {
+ width: 20px !important;
+ height: 20px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.expert-intro h3 i[data-lucide] {
+ width: 40px !important;
+ height: 40px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 10px !important;
+}
+
+.feature-list li i[data-lucide] {
+ width: 18px !important;
+ height: 18px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.nav-item i[data-lucide] {
+ width: 20px !important;
+ height: 20px !important;
+ display: block !important;
+ margin: 0 auto 4px !important;
+}
+
+/* ========== 主题切换按钮 ========== */
+.theme-toggle {
+ position: fixed;
+ top: 24px;
+ right: 24px;
+ z-index: 1000;
+}
+
+.theme-toggle-btn {
+ position: relative;
+ width: 64px;
+ height: 32px;
+ background: var(--bg-card);
+ border: 2px solid var(--border-light);
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 6px;
+ transition: all var(--transition-base);
+ box-shadow: var(--shadow-md);
+}
+
+.theme-toggle-btn:hover {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-lg);
+}
+
+.theme-toggle-btn:active {
+ transform: scale(0.95);
+}
+
+.theme-icon {
+ width: 18px !important;
+ height: 18px !important;
+ transition: all var(--transition-base);
+ color: var(--text-gray);
+}
+
+body:not(.dark-theme) .theme-icon-light {
+ color: var(--primary-blue);
+ transform: scale(1.2);
+}
+
+body:not(.dark-theme) .theme-icon-dark {
+ opacity: 0.5;
+}
+
+body.dark-theme .theme-icon-dark {
+ color: var(--primary-blue);
+ transform: scale(1.2);
+}
+
+body.dark-theme .theme-icon-light {
+ opacity: 0.5;
+}
diff --git a/web_frontend/web_result/order-classes/civil/images b/web_frontend/web_result/order-classes/civil/images
new file mode 120000
index 00000000..58076fe2
--- /dev/null
+++ b/web_frontend/web_result/order-classes/civil/images
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/土木/notion文稿/image
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/civil/index.html b/web_frontend/web_result/order-classes/civil/index.html
new file mode 100644
index 00000000..82e75eb2
--- /dev/null
+++ b/web_frontend/web_result/order-classes/civil/index.html
@@ -0,0 +1,656 @@
+
+
+
+
+
+ 室内CAD整体方案设计 - 土木订单班
+
+
+
+
+
+
+
+
+
+
+
+
+
🏗️ 土木订单班
+
室内CAD
整体方案设计
+
需求分析 · 深化设计 · 效果呈现 · 施工出图
+
+ 120m² 现代简约三口之家
+ 浅灰米白主色调设计
+ 全流程CAD施工图绘制
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
项目背景
+
本项目为120m²高层住宅室内设计,业主为三口之家(夫妻+6岁小孩),希望打造开放式客餐厅、独立书房、儿童活动区和大容量收纳系统的现代简约风格家居空间。总预算35万元(硬装25万+软装10万),工期120天内完工确保新学期入住。
+
+
+
+
+
+
![室内平面设计图]()
+
120m² 户型平面设计图
+
+
+
+
+ - 房屋类型: 高层住宅120m²
+ - 层高: 2.9m (吊顶后2.6m)
+ - 客厅: 6.2m×4.0m 南向落地窗
+ - 主卧: 4.5m×3.8m 带独立卫生间
+ - 儿童房: 3.6m×3.0m 东向窗户
+ - 书房: 3.2m×2.5m 独立空间
+
+
+
+
+
+
+
+
+ - 开放式客餐厅设计
+ - 独立书房工作区
+ - 儿童活动区规划
+ - 大容量收纳系统 ≥35m³
+ - 现代简约风格
+ - 预算控制: 35万元
+ - 工期要求: 120天
+ - 空间利用率: 85%→92%
+
+
+
+
+
+
+
功能分区与动线规划
+
+
+
+
+
+
+
+ - 客厅+餐厅: 38m²
+ - 沙发3.2m 距电视3.2m
+ - 餐桌1.6m×0.9m
+ - 通行距离≥0.8m
+
+
+
+
+
+
+
+
+ - 主卧: 17m²
+ - 次卧: 12m²
+ - 儿童房: 11m²
+ - 床尾通道≥0.9m
+
+
+
+
+
+
+
+
+ - 书房: 8m²
+ - 书桌1.5m×0.7m
+ - 书柜厚度0.35m
+ - 活动空间≥1.0m
+
+
+
+
+
+
+
+
+ - 厨房: 10m²
+ - 卫生间: 8m²
+ - 储藏空间: 6m²
+ - 动静分区: 52%/48%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
深化设计理念
+
将前期方案转化为可落地的施工图纸,在CAD中精确表现吊顶、立面、收口节点和水电布置等细节。客厅吊顶高度2.6m,边吊宽度450mm;地面采用600×600mm浅灰瓷砖,卧室15mm实木地板;立面设计包含电视背景墙3.8m×2.6m岩板+木饰面组合。
+
+
+
+
![实景渲染尺寸标记]()
+
实景渲染尺寸标记图
+
+
+
+
+
+
![吊顶收口节点]()
+
吊顶收口节点CAD图
+
+
+
+
+ - 吊顶高度: 2.6m (扣除梁高0.3m)
+ - 边吊宽度: 450mm
+ - 灯带: 3500K暖白 180lx
+ - 筒灯间距: 1.2m
+ - 卧室: 3000K暖光 150lx
+ - 厨房: 4000K中性光 250lx
+
+
+
+
+
+
+
![地面收口]()
+
地面与墙面收口CAD图
+
+
+
+
+ - 客餐厅: 600×600mm浅灰瓷砖
+ - 防滑系数: ≥0.5
+ - 卧室: 15mm实木地板
+ - 厨卫: 300×300mm防滑砖
+ - 排水坡度: 0.5-2.5%
+ - 找平层厚度: 20mm
+
+
+
+
+
+
+
![窗帘盒节点]()
+
窗帘盒尺寸CAD图
+
+
+
+
+ - 轻钢龙骨: 38×12mm
+ - 石膏板厚度: 9.5mm
+ - 踢脚线: 高80mm 厚15mm
+ - 转角: 45°斜切拼接
+ - 窗帘盒: 宽150mm 高120mm
+ - 遮光布+纱帘双轨
+
+
+
+
+
+
+
水电系统深化
+
+
+
+
![强弱电布置图]()
+
CAD强弱电布置图
+
+
+
+
+
+
+
+ - 客厅插座: 6个 (含电视墙2个)
+ - 卧室床头: 每侧2个插座
+ - 书房桌下: 4个插座
+ - 开关高度: 1300mm
+ - 普通插座: 300mm
+ - 台面插座: 1100mm
+
+
+
+
+
+
+
+
+ - 厨房排水管: 直径50mm
+ - 排水坡度: 2%
+ - 卫生间排水: 直径75mm
+ - 卫浴坡度: 2.5%
+ - 地漏位置精确标注
+ - 预埋管线走向规划
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
设计理念
+
现代简约风格以米白(60%)+浅灰(25%)为主色调,辅以黑色金属线条、深胡桃木饰面(10%)增加层次感,儿童房采用马卡龙蓝(5%)点缀。所有材质均达E0级环保标准,客厅电视背景墙采用6mm大岩板+木饰面组合,营造简洁大方的空间氛围。
+
+
+
+
+
+
![材质选型]()
+
材质选型展示
+
+
+
+
+ - 客餐厅地面: 600×600mm抛釉瓷砖
+ - 光泽度≥85% 防滑R10
+ - 卧室: 15mm三层实木复合地板
+ - 甲醛释放≤0.05mg/m³ (E0级)
+ - 电视墙: 6mm大岩板+木饰面
+ - 卧室: 布艺硬包+阻燃海绵
+
+
+
+
+
+
+
![尺寸标注]()
+
精确尺寸标注
+
+
+
+
+ - 主色调: 米白60% (NCS S0502-Y)
+ - 辅助色: 浅灰25%
+ - 点缀色: 黑色金属10%
+ - 木饰面: 深胡桃木
+ - 儿童房: 马卡龙蓝5%
+ - AI色彩模拟: 自然光+夜间
+
+
+
+
+
+
+
灯光设计方案
+
+
+
+
+
+
+
+ - 色温: 3500K暖白
+ - 照度: 180lx
+ - 筒灯间距: 1.2m
+ - 灯带配合层次光环境
+
+
+
+
+
+
+
+
+ - 色温: 3000K暖光
+ - 照度: 120lx
+ - 床头灯: 可调光
+ - 营造温馨舒适氛围
+
+
+
+
+
+
+
+
+ - 色温: 4000K中性光
+ - 照度: 250lx
+ - 台面补充照明
+ - 保证操作安全
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
施工图出图标准
+
输出1:50比例CAD施工图,包含总平面布置图、天花吊顶图、地面铺装图,标注所有墙体、门窗、家具位置。门洞宽度统一900mm,室内净高2.6m。3D建模使用3ds Max按1:1尺寸精确建模,V-Ray渲染输出4K分辨率效果图,展示鸟瞰全景及各空间透视图。
+
+
+
+
![效果渲染图]()
+
3D效果渲染图+尺寸标注
+
+
+
+
+
+
+
+ - 比例: 1:50
+ - 客餐厅: 38m²
+ - 卧室: 17/12/11m²
+ - 书房: 8m²
+ - 厨房: 10m²
+ - 门洞宽度: 900mm
+
+
+
+
+
+
+
+
+ - 主吊顶标高: 2.6m
+ - 跌级吊顶: 2.5m
+ - 客厅筒灯: 12盏 (间距1.2m)
+ - 灯带总长: 18m
+ - 照度: 180lx
+ - 材料: 9.5mm石膏板
+
+
+
+
+
+
+
+
+ - 客餐厅: 600×600mm瓷砖
+ - 缝宽: 2mm
+ - 卧室: 15mm实木地板
+ - 顺光铺设
+ - 厨卫: 300×300mm防滑砖
+ - 坡度: 0.5-0.8%
+
+
+
+
+
+
+
3D建模与渲染
+
+
+
+
+
+
+
+ - 软件: 3ds Max + V-Ray
+ - 尺寸: 1:1精确建模
+ - 分辨率: 4K (3840×2160px)
+ - 瓷砖反射率: 0.25
+ - 岩板反射率: 0.4
+ - 木地板反射率: 0.15
+
+
+
+
+
+
+
+
+ - 鸟瞰全景图: 1张
+ - 客厅-餐厅透视: 2张
+ - 卧室透视图: 2张
+ - 书房透视图: 1张
+ - 儿童房透视: 1张
+ - 真实材质模拟
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 项目成果总结
+
+
+
+
+
+
+
+ - 120m² 现代简约设计
+ - 空间利用率提升至92%
+ - 收纳体积≥35m³
+ - 米白+浅灰色调
+ - 无主灯+主灯结合
+ - 全套CAD施工图
+ - 4K高清效果图
+ - E0级环保材料
+
+
+
+
+
+
+
+
+ - 户型面积: 120m²
+ - 层高: 2.9m→2.6m
+ - 总预算: 35万元
+ - 工期: 120天
+ - 客厅筒灯: 12盏
+ - 插座总数: 14个
+ - 石膏板: 9.5mm
+ - 地板: 15mm
+
+
+
+
+
+
+
+
+ - 满足三口之家需求
+ - 儿童成长空间
+ - 独立学习工作区
+ - 大容量收纳系统
+ - 现代简约美学
+ - 环保健康材料
+ - 可落地施工图
+ - 专业设计标准
+
+
+
+
+
+
+
🏗️ 室内CAD整体方案设计圆满完成!
+
© 2024 土木订单班 | 专业室内设计解决方案
+
+
+
+
+
+
+
diff --git a/web_frontend/web_result/order-classes/civil/js/main.js b/web_frontend/web_result/order-classes/civil/js/main.js
new file mode 100644
index 00000000..0cf3a4d0
--- /dev/null
+++ b/web_frontend/web_result/order-classes/civil/js/main.js
@@ -0,0 +1,270 @@
+// 室内CAD整体方案设计 - 主要JavaScript逻辑
+
+// 页面初始化
+document.addEventListener('DOMContentLoaded', function() {
+ console.log('🏗️ 土木订单班室内CAD设计页面加载完成');
+
+ // 初始化Lucide图标
+ if (typeof lucide !== 'undefined') {
+ lucide.createIcons();
+ }
+
+ // 初始化组件
+ initNavigation();
+ initAnimations();
+ initLazyLoading();
+ initSmoothScroll();
+ updateStats();
+ initThemeToggle();
+});
+
+// 导航功能
+function initNavigation() {
+ const navItems = document.querySelectorAll('.nav-item');
+ const sections = document.querySelectorAll('.section');
+
+ // 点击导航项滚动到对应区块
+ navItems.forEach((item, index) => {
+ item.addEventListener('click', () => {
+ // 移除所有活跃状态
+ navItems.forEach(nav => nav.classList.remove('active'));
+ // 添加当前活跃状态
+ item.classList.add('active');
+
+ // 滚动到对应区块
+ if (sections[index]) {
+ const targetSection = sections[index];
+ const offsetTop = targetSection.offsetTop - 100;
+
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // 滚动时更新导航活跃状态
+ window.addEventListener('scroll', () => {
+ let current = '';
+ sections.forEach((section, index) => {
+ const sectionTop = section.offsetTop - 150;
+ if (scrollY >= sectionTop) {
+ current = index;
+ }
+ });
+
+ navItems.forEach((item, index) => {
+ item.classList.remove('active');
+ if (index === current) {
+ item.classList.add('active');
+ }
+ });
+ });
+}
+
+// 动画初始化
+function initAnimations() {
+ // 使用 Intersection Observer 实现滚动动画
+ const observerOptions = {
+ root: null,
+ rootMargin: '0px',
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ // 观察所有需要动画的元素
+ const animatedElements = document.querySelectorAll('.card, .expert-intro');
+ animatedElements.forEach(el => {
+ el.style.opacity = '0';
+ observer.observe(el);
+ });
+}
+
+// 图片懒加载
+function initLazyLoading() {
+ const images = document.querySelectorAll('img[data-src]');
+
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ const src = img.getAttribute('data-src');
+
+ // 创建新图片对象来预加载
+ const tempImg = new Image();
+ tempImg.onload = function() {
+ img.src = src;
+ img.classList.add('loaded');
+ };
+ tempImg.onerror = function() {
+ // 如果图片加载失败,使用蓝色主题占位图
+ img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f9ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%230ea5e9"%3E图片加载中%3C/text%3E%3C/svg%3E';
+ img.classList.add('error');
+ };
+ tempImg.src = src;
+
+ img.removeAttribute('data-src');
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ images.forEach(img => {
+ imageObserver.observe(img);
+ });
+}
+
+// 平滑滚动
+function initSmoothScroll() {
+ // 为所有锚点链接添加平滑滚动
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const targetId = this.getAttribute('href');
+ if (targetId === '#') return;
+
+ const target = document.querySelector(targetId);
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+}
+
+// 更新统计数据 - 室内CAD设计数据
+function updateStats() {
+ // 动画数字增长效果 - 室内CAD相关数据
+ const stats = [
+ { selector: '.area-size', value: 120, suffix: 'm²' },
+ { selector: '.floor-height', value: 2.9, suffix: 'm' },
+ { selector: '.total-budget', value: 35, suffix: '万' },
+ { selector: '.construction-days', value: 120, suffix: '天' },
+ { selector: '.storage-volume', value: 35, suffix: 'm³' },
+ { selector: '.space-efficiency', value: 92, suffix: '%' },
+ { selector: '.ceiling-lights', value: 12, suffix: '盏' },
+ { selector: '.socket-count', value: 14, suffix: '个' }
+ ];
+
+ stats.forEach(stat => {
+ const element = document.querySelector(stat.selector);
+ if (element) {
+ animateValue(element, 0, stat.value, 2000, stat.suffix);
+ }
+ });
+}
+
+// 数字动画函数
+function animateValue(element, start, end, duration, suffix = '') {
+ const startTime = performance.now();
+
+ function update(currentTime) {
+ const elapsed = currentTime - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // 使用缓动函数
+ const easeOutQuad = progress * (2 - progress);
+ let current;
+
+ // 处理小数值
+ if (end < 10 && end % 1 !== 0) {
+ current = (start + (end - start) * easeOutQuad).toFixed(1);
+ } else {
+ current = Math.floor(start + (end - start) * easeOutQuad);
+ }
+
+ element.textContent = current + suffix;
+
+ if (progress < 1) {
+ requestAnimationFrame(update);
+ }
+ }
+
+ requestAnimationFrame(update);
+}
+
+// 错误处理
+window.addEventListener('error', function(e) {
+ if (e.target.tagName === 'IMG') {
+ console.warn('图片加载失败:', e.target.src);
+ e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f9ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%230ea5e9"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
+ e.target.classList.add('error');
+ }
+}, true);
+
+// 移动端优化
+if ('ontouchstart' in window) {
+ document.body.classList.add('touch-device');
+
+ // 移动端点击优化
+ let touchStartTime;
+ document.addEventListener('touchstart', () => {
+ touchStartTime = Date.now();
+ });
+
+ document.addEventListener('touchend', (e) => {
+ const touchEndTime = Date.now();
+ if (touchEndTime - touchStartTime < 200) {
+ // 快速点击
+ e.preventDefault();
+ }
+ });
+}
+
+// 性能监控
+if (window.performance && window.performance.timing) {
+ window.addEventListener('load', () => {
+ setTimeout(() => {
+ const timing = window.performance.timing;
+ const loadTime = timing.loadEventEnd - timing.navigationStart;
+ console.log(`页面加载时间: ${loadTime}ms`);
+
+ // 如果加载时间过长,提示用户
+ if (loadTime > 3000) {
+ console.warn('页面加载时间较长,可能需要优化');
+ }
+ }, 0);
+ });
+}
+
+// 主题切换功能
+function initThemeToggle() {
+ const themeToggleBtn = document.getElementById('themeToggleBtn');
+
+ // 从localStorage读取用户的主题偏好
+ const savedTheme = localStorage.getItem('theme');
+ // 如果没有保存的偏好,默认使用暗色主题
+ if (savedTheme === 'dark' || savedTheme === null) {
+ document.body.classList.add('dark-theme');
+ }
+
+ // 点击切换主题
+ if (themeToggleBtn) {
+ themeToggleBtn.addEventListener('click', () => {
+ document.body.classList.toggle('dark-theme');
+
+ // 保存用户偏好
+ if (document.body.classList.contains('dark-theme')) {
+ localStorage.setItem('theme', 'dark');
+ } else {
+ localStorage.setItem('theme', 'light');
+ }
+
+ // 重新初始化图标以确保正确显示
+ if (typeof lucide !== 'undefined') {
+ lucide.createIcons();
+ }
+ });
+ }
+}