# 设备租赁应用

这是一个基于 uni-app 开发的设备租赁管理应用，提供设备租赁、管理和续费等功能。

## 功能特性

### 首页功能
- **状态栏显示**：显示时间和系统状态图标
- **公司信息**：显示当前公司名称和位置信息
- **公告栏**：滚动显示系统公告信息
- **轮播图**：展示推荐设备和产品信息
- **设备列表**：显示用户当前租赁的设备
- **底部导航**：快速切换不同功能模块

### 主要页面
1. **首页** (`pages/index/index.vue`) - 应用主页面
2. **登录页** (`pages/login/login.vue`) - 用户登录和注册

## 技术栈

- **框架**：uni-app Vue3
- **状态管理**：Vuex 4
- **样式**：SCSS + CSS3
- **图标**：SVG 矢量图标
- **动画**：CSS3 动画效果
- **代码规范**：ESLint + Prettier

## 依赖说明

### 核心依赖
- `@dcloudio/uni-app`: uni-app 框架核心包
- `vue`: Vue 3 框架
- `vuex`: 状态管理库

### 开发依赖
- `eslint`: 代码检查工具
- `eslint-plugin-vue`: Vue 代码检查插件
- `@vue/eslint-config-prettier`: ESLint 与 Prettier 集成
- `prettier`: 代码格式化工具

### 安装依赖
```bash
npm install
```

### 开发命令
```bash
# 格式化代码
npm run format

# 代码检查
npm run lint

# 开发模式
npm run dev

# 构建项目
npm run build
```

## 项目结构

```
HomeLease/
├── pages/                 # 页面文件
│   ├── index/            # 首页
│   └── login/            # 登录页
├── static/               # 静态资源
│   ├── stove.svg         # 灶具图标
│   ├── burner.svg        # 燃烧器图标
│   └── logo.png          # 应用logo
├── components/           # 组件文件
├── api/                  # API接口
├── utils/                # 工具函数
├── store/                # 状态管理
├── config/               # 配置文件
├── mixins/               # 混入文件
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
├── uni.scss              # 全局样式
└── main.js               # 入口文件
```

## 设计特色

### 视觉设计
- **现代化UI**：采用卡片式设计，圆角边框
- **渐变色彩**：使用粉色渐变作为主色调
- **响应式布局**：适配不同屏幕尺寸
- **动画效果**：添加点击反馈和过渡动画

### 交互体验
- **轮播图**：自动播放，支持手动切换
- **设备卡片**：点击查看详情，续费按钮
- **底部导航**：图标和文字组合，状态指示
- **状态标签**：不同颜色表示设备状态

## 开发说明

### 运行项目
1. 使用 HBuilderX 打开项目
2. 选择运行到浏览器或模拟器
3. 或使用命令行：`npm run dev:h5`

### 构建发布
1. 在 HBuilderX 中选择发行
2. 或使用命令行：`npm run build:h5`

## 页面功能详解

### 首页 (pages/index/index.vue)
- **状态栏**：模拟手机状态栏显示
- **头部区域**：公司信息和操作按钮
- **公告栏**：滚动显示公告内容
- **轮播图**：产品展示和推广
- **设备列表**：用户租赁设备管理
- **底部导航**：应用功能导航

### 登录页 (pages/login/login.vue)
- **登录表单**：用户名密码登录
- **注册功能**：新用户注册
- **服务条款**：弹窗显示服务条款
- **隐私政策**：弹窗显示隐私政策

## 样式规范

### 颜色方案
- **主色调**：#ff9a9e (粉色)
- **辅助色**：#fecfef (浅粉色)
- **文字色**：#333 (深灰)
- **背景色**：#f5f5f5 (浅灰)

### 字体大小
- **标题**：32rpx
- **正文**：28rpx
- **小字**：24rpx
- **标签**：20rpx

### 间距规范
- **页面边距**：30rpx
- **卡片内边距**：30rpx
- **元素间距**：20rpx
- **小间距**：10rpx

## 更新日志

### v1.0.0 (2025-01-27)
- 初始版本发布
- 完成首页和登录页设计
- 实现基础交互功能
- 添加轮播图和设备列表
- 优化响应式布局

## 许可证

MIT License