# 青藏高原轻钢拉索结构医疗站 - 毕业设计展示网站

## 📁 项目结构

```
my_website/
├── index.html          # 主HTML文件，包含所有7个板块的内容结构
├── css/
│   └── style.css       # 样式文件，包含所有视觉设计
├── js/
│   └── main.js         # JavaScript文件，处理交互和动画
├── images/             # 图片文件夹（目前为空，用于存放实际图片）
└── README.md           # 项目说明文档
```

## 🎨 设计特点

### 色彩方案
- **基础色**: 苔绿色 `#8A9B7E`（莫兰迪色系）
- **浅色变体**: `#A8B89E`, `#C5D1BE`
- **深色变体**: `#6B7D60`
- **背景色**: 极浅暖灰色 `#F5F5F2` / `#EDEDE8`

### 设计理念
- **Approachable Luxury**（亲和的奢华）
- 低调、克制、留白充足
- 细节精致、层次感强

### 布局特色
- 卡片式布局（Card Layout）
- 柔和的弥散阴影
- 大量留白，内容不拥挤
- 响应式设计，适配手机和电脑

## 📋 网站板块说明

### 1. 前期分析 (`#analysis`)
- 地理位置分析
- 气候条件分析
- 场地选址分析
- **使用方式**: 替换 `.placeholder-img` 为实际分析图

### 2. 设计表现 (`#design`)
- 鸟瞰渲染图（大图）
- 室内渲染图
- 立面效果图
- 细节特写
- **使用方式**: 在 `.gallery-grid` 中插入实际渲染图

### 3. 设计图纸 (`#drawings`)
- 总平面布置图
- 建筑平面图
- **使用方式**: 替换占位图为CAD图纸导出图片

### 4. 性能分析 (`#performance`)
- 结构受力分析图表
- 外围护结构节能计算
- **使用方式**: 插入结构计算软件导出的分析图

### 5. 自保障设计 (`#self-sufficient`)
- 太阳能发电系统计算
- 水循环利用系统说明
- **使用方式**: 修改数据列表中的具体数值

### 6. 建造模拟 (`#construction`)
- 建造场地总图
- 建造流程安排表（表格）
- 主要构件表（表格）
- **使用方式**: 修改表格中的数据为实际工程数据

### 7. 关于项目 (`#about`)
- 结语与致谢
- 项目基本信息
- **使用方式**: 修改文本内容和项目信息

## 🚀 使用方法

### 本地预览
直接在浏览器中打开 `index.html` 文件即可预览网站。

### 替换占位图为实际图片

1. **准备图片**: 将所有图片放入 `images/` 文件夹
2. **修改HTML**: 找到对应的 `.placeholder-img` div
3. **替换代码**: 
   ```html
   <!-- 原代码 -->
   <div class="card-image placeholder-img">
       <span>地理分析图</span>
   </div>
   
   <!-- 替换为 -->
   <div class="card-image">
       <img src="images/your-image.jpg" alt="图片描述">
   </div>
   ```

4. **添加图片样式** (在 CSS 中添加):
   ```css
   .card-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   ```

### 修改表格数据

在 HTML 中找到对应的 `<table>` 元素，修改 `<td>` 标签内的文本内容。

### 修改文本内容

直接编辑 HTML 文件中各板块的 `<p>`、`<h3>` 等标签内的文字。

## 💡 技术特性

### 纯前端实现
- ✅ HTML5 语义化标签
- ✅ CSS3 现代特性（Grid、Flexbox、变量）
- ✅ 原生 JavaScript（无依赖）

### 响应式设计
- ✅ 桌面端：多列网格布局
- ✅ 平板端：自适应调整
- ✅ 手机端：单列布局 + 汉堡菜单

### 交互效果
- ✅ 固定导航栏，滚动时变化阴影
- ✅ 平滑滚动到锚点
- ✅ 导航链接高亮当前板块
- ✅ 卡片进入视口时的渐显动画
- ✅ 移动端汉堡菜单

### 性能优化
- ✅ CSS 变量统一管理
- ✅  Intersection Observer API 实现懒加载和动画
- ✅ 流畅的 CSS 过渡动画

## 🎯 后续优化建议

1. **图片优化**: 
   - 使用 WebP 格式减小体积
   - 添加图片懒加载
   - 实现图片点击放大功能

2. **SEO优化**:
   - 添加 meta description
   - 添加 Open Graph 标签
   - 优化 heading 层级

3. **可访问性**:
   - 添加 ARIA 标签
   - 增强键盘导航支持
   - 提高颜色对比度

4. **功能增强**:
   - 添加图片轮播/灯箱效果
   - 添加打印样式
   - 添加PDF下载链接

## 📝 注意事项

1. **图片尺寸建议**:
   - 卡片图片: 800x600px 或更高
   - 画廊大图: 1200x800px 或更高
   - 图纸图片: 根据实际比例调整

2. **浏览器兼容性**:
   - 推荐使用 Chrome、Firefox、Safari、Edge 等现代浏览器
   - IE11 及以下版本不支持部分 CSS3 特性

3. **部署建议**:
   - 可直接部署到 GitHub Pages
   - 或使用 Netlify、Vercel 等静态托管服务

## 📄 许可证

本项目为毕业设计作品，仅供学习和展示使用。

---

**设计时间**: 202X年  
**项目名称**: 青藏高原轻钢拉索结构医疗站  
**设计理念**: Approachable Luxury（亲和的奢华）