# 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.所有。