幺娘子灶台租赁
| .idea | ||
| api | ||
| common/style | ||
| components | ||
| composables | ||
| config | ||
| enum | ||
| mixins | ||
| page_user | ||
| pages | ||
| static | ||
| store | ||
| uni_modules | ||
| utils | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierrc | ||
| App.vue | ||
| index.html | ||
| main.js | ||
| manifest.json | ||
| package-lock.json | ||
| package.json | ||
| pages.json | ||
| README_ADD_CARD_UPLOAD.md | ||
| README_AVATAR_UPLOAD.md | ||
| README_IMAGE_UPLOAD.md | ||
| README.md | ||
| uni.promisify.adaptor.js | ||
| uni.scss | ||
| vue.config.js | ||
设备租赁应用
这是一个基于 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