# project

**Repository Path**: deng-xiaoyu11/project

## Basic Information

- **Project Name**: project
- **Description**: 原生js仿小米官网静态三级页面，对页面交互样式进行编写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-06-24
- **Last Updated**: 2024-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 交互式页面开发
### 仿小米官网页面及响应式页面处理
### 由于页面开发比较简单，所以这里只简介页面操作流程
#### 首先我们看到页面
![输入图片说明](https://images.gitee.com/uploads/images/2021/0810/145330_c1d60438_8328455.png "屏幕截图.png")

#### 模拟进入下级页面
![首页进入详情页](https://images.gitee.com/uploads/images/2021/0810/145434_9e32dcb6_8328455.png "屏幕截图.png")
#### 模拟选好商品进入规格页
![规格页](https://images.gitee.com/uploads/images/2021/0810/145550_a425295a_8328455.png "屏幕截图.png")

#### 模拟选好规格颜色，服务等
![选择服务](https://images.gitee.com/uploads/images/2021/0810/145712_44503f09_8328455.png "屏幕截图.png")
![确认规格](https://images.gitee.com/uploads/images/2021/0810/145738_393398f4_8328455.png "屏幕截图.png")

#### 模拟进入购物车
![进入购物车页面](https://images.gitee.com/uploads/images/2021/0810/145806_82d551ee_8328455.png "屏幕截图.png")

#### 模拟删除购物车商品
![确认删除](https://images.gitee.com/uploads/images/2021/0810/150035_4619c92f_8328455.png "屏幕截图.png")
![购物车为空](https://images.gitee.com/uploads/images/2021/0810/150047_f0de38b6_8328455.png "屏幕截图.png")

#### 模拟进入结算页面
![进入结算页](https://images.gitee.com/uploads/images/2021/0810/150225_720c9037_8328455.png "屏幕截图.png")

#### 模拟进入支付页面
![支付页面](https://images.gitee.com/uploads/images/2021/0810/150306_c20effcf_8328455.png "屏幕截图.png")

##模拟一套完整的流程结束

#### 模拟进入活动页
![活动页](https://images.gitee.com/uploads/images/2021/0810/150401_b6899eb5_8328455.png "屏幕截图.png")


#### 模拟各个商品详情页
![商品详情页](https://images.gitee.com/uploads/images/2021/0810/150610_473050d9_8328455.png "屏幕截图.png")


#### 模拟进入服务页
![服务页](https://images.gitee.com/uploads/images/2021/0810/150657_14ce9826_8328455.png "屏幕截图.png")

#### 模拟手机平板响应式
![模拟平板响应式](https://images.gitee.com/uploads/images/2021/0810/151019_e38f6430_8328455.png "屏幕截图.png")
![模拟手机响应式](https://images.gitee.com/uploads/images/2021/0810/151028_7232ac50_8328455.png "屏幕截图.png")