# 暑期前端协作

**Repository Path**: lemonlen/summer-front-end-collaboration

## Basic Information

- **Project Name**: 暑期前端协作
- **Description**: 简单的前端页面练习，从静态到动态，简单的html到vue工程
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-07-04
- **Last Updated**: 2025-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 暑期前端活动实践

简介：构建静态页面，从静态html构建到动态vue项目工程实践

## 活动内容

包括三个页面部分内容：
1. 景区描述页面
2. 攻略描述页面
3. 个人中心页面

## 技术栈
1. 前端：HTML、CSS、JavaScript（ES6+）、Vue.js
2. 构建工具：Webpack
3. 状态管理：Pinia
4. 路由管理：Vue Router
5. 组件库：Element UI
6. 版本控制：Git
7. 代码托管：Gitee


## 页面内容

### 景区描述页面

包含以下内容：
1. 页面标题：描述当前页面的标题
2. 图片展示：展示与景区相关的图片
3. 文字描述：介绍景区的基本信息、历史文化等

具体内容：如景区名称，介绍，人文风情，交通信息，门票价格，娱乐设施，历史建筑，文化景点，旅游景点

具体内容参考：如：
名称：XXX景区
介绍：XXX是一个历史悠久的旅游目的地，吸引了来自世界各地的游客。
人文风情：XXX景区以其独特的人文景观而闻名，吸引了众多游客前来欣赏。
交通信息：XXX景区交通方便，附近有公交车、地铁等交通工具。
门票价格：门票一般为普通游客免费，高级游客需要支付一定费用。
娱乐设施：XXX景区提供了丰富多样的娱乐设施，如 playground、amusement park 等。
历史建筑：XXX景区内有许多历史建筑，如纪念堂、桥塔等，展示了景区的历史文化。
文化景点：XXX景区内有许多文化景点，如博物馆、美术馆等，展示了景区的文化遗产。
旅游景点：XXX景区内有许多旅游景点，如赏枫的ountain、赏景的landscape等，吸引了游客前来游玩。

==任务目标：做到美观美化，文字描述部分突出，突出旅游景点==

### 攻略描述页面

