first commit

md/运行说明.md

@@ -0,0 +1,111 @@
+ # Purolator Vue 项目使用说明
+
+## 项目概述
+这是一个基于 Vue 3 + Vite 的 Purolator 配送状态管理系统，包含多个页面：
+- 首页：配送状态显示
+- 更新地址页面：修改配送地址表单
+- 在线支付页面：重新配送服务费支付
+
+## 快速开始
+
+### 1. 安装依赖
+```bash
+npm install
+```
+
+### 2. 启动开发服务器
+```bash
+npm run dev
+```
+或者双击 `start.bat` 文件（Windows）
+
+### 3. 访问应用
+打开浏览器访问：`http://localhost:5173`（或显示的端口）
+
+## 页面路由
+
+### 主要页面
+- **首页**: `/` - 显示包裹配送状态
+- **更新地址**: `/update-address` - 配送地址修改表单
+- **在线支付**: `/payment` - 重新配送服务费支付
+
+### 页面导航
+- 从首页点击 "Update Address" 按钮可以跳转到地址更新页面
+- 从首页点击 "Pay for Redelivery" 按钮可以跳转到支付页面
+- 从地址更新页面可以继续到支付页面
+- 各页面都包含完整的头部导航和页脚
+
+## 项目结构
+
+```
+src/
+├── components/           # Vue 组件
+│   ├── HomePage.vue         # 首页组件
+│   ├── UpdateAddressPage.vue # 地址更新页面
+│   ├── PaymentPage.vue      # 在线支付页面
+│   ├── HeaderComponent.vue   # 头部导航组件
+│   └── FooterComponent.vue   # 页脚组件
+├── router/              # 路由配置
+│   └── index.js            # 路由定义
+├── assets/              # 静态资源
+├── App.vue             # 主应用组件
+├── main.js             # 应用入口
+└── style.css           # 全局样式
+```
+
+## 功能特点
+
+### 响应式设计
+- 支持桌面端和移动端
+- 最大宽度 450px，确保移动端最佳体验
+- 自适应布局，在不同屏幕尺寸下都有良好显示
+
+### 多页面支持
+- 使用 Vue Router 实现页面路由
+- 单页面应用体验
+- 保持原有页面设计和功能
+
+### 品牌一致性
+- 保持 Purolator 品牌色彩 (#001996)
+- 使用原版图片和图标
+- 完整的页脚信息和链接
+
+## 开发说明
+
+### 技术栈
+- Vue 3 (Composition API)
+- Vue Router 4
+- Vite (构建工具)
+- CSS3 (响应式设计)
+
+### 添加新页面
+1. 在 `src/components/` 创建新的 Vue 组件
+2. 在 `src/router/index.js` 添加路由配置
+3. 确保组件包含 HeaderComponent 和 FooterComponent
+
+### 样式规范
+- 使用 scoped CSS 避免样式冲突
+- 保持与原版设计一致的颜色和字体
+- 确保移动端友好
+
+## 故障排除
+
+### 常见问题
+1. **端口占用**: 如果 5173 端口被占用，Vite 会自动选择其他端口
+2. **依赖问题**: 删除 `node_modules` 文件夹并重新运行 `npm install`
+3. **路由问题**: 确保所有页面组件都已正确导入和注册
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+生产文件将生成在 `dist/` 目录中。
+
+## 更新日志
+- 添加了 Vue Router 支持
+- 创建了地址更新页面
+- 创建了在线支付页面
+- 实现了多页面导航
+- 支持信用卡支付表单验证
+- 保持了原有的设计和功能