顺丰订单详情页响应式设计：PC移动双端适配与交互优化

By admin, 13 April, 2026

角色

assistant

content

```json
{
"summary": "设计了一款适配 PC 与移动端的顺丰速运订单详情页。采用响应式双栏布局：PC 端左侧展示核心订单与货物信息，右侧展示完整的物流轨迹流；移动端自动切换为垂直堆叠布局。视觉上延续顺丰红黑品牌色，加入毛玻璃状态栏、动态进度条及交互式时间轴，确保在不同设备上均能提供专业、高效的查件体验。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>顺丰速运 - 订单详情</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;…\" rel=\"stylesheet\">\n <style>\n :root {\n --sf-red: #E83428;\n --sf-black: #231815;\n --sf-gray: #f4f4f4;\n }\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #f0f2f5;\n color: var(--sf-black);\n }\n .font-mono { font-family: 'JetBrains Mono', monospace; }\n .sf-gradient {\n background: linear-gradient(135deg, #231815 0%, #3d3d3d 100%);\n }\n .timeline-container::-webkit-scrollbar {\n width: 4px;\n }\n .timeline-container::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 10px;\n }\n .timeline-line {\n position: absolute;\n left: 11px;\n top: 24px;\n bottom: 0;\n width: 2px;\n background: #e5e7eb;\n }\n .timeline-item:last-child .timeline-line {\n display: none;\n }\n .card-hover {\n transition: all 0.3s ease;\n }\n @media (min-width: 1024px) {\n .card-hover:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px -10px rgba(0,0,0,0.1);\n }\n }\n .status-tag {\n clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);\n }\n </style>\n</head>\n<body class=\"min-h-screen\">\n\n \n <nav class=\"bg-white border-b border-gray-200 sticky top-0 z-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center space-x-4\">\n <div class=\"bg-black text-white p-2 rounded\">\n <span class=\"font-bold italic tracking-tighter\">SF</span>\n </div>\n <span class=\"font-bold text-lg hidden sm:block\">顺丰速运</span>\n </div>\n <div class=\"flex items-center space-x-6 text-sm font-medium\">\n <a href=\"#\" class=\"text-gray-500 hover:text-red-600\">我的订单</a>\n <a href=\"#\" class=\"text-gray-500 hover:text-red-600\">运费查询</a>\n <div class=\"h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center\">\n <i class=\"fas fa-user text-gray-500\"></i>\n </div>\n </div>\n </div>\n </div>\n </nav>\n\n <main class=\"max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:py-10\">\n \n <div class=\"sf-gradient rounded-3xl p-6 lg:p-10 text-white mb-8 relative overflow-hidden\">\n <div class=\"relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6\">\n <div>\n <div class=\"flex items-center space-x-3 mb-2\">\n <span class=\"bg-red-600 text-white text-xs px-3 py-1 rounded-full font-bold\">已签收</span>\n <span class=\"text-white/60 text-sm font-mono\">SF7444702148192</span>\n </div>\n <h2 class=\"text-3xl lg:text-4xl font-bold\">您的快件已送达</h2>\n <p class=\"text-white/60 mt-2 text-sm lg:text-base\">签收人：柏峰珑悦府家门口 (2025-10-03 07:55)</p>\n </div>\n <div class=\"flex space-x-3\">\n <button class=\"bg-white/10 hover:bg-white/20 backdrop-blur-md px-6 py-3 rounded-xl transition-all flex items-center\">\n <i class=\"fas fa-print mr-2\"></i> 打印存根\n </button>\n <button class=\"bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl transition-all flex items-center font-bold\">\n <i class=\"fas fa-redo mr-2\"></i> 再来一单\n </button>\n </div>\n </div>\n \n <i class=\"fas fa-truck-fast absolute -right-10 -bottom-10 text-[200px] text-white/5 rotate-[-15deg]\"></i>\n </div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-2 space-y-6\">\n \n \n <div class=\"bg-white rounded-2xl p-6 shadow-sm card-hover\">\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-8 relative\">\n <div class=\"flex-1 text-center md:text-left\">\n <p class=\"text-gray-400 text-xs uppercase tracking-widest mb-2\">寄件人</p>\n <h3 class=\"text-xl font-bold\">张三丰</h3>\n <p class=\"text-gray-500 text-sm mt-1\">170****5888</p>\n <p class=\"text-gray-400 text-xs mt-2 leading-relaxed\">湖北省十堰市丹江口市公园路155号<br>清雅轩保健品专营店</p>\n </div>\n \n <div class=\"flex flex-col items-center\">\n <div class=\"w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-2\">\n <i class=\"fas fa-arrow-right text-red-600\"></i>\n </div>\n <span class=\"text-[10px] font-bold text-gray-300 uppercase tracking-tighter\">Express</span>\n </div>\n\n <div class=\"flex-1 text-center md:text-right\">\n <p class=\"text-gray-400 text-xs uppercase tracking-widest mb-2\">收件人</p>\n <h3 class=\"text-xl font-bold\">郭襄阳</h3>\n <p class=\"text-gray-500 text-sm mt-1\">189****8829</p>\n <p class=\"text-gray-400 text-xs mt-2 leading-relaxed\">湖北省襄阳市襄城区环城东路122号<br>襄城区</p>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-white rounded-2xl overflow-hidden shadow-sm card-hover\">\n <div class=\"px-6 py-4 border-b border-gray-50 flex justify-between items-center\">\n <h4 class=\"font-bold flex items-center\">\n <i class=\"fas fa-box mr-2 text-red-600\"></i> 货物信息\n </h4>\n <span class=\"text-xs text-gray-400 font-mono\">ID: AMG2603200013175765</span>\n </div>\n <div class=\"p-6 grid grid-cols-2 md:grid-cols-4 gap-6\">\n <div>\n <p class=\"text-gray-400 text-xs mb-1\">物品名称</p>\n <p class=\"font-medium\">电子产品</p>\n </div>\n <div>\n <p class=\"text-gray-400 text-xs mb-1\">计费重量</p>\n <p class=\"font-medium\">1.5 kg</p>\n </div>\n <div>\n <p class=\"text-gray-400 text-xs mb-1\">物品数量</p>\n <p class=\"font-medium\">1 个</p>\n </div>\n <div>\n <p class=\"text-gray-400 text-xs mb-1\">声明价值</p>\n <p class=\"font-medium text-red-600\">¥ 500.00</p>\n </div>\n <div class=\"col-span-2 md:col-span-4 pt-4 border-t border-gray-50 flex flex-wrap gap-4\">\n <span class=\"text-xs bg-gray-100 px-3 py-1 rounded text-gray-500\">体积: 0.1m³</span>\n <span class=\"text-xs bg-gray-100 px-3 py-1 rounded text-gray-500\">尺寸: 10x5x2cm</span>\n <span class=\"text-xs bg-gray-100 px-3 py-1 rounded text-gray-500\">服务: 顺丰标快</span>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-white rounded-2xl p-6 shadow-sm card-hover\">\n <h4 class=\"font-bold mb-4 flex items-center\">\n <i class=\"fas fa-shield-halved mr-2 text-red-600\"></i> 服务保障\n </h4>\n <div class=\"flex flex-wrap gap-3\">\n <div class=\"flex items-center space-x-2 border border-green-100 bg-green-50 px-4 py-2 rounded-lg\">\n <i class=\"fas fa-check-circle text-green-500 text-sm\"></i>\n <span class=\"text-sm text-green-700\">已保价</span>\n </div>\n <div class=\"flex items-center space-x-2 border border-blue-100 bg-blue-50 px-4 py-2 rounded-lg\">\n <i class=\"fas fa-leaf text-blue-500 text-sm\"></i>\n <span class=\"text-sm text-blue-700\">低碳运输</span>\n </div>\n <div class=\"flex items-center space-x-2 border border-gray-100 bg-gray-50 px-4 py-2 rounded-lg\">\n <i class=\"fas fa-clock text-gray-400 text-sm\"></i>\n <span class=\"text-sm text-gray-600\">准时达</span>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"lg:col-span-1\">\n <div class=\"bg-white rounded-2xl shadow-sm flex flex-col h-full max-h-[800px]\">\n <div class=\"p-6 border-b border-gray-50 flex justify-between items-center\">\n <h4 class=\"font-bold\">物流轨迹</h4>\n <button class=\"text-xs text-red-600 hover:underline\">订阅动态</button>\n </div>\n <div class=\"flex-1 overflow-y-auto p-6 timeline-container\">\n <div class=\"relative\">\n \n <div class=\"timeline-item relative pl-8 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-3 h-3 rounded-full bg-red-600 ring-4 ring-red-100\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold text-red-600\">已签收</p>\n <p class=\"text-xs text-gray-600 mt-1 leading-relaxed\">经客户同意，快件已放在（柏峰珑悦府家门口），如有疑问请电联快递员【杜保奎，电话：18358192592】。</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-03 07:55:56</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-8 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold\">派送中</p>\n <p class=\"text-xs text-gray-500 mt-1\">快件交给【杜保奎，联系电话：18358192592】，正在派送途中。</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-03 06:58:30</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-8 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold\">运送中</p>\n <p class=\"text-xs text-gray-500 mt-1\">快件到达【杭州萧山丰瑞南苑店】</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-03 06:42:03</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-8 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold\">运送中</p>\n <p class=\"text-xs text-gray-500 mt-1\">快件离开【上海华新转运中心】，已在发往【杭州萧山转运中心】的路上</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-03 00:49:40</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-8 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold\">运送中</p>\n <p class=\"text-xs text-gray-500 mt-1\">快件到达【上海华新转运中心】，该场地已实现光伏供电，低碳绿色物流！</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-02 22:18:47</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-8\">\n <div class=\"absolute left-0 top-0 w-6 h-6 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-sm font-bold\">已揽收</p>\n <p class=\"text-xs text-gray-500 mt-1\">顺丰速运已收取快件</p>\n <p class=\"text-[10px] text-gray-400 mt-2 font-mono\">2025-10-02 19:10:44</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"p-4 bg-gray-50 rounded-b-2xl text-center\">\n <button class=\"text-xs text-gray-400 hover:text-gray-600\">查看更早轨迹 <i class=\"fas fa-chevron-down ml-1\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </main>\n\n \n <div class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-t border-gray-100 p-4 flex space-x-3 z-50\">\n <button class=\"flex-1 py-3 rounded-xl border border-gray-200 text-sm font-bold\">联系客服</button>\n <button class=\"flex-1 py-3 rounded-xl bg-black text-white text-sm font-bold\">呼叫快递员</button>\n </div>\n\n</body>\n</html>"
},
"next": [
"集成高德地图轨迹API",
"增加运费自动计算器",
"设计电子签收单预览",
"添加包裹重量异常预警",
"实现多语言切换功能"
],
"breakpoint": "none"
}
```

total_tokens

15846

summary

设计了一款适配 PC 与移动端的顺丰速运订单详情页。采用响应式双栏布局：PC 端左侧展示核心订单与货物信息，右侧展示完整的物流轨迹流；移动端自动切换为垂直堆叠布局。视觉上延续顺丰红黑品牌色，加入毛玻璃状态栏、动态进度条及交互式时间轴，确保在不同设备上均能提供专业、高效的查件体验。

uiParsing

关闭