Agent-n8n/web_frontend/web_result/order-classes/visual-design/LAYOUT_DESIGN.md

视觉设计订单班 - 独特布局设计方案

设计原则

每个Section使用完全不同的布局模式，避免任何重复

---

Section 1: 项目概述与宣传目标

布局模式：Alternating Layout (左右交替布局)

ASCII 布局图

┌────────────────────────────────────────────────────────────────┐
│                      Section 1                                  │
├────────────────────────────────────────────────────────────────┤
│  【项目定位】 - 左图右文                                         │
│  ┌─────────────────┐  ┌────────────────────────────┐           │
│  │                 │  │  📍 项目定位               │           │
│  │   同里古镇      │  │  地理位置: 江苏苏州       │           │
│  │   航拍图        │  │  片长设定: 6-7分钟        │           │
│  │   (图片)        │  │  内容章节: 6大主题        │           │
│  │                 │  │  拍摄方式: 航拍+地面      │           │
│  └─────────────────┘  └────────────────────────────┘           │
│         ← flex-direction: row                                  │
│                                                                 │
│  【色彩体系】 - 右图左文 (反向)                                 │
│  ┌────────────────────────────┐  ┌─────────────────┐           │
│  │  🎨 色彩体系               │  │                 │           │
│  │  青瓦灰: 古建筑主色调      │  │   传统配色表    │           │
│  │  悟道黄: 传统文化底蕴      │  │   (图片)        │           │
│  │  山吹色: 温暖人文气息      │  │                 │           │
│  └────────────────────────────┘  └─────────────────┘           │
│         ← flex-direction: row-reverse                          │
│                                                                 │
│  【四大宣传目标】 - Bento Grid (不规则网格)                     │
│  ┌───────────────────┬─────────┬─────────┐                     │
│  │                   │         │         │                     │
│  │  🏛️ 文化传承       │ 🍜美食  │ 🌿生态  │                     │
│  │  (grid-row: 1/3)  │ 体验    │ 旅游    │                     │
│  │   占2行高度        │         │         │                     │
│  │                   ├─────────┴─────────┤                     │
│  │                   │                   │                     │
│  │                   │ 🌾 产业融合        │                     │
│  │                   │  (grid-column:2/4) │                     │
│  └───────────────────┴───────────────────┘                     │
│         ← 第1项占2行，其他项灵活排列                            │
└────────────────────────────────────────────────────────────────┘

CSS 实现

/* 左右交替布局 */
.alternating-layout {
    display: flex;
    gap: var(--spacing-2xl);
    align-items: center;
    margin-bottom: var(--spacing-3xl);
}

.alternating-layout:nth-child(even) {
    flex-direction: row-reverse;  /* 偶数项反向 */
}

.alternating-layout .image-container {
    flex: 0 0 45%;  /* 图片占45% */
    aspect-ratio: 16/9;
}

.alternating-layout .content {
    flex: 1;  /* 内容占剩余空间 */
}

/* Bento Grid 不规则网格 */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.bento-item:first-child {
    grid-row: 1 / 3;  /* 第1项占2行 */
}

.bento-item:last-child {
    grid-column: 2 / 4;  /* 最后1项占2列 */
}

/* 响应式 */
@media (max-width: 768px) {
    .alternating-layout {
        flex-direction: column !important;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bento-item:first-child,
    .bento-item:last-child {
        grid-row: auto;
        grid-column: auto;
    }
}

---

Section 2: 影片视觉基调与内容设计

布局模式：Featured Grid (高亮第一项布局)

ASCII 布局图

┌────────────────────────────────────────────────────────────────┐
│                      Section 2                                  │
├────────────────────────────────────────────────────────────────┤
│  【六大主题章节】 - Featured Grid                               │
│  ┌─────────────────────┬─────────┬─────────┬─────────┐         │
│  │                     │         │         │         │         │
│  │                     │第2章    │第3章    │第4章    │         │
│  │   🏛️ 第1章          │历史    │美食    │生态    │         │
│  │   开篇·同里古镇     │文化篇  │篇      │湿地篇  │         │
│  │                     │         │         │         │         │
│  │   (grid-row: 1/3)   ├─────────┼─────────┼─────────┤         │
│  │   占2行             │第5章    │第6章    │         │         │
│  │                     │农业    │夜游    │         │         │
│  │   大图展示          │产业篇  │同里篇  │         │         │
│  │                     │         │         │         │         │
│  └─────────────────────┴─────────┴─────────┴─────────┘         │
│         ← 第1章高亮，占2行高度                                  │
│                                                                 │
│  【数据展示】 - Progress Bars (进度条样式)                      │
│  ┌──────────────────────────────────────────────────────┐      │
│  │ 影片时长  ████████░░ 6-7分钟                         │      │
│  │ 拍摄章节  ██████████ 6个                             │      │
│  │ 拍摄地点  ███████░░░ 15+个                           │      │
│  │ 航拍镜头  ████████░░ 8个                             │      │
│  └──────────────────────────────────────────────────────┘      │
└────────────────────────────────────────────────────────────────┘

CSS 实现

/* Featured Grid - 高亮第一项 */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.featured-item:first-child {
    grid-column: 1 / 2;  /* 占第1列 */
    grid-row: 1 / 3;     /* 跨2行 */
    background: linear-gradient(135deg,
        var(--primary) 0%,
        var(--secondary) 100%);
    color: white;
}

.featured-item:first-child .image-container {
    aspect-ratio: 3/4;  /* 竖向比例 */
}

.featured-item:first-child .card-title {
    font-size: var(--text-3xl);
}

/* 其他项目正常尺寸 */
.featured-item:not(:first-child) .image-container {
    aspect-ratio: 4/3;
}

/* Progress Bars */
.progress-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
}

