# Front_end_project

**Repository Path**: tb1785426/Front_end_project

## Basic Information

- **Project Name**: Front_end_project
- **Description**: 该项目是一个以大疆无人人机商城手机端页面为参考，学习与展示个人前端设计能力的静态页面项目。
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-26
- **Last Updated**: 2023-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 商城, 静态网页, Swiper

## README

# 仿大疆商城静态网页项目 - README

## 项目简介

该项目是一个以[大疆无人人机商城](https://store.dji.com/cn?site=brandsite&from=nav)手机端页面为参考，学习与展示个人前端设计能力的静态页面项目。

## 项目结构

```
font_end_project
├── index.html            # 主页
├── activity.html         # 活动页面
├── activity.html         # 优惠券
├── login.html            # 登录页面
├── me.html               # 用户信息页面
├── order.html            # 订单页面
├── product.html          # 产品详情页面
├── register.html         # 注册页面
├── shoppingCart.html     # 购物车页面
├── submitOrder.html      # 订单提交页面
├── css/                  # CSS 文件夹
│   ├── center.css        # 全局样式文件
|   ├── index.html        # 主页样式文件
|	├── activity.html     # 活动页面样式文件
|	├── activity.html     # 优惠券样式文件
|	├── login.html        # 登录页面样式文件
|	├── me.html           # 用户信息页面样式文件
|   ├── necolas.github.io_normalize.css_8.0.1_normalize.css    # Normalize.css 样式文件
|	├── order.html        # 订单页面样式文件
|	├── product.html      # 产品详情页面样式文件
|	├── register.html     # 注册页面样式文件
|	├── shoppingCart.html # 购物车页面样式文件
|	├── swiper.min.css    # swiper 样式文件
|	└── submitOrder.html  # 订单提交页面样式文件
├── js/                   # JavaScript 文件夹
|	├── index.js          # 主页的 JavaScript 文件
|	├── activity.js       # 活动页面的 JavaScript 文件
|	├── activity.js       # 优惠券的 JavaScript 文件
|	├── login.js          # 登录页面的 JavaScript 文件
|	├── me.js             # 用户信息页面的 JavaScript 文件
|	├── order.js          # 订单页面的 JavaScript 文件
|	├── product.js        # 产品详情页面的 JavaScript 文件
|	├── register.js       # 注册页面的 JavaScript 文件
|	├── shoppingCart.js   # 购物车页面的 JavaScript 文件
|	├── submitOrder.js    # 订单提交页面的 JavaScript 文件
│   └── swiper-bundle.min.js      # swiper JavaScript 文件
├── img/                  # 图片文件夹
│   └── ……
├── other/                # 其他静态资源
|	├── info/             # 虚拟数据
|	|	└── ……
|	└── video/            # 视频资源
|		└── ……
```

## 使用说明

1. 将整个项目文件夹下载到本地。
2. 打开 `index.html` 文件，即可在浏览器中查看项目。
3. 本项目使用了 `Normalize.css` 和 `swiper框架`
4. 本项目通过使用 `sessionStorage` 实现页面间通讯，完成对支付流程的简单模拟
5. 本项目面向移动端，只适配最新的 `Chrome内核浏览器`

## 注意事项

- 本项目为静态网页项目，不包含后端功能。
- 请确保在浏览器中打开 `index.html` 文件
- 建议使用最新版本的 Chrome 浏览器进行查看。