顺丰风格现代化联系人管理组件：红黑配色与极致交互体验

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 <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=Inter:wght@400;500;600;700&fam…\" rel=\"stylesheet\">\n <style>\n :root {\n --sf-red: #E1251B;\n --sf-black: #212121;\n --sf-gray: #F5F5F5;\n }\n body {\n font-family: 'Inter', 'Noto Sans SC', sans-serif;\n background-color: #f8fafc;\n }\n .contact-card {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border-left: 4px solid transparent;\n }\n .contact-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);\n border-left-color: var(--sf-red);\n }\n .search-focus:focus-within {\n border-color: var(--sf-red);\n box-shadow: 0 0 0 3px rgba(225, 37, 27, 0.1);\n }\n .custom-scrollbar::-webkit-scrollbar {\n width: 4px;\n }\n .custom-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background: #e2e8f0;\n border-radius: 10px;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animate-list-item {\n animation: fadeIn 0.4s ease forwards;\n opacity: 0;\n }\n </style>\n</head>\n<body class=\"p-4 md:p-8\">\n\n <div class=\"max-w-2xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden\">\n \n <div class=\"p-6 border-b border-slate-50\">\n <div class=\"flex items-center justify-between mb-6\">\n <div>\n <h1 class=\"text-xl font-bold text-slate-900\">地址簿</h1>\n <p class=\"text-sm text-slate-500 mt-1\">共 6 位联系人</p>\n </div>\n <button class=\"bg-[#E1251B] hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2\">\n <i class=\"fas fa-plus\"></i> 新增地址\n </button>\n </div>\n\n \n <div class=\"flex gap-3\">\n <div class=\"relative flex-1 search-focus transition-all border border-slate-200 rounded-xl bg-slate-50\">\n <i class=\"fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400\"></i>\n <input type=\"text\" placeholder=\"搜索姓名/电话/公司...\" class=\"w-full bg-transparent py-2.5 pl-11 pr-4 outline-none text-sm text-slate-700\">\n </div>\n <button class=\"px-4 py-2 border border-slate-200 rounded-xl text-slate-600 hover:bg-slate-50 transition-colors\">\n <i class=\"fas fa-sliders\"></i>\n </button>\n </div>\n </div>\n\n \n <div class=\"custom-scrollbar overflow-y-auto max-h-[600px] p-4 space-y-3\">\n \n \n <div class=\"contact-card animate-list-item bg-white border border-slate-100 rounded-xl p-4 cursor-pointer\" style=\"animation-delay: 0.1s\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-3 mb-2\">\n <span class=\"text-base font-bold text-slate-900\">李四</span>\n <span class=\"text-sm font-medium text-slate-600\">170068052321</span>\n <span class=\"px-2 py-0.5 bg-slate-100 text-slate-500 text-[10px] rounded uppercase font-bold\">公司</span>\n </div>\n <div class=\"text-xs text-slate-400 mb-2 flex items-center gap-1\">\n <i class=\"far fa-building\"></i> 清雅轩保健品专营店\n </div>\n <div class=\"text-sm text-slate-600 leading-relaxed flex gap-2\">\n <i class=\"fas fa-map-marker-alt text-red-500 mt-1\"></i>\n <span>湖北省十堰市武当山风景区西宁路156号</span>\n </div>\n </div>\n <div class=\"flex gap-2 ml-4\">\n <button class=\"p-2 text-slate-400 hover:text-blue-600 transition-colors\"><i class=\"far fa-edit\"></i></button>\n </div>\n </div>\n </div>\n\n \n <div class=\"contact-card animate-list-item bg-white border border-slate-100 rounded-xl p-4 cursor-pointer\" style=\"animation-delay: 0.15s\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-3 mb-2\">\n <span class=\"text-base font-bold text-slate-900\">李四</span>\n <span class=\"text-sm font-medium text-slate-600\">170068052321</span>\n </div>\n <div class=\"text-xs text-slate-400 mb-2 flex items-center gap-1\">\n <i class=\"far fa-building\"></i> 清雅轩保健品专营店\n </div>\n <div class=\"text-sm text-slate-600 leading-relaxed flex gap-2\">\n <i class=\"fas fa-map-marker-alt text-red-500 mt-1\"></i>\n <span>湖北省十堰市武当山风景区西宁路157号</span>\n </div>\n </div>\n <div class=\"flex gap-2 ml-4\">\n <button class=\"p-2 text-slate-400 hover:text-blue-600 transition-colors\"><i class=\"far fa-edit\"></i></button>\n </div>\n </div>\n </div>\n\n \n <div class=\"contact-card animate-list-item bg-white border border-slate-100 rounded-xl p-4 cursor-pointer\" style=\"animation-delay: 0.2s\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-3 mb-2\">\n <span class=\"text-base font-bold text-slate-900\">张三丰</span>\n <span class=\"text-sm font-medium text-slate-600\">17006805888</span>\n <span class=\"px-2 py-0.5 bg-red-50 text-red-600 text-[10px] rounded uppercase font-bold\">常用</span>\n </div>\n <div class=\"text-xs text-slate-400 mb-2 flex items-center gap-1\">\n <i class=\"far fa-building\"></i> 清雅轩保健品专营店\n </div>\n <div class=\"text-sm text-slate-600 leading-relaxed flex gap-2\">\n <i class=\"fas fa-map-marker-alt text-red-500 mt-1\"></i>\n <span>湖北省十堰市武当山风景区公园路155号</span>\n </div>\n </div>\n <div class=\"flex gap-2 ml-4\">\n <button class=\"p-2 text-slate-400 hover:text-blue-600 transition-colors\"><i class=\"far fa-edit\"></i></button>\n </div>\n </div>\n </div>\n\n \n <div class=\"contact-card animate-list-item bg-white border border-slate-100 rounded-xl p-4 cursor-pointer\" style=\"animation-delay: 0.25s\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-3 mb-2\">\n <span class=\"text-base font-bold text-slate-900\">李四</span>\n <span class=\"text-sm font-medium text-slate-600\">170068052322</span>\n </div>\n <div class=\"text-sm text-slate-600 leading-relaxed flex gap-2\">\n <i class=\"fas fa-map-marker-alt text-red-500 mt-1\"></i>\n <span>湖北省十堰市武当山风景区公园路158号</span>\n </div>\n </div>\n <div class=\"flex gap-2 ml-4\">\n <button class=\"p-2 text-slate-400 hover:text-blue-600 transition-colors\"><i class=\"far fa-edit\"></i></button>\n </div>\n </div>\n </div>\n\n </div>\n\n \n <div class=\"p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between\">\n <span class=\"text-xs text-slate-400\">第 1 / 1 页</span>\n <div class=\"flex gap-2\">\n <button disabled class=\"w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-slate-300 cursor-not-allowed\">\n <i class=\"fas fa-chevron-left text-xs\"></i>\n </button>\n <button class=\"w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-slate-600 hover:bg-white transition-colors\">\n <i class=\"fas fa-chevron-right text-xs\"></i>\n </button>\n </div>\n </div>\n </div>\n\n</body>\n</html>"
},
"next": [
"增加地址智能识别",
"实现侧滑删除功能",
"添加寄收件历史标签",
"优化移动端点击反馈",
"集成高德地图选址"
],
"breakpoint": "xs"
}
```

total_tokens

8546

summary

为您设计了一个顺丰风格的现代化联系人管理组件。采用顺丰标志性的红黑配色体系，结合卡片式布局与响应式设计。强化了地址信息的层级展示，并加入了搜索过滤、标签分类及平滑的入场动画，确保在移动端和桌面端均有极致的交互体验。

uiParsing

关闭