36 lines
1.1 KiB
Markdown
36 lines
1.1 KiB
Markdown
# 优化物流信息布局方案
|
||
|
||
**需求分析**：将当前物流信息区域中承运信息卡片和物流时间线从上下垂直排列改为左右并排展示，提高空间利用率和视觉层次感。
|
||
|
||
**实现思路**：
|
||
|
||
1. 修改物流信息主容器的布局方式
|
||
2. 将承运信息卡片和物流时间线作为并排的两个子元素
|
||
3. 调整宽度比例和间距
|
||
4. 保持响应式设计，在小屏幕下自动切换为垂直布局
|
||
|
||
**具体修改点**：
|
||
|
||
1. **修改模板结构**：将承运信息卡片和物流时间线包裹在一个flex/grid容器中
|
||
2. **调整CSS样式**：
|
||
|
||
* 修改`.logistics-timeline`容器布局
|
||
|
||
* 调整`.logistics-info`和`.logistics-timeline-container`的宽度和排列方式
|
||
|
||
* 添加响应式断点
|
||
3. **优化间距和对齐**：确保左右两个区域视觉平衡
|
||
|
||
**预期效果**：
|
||
|
||
* 桌面端：承运信息卡片在左侧，物流时间线在右侧，左右并排展示
|
||
|
||
* 移动端：保持原有的上下垂直排列，适配小屏幕
|
||
|
||
* 提高信息展示效率，减少页面滚动
|
||
|
||
**修改文件**：
|
||
|
||
* `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\OrderDetail.vue`
|
||
|