Files

Yep_Q 125a134902 fix: 修复ResultModal数据提取时的agent调用错误

详细说明:
- 修复getProjectInfo函数中seq.agent()的类型错误
- 添加兼容性处理，支持函数和对象两种数据格式
- 解决选择订单班后点击按钮导致页面崩溃的问题
- 修改文件: WorkflowPageV4.tsx (第934行)
- 影响模块: ResultModal数据显示系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-10 14:25:07 +08:00

80 KiB

Raw Permalink Blame History

网页布局排版方法总结 - ASCII可视化指南（完整增强版）

Grid网格布局模式
Flexbox布局模式
图层叠加与定位模式
响应式布局转换
间距系统对比
排版层次结构
实用布局组合示例
Hero区域布局模式 ⭐ 新增
导航栏布局模式 ⭐ 新增
Agent头像区布局 ⭐ 新增
Stats统计数据布局 ⭐ 新增
Footer总结区布局 ⭐ 新增
关键CSS属性速查表
常见问题解决方案
最佳实践总结

一、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() + 半透明                  │
│                                                          │
└──────────────────────────────────────────────────────────┘

快速参考命令

# 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属性和技巧

80 KiB Raw Permalink Blame History Unescape Escape

网页布局排版方法总结 - ASCII可视化指南（完整增强版）

目录

一、Grid网格布局模式

1. Grid-2 布局（2列并排）

2. Grid-3 布局（3列并排）

3. Grid-4 布局（4列并排）

4. 食品紧凑版Grid优化（减少列数，增大单元格）

二、Flexbox布局模式

1. Hero浮动卡片（强制并排）

2. 卡片内部Flexbox Order布局

3. 图片容器Aspect Ratio控制

三、图层叠加与定位模式

1. 背景图片+渐变叠加

2. Glassmorphism玻璃态效果

四、响应式布局转换

1. Grid → 单列响应式

2. Flexbox → 垂直堆叠

五、间距系统对比

标准间距 vs 紧凑间距

六、排版层次结构

文字层次金字塔

七、实用布局组合示例

1. 时间线布局

2. Featured Grid（高亮第一项）

八、Hero区域布局模式 ⭐

1. 标准Hero布局

2. Hero浮动卡片变体（数据展示型）

九、导航栏布局模式 ⭐

1. 水平滚动导航（订单班标准）

2. 导航项结构详解

十、Agent头像区布局 ⭐

1. Section Header布局（Agent信息）

2. 响应式Agent Header

十一、Stats统计数据布局 ⭐

1. 标准Stats布局（4项并排）

2. 响应式Stats布局

3. 动画数字Stats（带计数效果）

十二、Footer总结区布局 ⭐

1. 三栏总结布局（项目成果）

2. 响应式Footer布局

十三、关键CSS属性速查表

十四、常见问题解决方案

问题1: Grid布局出现3+1排列

问题2: 图片被压缩变形

问题3: Flexbox项目换行不理想

问题4: 背景图片看不清文字

问题5: 导航栏滚动不平滑

问题6: Stats数字不对齐

十五、最佳实践总结

快速参考命令

订单班页面标准结构

80 KiB

Raw Permalink Blame History