125a134902
详细说明: - 修复getProjectInfo函数中seq.agent()的类型错误 - 添加兼容性处理，支持函数和对象两种数据格式 - 解决选择订单班后点击按钮导致页面崩溃的问题 - 修改文件: WorkflowPageV4.tsx (第934行) - 影响模块: ResultModal数据显示系统 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1687 lines
80 KiB
Markdown
1687 lines
80 KiB
Markdown
# 网页布局排版方法总结 - ASCII可视化指南（完整增强版）
|
||
|
||
## 目录
|
||
1. [Grid网格布局模式](#一grid网格布局模式)
|
||
2. [Flexbox布局模式](#二flexbox布局模式)
|
||
3. [图层叠加与定位模式](#三图层叠加与定位模式)
|
||
4. [响应式布局转换](#四响应式布局转换)
|
||
5. [间距系统对比](#五间距系统对比)
|
||
6. [排版层次结构](#六排版层次结构)
|
||
7. [实用布局组合示例](#七实用布局组合示例)
|
||
8. [Hero区域布局模式](#八hero区域布局模式) ⭐ 新增
|
||
9. [导航栏布局模式](#九导航栏布局模式) ⭐ 新增
|
||
10. [Agent头像区布局](#十agent头像区布局) ⭐ 新增
|
||
11. [Stats统计数据布局](#十一stats统计数据布局) ⭐ 新增
|
||
12. [Footer总结区布局](#十二footer总结区布局) ⭐ 新增
|
||
13. [关键CSS属性速查表](#十三关键css属性速查表)
|
||
14. [常见问题解决方案](#十四常见问题解决方案)
|
||
15. [最佳实践总结](#十五最佳实践总结)
|
||
|
||
---
|
||
|
||
## 一、Grid网格布局模式
|
||
|
||
### 1. Grid-2 布局（2列并排）
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 容器 (.grid-2) │
|
||
│ grid-template-columns: repeat(2, 1fr) │
|
||
├─────────────────────────────┬───────────────────────────────┤
|
||
│ │ │
|
||
│ 卡片 1 │ 卡片 2 │
|
||
│ (50% 宽度) │ (50% 宽度) │
|
||
│ │ │
|
||
│ ┌─────────────┐ │ ┌─────────────┐ │
|
||
│ │ 图片 │ │ │ 图片 │ │
|
||
│ │ 16:9 比例 │ │ │ 16:9 比例 │ │
|
||
│ └─────────────┘ │ └─────────────┘ │
|
||
│ ┌─────────────┐ │ ┌─────────────┐ │
|
||
│ │ 标题 │ │ │ 标题 │ │
|
||
│ ├─────────────┤ │ ├─────────────┤ │
|
||
│ │ 内容 │ │ │ 内容 │ │
|
||
│ └─────────────┘ │ └─────────────┘ │
|
||
│ │ │
|
||
└─────────────────────────────┴───────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-2xl);
|
||
}
|
||
|
||
适用场景：
|
||
- 对比展示（如：功能对比、前后对比）
|
||
- 大尺寸内容展示
|
||
- 左右分栏布局
|
||
```
|
||
|
||
### 2. Grid-3 布局（3列并排）
|
||
```
|
||
┌───────────────────────────────────────────────────────────────────────────┐
|
||
│ 容器 (.grid-3) │
|
||
│ grid-template-columns: repeat(3, 1fr) │
|
||
├───────────────────────┬───────────────────────┬───────────────────────────┤
|
||
│ │ │ │
|
||
│ 卡片 1 │ 卡片 2 │ 卡片 3 │
|
||
│ (33.33% 宽度) │ (33.33% 宽度) │ (33.33% 宽度) │
|
||
│ │ │ │
|
||
│ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │
|
||
│ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │
|
||
│ │ 16:9 │ │ │ 16:9 │ │ │ 16:9 │ │
|
||
│ └─────────┘ │ └─────────┘ │ └─────────┘ │
|
||
│ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │
|
||
│ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │
|
||
│ ├─────────┤ │ ├─────────┤ │ ├─────────┤ │
|
||
│ │ 内容 │ │ │ 内容 │ │ │ 内容 │ │
|
||
│ └─────────┘ │ └─────────┘ │ └─────────┘ │
|
||
│ │ │ │
|
||
└───────────────────────┴───────────────────────┴───────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-2xl);
|
||
}
|
||
|
||
适用场景：
|
||
- 三要素展示（如：特点、优势、功能）
|
||
- 项目案例展示
|
||
- 服务项目列表
|
||
- 成果展示区
|
||
```
|
||
|
||
### 3. Grid-4 布局（4列并排）
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────────────┐
|
||
│ 容器 (.grid-4) │
|
||
│ grid-template-columns: repeat(4, 1fr) │
|
||
├──────────────────┬──────────────────┬──────────────────┬──────────────────────────────┤
|
||
│ │ │ │ │
|
||
│ 卡片 1 │ 卡片 2 │ 卡片 3 │ 卡片 4 │
|
||
│ (25% 宽度) │ (25% 宽度) │ (25% 宽度) │ (25% 宽度) │
|
||
│ │ │ │ │
|
||
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │
|
||
│ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │
|
||
│ │ 3:2 │ │ │ 3:2 │ │ │ 3:2 │ │ │ 3:2 │ │
|
||
│ └────────┘ │ └────────┘ │ └────────┘ │ └────────┘ │
|
||
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │
|
||
│ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │
|
||
│ └────────┘ │ └────────┘ │ └────────┘ │ └────────┘ │
|
||
│ │ │ │ │
|
||
└──────────────────┴──────────────────┴──────────────────┴──────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.grid-4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-xl);
|
||
}
|
||
|
||
适用场景：
|
||
- 数据统计展示
|
||
- 产品特性列表
|
||
- 设计原则说明
|
||
- 快速功能预览
|
||
|
||
⚠️ 注意：避免3+1布局（3个一行，1个换行）
|
||
❌ 错误：
|
||
┌─────┬─────┬─────┐
|
||
│ 1 │ 2 │ 3 │
|
||
└─────┴─────┴─────┘
|
||
┌─────┐
|
||
│ 4 │ ← 单独换行很丑
|
||
└─────┘
|
||
|
||
✅ 正确：
|
||
┌────┬────┬────┬────┐
|
||
│ 1 │ 2 │ 3 │ 4 │
|
||
└────┴────┴────┴────┘
|
||
```
|
||
|
||
### 4. 食品紧凑版Grid优化（减少列数，增大单元格）
|
||
```
|
||
标准版 Grid-3: 食品紧凑版 Grid-3:
|
||
┌────┬────┬────┐ ┌──────────┬──────────┐
|
||
│ 1 │ 2 │ 3 │ │ 1 │ 2 │
|
||
└────┴────┴────┘ └──────────┴──────────┘
|
||
┌──────────┐
|
||
│ 3 │
|
||
└──────────┘
|
||
|
||
grid-3 { grid-3 {
|
||
columns: repeat(3, 1fr) columns: repeat(2, 1fr) ← 改为2列
|
||
} }
|
||
|
||
优势：
|
||
- 图片更大，内容更突出
|
||
- 减少拥挤感
|
||
- 提升视觉层次
|
||
```
|
||
|
||
---
|
||
|
||
## 二、Flexbox布局模式
|
||
|
||
### 1. Hero浮动卡片（强制并排）
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ Hero 内容区域 │
|
||
│ │
|
||
│ ┌──────────────┐ │
|
||
│ │ 主标题 │ │
|
||
│ │ 副标题 │ │
|
||
│ └──────────────┘ │
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ 3600片 │ │ 99.7% │ │ ±0.02mm │ │ 300ms │ │
|
||
│ │ /小时 │ │ 检出率 │ │ 精度 │ │ 时间 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ ← flex-wrap: nowrap 强制并排，不换行 │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.hero-floating-cards {
|
||
display: flex;
|
||
gap: var(--spacing-md); /* 紧凑间距 */
|
||
justify-content: center;
|
||
flex-wrap: nowrap; /* 关键：强制并排 */
|
||
}
|
||
|
||
.hero-card {
|
||
padding: var(--spacing-sm) var(--spacing-md); /* 紧凑内边距 */
|
||
min-width: 100px; /* 小尺寸 */
|
||
border-radius: var(--radius-md); /* 适中圆角 */
|
||
}
|
||
|
||
关键技术点：
|
||
✅ flex-wrap: nowrap → 强制单行显示
|
||
✅ gap 使用 md 而非 lg → 节省空间
|
||
✅ min-width 100px → 保持紧凑
|
||
❌ flex-wrap: wrap → 会导致换行
|
||
```
|
||
|
||
### 2. 卡片内部Flexbox Order布局
|
||
```
|
||
传统布局（标题在上）: Order重排布局（图片优先）:
|
||
┌─────────────────┐ ┌─────────────────┐
|
||
│ .card-header │ ← order: 1 │ .image │ ← order: 1
|
||
│ 标题区域 │ │ ┌───────────┐ │
|
||
├─────────────────┤ │ │ 图片 │ │
|
||
│ .image │ ← order: 2 │ │ 16:9比例 │ │
|
||
│ ┌───────────┐ │ │ └───────────┘ │
|
||
│ │ 图片 │ │ ├─────────────────┤
|
||
│ └───────────┘ │ │ .card-header │ ← order: 2
|
||
├─────────────────┤ │ 标题区域 │
|
||
│ .card-body │ ← order: 3 ├─────────────────┤
|
||
│ 内容区域 │ │ .card-body │ ← order: 3
|
||
└─────────────────┘ │ 内容区域 │
|
||
└─────────────────┘
|
||
|
||
CSS 代码：
|
||
.card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0; /* 移除内边距，让图片占满 */
|
||
}
|
||
|
||
.image-container {
|
||
order: 1; /* 图片最前 */
|
||
aspect-ratio: 16/9;
|
||
margin-bottom: 0; /* 无间距 */
|
||
border-radius: 0; /* 卡片内无圆角 */
|
||
}
|
||
|
||
.card-header {
|
||
order: 2; /* 标题居中 */
|
||
padding: var(--spacing-xl);
|
||
}
|
||
|
||
.card-body {
|
||
order: 3; /* 内容最后 */
|
||
padding: var(--spacing-xl);
|
||
flex: 1; /* 占据剩余空间 */
|
||
}
|
||
|
||
优势：
|
||
- 视觉冲击力强
|
||
- 图片优先展示
|
||
- 灵活调整顺序
|
||
- 响应式友好
|
||
```
|
||
|
||
### 3. 图片容器Aspect Ratio控制
|
||
```
|
||
16:9 宽屏比例（食品/能源页面常用）:
|
||
┌────────────────────────────────────┐
|
||
│ │
|
||
│ ┌──────────────┐ │
|
||
│ │ │ │ ← height: 自动计算
|
||
│ │ 16:9 │ │ (width / 16 * 9)
|
||
│ │ │ │
|
||
│ └──────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────┘
|
||
width: 100%
|
||
|
||
3:2 标准比例（产品展示）:
|
||
┌──────────────────────┐
|
||
│ │
|
||
│ ┌──────────┐ │
|
||
│ │ │ │ ← height: 自动计算
|
||
│ │ 3:2 │ │ (width / 3 * 2)
|
||
│ │ │ │
|
||
│ └──────────┘ │
|
||
│ │
|
||
└──────────────────────┘
|
||
width: 100%
|
||
|
||
4:3 传统比例（时间线图片）:
|
||
┌─────────────────┐
|
||
│ │
|
||
│ ┌─────────┐ │
|
||
│ │ │ │ ← height: 自动计算
|
||
│ │ 4:3 │ │ (width / 4 * 3)
|
||
│ │ │ │
|
||
│ └─────────┘ │
|
||
│ │
|
||
└─────────────────┘
|
||
width: 100%
|
||
|
||
CSS 代码：
|
||
/* 16:9 宽屏 - 紧凑现代 */
|
||
.image-container {
|
||
aspect-ratio: 16/9;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 3:2 标准 - 产品展示 */
|
||
.product-image {
|
||
aspect-ratio: 3/2;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 4:3 传统 - 时间线 */
|
||
.timeline-image {
|
||
aspect-ratio: 4/3;
|
||
flex: 0 0 300px;
|
||
}
|
||
|
||
关键点：
|
||
✅ aspect-ratio 自动计算高度
|
||
✅ object-fit: cover 裁剪适应
|
||
✅ 无需手动设置 height
|
||
```
|
||
|
||
---
|
||
|
||
## 三、图层叠加与定位模式
|
||
|
||
### 1. 背景图片+渐变叠加
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 卡片标题区域 (.card-header) │
|
||
├─────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │ ← position: relative
|
||
│ │ 【Layer 3 - 最上层】 │ │ (容器定位上下文)
|
||
│ │ <h3> 标题文字 </h3> │ │
|
||
│ │ z-index: 1 │ │
|
||
│ │ color: white │ │
|
||
│ │ text-shadow: 0 2px 8px rgba(...) │ │
|
||
│ ├─────────────────────────────────────┤ │
|
||
│ │ 【Layer 2 - 中间层】 │ │
|
||
│ │ 渐变遮罩层 <div> │ │
|
||
│ │ position: absolute │ │
|
||
│ │ inset: 0 │ │
|
||
│ │ background: linear-gradient( │ │
|
||
│ │ 135deg, │ │
|
||
│ │ rgba(13, 71, 161, 0.92) 0%, │ │ ← 半透明渐变
|
||
│ │ rgba(25, 118, 210, 0.88) 100% │ │ 保证文字可读性
|
||
│ │ ) │ │
|
||
│ │ z-index: 0 │ │
|
||
│ ├─────────────────────────────────────┤ │
|
||
│ │ 【Layer 1 - 底层】 │ │
|
||
│ │ 背景图片 │ │
|
||
│ │ background-image: │ │
|
||
│ │ url('unsplash.com/...') │ │ ← 实际图片
|
||
│ │ background-size: cover │ │
|
||
│ │ background-position: center │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────┘
|
||
|
||
HTML 结构：
|
||
<div class="card-header" style="
|
||
background-image: url('...'); ← Layer 1
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
min-height: 200px;">
|
||
|
||
<div style="
|
||
position: absolute; ← Layer 2
|
||
inset: 0;
|
||
background: linear-gradient(...);
|
||
z-index: 0;">
|
||
</div>
|
||
|
||
<h3 style="
|
||
position: relative; ← Layer 3
|
||
z-index: 1;
|
||
color: white;">
|
||
标题文字
|
||
</h3>
|
||
</div>
|
||
|
||
z-index 层级说明：
|
||
━━━━━━━━━━━━━━━━━━━
|
||
标题文字 (z: 1) ← 最上层，清晰可读
|
||
━━━━━━━━━━━━━━━━━━━
|
||
渐变遮罩 (z: 0) ← 中间层，半透明
|
||
━━━━━━━━━━━━━━━━━━━
|
||
背景图片 ← 底层，装饰作用
|
||
━━━━━━━━━━━━━━━━━━━
|
||
```
|
||
|
||
### 2. Glassmorphism玻璃态效果
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 背景层（模糊背景图片或渐变） │
|
||
│ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 【玻璃态卡片】 │ │
|
||
│ │ ┌─────────────────────────────────┐ │ │
|
||
│ │ │ 半透明背景 + 模糊效果 │ │ │
|
||
│ │ │ background: rgba(255,255,255,0.9)│ │ ← 90%透明度白色
|
||
│ │ │ backdrop-filter: blur(15px) │ │ ← 15px背景模糊
|
||
│ │ │ border: 2px solid rgba(...,0.2) │ │ ← 20%透明度边框
|
||
│ │ │ box-shadow: 0 8px 32px rgba(...) │ │ ← 柔和阴影
|
||
│ │ │ │ │
|
||
│ │ │ ┌────────────────────┐ │ │
|
||
│ │ │ │ 内容文字 │ │ │ ← 深色文字清晰可读
|
||
│ │ │ │ 清晰易读 │ │ │
|
||
│ │ │ └────────────────────┘ │ │
|
||
│ │ └─────────────────────────────────┘ │
|
||
│ └─────────────────────────────────────┘
|
||
│ │
|
||
└─────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.card {
|
||
background: var(--bg-card); /* rgba(255,255,255,0.9) */
|
||
backdrop-filter: blur(15px); /* 背景模糊 */
|
||
-webkit-backdrop-filter: blur(15px); /* Safari支持 */
|
||
border: 2px solid var(--border-light); /* rgba(..., 0.2) */
|
||
border-radius: var(--radius-2xl); /* 1.5rem */
|
||
box-shadow: var(--shadow-md); /* 柔和阴影 */
|
||
}
|
||
|
||
.nav {
|
||
background: var(--bg-semi-dark); /* rgba(255,255,255,0.95) */
|
||
backdrop-filter: blur(20px); /* 更强模糊 */
|
||
}
|
||
|
||
深色主题变体：
|
||
body.dark-theme {
|
||
--bg-card: rgba(18, 35, 24, 0.9); /* 深绿半透明 */
|
||
--bg-semi-dark: rgba(10, 26, 15, 0.95); /* 深邃绿半透明 */
|
||
}
|
||
|
||
效果特点：
|
||
✨ 透过效果 - 能看到背景元素
|
||
✨ 模糊效果 - backdrop-filter: blur()
|
||
✨ 层次感强 - 阴影+边框+透明度
|
||
✨ 现代时尚 - iOS/macOS风格
|
||
```
|
||
|
||
---
|
||
|
||
## 四、响应式布局转换
|
||
|
||
### 1. Grid → 单列响应式
|
||
```
|
||
桌面端（>768px）: 移动端（≤768px）:
|
||
┌─────┬─────┬─────┐ ┌───────────┐
|
||
│ 1 │ 2 │ 3 │ │ 1 │
|
||
└─────┴─────┴─────┘ ├───────────┤
|
||
grid-3: repeat(3, 1fr) │ 2 │
|
||
├───────────┤
|
||
│ 3 │
|
||
└───────────┘
|
||
grid-3: 1fr
|
||
|
||
CSS 代码：
|
||
@media (max-width: 768px) {
|
||
.grid-2,
|
||
.grid-3,
|
||
.grid-4 {
|
||
grid-template-columns: 1fr; /* 全部改为单列 */
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. Flexbox → 垂直堆叠
|
||
```
|
||
桌面端（>768px）:
|
||
┌──────────────────────────────────────────┐
|
||
│ .alternating-layout (flex-direction: row)│
|
||
├─────────────────────┬────────────────────┤
|
||
│ 图片 (flex:1) │ 内容 (flex:1) │
|
||
│ ┌───────────────┐ │ 标题 │
|
||
│ │ │ │ 段落内容... │
|
||
│ │ 4:3比例 │ │ │
|
||
│ └───────────────┘ │ │
|
||
└─────────────────────┴────────────────────┘
|
||
|
||
移动端（≤768px）:
|
||
┌──────────────────────────────────────────┐
|
||
│ .alternating-layout (flex-direction: col)│
|
||
├──────────────────────────────────────────┤
|
||
│ ┌────────────────────────────────────┐ │
|
||
│ │ 图片 │ │
|
||
│ │ 4:3比例 │ │
|
||
│ └────────────────────────────────────┘ │
|
||
├──────────────────────────────────────────┤
|
||
│ 标题 │
|
||
│ 段落内容... │
|
||
│ │
|
||
└──────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.alternating-layout {
|
||
display: flex;
|
||
gap: var(--spacing-2xl);
|
||
align-items: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.alternating-layout {
|
||
flex-direction: column; /* 改为垂直堆叠 */
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 五、间距系统对比
|
||
|
||
### 标准间距 vs 紧凑间距
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 间距对比示意图 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 标准版能源页面: │
|
||
│ ┌───────────────┐ ← --spacing-xl: 64px │
|
||
│ │ 卡片1 │ │
|
||
│ └───────────────┘ │
|
||
│ ↕ 96px (--spacing-2xl) │
|
||
│ ┌───────────────┐ │
|
||
│ │ 卡片2 │ │
|
||
│ └───────────────┘ │
|
||
│ │
|
||
│ 紧凑版食品页面: │
|
||
│ ┌───────────────┐ ← --spacing-xl: 40px (-37.5%) │
|
||
│ │ 卡片1 │ │
|
||
│ └───────────────┘ │
|
||
│ ↕ 48px (--spacing-2xl, -50%) │
|
||
│ ┌───────────────┐ │
|
||
│ │ 卡片2 │ │
|
||
│ └───────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
数值对比表：
|
||
╔═══════════════╦═══════════════╦═══════════════╦═══════════╗
|
||
║ 间距变量 ║ 标准版 ║ 紧凑版 ║ 减少比例 ║
|
||
╠═══════════════╬═══════════════╬═══════════════╬═══════════╣
|
||
║ --spacing-xs ║ 12px ║ 8px ║ -33% ║
|
||
║ --spacing-sm ║ 20px ║ 12px ║ -40% ║
|
||
║ --spacing-md ║ 32px ║ 20px ║ -37.5% ║
|
||
║ --spacing-lg ║ 48px ║ 32px ║ -33% ║
|
||
║ --spacing-xl ║ 64px ║ 40px ║ -37.5% ║
|
||
║ --spacing-2xl ║ 96px ║ 48px ║ -50% ║
|
||
║ --spacing-3xl ║ 128px ║ 64px ║ -50% ║
|
||
╚═══════════════╩═══════════════╩═══════════════╩═══════════╝
|
||
|
||
使用建议：
|
||
✅ 标准间距：适合内容较少、需要呼吸感的页面
|
||
✅ 紧凑间距：适合内容丰富、需要展示更多信息的页面
|
||
```
|
||
|
||
---
|
||
|
||
## 六、排版层次结构
|
||
|
||
### 文字层次金字塔
|
||
```
|
||
┌──────────────┐
|
||
│ Hero Title │ ← text-5xl: 64px
|
||
│ 最大标题 │ font-bold: 700
|
||
└──────────────┘ 特殊场合使用
|
||
│
|
||
┌──────────────┐
|
||
│ Section Title │ ← text-4xl: 48px
|
||
│ 区块标题 │ font-bold: 700
|
||
└──────────────┘ 页面主要标题
|
||
│
|
||
┌──────────────┐
|
||
│ Card Title │ ← text-2xl: 32px
|
||
│ 卡片标题 │ font-semibold: 600
|
||
└──────────────┘ 卡片/组件标题
|
||
│
|
||
┌────────────┴────────────┐
|
||
┌──────────┐ ┌──────────┐
|
||
│ Subtitle │ │ Body │ ← text-lg: 22px
|
||
│ 副标题 │ │ 正文 │ font-normal: 400
|
||
└──────────┘ └──────────┘ 主要内容
|
||
│ │
|
||
┌──────────┐ ┌──────────┐
|
||
│ Caption │ │ Small │ ← text-sm: 16px
|
||
│ 说明文字 │ │ 辅助文字 │ font-normal: 400
|
||
└──────────┘ └──────────┘ 次要信息
|
||
│ │
|
||
┌──────────┐ ┌──────────┐
|
||
│ Label │ │ Meta │ ← text-xs: 14px
|
||
│ 标签 │ │ 元信息 │ font-medium: 500
|
||
└──────────┘ └──────────┘ 最小文字
|
||
|
||
行高配置：
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
标题类 (h1-h3): line-height: 1.1-1.2 ← 紧凑，强调力度
|
||
正文类 (p): line-height: 1.6-1.8 ← 宽松，易读性强
|
||
说明类 (small): line-height: 1.4 ← 适中
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
|
||
字间距配置：
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
超大标题: letter-spacing: -0.02em ← 视觉紧凑
|
||
标签/按钮: letter-spacing: 0.1em ← 增强辨识度
|
||
正文: letter-spacing: 0 ← 标准间距
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
```
|
||
|
||
---
|
||
|
||
## 七、实用布局组合示例
|
||
|
||
### 1. 时间线布局
|
||
```
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ 时间线布局 │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ ●───────────────────────────────────────────────────────┐ │
|
||
│ ┃ ┌──────────────────┐ ┌──────────────────┐ │ │
|
||
│ ┃ │ 时间线图片 │ │ 时间线内容 │ │ │
|
||
│ ┃ │ (300px fixed) │ │ (flex: 1) │ │ │
|
||
│ ┃ │ aspect: 4/3 │ │ │ │ │
|
||
│ ┃ │ │ │ <h3> 标题 │ │ │
|
||
│ ┃ └──────────────────┘ │ <p> 描述内容... │ │ │
|
||
│ ┃ └──────────────────┘ │ │
|
||
│ ●───────────────────────────────────────────────────────┘ │
|
||
│ ┃ │
|
||
│ ●───────────────────────────────────────────────────────┐ │
|
||
│ ┃ ┌──────────────────┐ ┌──────────────────┐ │ │
|
||
│ ┃ │ 时间线图片 │ │ 时间线内容 │ │ │
|
||
│ ┃ └──────────────────┘ └──────────────────┘ │ │
|
||
│ ●───────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────┘
|
||
← 3px渐变线条
|
||
|
||
CSS 关键点：
|
||
.timeline-layout::before {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 3px;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
var(--primary-green),
|
||
var(--accent-gold)
|
||
);
|
||
}
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: calc(-1 * var(--spacing-2xl) - 8px);
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
}
|
||
```
|
||
|
||
### 2. Featured Grid（高亮第一项）
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ Featured Grid 布局 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ ┌─────────────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ │ │ Item2 │ │ Item3 │ │
|
||
│ │ Featured │ │ │ │ │ │
|
||
│ │ Item 1 │ │ 3:2 │ │ 3:2 │ │
|
||
│ │ (grid-row: │ └─────────┘ └─────────┘ │
|
||
│ │ 1/3) │ │
|
||
│ │ 3/4 比例 │ ┌─────────┐ ┌─────────┐ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ │ │ Item4 │ │ Item5 │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ └─────────────────┘ └─────────┘ └─────────┘ │
|
||
│ ← span 2 rows │
|
||
└─────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.featured-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.featured-item:first-child {
|
||
grid-column: 1 / 2; /* 占第1列 */
|
||
grid-row: 1 / 3; /* 跨2行 */
|
||
}
|
||
|
||
.featured-item:first-child .featured-image {
|
||
aspect-ratio: 3/4; /* 竖向比例 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 八、Hero区域布局模式 ⭐
|
||
|
||
### 1. 标准Hero布局
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ Hero Section │
|
||
│ (min-height: 60vh) │
|
||
│ │
|
||
│ ┌──────────────────────┐ │
|
||
│ │ 🔬 化工订单班 │ ← Badge徽章 │
|
||
│ └──────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ 半导体AI综合检测项目 │ ← 主标题 │
|
||
│ │ (text-5xl, font-bold) │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ 300mm硅晶圆 + SiO₂薄膜智能质检 │ ← 副标题 │
|
||
│ │ (text-2xl, font-normal) │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ 🤖 AI驱动全流程 │ ← 描述列表 │
|
||
│ │ 🔬 4大Agent协同 │ │
|
||
│ │ ✅ 95%合格率 │ │
|
||
│ └─────────────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.hero {
|
||
min-height: 60vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
padding: var(--spacing-3xl) var(--spacing-xl);
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
padding: var(--spacing-xs) var(--spacing-md);
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: var(--radius-full);
|
||
backdrop-filter: blur(10px);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: var(--text-5xl);
|
||
font-weight: var(--font-bold);
|
||
line-height: 1.1;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: var(--text-2xl);
|
||
opacity: 0.9;
|
||
margin-bottom: var(--spacing-xl);
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: var(--text-lg);
|
||
line-height: 1.8;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
关键点：
|
||
✅ 徽章采用玻璃态效果
|
||
✅ 标题层次清晰（5xl → 2xl → lg）
|
||
✅ 背景使用渐变色
|
||
✅ 居中对齐，最大宽度限制
|
||
```
|
||
|
||
### 2. Hero浮动卡片变体（数据展示型）
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ Hero Section │
|
||
│ │
|
||
│ ┌────────────────────────┐ │
|
||
│ │ 项目标题区域 │ │
|
||
│ └────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
|
||
│ │ ┌────────┐ │ │ ┌────────┐ │ │ ┌────────┐ │ │ ┌────────┐ │ │
|
||
│ │ │ 3600片 │ │ │ │ 99.7% │ │ │ │±0.02mm │ │ │ │ 300ms │ │ │
|
||
│ │ │ /小时 │ │ │ │ 检出率 │ │ │ │ 精度 │ │ │ │ 时间 │ │ │
|
||
│ │ └────────┘ │ │ └────────┘ │ │ └────────┘ │ │ └────────┘ │ │
|
||
│ │ Icon图标 │ │ Icon图标 │ │ Icon图标 │ │ Icon图标 │ │
|
||
│ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │
|
||
│ ← Flexbox并排，nowrap强制不换行 │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.hero-floating-cards {
|
||
display: flex;
|
||
gap: var(--spacing-md);
|
||
justify-content: center;
|
||
flex-wrap: nowrap; /* 关键：强制并排 */
|
||
margin-top: var(--spacing-2xl);
|
||
}
|
||
|
||
.hero-card {
|
||
min-width: 120px;
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: var(--radius-lg);
|
||
text-align: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.hero-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.hero-card-value {
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--font-bold);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.hero-card-label {
|
||
font-size: var(--text-sm);
|
||
opacity: 0.8;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 九、导航栏布局模式 ⭐
|
||
|
||
### 1. 水平滚动导航（订单班标准）
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ 导航栏 (position: sticky) │
|
||
├────────────────────────────────────────────────────────────────┤
|
||
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ >>> │
|
||
│ │ 📄项目 │ │ 🎯判定 │ │ 🔬检测 │ │ 📊结果 │ │ 💡总结 │ │
|
||
│ │ 概述 │ │ 标准 │ │ 流程 │ │ 分析 │ │ 建议 │ │
|
||
│ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||
│ │
|
||
│ ← overflow-x: auto 水平滚动 │
|
||
│ ← flex-wrap: nowrap 强制单行 │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
移动端滚动提示：
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ▶▶▶ │
|
||
│ │ 概述 │ │ 标准 │ │ 流程 │ │ 结果 │ │
|
||
│ └──────┘ └──────┘ └──────┘ └──────┘ │
|
||
│ ← 左右滑动查看更多 │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: var(--bg-semi-dark);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
|
||
}
|
||
|
||
.nav-container {
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
flex-wrap: nowrap; /* 强制单行 */
|
||
min-width: min-content;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
/* 隐藏滚动条但保留功能 */
|
||
.nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.nav {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
关键点：
|
||
✅ sticky定位，滚动时固定顶部
|
||
✅ overflow-x: auto 支持水平滚动
|
||
✅ flex-wrap: nowrap 强制单行
|
||
✅ backdrop-filter 玻璃态效果
|
||
✅ 隐藏滚动条保持美观
|
||
```
|
||
|
||
### 2. 导航项结构详解
|
||
```
|
||
单个导航项内部结构：
|
||
┌──────────────────┐
|
||
│ .nav-item │
|
||
│ ┌────────────┐ │
|
||
│ │ Icon图标 │ │ ← <i data-lucide="...">
|
||
│ └────────────┘ │
|
||
│ ┌────────────┐ │
|
||
│ │ 文字标签 │ │ ← <span>
|
||
│ └────────────┘ │
|
||
└──────────────────┘
|
||
flex-direction: column
|
||
align-items: center
|
||
|
||
激活状态：
|
||
┌──────────────────┐
|
||
│ .nav-item.active │ ← 背景色变化
|
||
│ ┌────────────┐ │
|
||
│ │ 🔵 Icon │ │ ← 图标高亮
|
||
│ └────────────┘ │
|
||
│ ┌────────────┐ │
|
||
│ │ 项目概述 │ │ ← 文字加粗
|
||
│ └────────────┘ │
|
||
└──────────────────┘
|
||
background: var(--primary)
|
||
color: white
|
||
font-weight: 600
|
||
```
|
||
|
||
---
|
||
|
||
## 十、Agent头像区布局 ⭐
|
||
|
||
### 1. Section Header布局（Agent信息）
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ Section Header │
|
||
├────────────────────────────────────────────────────────────────┤
|
||
│ ┌─────────┐ ┌────────────────────────────────────────┐ │
|
||
│ │ │ │ .agent-info │ │
|
||
│ │ Agent │ │ ┌──────────────────────────────────┐ │ │
|
||
│ │ 头像 │ │ │ 👤 环境咨询师 │ │ │
|
||
│ │ (80px) │ │ │ (.agent-name) │ │ │
|
||
│ │ │ │ └──────────────────────────────────┘ │ │
|
||
│ │ 圆形 │ │ │ │
|
||
│ └─────────┘ │ ┌──────────────────────────────────┐ │ │
|
||
│ │ │ 项目背景与需求分析 │ │ │
|
||
│ │ │ (.section-title, text-4xl) │ │ │
|
||
│ │ └──────────────────────────────────┘ │ │
|
||
│ └────────────────────────────────────────┘ │
|
||
│ ← Flexbox横向排列，头像在左，信息在右 │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-xl);
|
||
margin-bottom: var(--spacing-2xl);
|
||
padding-bottom: var(--spacing-xl);
|
||
border-bottom: 2px solid var(--border);
|
||
}
|
||
|
||
.agent-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid var(--primary);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
flex-shrink: 0; /* 防止被压缩 */
|
||
}
|
||
|
||
.agent-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.agent-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
font-size: var(--text-lg);
|
||
font-weight: var(--font-semibold);
|
||
color: var(--primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--text-4xl);
|
||
font-weight: var(--font-bold);
|
||
line-height: 1.2;
|
||
margin: 0;
|
||
}
|
||
|
||
关键点：
|
||
✅ Flexbox横向布局
|
||
✅ 头像圆形，带边框和阴影
|
||
✅ gap间距清晰分隔
|
||
✅ Agent名称带图标
|
||
✅ 底部边框分隔区域
|
||
```
|
||
|
||
### 2. 响应式Agent Header
|
||
```
|
||
桌面端（>768px）:
|
||
┌──────────────────────────────────────────────┐
|
||
│ ┌─────┐ ┌──────────────────────────────┐ │
|
||
│ │头像 │ │ 👤 环境咨询师 │ │
|
||
│ │80px │ │ 项目背景与需求分析 │ │
|
||
│ └─────┘ └──────────────────────────────┘ │
|
||
└──────────────────────────────────────────────┘
|
||
flex-direction: row
|
||
|
||
移动端（≤768px）:
|
||
┌──────────────────────────────────────────────┐
|
||
│ ┌─────────┐ │
|
||
│ │ 头像 │ │
|
||
│ │ 60px │ │
|
||
│ └─────────┘ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 👤 环境咨询师 │ │
|
||
│ │ 项目背景 │ │
|
||
│ └─────────────────┘ │
|
||
└──────────────────────────────────────────────┘
|
||
flex-direction: column
|
||
align-items: center
|
||
text-align: center
|
||
|
||
@media (max-width: 768px) {
|
||
.section-header {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.agent-avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--text-3xl);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十一、Stats统计数据布局 ⭐
|
||
|
||
### 1. 标准Stats布局（4项并排）
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ 统计数据区 (.stats) │
|
||
├────────────────────────────────────────────────────────────────┤
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ 项目总预算 │ │ 监测频次 │ │ 监测指标 │ │ 样品总数 │ │
|
||
│ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │
|
||
│ │ label) │ │ label) │ │ label) │ │ label) │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ 45万元 │ │ 12次/年 │ │ 26项 │ │ 144个/年 │ │
|
||
│ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │
|
||
│ │ value) │ │ value) │ │ value) │ │ value) │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ ← grid-template-columns: repeat(4, 1fr) │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-xl);
|
||
margin-top: var(--spacing-2xl);
|
||
padding: var(--spacing-xl);
|
||
background: var(--bg-semi-dark);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
padding: var(--spacing-lg);
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stat-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-gray);
|
||
margin-bottom: var(--spacing-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--font-bold);
|
||
color: var(--primary);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
关键点：
|
||
✅ Grid 4列等宽布局
|
||
✅ 标签小字，数值大字
|
||
✅ 悬停上移效果
|
||
✅ 卡片样式分隔
|
||
```
|
||
|
||
### 2. 响应式Stats布局
|
||
```
|
||
桌面端（>1024px）:
|
||
┌─────┬─────┬─────┬─────┐
|
||
│ 1 │ 2 │ 3 │ 4 │
|
||
└─────┴─────┴─────┴─────┘
|
||
grid-template-columns: repeat(4, 1fr)
|
||
|
||
平板端（768px-1024px）:
|
||
┌──────────┬──────────┐
|
||
│ 1 │ 2 │
|
||
├──────────┼──────────┤
|
||
│ 3 │ 4 │
|
||
└──────────┴──────────┘
|
||
grid-template-columns: repeat(2, 1fr)
|
||
|
||
移动端（<768px）:
|
||
┌──────────────┐
|
||
│ 1 │
|
||
├──────────────┤
|
||
│ 2 │
|
||
├──────────────┤
|
||
│ 3 │
|
||
├──────────────┤
|
||
│ 4 │
|
||
└──────────────┘
|
||
grid-template-columns: 1fr
|
||
|
||
CSS 代码：
|
||
@media (max-width: 1024px) {
|
||
.stats {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--text-2xl);
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 动画数字Stats（带计数效果）
|
||
```
|
||
数字滚动动画示意：
|
||
0 → 15 → 30 → 45 → 45万元
|
||
┗━━━━━━━━━━━━━━━━━━━━━━━┛
|
||
1.5秒动画
|
||
|
||
JavaScript实现：
|
||
<div class="stat-value" data-target="45">0</div>
|
||
|
||
const statValues = document.querySelectorAll('.stat-value');
|
||
statValues.forEach(stat => {
|
||
const target = parseInt(stat.dataset.target);
|
||
let current = 0;
|
||
const increment = target / 100;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= target) {
|
||
stat.textContent = target;
|
||
clearInterval(timer);
|
||
} else {
|
||
stat.textContent = Math.floor(current);
|
||
}
|
||
}, 15);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 十二、Footer总结区布局 ⭐
|
||
|
||
### 1. 三栏总结布局（项目成果）
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ Footer总结区 │
|
||
│ (background: var(--bg-semi-dark)) │
|
||
├────────────────────────────────────────────────────────────────┤
|
||
│ 🏆 项目成果总结 │
|
||
│ (.section-title, text-center) │
|
||
│ │
|
||
├───────────────────┬───────────────────┬───────────────────────┤
|
||
│ │ │ │
|
||
│ 📋 交付物清单 │ 🎯 项目目标 │ ⚙️ 技术保障 │
|
||
│ (.card) │ (.card) │ (.card) │
|
||
│ │ │ │
|
||
│ ✅ 采样方案报告 │ ✅ 26项指标 │ ✅ ICP-MS设备 │
|
||
│ ✅ 季度监测报告 │ ✅ Ⅲ类水质 │ ✅ GC-MS分析仪 │
|
||
│ ✅ 年度总结报告 │ ✅ 12次/年 │ ✅ BOD培养箱 │
|
||
│ ✅ 监测数据库 │ ✅ 数据准确度 │ ✅ 自动采样器 │
|
||
│ ✅ 现场照片资料 │ ✅ 质控样本 │ ✅ GPS定位系统 │
|
||
│ ✅ 质控记录文件 │ ✅ 报告及时 │ ✅ 数据传输系统 │
|
||
│ ✅ 趋势分析图表 │ ✅ 污染预警 │ ✅ LIMS实验室系统 │
|
||
│ ✅ 改善建议方案 │ ✅ CMA认证 │ ✅ 三级质控体系 │
|
||
│ │ │ │
|
||
└───────────────────┴───────────────────┴───────────────────────┘
|
||
│ │
|
||
│ © 2024 环保订单班 | AI驱动的环境监测方案 │
|
||
│ (.text-center, color: gray) │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
|
||
CSS 代码：
|
||
.footer-summary {
|
||
background: var(--bg-semi-dark);
|
||
padding: var(--spacing-3xl) 0;
|
||
margin-top: var(--spacing-3xl);
|
||
}
|
||
|
||
.footer-summary .section-title {
|
||
text-align: center;
|
||
margin-bottom: var(--spacing-2xl);
|
||
}
|
||
|
||
.footer-summary .grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-2xl);
|
||
}
|
||
|
||
.footer-summary .card {
|
||
background: var(--bg-card);
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.footer-summary .card-header {
|
||
order: 1;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.footer-summary .card-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: var(--font-bold);
|
||
}
|
||
|
||
.footer-summary .feature-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.footer-summary .feature-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-xs) 0;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.footer-summary .text-center {
|
||
text-align: center;
|
||
margin-top: var(--spacing-2xl);
|
||
color: var(--text-gray);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
关键点：
|
||
✅ Grid 3列布局
|
||
✅ 深色背景区分
|
||
✅ 卡片样式分隔
|
||
✅ Icon + 文字列表
|
||
✅ 版权信息居中
|
||
```
|
||
|
||
### 2. 响应式Footer布局
|
||
```
|
||
桌面端（>1024px）:
|
||
┌──────────┬──────────┬──────────┐
|
||
│ 卡片1 │ 卡片2 │ 卡片3 │
|
||
└──────────┴──────────┴──────────┘
|
||
grid-template-columns: repeat(3, 1fr)
|
||
|
||
平板端（768px-1024px）:
|
||
┌──────────┬──────────┐
|
||
│ 卡片1 │ 卡片2 │
|
||
└──────────┴──────────┘
|
||
┌──────────────────────┐
|
||
│ 卡片3 │
|
||
└──────────────────────┘
|
||
grid-template-columns: repeat(2, 1fr)
|
||
|
||
移动端（<768px）:
|
||
┌──────────────────────┐
|
||
│ 卡片1 │
|
||
├──────────────────────┤
|
||
│ 卡片2 │
|
||
├──────────────────────┤
|
||
│ 卡片3 │
|
||
└──────────────────────┘
|
||
grid-template-columns: 1fr
|
||
|
||
@media (max-width: 1024px) {
|
||
.footer-summary .grid-3 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.footer-summary .grid-3 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十三、关键CSS属性速查表
|
||
|
||
```
|
||
╔═══════════════════════════════════════════════════════════════╗
|
||
║ 布局相关属性 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ display: grid │ 启用Grid布局 ║
|
||
║ display: flex │ 启用Flexbox布局 ║
|
||
║ grid-template-columns │ 定义Grid列数和宽度 ║
|
||
║ gap │ Grid/Flex项目间距 ║
|
||
║ flex-direction │ Flex主轴方向 ║
|
||
║ flex-wrap │ Flex换行控制 ║
|
||
║ order │ Flex/Grid项目顺序 ║
|
||
║ align-items │ 交叉轴对齐 ║
|
||
║ justify-content │ 主轴对齐 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ 尺寸相关属性 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ aspect-ratio │ 宽高比例 ║
|
||
║ min-width / max-width │ 最小/最大宽度 ║
|
||
║ flex: 1 │ 占据剩余空间 ║
|
||
║ flex: 0 0 300px │ 固定尺寸 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ 定位相关属性 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ position: relative │ 相对定位（定位上下文） ║
|
||
║ position: absolute │ 绝对定位（脱离文档流） ║
|
||
║ position: sticky │ 粘性定位（导航栏常用） ║
|
||
║ inset: 0 │ top/right/bottom/left全为0 ║
|
||
║ z-index │ 层级控制 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ 视觉效果属性 ║
|
||
╠═══════════════════════════════════════════════════════════════╣
|
||
║ backdrop-filter: blur() │ 背景模糊（玻璃态） ║
|
||
║ background: linear-gradient│ 渐变背景 ║
|
||
║ box-shadow │ 阴影效果 ║
|
||
║ border-radius │ 圆角 ║
|
||
║ object-fit: cover │ 图片裁剪适应 ║
|
||
║ overflow-x: auto │ 水平滚动 ║
|
||
║ white-space: nowrap │ 文字不换行 ║
|
||
╚═══════════════════════════════════════════════════════════════╝
|
||
```
|
||
|
||
---
|
||
|
||
## 十四、常见问题解决方案
|
||
|
||
### 问题1: Grid布局出现3+1排列
|
||
```
|
||
❌ 问题：
|
||
┌─────┬─────┬─────┐
|
||
│ 1 │ 2 │ 3 │
|
||
└─────┴─────┴─────┘
|
||
┌─────┐
|
||
│ 4 │ ← 丑陋的换行
|
||
└─────┘
|
||
|
||
✅ 解决：确保列数匹配项目数
|
||
grid-template-columns: repeat(4, 1fr); /* 4项目 = 4列 */
|
||
|
||
或者：使用auto-fit/auto-fill
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
```
|
||
|
||
### 问题2: 图片被压缩变形
|
||
```
|
||
❌ 问题：img设置了width和height，导致变形
|
||
|
||
✅ 解决方案：
|
||
.image-container {
|
||
aspect-ratio: 16/9;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-container img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; ← 关键：裁剪而不是拉伸
|
||
}
|
||
```
|
||
|
||
### 问题3: Flexbox项目换行不理想
|
||
```
|
||
❌ 问题：flex-wrap: wrap导致意外换行
|
||
|
||
✅ 解决方案：
|
||
/* 强制不换行 */
|
||
.hero-floating-cards {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* 或使用Grid替代 */
|
||
.hero-floating-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
```
|
||
|
||
### 问题4: 背景图片看不清文字
|
||
```
|
||
❌ 问题：白色文字在浅色背景上不可读
|
||
|
||
✅ 解决方案：添加渐变遮罩
|
||
<div style="background-image: url(...)">
|
||
<div style="
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(0, 0, 0, 0.8), ← 半透明黑色
|
||
rgba(0, 0, 0, 0.6)
|
||
);
|
||
z-index: 0;">
|
||
</div>
|
||
<h3 style="position: relative; z-index: 1; color: white;">
|
||
文字内容
|
||
</h3>
|
||
</div>
|
||
```
|
||
|
||
### 问题5: 导航栏滚动不平滑
|
||
```
|
||
❌ 问题：iOS设备上滚动卡顿
|
||
|
||
✅ 解决方案：
|
||
.nav {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch; ← iOS平滑滚动
|
||
}
|
||
```
|
||
|
||
### 问题6: Stats数字不对齐
|
||
```
|
||
❌ 问题：数字长度不一致导致布局混乱
|
||
|
||
✅ 解决方案：
|
||
.stat-value {
|
||
font-variant-numeric: tabular-nums; ← 等宽数字
|
||
min-height: 3rem; ← 固定最小高度
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十五、最佳实践总结
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────┐
|
||
│ 布局设计原则 │
|
||
├──────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 1. 移动优先设计（Mobile First） │
|
||
│ → 先设计小屏幕布局，再扩展到大屏幕 │
|
||
│ │
|
||
│ 2. 语义化HTML结构 │
|
||
│ → section, article, header, nav 而非通用div │
|
||
│ │
|
||
│ 3. 使用CSS变量统一设计 │
|
||
│ → --spacing-*, --text-*, --radius-* │
|
||
│ │
|
||
│ 4. 图片优先展示 │
|
||
│ → 使用flexbox order将图片放在最前 │
|
||
│ │
|
||
│ 5. 保持一致的间距比例 │
|
||
│ → 8px基准，倍数递增（8, 12, 20, 32, 40...） │
|
||
│ │
|
||
│ 6. 避免固定高度 │
|
||
│ → 使用aspect-ratio而非固定height │
|
||
│ │
|
||
│ 7. Grid列数要合理 │
|
||
│ → 4项目用4列，避免3+1布局 │
|
||
│ │
|
||
│ 8. 背景图要加遮罩 │
|
||
│ → 使用linear-gradient保证文字可读性 │
|
||
│ │
|
||
│ 9. 卡片内容要紧凑 │
|
||
│ → 图片占满宽度，padding为0 │
|
||
│ │
|
||
│ 10. 响应式断点统一 │
|
||
│ → 768px (移动/平板), 1024px (平板/桌面) │
|
||
│ │
|
||
│ 11. 导航栏使用sticky定位 │
|
||
│ → position: sticky; top: 0; 滚动时固定 │
|
||
│ │
|
||
│ 12. Agent头像突出显示 │
|
||
│ → 圆形头像 + 边框 + 阴影 │
|
||
│ │
|
||
│ 13. Stats数据醒目展示 │
|
||
│ → 大数值 + 小标签 + 卡片分隔 │
|
||
│ │
|
||
│ 14. Footer总结清晰明了 │
|
||
│ → 三栏布局 + Icon列表 + 深色背景 │
|
||
│ │
|
||
│ 15. 玻璃态效果增强质感 │
|
||
│ → backdrop-filter: blur() + 半透明 │
|
||
│ │
|
||
└──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 快速参考命令
|
||
|
||
```bash
|
||
# Grid布局速查
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr); # 2列等宽
|
||
grid-template-columns: repeat(3, 1fr); # 3列等宽
|
||
grid-template-columns: repeat(4, 1fr); # 4列等宽
|
||
gap: var(--spacing-2xl); # 48px间距
|
||
|
||
# Flexbox布局速查
|
||
display: flex;
|
||
flex-direction: column; # 垂直排列
|
||
flex-wrap: nowrap; # 不换行
|
||
order: 1 / 2 / 3; # 排列顺序
|
||
flex: 1; # 占据剩余空间
|
||
|
||
# 图片比例速查
|
||
aspect-ratio: 16/9; # 宽屏
|
||
aspect-ratio: 3/2; # 标准
|
||
aspect-ratio: 4/3; # 传统
|
||
aspect-ratio: 1/1; # 正方形
|
||
|
||
# 玻璃态效果
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(15px);
|
||
border: 2px solid rgba(76, 175, 80, 0.2);
|
||
|
||
# 图层叠加
|
||
position: relative; # 容器
|
||
position: absolute; inset: 0; z-index: 0; # 遮罩层
|
||
position: relative; z-index: 1; # 内容层
|
||
|
||
# Sticky导航
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
backdrop-filter: blur(20px);
|
||
|
||
# 圆形头像
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
border: 3px solid var(--primary);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
||
# Stats布局
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-xl);
|
||
text-align: center;
|
||
|
||
# Footer布局
|
||
background: var(--bg-semi-dark);
|
||
padding: var(--spacing-3xl) 0;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
```
|
||
|
||
---
|
||
|
||
## 订单班页面标准结构
|
||
|
||
```
|
||
完整页面结构：
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ 1. Theme Toggle Button (主题切换) │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 2. Hero Section (英雄区) │
|
||
│ - Badge徽章 │
|
||
│ - 主标题 + 副标题 │
|
||
│ - 描述文字 │
|
||
│ - 浮动数据卡片（可选） │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 3. Navigation Bar (导航栏 - sticky) │
|
||
│ - 水平滚动 │
|
||
│ - Icon + 文字 │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 4. Section 1 (Agent 1) │
|
||
│ - Section Header (Agent头像 + 信息) │
|
||
│ - Expert Intro (专家介绍) │
|
||
│ - Content (Grid布局内容) │
|
||
│ - Stats (统计数据) │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 5. Section 2 (Agent 2) │
|
||
│ - 同上结构 │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 6. Section 3 (Agent 3) │
|
||
│ - 同上结构 │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 7. Section 4 (Agent 4) │
|
||
│ - 同上结构 │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ 8. Footer Summary (项目成果总结) │
|
||
│ - 标题居中 │
|
||
│ - Grid-3布局 │
|
||
│ - 深色背景 │
|
||
│ - 版权信息 │
|
||
└────────────────────────────────────────────────────────────┘
|
||
|
||
关键CSS变量：
|
||
--spacing-xs: 8px
|
||
--spacing-sm: 12px
|
||
--spacing-md: 20px
|
||
--spacing-lg: 32px
|
||
--spacing-xl: 40px
|
||
--spacing-2xl: 48px
|
||
--spacing-3xl: 64px
|
||
|
||
--text-xs: 14px
|
||
--text-sm: 16px
|
||
--text-lg: 22px
|
||
--text-xl: 28px
|
||
--text-2xl: 32px
|
||
--text-3xl: 40px
|
||
--text-4xl: 48px
|
||
--text-5xl: 64px
|
||
|
||
--radius-sm: 4px
|
||
--radius-md: 8px
|
||
--radius-lg: 12px
|
||
--radius-xl: 16px
|
||
--radius-2xl: 24px
|
||
--radius-full: 9999px
|
||
```
|
||
|
||
---
|
||
|
||
**文档版本**: v2.0 (完整增强版)
|
||
**创建日期**: 2025年
|
||
**最后更新**: 2025年10月
|
||
**适用项目**: web_frontend/web_result/order-classes/
|
||
**相关文档**: food-compact-design-spec (Serena记忆)
|
||
|
||
**新增内容总结**:
|
||
- ✅ Hero区域布局模式（徽章、标题、浮动卡片）
|
||
- ✅ 导航栏布局模式（水平滚动、sticky定位）
|
||
- ✅ Agent头像区布局（圆形头像、信息区）
|
||
- ✅ Stats统计数据布局（4列Grid、响应式）
|
||
- ✅ Footer总结区布局（三栏、深色背景）
|
||
- ✅ 订单班页面标准结构（完整模板）
|
||
- ✅ 更多实用CSS属性和技巧 |