# 汽配产品追溯绑定系统-手机端

## 项目简介

这是一个汽配产品追溯绑定系统的微信小程序高保真原型，专门为修理厂端用户设计。

## 系统特点

- **高保真设计**：包含真实的手机边框效果
- **状态栏展示**：模拟真实的手机状态栏和微信小程序状态栏
- **响应式布局**：适配不同屏幕尺寸
- **现代化UI**：采用渐变色彩和圆角设计

## 页面结构

### 已完成的页面

1. **登录页面** (`login.html`)
   - 手机边框效果
   - 状态栏显示（时间、信号、电量）
   - 微信小程序状态栏
   - 登录表单（账号、密码）
   - 忘记密码链接
   - 系统名称：汽配产品追溯绑定系统-修理厂端入口

## 技术特性

- **HTML5 + CSS3**：现代化的前端技术
- **JavaScript**：交互功能实现
- **响应式设计**：适配移动设备
- **渐变背景**：美观的视觉效果
- **表单验证**：基本的输入验证

## 使用说明

1. 直接在浏览器中打开 `login.html` 文件
2. 页面会自动显示手机边框效果
3. 可以输入账号密码进行登录测试
4. 状态栏会显示当前时间

## 设计规范

- **主色调**：蓝紫色渐变 (#667eea → #764ba2)
- **字体**：系统默认字体栈
- **圆角**：8px-40px 不等
- **间距**：8px 的倍数
- **阴影**：柔和的投影效果

## 后续开发计划

- [ ] 首页/工作台页面
- [ ] 产品追溯页面
- [ ] 绑定管理页面
- [ ] 个人中心页面
- [ ] 设置页面

## 文件结构

```
0722汽配产品追溯系统-手机/
├── login.html          # 登录页面
└── README.md          # 项目说明
```

## 预览效果

登录页面包含以下元素：
- 真实的手机边框和屏幕
- 顶部状态栏（时间、信号、电量）
- 微信小程序状态栏
- 系统Logo和名称
- 登录表单
- 底部版权信息

所有元素都经过精心设计，确保视觉效果逼真，用户体验良好。