一、项目概述
创建一个以"花语世界"为主题的精美鲜花展示网站，融合东西方花卉文化，展现世界各国国花的魅力与珍稀花卉的神秘之美。网站采用优雅的视觉设计与流畅的动画效果，营造沉浸式的花卉观赏体验。

Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Pages.

二、整体设计风格
2.1 视觉定位
设计风格：新拟态与极简主义的融合，打造优雅清新的花卉主题网站
配色方案：
主色调：#F8E1E7（樱花粉）、#E8F5E9（翠叶绿）
辅助色：#FFF8E1（暖阳金）、#F3E5F5（紫罗兰）
强调色：#E91E63（玫瑰红）、#9C27B0（兰花紫）
背景色：渐变花瓣色系（从浅粉到淡紫）
文字色：#2C3E50（深墨色）、#5D4037（大地棕）
2.2 排版布局
字体选择：
中文标题：思源宋体 / Noto Serif SC
正文字体：思源黑体 / Noto Sans SC
英文装饰：Cinzel / Playfair Display
响应式断点：
桌面端：1200px 以上（4 列网格）
平板端：768px-1199px（2 列网格）
移动端：< 768px（单列瀑布流）
2.3 背景动效
花瓣飘落动画：樱花、桃花、玫瑰花瓣随机飘落
粒子效果：淡粉色光点随鼠标移动产生微光效果
渐变呼吸：背景色随时间缓慢变换（晨曦橙→午后粉→黄昏紫→夜幕蓝）
视差滚动：背景花瓣与前景内容产生视觉层次
三、导航结构
3.1 顶部导航栏
固定在页面顶部，滚动时添加毛玻璃效果
Logo + 网站名称
导航链接：首页 | 国花世界 | 稀有花种 | 关于花语
搜索功能（可按国家、花名搜索）
3.2 Tab 切换系统
顶部大 Tab：国花世界 / 稀有花种
页面内平滑滚动切换，无需刷新

---

## 🖼️ 图片资源（CDN）

> **所有花卉图片已上传至 CDN，直接使用以下 URL，无需本地存储或 AI 生成图片。**
>
> CDN 基础路径：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers`

### 国花图片（national-flowers/）

| 国家 | 花名 | CDN 地址 |
|------|------|----------|
| 中国 | 牡丹 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/china-peony.jpg` |
| 日本 | 樱花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/japan-sakura.jpg` |
| 日本 | 菊花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/japan-chrysanthemum.jpg` |
| 韩国 | 木槿 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/korea-hibiscus.jpg` |
| 印度 | 莲花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/india-lotus.jpg` |
| 英国 | 玫瑰 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/uk-rose.jpg` |
| 法国 | 鸢尾花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/france-iris.jpg` |
| 德国 | 矢车菊 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/germany-cornflower.jpg` |
| 荷兰 | 郁金香 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/netherlands-tulip.jpg` |
| 俄罗斯 | 向日葵 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/russia-sunflower.jpg` |
| 美国 | 玫瑰 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/usa-rose.jpg` |
| 意大利 | 雏菊 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/national-flowers/italy-daisy.jpg` |

### 珍稀花卉图片（rare-flowers/）

| 花名 | CDN 地址 |
|------|----------|
| 巧克力秋英 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/chocolate-cosmos.jpg` |
| 水晶兰 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/crystal-orchid.jpg` |
| 幽灵兰花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/ghost-orchid.jpg` |
| 喜马拉雅蓝罂粟 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/himalayan-blue-poppy.jpg` |
| 翡翠藤 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/jade-vine.jpg` |
| 猴面兰花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/monkey-face-orchid.jpg` |
| 彼岸花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/red-spider-lily.jpg` |
| 睡火莲 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/sleeping-fire-lily.jpg` |
| 优昙婆罗花 | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/rare-flowers/utrarara-flower.jpg` |

> **使用说明：** 在代码中直接使用上述完整 CDN URL 作为 `<img src="">` 的值。无需下载到本地或放在项目 assets 目录中。

---

四、国花世界页面
4.1 国家分类展示
亚洲地区
| 国家 | 国花名称 | 学名 | 花语 | 文化意义 |
|------|---------|------|------|---------|
| 中国 | 牡丹 | Paeonia suffruticosa | 富贵吉祥、繁荣昌盛 | 花中之王，象征国家兴旺 |
| 日本 | 樱花 | Prunus serrulata | 生命之美、爱情与希望 | 武士道精神，短暂而绚烂 |
| 韩国 | 木槿 | Hibiscus syriacus | 坚韧永恒、美丽热情 | 象征民族精神，永不放弃 |
| 印度 | 莲花 | Nelumbo nucifera | 纯洁神圣、超脱轮回 | 佛教圣花，纯净心灵 |
| 泰国 | 素馨兰 | Vanda | 卓越优雅、幸福吉祥 | 皇家花卉，高贵典雅 |

