4.0 KiB
4.0 KiB
设备租赁应用
这是一个基于 uni-app 开发的设备租赁管理应用，提供设备租赁、管理和续费等功能。
功能特性
首页功能
- 状态栏显示：显示时间和系统状态图标
- 公司信息：显示当前公司名称和位置信息
- 公告栏：滚动显示系统公告信息
- 轮播图：展示推荐设备和产品信息
- 设备列表：显示用户当前租赁的设备
- 底部导航：快速切换不同功能模块
主要页面
- 首页 (
pages/index/index.vue) - 应用主页面 - 登录页 (
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: 代码格式化工具
安装依赖
npm install
开发命令
# 格式化代码
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：采用卡片式设计，圆角边框
- 渐变色彩：使用粉色渐变作为主色调
- 响应式布局：适配不同屏幕尺寸
- 动画效果：添加点击反馈和过渡动画
交互体验
- 轮播图：自动播放，支持手动切换
- 设备卡片：点击查看详情，续费按钮
- 底部导航：图标和文字组合，状态指示
- 状态标签：不同颜色表示设备状态
开发说明
运行项目
- 使用 HBuilderX 打开项目
- 选择运行到浏览器或模拟器
- 或使用命令行：
npm run dev:h5
构建发布
- 在 HBuilderX 中选择发行
- 或使用命令行：
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