156 lines
4.0 KiB
Markdown
156 lines
4.0 KiB
Markdown
# 设备租赁应用
|
||
|
||
这是一个基于 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 |