欧洲地区
| 国家 | 国花名称 | 学名 | 花语 | 文化意义 |
|------|---------|------|------|---------|
| 英国 | 玫瑰 | Rosa | 爱情与美丽、荣誉与信仰 | 皇室象征，浪漫永恒 |
| 法国 | 鸢尾花 | Iris germanica | 光明与自由、智慧与信念 | 皇权象征，法兰西精神 |
| 德国 | 矢车菊 | Centaurea cyanus | 优雅与幸福、报恩 | 日耳曼民族之花 |
| 荷兰 | 郁金香 | Tulipa gesneriana | 爱的告白、永恒的祝福 | 财富与尊荣的象征 |
| 俄罗斯 | 向日葵 | Helianthus annuus | 忠诚与光辉、追随阳光 | 象征光明与希望 |

美洲地区
| 国家 | 国花名称 | 学名 | 花语 | 文化意义 |
|------|---------|------|------|---------|
| 美国 | 玫瑰 | Rosa | 爱国与勇气、自由与民主 | 1986年正式认定为国花 |
| 巴西 | 毛蟹爪莲 | Schlumbergera | 吉祥如意、鸿运当头 | 热带风情，节庆之花 |

4.2 国花卡片设计
卡片尺寸：320px × 420px
卡片内容：
- 高清国花图片（使用上方 CDN 图片资源表中 national-flowers/ 下对应的图片 URL）
- 国旗图标
- 国家名称（中英文）
- 花朵名称与学名
- 花语详解（150字左右）
- 文化背景简述

交互效果：
- 悬停时 3D 翻转，显示花语详细解释
- 点击展开模态框，查看完整介绍

4.3 详细页面内容
每个国花需要包含以下完整信息：

花之档案
- 花名（中英文）
- 学名
- 科属
- 原产地
- 花期
- 花色
- 花语寓意

文化故事
- 历史典故
- 文学作品中的引用
- 民间传说
- 现代意义

---

五、稀有花种页面

展示世界珍稀花卉，使用上方 CDN 图片资源表中 rare-flowers/ 下的图片。

5.1 珍稀花卉数据

| 花名 | 英文名 | 图片 | 稀有等级 | 简介 |
|------|--------|------|---------|------|
| 巧克力秋英 | Chocolate Cosmos | `rare-flowers/chocolate-cosmos.jpg` | ★★★★ | 散发巧克力香味的暗红花卉，原产墨西哥，野生种已灭绝 |
| 水晶兰 | Crystal Orchid | `rare-flowers/crystal-orchid.jpg` | ★★★★★ | 通体晶莹剔透的腐生植物，被称为"幽灵之花" |
| 幽灵兰花 | Ghost Orchid | `rare-flowers/ghost-orchid.jpg` | ★★★★★ | 无叶无根的神秘兰花，仅生长于佛罗里达沼泽 |
| 喜马拉雅蓝罂粟 | Himalayan Blue Poppy | `rare-flowers/himalayan-blue-poppy.jpg` | ★★★★ | 高海拔天蓝色花朵，被誉为"天山雪莲的姐妹" |
| 翡翠藤 | Jade Vine | `rare-flowers/jade-vine.jpg` | ★★★★ | 碧绿如翡翠的爪形花簇，原产菲律宾热带雨林 |
| 猴面兰花 | Monkey Face Orchid | `rare-flowers/monkey-face-orchid.jpg` | ★★★★ | 花朵酷似猴脸的奇特兰花，生长于厄瓜多尔云雾林 |
| 彼岸花 | Red Spider Lily | `rare-flowers/red-spider-lily.jpg` | ★★★ | 花叶永不相见的神秘花卉，东方文化中的冥界之花 |
| 睡火莲 | Sleeping Fire Lily | `rare-flowers/sleeping-fire-lily.jpg` | ★★★★★ | 每年仅开放七天的紫色睡莲，被称为"花中睡美人" |
| 优昙婆罗花 | Udumbara Flower | `rare-flowers/utrarara-flower.jpg` | ★★★★★ | 佛经中三千年一开的圣花，象征祥瑞与转轮圣王降世 |

5.2 珍稀花卉卡片设计
- 使用上表中对应的 CDN 图片路径（完整 URL 为 `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/flowers/` + 表中路径）
- 卡片包含：花卉图片、中英文名、稀有等级星标、简介
- 悬停效果：卡片发光 + 图片微放大
- 点击展开详情模态框

---

六、技术实现要求

6.1 技术栈
- HTML5 + CSS3 + JavaScript（原生或轻量框架）
- 响应式设计
- CSS 动画 + requestAnimationFrame

6.2 部署
- 使用 EdgeOne Pages 部署
- 根目录 index.html + assets/
- 图片全部从 CDN 加载，不在项目中存放图片文件

6.3 性能优化
- 图片使用 `loading="lazy"`
- 动画使用 `will-change` 和 GPU 加速
- 首屏加载 < 3秒