121 lines
3.4 KiB
Markdown
121 lines
3.4 KiB
Markdown
|
# 设备租赁应用
|
|||
|
|
|
|||
|
|
这是一个基于 uni-app 开发的设备租赁管理应用，提供设备租赁、管理和续费等功能。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 首页功能
|
|||
|
|
- **状态栏显示**：显示时间和系统状态图标
|
|||
|
|
- **公司信息**：显示当前公司名称和位置信息
|
|||
|
|
- **公告栏**：滚动显示系统公告信息
|
|||
|
|
- **轮播图**：展示推荐设备和产品信息
|
|||
|
|
- **设备列表**：显示用户当前租赁的设备
|
|||
|
|
- **底部导航**：快速切换不同功能模块
|
|||
|
|
|
|||
|
|
### 主要页面
|
|||
|
|
1. **首页** (`pages/index/index.vue`) - 应用主页面
|
|||
|
|
2. **登录页** (`pages/login/login.vue`) - 用户登录和注册
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **框架**：uni-app
|
|||
|
|
- **样式**：SCSS + CSS3
|
|||
|
|
- **图标**：SVG 矢量图标
|
|||
|
|
- **动画**：CSS3 动画效果
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
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
|