# 光影天府小程序 · 设计说明文档

## 一、设计理念

### 核心风格：文艺范 · 清新 · 简约 · 清爽

以"入蜀有道，光影随行"为设计灵魂，将四川文旅的深层文化底蕴（非刻板符号）融入每一处细节，打造差异化、精致、有深度的视觉体验。

### 设计原则
1. **拒绝刻板**：不用火锅、脸谱、熊猫等浅层符号
2. **深度提炼**：从文旅视角挖掘四川文化基因——金沙太阳神鸟、蜀锦纹样、蜀竹文化、银杏古木、山雾云海、茶马古道、蜀绣针脚
3. **故事化表达**：每个功能模块配以四字诗意副标题，赋予文化叙事

---

## 二、色彩体系

| 色彩名称 | 色值 | 文化寓意 | 应用场景 |
|---------|------|---------|---------|
| 竹绿 bamboo | #5B7553 | 蜀竹苍翠 | 后勤保障、进度跟踪 |
| 暖砂 amber | #C4956A | 蜀地暖阳 | 剧组服务、文旅好物 |
| 山雾蓝 mist | #7B9EB0 | 青城云雾 | 拍摄场景、AI助手 |
| 墨石 ink | #3D4F5F | 蜀山墨韵 | 主色调、文字 |
| 漆红 lacquer | #8B4D52 | 蜀漆古韵 | 文旅特色 |
| 金沙金 gold | #B8963E | 太阳神鸟 | 首页、AI助手、收藏 |
| 宣纸白 paper | #F7F4EF | 古纸温润 | 全局背景 |

---

## 三、首页功能布局（从上到下）

### 3.1 小程序名称区
- **主标题**：光影天府（思源宋体，28px，金色光感文字）
- **副标题**：入川拍摄指南（12px，宽字距，半透明白色）
- **宣传文案**：线上一站式服务模块，含项目申报、需求对接、进度跟踪、反馈互动等全流程功能
- **背景**：渐变墨色→竹绿，嵌入山峦剪影轮廓（CSS SVG）、右上角太阳神鸟光芒纹

### 3.2 宣传Banner轮播
- 三张Banner，自动3.5秒切换，支持手势滑动
- 设计：真实四川影视拍摄场景图片 + 暗色渐变遮罩 + 地点标签 + 文案叠加
  - 第一张：📍川西·贡嘎雪山 — 入蜀有道 · 光影随行（壮丽雪山广角，电影感大气磅礴）
  - 第二张：📍巴蜀·古镇夜色 — 山水入镜 · 天府入戏（川渝吊脚楼古镇夜景，人文气息浓郁）
  - 第三张：📍镜头·山水之间 — 影旅交融 · 文脉共生（复古摄影机对准云雾山川，影旅融合象征）
- 每张Banner左下角显示毛玻璃地点标签（📍+地名）
- 暗色渐变遮罩保证文字可读性，底部圆点指示器当前页加宽高亮
- 图片来源：Unsplash免费授权（Unsplash License）

### 3.3 角色切换模块
- 三角色Tab：我是导演 / 我是制片 / 我是投资
- 每个角色展示4个功能卡片（带SVG图标 + 四字诗意副标题）
- **导演**：拍摄场景(山水有灵)、数字手册(卷中有蜀)、后勤保障(驿站无忧)、文旅特色(锦绣入梦)
- **制片**：剧组服务(蜀锦织事)、进度跟踪(水到渠成)、群演人才(蜀绣千针)、后勤保障(驿站无忧)
- **投资**：影视政策(策引蜀道)、文旅特色(锦绣入梦)、项目申报(水到渠成)、进度跟踪(蜀道不难)

### 3.4 AI智能助手模块
- 深色渐变卡片，右上角太阳神鸟光芒装饰
- 金色渐变头像 + 名称 + 功能描述
- 智能消息气泡：自动轮播5条提示语（带三点跳动动画）
- 点击进入AI助手对话页（含输入框）

### 3.5 一站式服务中心
- 标题带山纹装饰图标 + 诗意副标题"入蜀有道"
- 4×2服务宫格，每个按钮包含：
  - 独立渐变底色图标
  - 功能名称
  - 四字诗意副标题
  - 大间距（gap:16px）
- 8个服务：剧组服务(蜀锦织事)、进度跟踪(水到渠成)、拍摄场景(山川入镜)、数字手册(竹简藏蜀)、文旅特色(锦绣天府)、群演人才(蜀绣千针)、文旅好物(茶韵飘香)、福利专区(竹节生惠)

### 3.6 文旅好物展示
- 标题带银杏叶装饰 + "银杏知秋"副标题
- 2×2商品卡片网格
- 每张卡片：渐变色图区 + 装饰emoji + 商品名 + 价格
- 展示：蒙顶甘露蜀茶礼盒、蜀绣丝巾、邛窑青瓷、绵竹年画

### 3.7 福利专区
- 标题带竹节装饰 + "竹节生惠"副标题
- 横向双卡片：剧组保险 + 滴滴出行
- 每卡片：图标 + 名称 + 描述 + 标签

### 3.8 底部导航
- 四按钮：首页、剧组服务、后勤保障、我的
- **首页图标**：金沙太阳神鸟简化图形（圆形+放射光芒线条，金色）
- 各按钮选中态有独立主题色

---

## 四、四川文旅元素融入设计

### 4.1 模块标题前的文化符号

| 模块 | 装饰元素 | 文化来源 |
|------|---------|---------|
| AI助手 | 太阳神鸟光芒纹 | 金沙遗址太阳神鸟金饰 |
| 一站式服务 | 山形纹 | 峨眉云海/青城天下幽 |
| 文旅好物 | 银杏叶纹 | 杜甫草堂千年银杏 |
| 福利专区 | 竹节纹 | 蜀南竹海/蜀竹文化 |

