# WBRAPPJKWSProtype

**Repository Path**: work_project_item/wbrappjkwsprotype

## Basic Information

- **Project Name**: WBRAPPJKWSProtype
- **Description**: 未必然监控卫士APP原型设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-25
- **Last Updated**: 2025-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端Vue项目

这是一个基于Vue 3的移动端项目，使用Vite作为构建工具，Vant作为UI组件库。

## 技术栈

- Vue 3
- Vite
- Vant UI
- Vue Router
- Pinia (状态管理)
- PostCSS (移动端适配)

## 项目结构

```
src/
  ├── assets/        # 静态资源
  ├── components/    # 公共组件
  ├── views/         # 页面组件
  ├── router/        # 路由配置
  ├── store/         # 状态管理
  ├── utils/         # 工具函数
  ├── App.vue        # 根组件
  └── main.js        # 入口文件
```

## 开发环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

## 安装和运行

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

3. 构建生产版本：
```bash
npm run build
```

## 移动端适配

项目使用 postcss-px-to-viewport 进行移动端适配，设计稿基准宽度为 375px。

## 主要功能

- 移动端适配
- 路由管理
- 状态管理
- UI组件库集成
- 开发环境配置

## 登录页（/login）

### 功能说明
- 提供系统账号和密码登录入口，适配移动端，界面简洁美观。
- 支持密码可见切换、表单校验、登录按钮加载状态。
- 顶部包含"服务配置"入口（占位，后续扩展）。

### 使用方法
- 访问 `/login` 路由进入登录页。
- 输入系统账号和密码，点击"登录"按钮。
- 登录成功后自动跳转到首页。

### 参数说明
- `account`：系统账号，字符串，必填。
- `password`：登录密码，字符串，必填。

### 返回值说明
- 登录成功：页面提示"登录成功"，跳转到首页。
- 登录失败：页面提示错误信息。

### 依赖
- 使用 Vant UI 的 `van-form`、`van-field`、`van-button`、`showToast` 组件和方法。
- 样式适配移动端，采用渐变背景和圆角卡片设计。