.progress-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.progress-label {
    flex: 0 0 100px;
    font-weight: var(--font-semibold);
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--primary),
        var(--accent));
    transition: width 1s ease;
}

.progress-value {
    flex: 0 0 80px;
    text-align: right;
    font-weight: var(--font-bold);
    color: var(--primary);
}

/* 响应式 */
@media (max-width: 1024px) {
    .featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }

    .featured-item:first-child {
        grid-column: auto;
        grid-row: auto;
    }
}

---

Section 3: 分镜设计方案

布局模式：Timeline Layout (时间线布局)

ASCII 布局图

┌────────────────────────────────────────────────────────────────┐
│                      Section 3                                  │
├────────────────────────────────────────────────────────────────┤
│  【17个分镜设计】 - Vertical Timeline                           │
│                                                                 │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
│  ┃  镜号1 | 15秒                                     │          │
│  ┃  ┌──────────┐  ┌──────────────────────────┐      │          │
│  ┃  │   缩略图  │  │ 同里古镇全景航拍         │      │          │
│  ┃  │  (小图)  │  │ 拍摄方式: 高空俯拍       │      │          │
│  ┃  └──────────┘  │ 备注: 展现古镇整体布局   │      │          │
│  ┃                └──────────────────────────┘      │          │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
│  ┃                                                              │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
│  ┃  镜号2 | 12秒                                     │          │
│  ┃  ┌──────────┐  ┌──────────────────────────┐      │          │
│  ┃  │   缩略图  │  │ 水乡特色河道             │      │          │
│  ┃  │  (小图)  │  │ 拍摄方式: 低空航拍       │      │          │
│  ┃  └──────────┘  │ 备注: 展现水系脉络       │      │          │
│  ┃                └──────────────────────────┘      │          │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
│  ┃                                                              │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐          │
│  ┃  镜号3 | 20秒                                     │          │
│  ┃  ...                                              │          │
│  ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘          │
│                                                                 │
│  ← 垂直时间线，左侧圆点，右侧内容卡片                           │
│                                                                 │
│  【拍摄技法总结】 - Icon Grid (图标网格)                        │
│  ┌────────────┬────────────┬────────────┬────────────┐         │
│  │ 📐 航拍    │ 🎥 地面    │ ⚡ 特殊    │ 🎨 后期    │         │
│  │ 8个镜头    │ 6个镜头    │ 3个镜头    │ 调色+特效  │         │
│  └────────────┴────────────┴────────────┴────────────┘         │
└────────────────────────────────────────────────────────────────┘

CSS 实现

/* Vertical Timeline */
.timeline-container {
    position: relative;
    padding-left: var(--spacing-3xl);
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        to bottom,
        var(--primary) 0%,
        var(--accent) 100%
    );
}

.timeline-item {
    position: relative;
    margin-bottom: var(--spacing-2xl);
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--spacing-3xl) - 8px);
    top: var(--spacing-lg);
    width: 20px;
    height: 20px;
    background: var(--primary);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.timeline-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}

.timeline-duration {
    color: var(--text-gray);
    font-size: var(--text-sm);
}

.timeline-content {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.timeline-thumbnail {
    flex: 0 0 150px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-muted);
}

.timeline-description {
    flex: 1;
}

.timeline-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.timeline-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-gray);
}

/* Icon Grid */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.icon-card {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all 0.3s ease;
}

.icon-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.icon-card-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.icon-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-xs);
}

.icon-card-value {
    color: var(--text-gray);
    font-size: var(--text-sm);
}

