717 lines
27 KiB
Markdown
717 lines
27 KiB
Markdown
|
# 视觉设计订单班 - 独特布局设计方案
|
|||
|
|
|
|||
|
|
## 设计原则
|
|||
|
|
**每个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 实现
|
|||
|
|
```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 实现
|
|||
|
|
```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 实现
|
|||
|
|
```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 实现
|
|||
|
|
```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 交互
|
|||
|
|
```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
|