WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
幺娘子灶台租赁
105 Commits 1 Branch 0 Tags 1.2 MiB
d25fae6eea
Go to file
WindowBird d25fae6eea 添加删除银行卡静态布局
2025-08-20 15:32:16 +08:00
.idea 配置更新 2025-08-13 11:23:14 +08:00
api 添加删除银行卡静态布局 2025-08-20 15:32:16 +08:00
common/style 添加租赁申请背景图，修改导航栏样式， 2025-08-16 14:39:34 +08:00
components 轮播图圆角修正 2025-08-20 13:57:52 +08:00
config 设置页面上传头像实现 2025-08-20 11:45:42 +08:00
enum 申请提现0.8 2025-08-18 15:50:23 +08:00
examples 设置页面上传头像实现-多余测试页面和功能删减 2025-08-20 11:57:07 +08:00
mixins 首页静态设计完毕 2025-08-13 11:05:40 +08:00
pages 添加删除银行卡静态布局 2025-08-20 15:32:16 +08:00
static page页面精简 2025-08-13 13:28:12 +08:00
store v2-v3登录配置的修改 2025-08-19 16:02:50 +08:00
utils 设置页面上传头像实现-多余测试页面和功能删减 2025-08-20 11:57:07 +08:00
.eslintrc.js 配置更新 2025-08-13 11:23:14 +08:00
.gitignore requestAgent0.2 2025-08-16 16:03:42 +08:00
.prettierrc 配置更新 2025-08-13 11:23:14 +08:00
App.vue page页面精简 2025-08-13 13:28:12 +08:00
index.html 项目初始化 2025-08-12 15:38:25 +08:00
main.js v2-v3登录配置的修改 2025-08-19 16:02:50 +08:00
manifest.json 配置获取地址 2025-08-19 09:09:58 +08:00
package-lock.json requestAgent二维码实现0.5 2025-08-16 17:13:49 +08:00
package.json requestAgent二维码实现0.5 2025-08-16 17:13:49 +08:00
pages.json 代理商申请实现信息提交提示，和协议自动弹窗 2025-08-20 09:35:13 +08:00
README_AVATAR_UPLOAD.md 设置页面上传头像实现-多余测试页面和功能删减 2025-08-20 11:57:07 +08:00
README.md 配置更新 2025-08-13 11:23:14 +08:00
uni.promisify.adaptor.js 首页静态设计完毕 2025-08-13 11:05:40 +08:00
uni.scss 导航栏修正 2025-08-14 09:24:37 +08:00

README.md

设备租赁应用

这是一个基于 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: 代码格式化工具

安装依赖

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：采用卡片式设计，圆角边框
  • 渐变色彩：使用粉色渐变作为主色调
  • 响应式布局：适配不同屏幕尺寸
  • 动画效果：添加点击反馈和过渡动画

交互体验

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

开发说明

运行项目

  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