/* 响应式 */
@media (max-width: 768px) {
    .timeline-content {
        flex-direction: column;
    }

    .timeline-thumbnail {
        flex: 0 0 auto;
        width: 100%;
    }

    .icon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

---

Section 4: 拍摄预算与制作安排

布局模式：Accordion Panels (手风琴折叠面板)

ASCII 布局图

┌────────────────────────────────────────────────────────────────┐
│                      Section 4                                  │
├────────────────────────────────────────────────────────────────┤
│  【Accordion手风琴面板】                                        │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 💰 预算明细 (展开状态)                          ▼        │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ ┌────────────┬──────────────┬───────┬──────┐             │  │
│  │ │ 预算项目   │ 明细说明     │ 金额  │ 占比 │             │  │
│  │ ├────────────┼──────────────┼───────┼──────┤             │  │
│  │ │ 前期策划   │ 创意策划...  │20,000 │ 7.3% │             │  │
│  │ │ 导演费用   │ 导演统筹...  │15,000 │ 5.5% │             │  │
│  │ │ ...        │ ...          │ ...   │ ...  │             │  │
│  │ └────────────┴──────────────┴───────┴──────┘             │  │
│  │                                                            │  │
│  │ 【饼图】预算占比可视化                                     │  │
│  │    前期策划 7.3%                                           │  │
│  │    ●●○○○○○○○○                                           │  │
│  │    器材租赁 16.4%                                          │  │
│  │    ●●●○○○○○○○                                           │  │
│  │    后期剪辑 18.3%                                          │  │
│  │    ●●●●○○○○○○                                           │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 👥 团队配置 (折叠状态)                          ▶        │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 📅 拍摄进度 (折叠状态)                          ▶        │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 📷 器材清单 (折叠状态)                          ▶        │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 🎬 后期制作 (折叠状态)                          ▶        │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ← 点击展开/折叠，节省空间，清晰分类                           │
└────────────────────────────────────────────────────────────────┘

CSS 实现

/* Accordion Container */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.accordion-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-semi-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: var(--bg-hover);
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

.accordion-icon {
    font-size: 1.5rem;
}

.accordion-toggle {
    font-size: 1.5rem;
    color: var(--text-gray);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-toggle {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    padding: 0 var(--spacing-xl);
}

.accordion-item.active .accordion-content {
    max-height: 2000px;  /* 足够大的值 */
    padding: var(--spacing-xl);
}

/* 预算饼图样式 */
.budget-chart {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.chart-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.chart-label {
    flex: 0 0 150px;
    font-size: var(--text-sm);
}

.chart-bar {
    flex: 1;
    height: 12px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.chart-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--primary),
        var(--accent));
    border-radius: var(--radius-full);
    transition: width 1s ease;
}

.chart-value {
    flex: 0 0 60px;
    text-align: right;
    font-weight: var(--font-bold);
    color: var(--primary);
    font-size: var(--text-sm);
}

/* 团队卡片网格 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.team-card {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}

.team-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.team-role {
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-xs);
}

.team-count {
    color: var(--text-gray);
    font-size: var(--text-sm);
}

/* 响应式 */
@media (max-width: 768px) {
    .accordion-header {
        padding: var(--spacing-md);
    }

    .accordion-title {
        font-size: var(--text-lg);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

JavaScript 交互

// Accordion 交互逻辑
document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const item = header.parentElement;
        const wasActive = item.classList.contains('active');

        // 关闭所有其他面板
        document.querySelectorAll('.accordion-item').forEach(otherItem => {
            otherItem.classList.remove('active');
        });

        // 切换当前面板
        if (!wasActive) {
            item.classList.add('active');
        }
    });
});

// 默认打开第一个面板
document.querySelector('.accordion-item')?.classList.add('active');

---

布局对比总结

各Section布局特点

Section	布局模式	关键特征	适用场景
Section 1	Alternating Layout + Bento Grid	左右交替 + 不规则网格	图文并茂展示，第一印象
Section 2	Featured Grid	第1项高亮占2行	突出重点章节
Section 3	Timeline	垂直时间线	按时间顺序展示流程
Section 4	Accordion	折叠面板	大量分类信息收纳

布局多样性达成

✅ 0重复 - 每个Section完全不同的布局模式 ✅ 视觉层次 - 从开放布局到紧凑布局逐步过渡 ✅ 交互丰富 - 静态展示 + 动态交互结合 ✅ 响应式完善 - 所有布局都支持移动端

---

实施步骤

1. Section 1:

   • 替换Grid-2为Alternating Layout
   • 替换Grid-4为Bento Grid

2. Section 2:

   • Grid-3改为Featured Grid
   • Stats改为Progress Bars

3. Section 3:

   • Table保留但改为Timeline卡片
   • Grid-3改为Icon Grid

4. Section 4:

   • 所有内容整合到Accordion面板
   • Table和Grid作为面板内容展示

---

设计完成时间: 2025年10月 设计师: Claude Code Assistant 版本: v1.0