first commit

README.md

@@ -0,0 +1,128 @@
+ # Purolator Vue应用
+
+这是一个基于Vue 3的Purolator物流配送状态页面，完全还原了原始HTML页面的设计和功能。
+
+## 项目特点
+
+- ✅ 完全保留原始页面的所有素材和样式
+- ✅ 使用Vue 3 + Vite构建的现代化前端架构
+- ✅ 响应式设计，支持移动端和桌面端
+- ✅ 组件化开发，代码结构清晰
+- ✅ 保持与原页面一模一样的视觉效果
+
+## 项目结构
+
+```
+purolator-vue-app/
+├── public/                 # 静态资源目录
+│   ├── img/               # 图片资源
+│   │   ├── FSR-Certified_0-v0kJZovC.png
+│   │   ├── icon-appstore-DUjdPpUP.png
+│   │   ├── icon-googleplay-DvFlcbMB.png
+│   │   ├── purolator_logo-Dg7zFu9c.png
+│   │   ├── shipping-and-receiving-banner-Cjj25G3-.jpg
+│   │   └── x3_0.png
+│   └── assets/            # CSS等资源
+│       └── index-Wc09J9bj.css
+├── src/                   # 源代码目录
+│   ├── components/        # Vue组件
+│   │   ├── HeaderComponent.vue    # 头部导航组件
+│   │   └── FooterComponent.vue    # 页脚组件
+│   ├── assets/           # 项目资源
+│   ├── App.vue           # 主应用组件
+│   ├── main.js           # 应用入口
+│   └── style.css         # 全局样式
+├── index.html            # HTML模板
+├── package.json          # 项目配置
+├── vite.config.js        # Vite配置
+└── README.md             # 项目说明
+```
+
+## 页面功能
+
+### 主要组件
+
+1. **HeaderComponent** - 头部导航栏
+   - Purolator品牌Logo
+   - 导航菜单（Locations、Track a Shipment）
+   - 响应式移动端菜单
+
+2. **主内容区域** - 配送状态信息
+   - 包裹号码显示：US9987677846
+   - 配送失败通知
+   - 详细的状态说明
+   - 继续按钮
+
+3. **FooterComponent** - 页脚信息
+   - 客户支持链接
+   - 社交媒体图标
+   - 关于Purolator和快速链接
+   - 移动应用下载链接
+   - 认证标识
+   - 版权信息
+
+### 样式特点
+
+- 保持与原页面完全一致的颜色方案
+- 使用Purolator品牌色：#001996（深蓝色）
+- 完整的响应式设计
+- 所有原始图标和图片都已保留
+
+## 安装和运行
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发模式运行
+
+```bash
+npm run dev
+```
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+### 预览生产版本
+
+```bash
+npm run preview
+```
+
+## 技术栈
+
+- **Vue 3** - 前端框架
+- **Vite** - 构建工具
+- **原生CSS** - 保持原始样式
+- **响应式设计** - 支持多设备
+
+## 浏览器支持
+
+- Chrome (推荐)
+- Firefox
+- Safari
+- Edge
+
+## 开发说明
+
+这个项目完全基于原始的Purolator HTML页面创建，所有的样式、图片、文字内容都保持原样。主要的改进是：
+
+1. **现代化架构**：使用Vue 3替代原始HTML，提供更好的维护性
+2. **组件化**：将页面拆分为逻辑清晰的组件
+3. **开发体验**：使用Vite提供快速的开发和构建体验
+
+## 注意事项
+
+- 所有的外部链接都保持原样
+- 图片资源都已本地化处理
+- CSS样式完全保留原始设计
+- 响应式设计确保在各种设备上都能正常显示
+
+## 许可证
+
+本项目仅用于学习和演示目的。所有Purolator相关的商标、Logo和内容版权归Purolator Inc.所有。