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>
This commit is contained in:
Yep_Q
@@ -0,0 +1,716 @@
|
||||
# 视觉设计订单班 - 独特布局设计方案
|
||||
|
||||
## 设计原则
|
||||
**每个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
|
||||
@@ -0,0 +1,342 @@
|
||||
<!-- Timeline Layout - 17个分镜设计 -->
|
||||
<div class="timeline-container" style="margin-top: var(--spacing-xl);">
|
||||
<!-- 镜号1 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 1</span>
|
||||
<span class="timeline-duration">| 15秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/同里古建筑航拍.jpg" alt="同里古镇全景航拍" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">同里古镇全景航拍</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 高空俯拍</div>
|
||||
<div><strong>备注:</strong> 展现古镇整体布局</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号2 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 2</span>
|
||||
<span class="timeline-duration">| 12秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/配色表.jpg" alt="水乡特色河道" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">水乡特色河道</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 低空航拍</div>
|
||||
<div><strong>备注:</strong> 展现水系脉络</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号3 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 3</span>
|
||||
<span class="timeline-duration">| 20秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇文化展示.jpg" alt="退思园建筑群" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">退思园建筑群</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 地面推进</div>
|
||||
<div><strong>备注:</strong> 世界遗产重点展示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号4 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 4</span>
|
||||
<span class="timeline-duration">| 18秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇文化展示.jpg" alt="三桥文化场景" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">三桥文化场景</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 平移拍摄</div>
|
||||
<div><strong>备注:</strong> 传统婚俗展现</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号5 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 5</span>
|
||||
<span class="timeline-duration">| 10秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇文化展示.jpg" alt="古建筑细节特写" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">古建筑细节特写</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 微距镜头</div>
|
||||
<div><strong>备注:</strong> 雕花、砖雕等工艺</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号6 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 6</span>
|
||||
<span class="timeline-duration">| 15秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/江南美食展示.jpg" alt="状元蹄制作过程" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">状元蹄制作过程</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 近景拍摄</div>
|
||||
<div><strong>备注:</strong> 传统烹饪技艺</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号7 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 7</span>
|
||||
<span class="timeline-duration">| 12秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/江南美食展示.jpg" alt="袜底酥制作特写" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">袜底酥制作特写</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 微距慢动作</div>
|
||||
<div><strong>备注:</strong> 酥皮层次展示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号8 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 8</span>
|
||||
<span class="timeline-duration">| 18秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/江南美食展示.jpg" alt="美食街市井生活" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">美食街市井生活</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 跟拍镜头</div>
|
||||
<div><strong>备注:</strong> 烟火气氛围</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号9 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 9</span>
|
||||
<span class="timeline-duration">| 20秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/湿地生态景观.jpg" alt="湿地公园全景" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">湿地公园全景</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 航拍环绕</div>
|
||||
<div><strong>备注:</strong> 生态美景全貌</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号10 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 10</span>
|
||||
<span class="timeline-duration">| 15秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/湿地生态景观.jpg" alt="候鸟栖息场景" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">候鸟栖息场景</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 长焦拍摄</div>
|
||||
<div><strong>备注:</strong> 生态多样性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号11 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 11</span>
|
||||
<span class="timeline-duration">| 25秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/湿地生态景观.jpg" alt="晨雾与日出" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">晨雾与日出</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 延时摄影</div>
|
||||
<div><strong>备注:</strong> 自然意境营造</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号12 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 12</span>
|
||||
<span class="timeline-duration">| 15秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/农旅融合展示.jpg" alt="现代农业大棚" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">现代农业大棚</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 内景拍摄</div>
|
||||
<div><strong>备注:</strong> 科技农业展示</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号13 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 13</span>
|
||||
<span class="timeline-duration">| 18秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/稻田航拍.jpg" alt="稻田丰收场景" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">稻田丰收场景</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 航拍俯视</div>
|
||||
<div><strong>备注:</strong> 农业产业成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号14 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 14</span>
|
||||
<span class="timeline-duration">| 12秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/农旅融合展示.jpg" alt="农民劳作特写" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">农民劳作特写</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 近景拍摄</div>
|
||||
<div><strong>备注:</strong> 乡村振兴主题</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号15 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 15</span>
|
||||
<span class="timeline-duration">| 20秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇夜景.jpg" alt="古镇夜景全景" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">古镇夜景全景</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 高空航拍</div>
|
||||
<div><strong>备注:</strong> 灯光璀璨效果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号16 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 16</span>
|
||||
<span class="timeline-duration">| 18秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇夜景.jpg" alt="桥影与水面倒影" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">桥影与水面倒影</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 平移慢镜</div>
|
||||
<div><strong>备注:</strong> 夜景意境营造</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 镜号17 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-badge">镜号 17</span>
|
||||
<span class="timeline-duration">| 22秒</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-thumbnail">
|
||||
<img data-src="images/古镇夜景.jpg" alt="夜市文化活动" loading="lazy">
|
||||
</div>
|
||||
<div class="timeline-description">
|
||||
<h4 class="timeline-title">夜市文化活动</h4>
|
||||
<div class="timeline-details">
|
||||
<div><strong>拍摄方式:</strong> 摇臂拍摄</div>
|
||||
<div><strong>备注:</strong> 结尾氛围烘托</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,14 +17,14 @@
|
||||
--hover-bg: rgba(217, 119, 6, 0.15); /* 悬停背景 */
|
||||
--active-bg: rgba(217, 119, 6, 0.2); /* 激活背景 */
|
||||
|
||||
/* 间距系统 - 针对大屏幕优化 */
|
||||
--spacing-xs: 0.75rem; /* 12px */
|
||||
--spacing-sm: 1.25rem; /* 20px */
|
||||
--spacing-md: 2rem; /* 32px */
|
||||
--spacing-lg: 3rem; /* 48px */
|
||||
--spacing-xl: 4rem; /* 64px */
|
||||
--spacing-2xl: 6rem; /* 96px */
|
||||
--spacing-3xl: 8rem; /* 128px */
|
||||
/* 间距系统 - 紧凑布局优化 */
|
||||
--spacing-xs: 0.5rem; /* 8px */
|
||||
--spacing-sm: 0.875rem; /* 14px */
|
||||
--spacing-md: 1.25rem; /* 20px */
|
||||
--spacing-lg: 2rem; /* 32px */
|
||||
--spacing-xl: 2.5rem; /* 40px */
|
||||
--spacing-2xl: 3.5rem; /* 56px */
|
||||
--spacing-3xl: 5rem; /* 80px */
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
@@ -531,7 +531,7 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
@@ -733,12 +733,12 @@ tr:hover {
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--spacing-sm: 0.75rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
--spacing-sm: 0.625rem; /* 10px */
|
||||
--spacing-md: 0.875rem; /* 14px */
|
||||
--spacing-lg: 1.25rem; /* 20px */
|
||||
--spacing-xl: 1.5rem; /* 24px */
|
||||
--spacing-2xl: 2.25rem; /* 36px */
|
||||
--spacing-3xl: 3rem; /* 48px */
|
||||
}
|
||||
|
||||
.hero {
|
||||
@@ -959,3 +959,907 @@ body.dark-theme .theme-icon-dark {
|
||||
body.dark-theme .theme-icon-light {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ========== Section 1: Alternating Layout (左右交替布局) ========== */
|
||||
.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列 */
|
||||
}
|
||||
|
||||
/* 响应式 - Alternating Layout */
|
||||
@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 (高亮第一项布局) ========== */
|
||||
.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-amber) 0%,
|
||||
var(--accent-slate) 100%);
|
||||
}
|
||||
|
||||
.featured-item:first-child .image-container {
|
||||
aspect-ratio: 3/4; /* 竖向比例 */
|
||||
}
|
||||
|
||||
.featured-item:first-child .card-title {
|
||||
font-size: var(--text-3xl);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.featured-item:first-child .card-header {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.featured-item:first-child .card-body {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.featured-item:first-child .feature-list li {
|
||||
color: var(--text-light);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 其他项目正常尺寸 */
|
||||
.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);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
flex: 0 0 100px;
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 12px;
|
||||
background: var(--bg-muted);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
var(--primary-amber),
|
||||
var(--accent-amber-light));
|
||||
border-radius: var(--radius-full);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
flex: 0 0 80px;
|
||||
text-align: right;
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-amber);
|
||||
}
|
||||
|
||||
/* 响应式 - Featured Grid */
|
||||
@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;
|
||||
}
|
||||
|
||||
.featured-item:first-child .image-container {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section 3: Timeline Layout (垂直时间线布局) ========== */
|
||||
.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-amber) 0%,
|
||||
var(--accent-amber-light) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0;
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
transform: translateX(8px) translateY(-4px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-amber);
|
||||
border-color: var(--primary-amber);
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--spacing-3xl) - 8px);
|
||||
top: var(--spacing-lg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--primary-amber);
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--bg-semi-dark);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: var(--primary-amber);
|
||||
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);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.timeline-thumbnail {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-semibold);
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary-amber);
|
||||
}
|
||||
|
||||
.timeline-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-sm);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
padding: var(--spacing-md) 0;
|
||||
border-top: 1px solid var(--border-light);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.timeline-detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-detail-label {
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--primary-amber);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.timeline-detail-value {
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
.timeline-remark {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-card:hover {
|
||||
border-color: var(--primary-amber);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.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);
|
||||
color: var(--primary-amber);
|
||||
}
|
||||
|
||||
.icon-card-value {
|
||||
color: var(--text-gray);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* 响应式 - Timeline */
|
||||
@media (max-width: 768px) {
|
||||
.timeline-container {
|
||||
padding-left: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-thumbnail {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section 4: Accordion Layout (手风琴折叠面板) ========== */
|
||||
.accordion-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 2px solid var(--border-light);
|
||||
overflow: hidden;
|
||||
transition: all var(--transition-base);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.accordion-item.active {
|
||||
border-color: var(--primary-amber);
|
||||
box-shadow: var(--shadow-xl), 0 0 0 3px rgba(217, 119, 6, 0.15);
|
||||
}
|
||||
|
||||
.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 var(--transition-base);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.accordion-toggle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-gray);
|
||||
transition: transform var(--transition-base);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.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: none; /* 移除高度限制，确保所有内容可见 */
|
||||
overflow: visible; /* 允许内容完全显示 */
|
||||
padding: var(--spacing-xl);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.accordion-content-inner {
|
||||
padding-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* 预算饼图样式 */
|
||||
.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);
|
||||
color: var(--text-light);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
flex: 1;
|
||||
height: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
var(--primary-amber),
|
||||
var(--accent-amber-light));
|
||||
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-amber);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* 团队卡片网格 */
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.team-card {
|
||||
text-align: center;
|
||||
padding: var(--spacing-lg);
|
||||
background: rgba(217, 119, 6, 0.05);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.team-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.team-role {
|
||||
font-weight: var(--font-semibold);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--primary-amber);
|
||||
}
|
||||
|
||||
.team-count {
|
||||
color: var(--text-gray);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* 响应式 - Accordion */
|
||||
@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);
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片对比滑动器 (Image Comparison Slider) ========== */
|
||||
.comparison-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
cursor: ew-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.comparison-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comparison-image-before {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.comparison-image-after {
|
||||
z-index: 2;
|
||||
clip-path: polygon(0 0, var(--position, 50%) 0, var(--position, 50%) 100%, 0 100%);
|
||||
}
|
||||
|
||||
.comparison-slider {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--position, 50%);
|
||||
width: 4px;
|
||||
background: var(--primary-amber);
|
||||
transform: translateX(-50%);
|
||||
cursor: ew-resize;
|
||||
box-shadow: 0 0 20px rgba(217, 119, 6, 0.5);
|
||||
}
|
||||
|
||||
.comparison-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-amber);
|
||||
border-radius: 50%;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.comparison-slider::after {
|
||||
content: '⬌';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.comparison-container:hover .comparison-slider::before {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.comparison-labels {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
left: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
border-radius: var(--radius-md);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.comparison-label-before {
|
||||
background: rgba(217, 119, 6, 0.9);
|
||||
}
|
||||
|
||||
.comparison-label-after {
|
||||
background: rgba(100, 116, 139, 0.9);
|
||||
}
|
||||
|
||||
/* 分镜网格布局 */
|
||||
.storyboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
||||
gap: var(--spacing-2xl);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.storyboard-item {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.storyboard-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary-amber);
|
||||
}
|
||||
|
||||
.storyboard-meta {
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--bg-semi-dark);
|
||||
}
|
||||
|
||||
.storyboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.storyboard-number {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: var(--primary-amber);
|
||||
color: white;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: var(--font-bold);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.storyboard-duration {
|
||||
color: var(--text-gray);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.storyboard-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-sm);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
margin-top: var(--spacing-md);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.storyboard-detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.storyboard-detail-label {
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--primary-amber);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.storyboard-detail-value {
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
.storyboard-description {
|
||||
margin-top: var(--spacing-md);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-light);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 响应式 - 分镜网格 */
|
||||
@media (max-width: 768px) {
|
||||
.storyboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.comparison-labels {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片放大Lightbox模态框 ========== */
|
||||
.lightbox-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-slow), visibility var(--transition-slow);
|
||||
padding: var(--spacing-xl);
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.lightbox-modal.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
transform: scale(0.9);
|
||||
transition: transform var(--transition-slow);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lightbox-modal.active .lightbox-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.lightbox-image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
|
||||
0 0 0 3px var(--primary-amber);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: fixed;
|
||||
top: var(--spacing-xl);
|
||||
right: var(--spacing-xl);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--primary-amber);
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
box-shadow: var(--shadow-xl);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
background: var(--accent-amber-light);
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.6);
|
||||
}
|
||||
|
||||
.lightbox-close::before,
|
||||
.lightbox-close::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.lightbox-close::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.lightbox-close::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* 图片信息标签 */
|
||||
.lightbox-label {
|
||||
position: fixed;
|
||||
bottom: var(--spacing-xl);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background: rgba(217, 119, 6, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: var(--shadow-xl);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* 响应式 - Lightbox */
|
||||
@media (max-width: 768px) {
|
||||
.lightbox-modal {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
top: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.lightbox-close::before,
|
||||
.lightbox-close::after {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.lightbox-label {
|
||||
font-size: var(--text-base);
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
bottom: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -16,6 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initSmoothScroll();
|
||||
updateStats();
|
||||
initThemeToggle();
|
||||
initAccordion();
|
||||
initComparisonSlider();
|
||||
initImageLightbox();
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
@@ -266,3 +269,221 @@ function initThemeToggle() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 手风琴面板交互逻辑
|
||||
function initAccordion() {
|
||||
const accordionHeaders = document.querySelectorAll('.accordion-header');
|
||||
|
||||
accordionHeaders.forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
const accordionItem = header.parentElement;
|
||||
const wasActive = accordionItem.classList.contains('active');
|
||||
|
||||
// 关闭所有其他面板
|
||||
document.querySelectorAll('.accordion-item').forEach(otherItem => {
|
||||
otherItem.classList.remove('active');
|
||||
});
|
||||
|
||||
// 切换当前面板状态
|
||||
if (!wasActive) {
|
||||
accordionItem.classList.add('active');
|
||||
}
|
||||
|
||||
// 重新初始化Lucide图标以确保折叠箭头正确显示
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 默认打开第一个面板（预算明细）
|
||||
const firstAccordionItem = document.querySelector('.accordion-item');
|
||||
if (firstAccordionItem && !firstAccordionItem.classList.contains('active')) {
|
||||
firstAccordionItem.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 图片对比滑块交互逻辑
|
||||
function initComparisonSlider() {
|
||||
const comparisonContainers = document.querySelectorAll('.comparison-container');
|
||||
|
||||
comparisonContainers.forEach(container => {
|
||||
const slider = container.querySelector('.comparison-slider');
|
||||
const afterImage = container.querySelector('.comparison-image-after');
|
||||
|
||||
let isDragging = false;
|
||||
|
||||
// 更新滑块位置
|
||||
function updatePosition(clientX) {
|
||||
const rect = container.getBoundingClientRect();
|
||||
const x = clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
|
||||
|
||||
container.style.setProperty('--position', `${percentage}%`);
|
||||
}
|
||||
|
||||
// 鼠标事件
|
||||
function handleMouseDown(e) {
|
||||
isDragging = true;
|
||||
container.style.cursor = 'ew-resize';
|
||||
updatePosition(e.clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (!isDragging) return;
|
||||
updatePosition(e.clientX);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDragging = false;
|
||||
container.style.cursor = 'ew-resize';
|
||||
}
|
||||
|
||||
// 触摸事件
|
||||
function handleTouchStart(e) {
|
||||
isDragging = true;
|
||||
updatePosition(e.touches[0].clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
if (!isDragging) return;
|
||||
updatePosition(e.touches[0].clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
// 绑定事件监听器
|
||||
container.addEventListener('mousedown', handleMouseDown);
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
container.addEventListener('touchstart', handleTouchStart, { passive: false });
|
||||
document.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
document.addEventListener('touchend', handleTouchEnd);
|
||||
|
||||
// 点击直接跳转到点击位置
|
||||
container.addEventListener('click', (e) => {
|
||||
if (!isDragging) {
|
||||
updatePosition(e.clientX);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 图片放大Lightbox功能
|
||||
function initImageLightbox() {
|
||||
// 创建Lightbox模态框HTML结构
|
||||
const lightboxHTML = `
|
||||
<div class="lightbox-modal" id="lightboxModal">
|
||||
<div class="lightbox-content">
|
||||
<img src="" alt="放大图片" class="lightbox-image" id="lightboxImage">
|
||||
</div>
|
||||
<div class="lightbox-close" id="lightboxClose"></div>
|
||||
<div class="lightbox-label" id="lightboxLabel"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 将Lightbox添加到页面底部
|
||||
document.body.insertAdjacentHTML('beforeend', lightboxHTML);
|
||||
|
||||
const lightboxModal = document.getElementById('lightboxModal');
|
||||
const lightboxImage = document.getElementById('lightboxImage');
|
||||
const lightboxLabel = document.getElementById('lightboxLabel');
|
||||
const lightboxClose = document.getElementById('lightboxClose');
|
||||
|
||||
// 获取所有对比图片
|
||||
const comparisonImages = document.querySelectorAll('.comparison-image');
|
||||
|
||||
// 跟踪拖动状态
|
||||
let dragStartTime = 0;
|
||||
let dragStartX = 0;
|
||||
let dragStartY = 0;
|
||||
|
||||
comparisonImages.forEach(img => {
|
||||
// 记录鼠标按下位置和时间
|
||||
img.addEventListener('mousedown', (e) => {
|
||||
dragStartTime = Date.now();
|
||||
dragStartX = e.clientX;
|
||||
dragStartY = e.clientY;
|
||||
});
|
||||
|
||||
img.addEventListener('touchstart', (e) => {
|
||||
dragStartTime = Date.now();
|
||||
dragStartX = e.touches[0].clientX;
|
||||
dragStartY = e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
// 点击图片打开Lightbox
|
||||
img.addEventListener('click', (e) => {
|
||||
const dragDuration = Date.now() - dragStartTime;
|
||||
const dragDistanceX = Math.abs(e.clientX - dragStartX);
|
||||
const dragDistanceY = Math.abs(e.clientY - dragStartY);
|
||||
const dragDistance = Math.sqrt(dragDistanceX * dragDistanceX + dragDistanceY * dragDistanceY);
|
||||
|
||||
// 只有快速点击且移动距离小于10px才打开Lightbox
|
||||
if (dragDuration < 200 && dragDistance < 10) {
|
||||
openLightbox(img);
|
||||
e.stopPropagation(); // 阻止事件冒泡到comparison-container
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 打开Lightbox
|
||||
function openLightbox(img) {
|
||||
// 获取图片源（已经通过懒加载完成）
|
||||
const imgSrc = img.src || img.getAttribute('data-src');
|
||||
|
||||
// 如果图片还未加载，等待加载
|
||||
if (!img.src || img.src.includes('data:image/svg+xml')) {
|
||||
console.warn('图片尚未加载完成');
|
||||
return;
|
||||
}
|
||||
|
||||
// 判断是"生成图"还是"线稿"
|
||||
const isAfter = img.classList.contains('comparison-image-after');
|
||||
const labelText = isAfter ? '线稿' : '生成图';
|
||||
|
||||
// 设置图片和标签
|
||||
lightboxImage.src = imgSrc;
|
||||
lightboxLabel.textContent = labelText;
|
||||
|
||||
// 显示模态框
|
||||
lightboxModal.classList.add('active');
|
||||
|
||||
// 禁止页面滚动
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// 关闭Lightbox
|
||||
function closeLightbox() {
|
||||
lightboxModal.classList.remove('active');
|
||||
|
||||
// 恢复页面滚动
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 关闭按钮点击事件
|
||||
lightboxClose.addEventListener('click', (e) => {
|
||||
closeLightbox();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 点击遮罩层关闭（点击图片本身不关闭）
|
||||
lightboxModal.addEventListener('click', (e) => {
|
||||
if (e.target === lightboxModal) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC键关闭
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && lightboxModal.classList.contains('active')) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user