顺丰物流订单管理界面设计：红黑灰配色与卡片式布局

By admin, 13 April, 2026

角色

assistant

content

```json
{
"summary": "基于顺丰订单数据，设计了一套现代化、品牌感强的物流订单管理界面。采用顺丰标志性的红黑灰配色，结合卡片式布局清晰展示运单号、物流状态、寄收件信息及最新路由动态。加入了状态色块区分、物流进度微缩视图以及响应式交互设计。",
"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 body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #f4f7f9;\n color: #333;\n }\n .sf-red { color: #E1251B; }\n .sf-bg-red { background-color: #E1251B; }\n .order-card {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border-left: 4px solid transparent;\n }\n .order-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px -8px rgba(0,0,0,0.1);\n border-left-color: #E1251B;\n }\n .status-badge-ordered { background-color: #e0f2fe; color: #0369a1; }\n .status-badge-delivered { background-color: #dcfce7; color: #15803d; }\n .route-dot {\n position: relative;\n }\n .route-dot::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 100%;\n width: 2px;\n height: 20px;\n background: #e5e7eb;\n transform: translateX(-50%);\n }\n .route-dot:last-child::after { display: none; }\n \n /* 自定义滚动条 */\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #ccc;\n border-radius: 10px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #999;\n }\n </style>\n</head>\n<body class=\"p-4 md:p-8\">\n <div class=\"max-w-5xl mx-auto\">\n \n <header class=\"flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4\">\n <div>\n <h1 class=\"text-2xl font-bold flex items-center gap-2\">\n <i class=\"fas fa-box-open sf-red\"></i>\n 我的运单 <span class=\"text-sm font-normal text-gray-500 ml-2\">共 5 个订单</span>\n </h1>\n <p class=\"text-gray-400 text-sm mt-1\">实时监控您的包裹动态与物流详情</p>\n </div>\n <div class=\"flex gap-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\"搜索运单号/收件人\" class=\"pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent w-64\">\n <i class=\"fas fa-search absolute left-4 top-3 text-gray-400 text-xs\"></i>\n </div>\n <button class=\"bg-black text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors\">\n 批量导出\n </button>\n </div>\n </header>\n\n \n <nav class=\"flex gap-6 border-b border-gray-200 mb-6\">\n <a href=\"#\" class=\"pb-3 border-b-2 border-red-600 text-red-600 font-medium text-sm\">全部订单</a>\n <a href=\"#\" class=\"pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm transition-colors\">运输中</a>\n <a href=\"#\" class=\"pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm transition-colors\">已签收</a>\n <a href=\"#\" class=\"pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm transition-colors\">异常单</a>\n </nav>\n\n \n <div class=\"space-y-4\">\n \n <div class=\"order-card bg-white rounded-xl p-6 shadow-sm\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div class=\"flex items-center gap-4\">\n <span class=\"text-xs font-bold text-gray-400 uppercase tracking-wider\">运单号</span>\n <span class=\"text-lg font-mono font-bold text-gray-800\">SF7444702151581</span>\n <button class=\"text-gray-400 hover:text-red-500 transition-colors\"><i class=\"far fa-copy\"></i></button>\n <span class=\"status-badge-delivered px-3 py-1 rounded-full text-xs font-medium\">已签收</span>\n </div>\n <div class=\"text-sm text-gray-400\">\n 下单时间：2025-10-02 19:10\n </div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-center\">\n \n <div class=\"col-span-2 flex items-center justify-between relative\">\n <div class=\"flex flex-col items-center z-10\">\n <div class=\"w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2\">\n <i class=\"fas fa-map-marker-alt text-gray-400\"></i>\n </div>\n <div class=\"text-center\">\n <p class=\"font-bold text-sm\">十堰市</p>\n <p class=\"text-xs text-gray-400\">张三丰</p>\n </div>\n </div>\n\n <div class=\"flex-1 h-px bg-dashed border-t-2 border-dashed border-gray-200 mx-4 relative\">\n <i class=\"fas fa-truck sf-red absolute left-1/2 -top-2 transform -translate-x-1/2 bg-white px-2\"></i>\n </div>\n\n <div class=\"flex flex-col items-center z-10\">\n <div class=\"w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mb-2\">\n <i class=\"fas fa-check-circle text-green-500\"></i>\n </div>\n <div class=\"text-center\">\n <p class=\"font-bold text-sm text-green-600\">襄阳市</p>\n <p class=\"text-xs text-gray-400\">郭襄阳</p>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-gray-50 rounded-lg p-4 border border-gray-100\">\n <div class=\"flex justify-between mb-2\">\n <span class=\"text-xs text-gray-500\">物品名称</span>\n <span class=\"text-xs font-medium\">电子产品</span>\n </div>\n <div class=\"flex justify-between mb-2\">\n <span class=\"text-xs text-gray-500\">重量/数量</span>\n <span class=\"text-xs font-medium\">1.5kg / 1个</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-xs text-gray-500\">保价金额</span>\n <span class=\"text-xs font-bold sf-red\">¥500.00</span>\n </div>\n </div>\n </div>\n\n \n <div class=\"mt-6 pt-4 border-t border-gray-50 flex items-start gap-3\">\n <div class=\"mt-1\"><i class=\"fas fa-info-circle text-blue-400 text-sm\"></i></div>\n <div class=\"flex-1\">\n <p class=\"text-sm text-gray-600 leading-relaxed\">\n <span class=\"font-medium text-gray-800\">最新动态：</span>\n 顺丰速运已收取快件，您的期待，我们定竭诚守护，不负所托。\n </p>\n <p class=\"text-xs text-gray-400 mt-1\">2025-10-02 19:10:44 · 苏州市</p>\n </div>\n <button class=\"text-sm font-medium sf-red hover:underline\">查看详情 <i class=\"fas fa-chevron-right text-xs\"></i></button>\n </div>\n </div>\n\n \n <div class=\"order-card bg-white rounded-xl p-6 shadow-sm\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div class=\"flex items-center gap-4\">\n <span class=\"text-xs font-bold text-gray-400 uppercase tracking-wider\">运单号</span>\n <span class=\"text-lg font-mono font-bold text-gray-800\">SF7444702396485</span>\n <button class=\"text-gray-400 hover:text-red-500 transition-colors\"><i class=\"far fa-copy\"></i></button>\n <span class=\"status-badge-ordered px-3 py-1 rounded-full text-xs font-medium\">已下单</span>\n </div>\n <div class=\"text-sm text-gray-400\">\n 下单时间：2026-03-31 22:08\n </div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-center\">\n <div class=\"col-span-2 flex items-center justify-between relative\">\n <div class=\"flex flex-col items-center z-10\">\n <div class=\"w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2\">\n <i class=\"fas fa-user text-gray-400\"></i>\n </div>\n <div class=\"text-center\">\n <p class=\"font-bold text-sm\">十堰市</p>\n <p class=\"text-xs text-gray-400\">李四</p>\n </div>\n </div>\n\n <div class=\"flex-1 h-px bg-dashed border-t-2 border-dashed border-gray-200 mx-4 relative\">\n <i class=\"fas fa-clock text-gray-300 absolute left-1/2 -top-2 transform -translate-x-1/2 bg-white px-2\"></i>\n </div>\n\n <div class=\"flex flex-col items-center z-10\">\n <div class=\"w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2\">\n <i class=\"fas fa-map-marker-alt text-gray-400\"></i>\n </div>\n <div class=\"text-center\">\n <p class=\"font-bold text-sm\">襄阳市</p>\n <p class=\"text-xs text-gray-400\">王五</p>\n </div>\n </div>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-4 border border-gray-100\">\n <div class=\"flex justify-between mb-2\">\n <span class=\"text-xs text-gray-500\">物品名称</span>\n <span class=\"text-xs font-medium\">电子产品</span>\n </div>\n <div class=\"flex justify-between mb-2\">\n <span class=\"text-xs text-gray-500\">重量/数量</span>\n <span class=\"text-xs font-medium\">1.5kg / 1个</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-xs text-gray-500\">保价金额</span>\n <span class=\"text-xs font-bold sf-red\">¥500.00</span>\n </div>\n </div>\n </div>\n\n <div class=\"mt-6 pt-4 border-t border-gray-50 flex items-center justify-between\">\n <div class=\"flex items-center gap-2 text-sm text-gray-400 italic\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n 等待快递员揽收...\n </div>\n <div class=\"flex gap-3\">\n <button class=\"text-sm px-4 py-1.5 border border-gray-200 rounded-md hover:bg-gray-50 transition-colors\">取消订单</button>\n <button class=\"text-sm px-4 py-1.5 bg-black text-white rounded-md hover:bg-gray-800 transition-colors\">修改地址</button>\n </div>\n </div>\n </div>\n\n \n <div class=\"order-card bg-white rounded-xl p-6 shadow-sm\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-4\">\n <div class=\"flex items-center gap-4\">\n <span class=\"text-lg font-mono font-bold text-gray-800\">SF7444702396458</span>\n <span class=\"status-badge-ordered px-3 py-1 rounded-full text-xs font-medium\">已下单</span>\n </div>\n <div class=\"text-sm text-gray-400\">AMG2603312205158805</div>\n </div>\n <div class=\"flex items-center gap-8\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2 mb-1\">\n <span class=\"w-2 h-2 rounded-full bg-gray-300\"></span>\n <span class=\"text-sm font-medium\">寄：湖北省十堰市丹江口市名城路155号</span>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-red-500\"></span>\n <span class=\"text-sm font-medium\">收：湖北省襄阳市襄城区历次路122号</span>\n </div>\n </div>\n <button class=\"sf-red text-sm font-bold hover:opacity-80\">详情</button>\n </div>\n </div>\n </div>\n\n \n <footer class=\"mt-10 flex items-center justify-between text-sm text-gray-500\">\n <div>显示 1 到 5 条，共 5 条记录</div>\n <div class=\"flex gap-1\">\n <button class=\"w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-white disabled:opacity-50\" disabled><i class=\"fas fa-chevron-left\"></i></button>\n <button class=\"w-8 h-8 flex items-center justify-center rounded bg-black text-white\">1</button>\n <button class=\"w-8 h-8 flex items-center justify-center rounded border border-gray-200 hover:bg-white disabled:opacity-50\" disabled><i class=\"fas fa-chevron-right\"></i></button>\n </div>\n </footer>\n </div>\n</body>\n</html>"
},
"next": [
"增加物流地图轨迹",
"实现运单号一键复制",
"添加订单状态筛选",
"设计移动端适配视图",
"集成电子面单预览"
],
"breakpoint": "none"
}
```

total_tokens

11286

summary

基于顺丰订单数据，设计了一套现代化、品牌感强的物流订单管理界面。采用顺丰标志性的红黑灰配色，结合卡片式布局清晰展示运单号、物流状态、寄收件信息及最新路由动态。加入了状态色块区分、物流进度微缩视图以及响应式交互设计。

uiParsing

关闭