128 lines
3.3 KiB
Markdown
128 lines
3.3 KiB
Markdown
# 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.所有。 |