# 📖 网站使用演示 ## 🎬 功能演示说明 ### 1. 导航栏交互 **桌面端效果：** - ✅ 导航栏固定在顶部 - ✅ 滚动页面时，导航栏阴影加深 - ✅ 点击任意导航链接，页面平滑滚动到对应板块 - ✅ 滚动时，当前板块的导航链接会自动高亮显示 **移动端效果：** - ✅ 窗口宽度小于 768px 时，显示汉堡菜单图标 - ✅ 点击汉堡图标，展开/收起导航菜单 - ✅ 点击菜单项后自动关闭菜单 --- ### 2. 板块展示 #### 📍 Hero 区域（首页） ``` 显示内容： - 项目标题：青藏高原轻钢拉索结构医疗站 - 副标题：Approachable Luxury · 亲和的奢华 - 描述文字：建筑面积200平方米 · 低调克制 · 细节精致 ``` #### 📍 板块 1：前期分析 ``` 布局：3列卡片网格 内容： ├─ 卡片1：地理位置分析（占位图 + 说明文字） ├─ 卡片2：气候条件分析（占位图 + 说明文字） └─ 卡片3：场地选址分析（占位图 + 说明文字） ``` #### 📍 板块 2：设计表现 ``` 布局：不对称画廊网格 内容： ├─ 大图：鸟瞰渲染图（占据2×2格） ├─ 小图：室内渲染图1 ├─ 小图：室内渲染图2 ├─ 小图：立面效果图 └─ 小图：细节特写 ``` #### 📍 板块 3：设计图纸 ``` 布局：2列卡片网格 内容： ├─ 卡片1：总平面布置图（宽图 400px 高度） └─ 卡片2：建筑平面图（宽图 400px 高度） ``` #### 📍 板块 4：性能分析 ``` 布局：2列卡片网格 内容： ├─ 卡片1：结构受力分析（图表占位） └─ 卡片2：外围护结构节能计算（图表占位） ``` #### 📍 板块 5：自保障设计 ``` 布局：2列卡片网格 内容： ├─ 卡片1：太阳能发电系统 │ ├─ 示意图占位 │ └─ 数据列表： │ • 光伏板面积：XX m² │ • 日发电量：XX kWh │ • 储能电池容量：XX kWh └─ 卡片2：水循环利用系统 ├─ 系统图占位 └─ 数据列表： • 雨水收集量：XX m³/年 • 中水回用率：XX% • 节水效益：XX% ``` #### 📍 板块 6：建造模拟 ``` 布局：混合布局 内容： ├─ 全宽卡片：建造场地总图（宽图） └─ 2列卡片网格： ├─ 卡片1：建造流程安排表（表格） │ 包含6个阶段： │ 1. 基础施工 (15天) │ 2. 钢结构安装 (10天) │ 3. 拉索张拉 (7天) │ 4. 围护结构 (12天) │ 5. 内部装修 (15天) │ 6. 设备安装 (10天) └─ 卡片2：主要构件表（表格） 包含5类构件： - 钢柱 - 钢梁 - 拉索 - 屋面板 - 外墙板 ``` #### 📍 板块 7：关于项目 ``` 布局：单卡片居中 内容： ├─ 结语段落（大字体） ├─ 致谢段落 └─ 项目信息框： • 项目名称 • 建筑面积 • 设计理念 • 设计时间 ``` --- ### 3. 动画效果 **页面加载时：** - ✨ 所有卡片从下方淡入（opacity 0→1, translateY 30px→0） - ✨ 动画持续时间：0.6秒 - ✨ 缓动函数：ease-out **滚动触发：** - ✨ 当卡片进入视口时，触发渐显动画 - ✨ 使用 Intersection Observer API 实现 - ✨ 阈值：10% 可见时触发 **悬停效果：** - ✨ 鼠标悬停卡片时，卡片上浮 5px - ✨ 阴影加深，增强立体感 - ✨ 过渡时间：0.3秒 --- ### 4. 响应式断点 #### 📱 手机端 (< 768px) ``` 变化： ✓ 导航栏变为汉堡菜单 ✓ 所有网格变为单列布局 ✓ 字体大小缩小（html font-size: 14px） ✓ 内边距减小（section padding: 3rem 1rem） ✓ 画廊大图变为普通尺寸 ``` #### 💻 平板端 (768px - 1024px) ``` 变化： ✓ 保持多列布局 ✓ 自适应调整列数 ✓ 正常字体大小（16px） ``` #### 🖥️ 桌面端 (> 1024px) ``` 变化： ✓ 完整的多列网格布局 ✓ 最大宽度限制：1400px ✓ 居中对齐 ``` --- ## 🔍 代码结构解析 ### HTML 结构层次 ```html ├──