feat: 将土木订单班的emoji替换为Lucide SVG图标
详细说明: - 完成了civil订单班index.html中22处emoji到SVG图标的替换 - 使用<i data-lucide="icon-name"></i>格式替代emoji字符 - 提升了视觉一致性和跨浏览器兼容性 - 修改文件: web_frontend/web_result/order-classes/civil/index.html - 影响模块: 土木订单班展示页面
This commit is contained in:
Yep_Q
@@ -19,7 +19,7 @@
|
||||
<!-- Hero 区域 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">🏗️ 土木订单班</div>
|
||||
<div class="hero-badge"><i data-lucide="building-2"></i> 土木订单班</div>
|
||||
<h1 class="hero-title">室内CAD<br>整体方案设计</h1>
|
||||
<h2 class="hero-subtitle">需求分析 · 深化设计 · 效果呈现 · 施工出图</h2>
|
||||
<p class="hero-description">
|
||||
@@ -71,16 +71,13 @@
|
||||
<p>本项目为120m²高层住宅室内设计,业主为三口之家(夫妻+6岁小孩),希望打造开放式客餐厅、独立书房、儿童活动区和大容量收纳系统的现代简约风格家居空间。总预算35万元(硬装25万+软装10万),工期120天内完工确保新学期入住。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<!-- 图文交错布局 -->
|
||||
<div class="alternating-layout">
|
||||
<div class="alternating-image">
|
||||
<img data-src="images/室内平面设计图.jpg" alt="室内平面设计图" loading="lazy">
|
||||
<div class="image-caption">120m² 户型平面设计图</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📐 户型概况</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alternating-content">
|
||||
<h3><i data-lucide="home"></i> 户型概况</h3>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="home"></i> 房屋类型: 高层住宅120m²</li>
|
||||
<li><i data-lucide="arrow-up"></i> 层高: 2.9m (吊顶后2.6m)</li>
|
||||
@@ -92,11 +89,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎯 核心需求</h3>
|
||||
<div class="alternating-layout reverse">
|
||||
<div class="alternating-image">
|
||||
<img data-src="images/效果图-客厅.jpg" alt="客厅效果图" loading="lazy">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alternating-content">
|
||||
<h3><i data-lucide="target"></i> 核心需求</h3>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="utensils"></i> 开放式客餐厅设计</li>
|
||||
<li><i data-lucide="book"></i> 独立书房工作区</li>
|
||||
@@ -109,7 +107,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="route"></i> 功能分区与动线规划</h3>
|
||||
@@ -118,7 +115,7 @@
|
||||
<div class="grid grid-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏠 起居区</h3>
|
||||
<h3 class="card-title"><i data-lucide="home"></i> 起居区</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -132,7 +129,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🛏️ 休息区</h3>
|
||||
<h3 class="card-title"><i data-lucide="bed"></i> 休息区</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -146,7 +143,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📚 学习工作区</h3>
|
||||
<h3 class="card-title"><i data-lucide="book-open"></i> 学习工作区</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -160,7 +157,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🔧 生活服务区</h3>
|
||||
<h3 class="card-title"><i data-lucide="settings"></i> 生活服务区</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -173,31 +170,62 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<!-- 统计数据展示 -->
|
||||
<div class="stats-chart" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">户型面积</div>
|
||||
<div class="stat-value area-size">0m²</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">层高</div>
|
||||
<div class="stat-value floor-height">0m</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">总预算</div>
|
||||
<div class="stat-value total-budget">0万</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">工期</div>
|
||||
<div class="stat-value construction-days">0天</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">收纳体积</div>
|
||||
<div class="stat-value storage-volume">0m³</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<div class="stat-label">空间利用率</div>
|
||||
<div class="stat-value space-efficiency">0%</div>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -222,19 +250,24 @@
|
||||
<p>将前期方案转化为可落地的施工图纸,在CAD中精确表现吊顶、立面、收口节点和水电布置等细节。客厅吊顶高度2.6m,边吊宽度450mm;地面采用600×600mm浅灰瓷砖,卧室15mm实木地板;立面设计包含电视背景墙3.8m×2.6m岩板+木饰面组合。</p>
|
||||
</div>
|
||||
|
||||
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||
<!-- 大图+小卡片组合布局 -->
|
||||
<div class="hero-cards-layout">
|
||||
<div class="hero-image-container">
|
||||
<img data-src="images/实景渲染尺寸标记.jpg" alt="实景渲染尺寸标记" loading="lazy">
|
||||
<div class="image-caption">实景渲染尺寸标记图</div>
|
||||
<div class="hero-image-overlay">
|
||||
<h3><i data-lucide="ruler"></i> CAD深化设计全景</h3>
|
||||
<p>精确标注 · 施工级细节 · 完整材料说明</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="hero-cards-grid">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/吊顶收口节点CAD图.jpg" alt="吊顶收口节点" loading="lazy">
|
||||
<div class="image-caption">吊顶收口节点CAD图</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📏 顶面布置深化</h3>
|
||||
<h3 class="card-title"><i data-lucide="ruler"></i> 顶面布置深化</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -254,7 +287,7 @@
|
||||
<div class="image-caption">地面与墙面收口CAD图</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎨 地面铺装设计</h3>
|
||||
<h3 class="card-title"><i data-lucide="palette"></i> 地面铺装设计</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -274,7 +307,7 @@
|
||||
<div class="image-caption">窗帘盒尺寸CAD图</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🔧 节点详图绘制</h3>
|
||||
<h3 class="card-title"><i data-lucide="wrench"></i> 节点详图绘制</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -288,6 +321,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="zap"></i> 水电系统深化</h3>
|
||||
@@ -301,7 +335,7 @@
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">⚡ 强弱电布置</h3>
|
||||
<h3 class="card-title"><i data-lucide="zap"></i> 强弱电布置</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -317,7 +351,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">💧 给排水系统</h3>
|
||||
<h3 class="card-title"><i data-lucide="droplets"></i> 给排水系统</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -354,16 +388,13 @@
|
||||
<p>现代简约风格以米白(60%)+浅灰(25%)为主色调,辅以黑色金属线条、深胡桃木饰面(10%)增加层次感,儿童房采用马卡龙蓝(5%)点缀。所有材质均达E0级环保标准,客厅电视背景墙采用6mm大岩板+木饰面组合,营造简洁大方的空间氛围。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<!-- 图文交错布局 -->
|
||||
<div class="alternating-layout">
|
||||
<div class="alternating-image">
|
||||
<img data-src="images/材质选型.jpg" alt="材质选型" loading="lazy">
|
||||
<div class="image-caption">材质选型展示</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎨 材质选型</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alternating-content">
|
||||
<h3><i data-lucide="package"></i> 材质选型</h3>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="square"></i> 客餐厅地面: 600×600mm抛釉瓷砖</li>
|
||||
<li><i data-lucide="shield-check"></i> 光泽度≥85% 防滑R10</li>
|
||||
@@ -375,15 +406,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<div class="alternating-layout reverse">
|
||||
<div class="alternating-image">
|
||||
<img data-src="images/尺寸标注.jpg" alt="尺寸标注" loading="lazy">
|
||||
<div class="image-caption">精确尺寸标注</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🌈 色彩搭配</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alternating-content">
|
||||
<h3><i data-lucide="palette"></i> 色彩搭配</h3>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="circle"></i> 主色调: 米白60% (NCS S0502-Y)</li>
|
||||
<li><i data-lucide="square"></i> 辅助色: 浅灰25%</li>
|
||||
@@ -394,7 +422,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="lightbulb"></i> 灯光设计方案</h3>
|
||||
@@ -403,7 +430,7 @@
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">☀️ 客厅照明</h3>
|
||||
<h3 class="card-title"><i data-lucide="sun"></i> 客厅照明</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -417,7 +444,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🌙 卧室照明</h3>
|
||||
<h3 class="card-title"><i data-lucide="moon"></i> 卧室照明</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -431,7 +458,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">💡 厨房照明</h3>
|
||||
<h3 class="card-title"><i data-lucide="lightbulb"></i> 厨房照明</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -474,7 +501,7 @@
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📐 总平面布置图</h3>
|
||||
<h3 class="card-title"><i data-lucide="layout-grid"></i> 总平面布置图</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -490,7 +517,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏗️ 天花吊顶施工图</h3>
|
||||
<h3 class="card-title"><i data-lucide="building-2"></i> 天花吊顶施工图</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -506,7 +533,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎨 地面铺装施工图</h3>
|
||||
<h3 class="card-title"><i data-lucide="palette"></i> 地面铺装施工图</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -528,7 +555,7 @@
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎬 建模渲染标准</h3>
|
||||
<h3 class="card-title"><i data-lucide="film"></i> 建模渲染标准</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -544,7 +571,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📸 效果图展示</h3>
|
||||
<h3 class="card-title"><i data-lucide="camera"></i> 效果图展示</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
@@ -581,6 +608,58 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: 户型生长动画展示 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/3D模型师.jpg" alt="3D动画师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="video"></i> 3D动画师
|
||||
</div>
|
||||
<h2 class="section-title">户型生长动画展示</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="play-circle"></i> 动画展示说明</h3>
|
||||
<p>通过3D动画展示户型空间的生长过程，直观呈现墙体结构、空间布局与设计理念。采用侘寂美学风格，以客厅漫游视频形式展现室内空间的整体氛围与细节设计，让客户提前感受未来家的模样。</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-image-container" style="margin-bottom: var(--spacing-xl);">
|
||||
<video
|
||||
controls
|
||||
preload="metadata"
|
||||
style="width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: var(--radius-2xl);"
|
||||
poster="images/室内平面设计图.jpg">
|
||||
<source src="images/户型生长动画.mp4" type="video/mp4">
|
||||
您的浏览器不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">动画时长</div>
|
||||
<div class="stat-value">90秒</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">渲染分辨率</div>
|
||||
<div class="stat-value">4K</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">设计风格</div>
|
||||
<div class="stat-value">侘寂美学</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">展示视角</div>
|
||||
<div class="stat-value">客厅漫游</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer: 项目成果总结 -->
|
||||
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||
<div class="container">
|
||||
@@ -591,7 +670,7 @@
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">🏗️ 核心成果</h3>
|
||||
<h3 class="card-title"><i data-lucide="building-2"></i> 核心成果</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
@@ -609,7 +688,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">📊 项目数据</h3>
|
||||
<h3 class="card-title"><i data-lucide="bar-chart"></i> 项目数据</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
@@ -627,7 +706,7 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">🎯 应用价值</h3>
|
||||
<h3 class="card-title"><i data-lucide="target"></i> 应用价值</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
@@ -645,7 +724,7 @@
|
||||
</div>
|
||||
|
||||
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||
<p>🏗️ 室内CAD整体方案设计圆满完成!</p>
|
||||
<p><i data-lucide="building-2"></i> 室内CAD整体方案设计圆满完成!</p>
|
||||
<p style="margin-top: var(--spacing-sm);">© 2024 土木订单班 | 专业室内设计解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user