From 6b9fc9d3f207074e7aaffa0fc04c0b1e5e163745 Mon Sep 17 00:00:00 2001 From: yangyuqing <1614872855@qq.com> Date: Tue, 2 Jun 2026 11:51:30 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/extensions.json | 5 + DEMO.md | 335 +++++++++++++++++++++++++ QUICK_START.md | 191 +++++++++++++++ README.md | 184 ++++++++++++++ css/style.css | 529 ++++++++++++++++++++++++++++++++++++++++ images/README_IMAGES.md | 137 +++++++++++ index.html | 343 ++++++++++++++++++++++++++ js/main.js | 149 +++++++++++ 8 files changed, 1873 insertions(+) create mode 100644 .vscode/extensions.json create mode 100644 DEMO.md create mode 100644 QUICK_START.md create mode 100644 README.md create mode 100644 css/style.css create mode 100644 images/README_IMAGES.md create mode 100644 index.html create mode 100644 js/main.js diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..109181f --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "alibaba-cloud.tongyi-lingma" + ] +} \ No newline at end of file diff --git a/DEMO.md b/DEMO.md new file mode 100644 index 0000000..5a0e981 --- /dev/null +++ b/DEMO.md @@ -0,0 +1,335 @@ +# 📖 网站使用演示 + +## 🎬 功能演示说明 + +### 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 + + ├──