参考json数据：
```json
{
  "guide": {
    "title": "海南三天两晚旅行攻略：海口-三亚-亚龙湾",
    "weather": {
      "summary": [
        {
          "day": "2025-06-13",
          "weather": "中雨转大雨",
          "temperature": "25°C - 29°C",
          "wind": "东南风3-4级",
          "tips": "建议携带雨具，避免户外活动"
        },
        {
          "day": "2025-06-14",
          "weather": "大雨转多云",
          "temperature": "25°C - 28°C",
          "wind": "西南风3-4级",
          "tips": "室内景点优先，注意防滑"
        },
        {
          "day": "2025-06-15",
          "weather": "雷阵雨转多云",
          "temperature": "26°C - 34°C",
          "wind": "北风1-3级",
          "tips": "午后适合海滩活动"
        }
      ]
    },
    "routeOverview": "美兰机场→海口市区→三亚市区→亚龙湾→返程",
    "timeline": [
      {
        "period": "Day 1",
        "events": [
          {
            "time": "14:00",
            "title": "抵达海口",
            "address": "海口美兰机场",
            "description": "从机场驱车14公里至市区（约30分钟）",
            "transportInfo": "驾车14公里/30分钟",
            "location": "110.329481,20.021112"
          },
          {
            "time": "15:00",
            "title": "骑楼老街",
            "address": "海口市龙华区博爱路",
            "description": "百年历史骑楼建筑群，可品尝海南粉、清补凉",
            "ticket": "免费",
            "openingHours": "09:00-21:00",
            "location": "110.194686,20.012873"
          },
          {
            "time": "18:00",
            "title": "海南鸡饭",
            "address": "海口琼菜王",
            "description": "海南特色白切鸡配椰香饭",
            "transportInfo": "距骑楼老街2公里/10分钟",
            "location": "110.206759,20.008123"
          }
        ]
      },
      {
        "period": "Day 2",
        "events": [
          {
            "time": "09:00",
            "title": "热带野生动植物园",
            "address": "海口市琼山区",
            "description": "亚洲最大热带动物园，含雨林栈道和动物表演",
            "ticket": "168元",
            "transportInfo": "距市区22公里/40分钟",
            "openingHours": "08:30-17:30",
            "location": "110.249376,19.892875"
          },
          {
            "time": "12:30",
            "title": "和乐蟹午餐",
            "address": "三亚后海村",
            "description": "海南四大名菜之一，推荐清蒸",
            "transportInfo": "距动植物园120公里/2.5小时",
            "location": "109.515731,18.333436"
          },
          {
            "time": "15:30",
            "title": "亚龙湾海滩",
            "address": "三亚市亚龙湾",
            "description": "绵延7公里的白沙滩，适合水上项目",
            "ticket": "免费",
            "transportInfo": "距后海村30公里/40分钟",
            "location": "109.503816,18.252901"
          }
        ]
      },
      {
        "period": "Day 3",
        "events": [
          {
            "time": "09:00",
            "title": "蜈支洲岛",
            "address": "三亚市海棠湾",
            "description": "5A级海岛，可体验海底漫步/摩托艇",
            "ticket": "144元（船票+门票）",
            "transportInfo": "距亚龙湾35公里/50分钟",
            "openingHours": "08:00-17:00",
            "location": "110.008434,18.662293"
          },
          {
            "time": "18:00",
            "title": "免税城购物",
            "address": "三亚国际免税城",
            "description": "亚洲最大单体免税店，含DFS环球港",
            "transportInfo": "距蜈支洲岛25公里/40分钟",
            "location": "109.536507,18.257863"
          }
        ]
      }
    ],
    "dining": {
      "specialties": {
        "title": "海南必吃美食",
        "items": [
          "海南鸡饭（白切鸡配椰香饭）",
          "和乐蟹（膏满肉肥）",
          "清补凉（热带水果甜汤）",
          "海南粉（酸辣米线）",
          "椰子鸡（椰奶炖鸡）"
        ]
      }
    },
    "tips": [
      {
        "icon": "umbrella",
        "color": "#1E90FF",
        "title": "天气提示",
        "content": "前两日有强降雨，建议携带防水背包和防滑鞋"
      },
      {
        "icon": "car",
        "color": "#FFA500",
        "title": "交通建议",
        "items": [
          "海口至三亚建议租车（约200元/天）",
          "海岛间交通可选择旅游巴士（45元/人）"
        ]
      },
      {
        "icon": "moneybag",
        "color": "#228B22",
        "title": "费用参考",
        "items": [
          "三晚住宿：300-800元/晚",
          "景点门票：300-500元/人",
          "餐饮人均：50-150元/餐"
        ]
      }
    ]
  }
}
```

要求：
按照该json数据，把整体的页面内容，美化UI，做出完整的攻略描述


### 个人中心页面
要求：

1. 页面标题：
   - 显示"个人中心"标题
   - 可自定义主题色和字体样式


2. 个人统计信息：
   - 旅游数据统计
     - 总旅游次数
     - 累计旅游时长
     - 平均单次时长
     - 最常去的目的地
   - 数据可视化展示
     - 使用图表展示旅游频率
     - 展示旅游地点分布
     - 展示消费统计
  

3. 个人设置：
   - 账户安全
     - 修改密码
     - 绑定手机/邮箱
     - 实名认证
   - 个人信息修改
     - 基本资料编辑
     - 头像更新
     - 个性化设置
   - 通知设置
     - 消息提醒开关
     - 订阅内容设置
     - 推送频率设置
   - 隐私设置
     - 个人信息可见范围
     - 动态展示设置

4. 数据通信要求：
   - 使用fetch进行前后端通信
   - 实现数据的实时更新
   - 支持离线缓存
   - 添加必要的加载状态和错误处理
   - 实现数据的本地持久化存储


该项比较开放