### 4.2 模块底纹（CSS SVG Pattern）

| 底纹名称 | 应用位置 | 文化寓意 |
|---------|---------|---------|
| 神鸟纹(sunbird) | AI助手区域 | 金沙文化之光 |
| 山水纹(mountain) | 一站式服务 | 蜀山连绵 |
| 银杏纹(ginkgo) | 文旅好物 | 草堂秋韵 |
| 竹影纹(bamboo) | 福利专区 | 蜀竹清影 |
| 丝路纹(silk) | 群演人才/剧组服务 | 蜀锦丝路 |
| 水波纹(water) | 进度跟踪 | 都江堰水 |
| 茶韵纹(tea) | 文旅好物子页 | 蒙顶茶文化 |

### 4.3 四字诗意副标题设计

每个功能按钮不是简单命名，而是以四字诗语赋予文化叙事：
- **山水有灵** → 拍摄场景（蜀地山水皆有灵性，适合入镜）
- **卷中有蜀** → 数字手册（竹简卷轴中藏着入蜀之道）
- **驿站无忧** → 后勤保障（古道驿站，全程保障无忧）
- **锦绣入梦** → 文旅特色（蜀锦蜀绣之美如梦似幻）
- **蜀锦织事** → 剧组服务（如蜀锦织造般精密的剧组管理）
- **水到渠成** → 进度跟踪（都江堰水利智慧，一切顺理成章）
- **蜀绣千针** → 群演人才（千针万线汇聚人才之美）
- **茶韵飘香** → 文旅好物（蒙顶茶香，蜀地好物）
- **竹节生惠** → 福利专区（竹节节高升，节节生惠）
- **山川入镜** → 拍摄场景（服务宫格版）
- **竹简藏蜀** → 数字手册（服务宫格版）
- **神鸟引路** → AI助手（金沙太阳神鸟指引方向）

---

## 五、子页面设计

### 5.1 拍摄场景页
- 深色渐变头部 + "山川入镜·光影随行"
- 可视化地图：四川省21地市州场景分布（SVG地图占位）
- 场景分类检索：全部/古装/70-80年代/90年代/现代/自然实景/城市实景/民用室内/商用室内/特殊实景
- 功能入口：VR全景预览、场景视频展示、影视案例关联、场景智能匹配

### 5.2 数字手册页
- 竹绿渐变头部 + "竹简藏蜀·入蜀有道"
- 三大手册入口：入川拍摄指南(PDF+AI解读)、影视政策(扶持/补贴/税收+AI解读)、审批流程(标准化流程+AI解读)

### 5.3 文旅特色页
- 漆红渐变头部 + "锦绣入梦·影旅融合"
- 功能入口：热门文旅场景、影视文旅路线、游研活动（产品/流程/报名/反馈）、文旅元素全场景嵌入

### 5.4 剧组服务页
- 暖砂渐变头部 + "蜀锦织事·全程服务"
- 功能入口：场景智能匹配、历史拍摄展示、一键导出方案、吃住行服化道底部入口

### 5.5 进度跟踪页
- 竹绿渐变头部 + "水到渠成·进度可视"
- 项目申报进度示例：时间轴展示（项目信息提交→材料审核→场地协调→审批完成）

### 5.6 群演人才页
- 墨蓝渐变头部 + "蜀绣千针·人才汇聚"
- 9类人才分类Chips：群演/实习生/演员/导演/编剧/制片/摄影/灯光/美术
- 推荐人才卡片（头像/名称/组织/代表作/评分）
- 组织机构筛选、评分与信用体系

### 5.7 文旅好物页
- 暖砂渐变头部 + "茶韵飘香·蜀地好物"
- 2列商品卡片网格，6件商品展示
- 不走线上交易流程

### 5.8 福利专区页
- 竹绿渐变头部 + "竹节生惠·剧组专享"
- 剧组保险详细卡片（保障范围+了解详情入口）
- 滴滴出行详细卡片（优惠内容+领取福利入口）
- 安全提示 + 免责申明

### 5.9 AI智能助手页
- 墨蓝渐变头部 + "神鸟引路·智慧随行"
- AI助手形象展示（金色渐变头像+光晕）
- 三大功能：智能推荐拍摄场景、规划路线、解读政策
- 底部输入框（模拟对话界面）

### 5.10 底部导航二级页
- **剧组服务**：场景智能匹配、历史拍摄展示、一键导出方案、吃住行服化道智能匹配、项目进度跟踪
- **后勤保障**：餐饮服务、酒店住宿、车辆租赁、拍摄器材租赁、服化服务、道具服务、外联制片、宣传发行·后期制作
- **我的**：登录状态、消息通知、我的收藏、反馈互动、关于我们

---

## 六、交互特性

1. **Banner自动轮播**：3.5秒切换，支持手势滑动
2. **角色Tab切换**：带fadeUp入场动画
3. **AI消息轮播**：4秒切换，透明度过渡动画
4. **子页面侧滑**：从右侧滑入，0.35s缓动曲线
5. **按钮触摸反馈**：scale(0.92-0.98)微缩效果
6. **分类标签切换**：active状态即时响应

---

## 七、技术规格

- **文件**：单HTML文件，97KB，零外部依赖（除Google Fonts）
- **字体**：Noto Serif SC（标题/宋体）+ Noto Sans SC（正文/黑体）
- **图标**：全部使用内联SVG，无图片依赖
- **底纹**：CSS SVG data URI，3-8%透明度
- **适配**：390×844px iPhone尺寸，≤420px自动全屏