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（深蓝色）
• 完整的响应式设计
• 所有原始图标和图片都已保留

安装和运行

安装依赖

npm install

开发模式运行

npm run dev

构建生产版本

npm run build

预览生产版本

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