Design a mobile-friendly WeChat mini program page named "客服工作台", used by customer support staff to manage smart home service for high-end homeowners. Page layout: 1. Header: - Greeting: "欢迎，张敏客服 | 当前服务家庭：王先生（华远九都汇）" 2. Section: 家庭知识管理 - Info card showing: - Total knowledge entries: 21 - New this month: 4 - Button: [设置知识] - Purpose: Add/edit product instructions (e.g., for washing machine, AC) 3. Section: AI未能回答的问题 - List of unresolved questions from AI assistant - Each item shows: - Question text: "洗衣机一直报警怎么办？" - Time, user name - Action buttons: [查看详情] [我来回答] [转工单] 4. Section: 工单处理 - Card list of business tasks from Q&A or service modules - Each card includes: - 工单编号 - 来源（问答/预约） - 状态：待处理 / 已完成 - 操作按钮：查看 / 完成 / 转派 5. Optional bottom nav bar: - Icons for "知识" "问题" "工单" "我的" Style: - Clean white background, warm accents (gold or blue) - Card layout with rounded corners, soft shadows - Clear modular separation - Mobile-first responsive design - Initial Deployment
e8c9193 verified | <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>客服工作台 - 智能家居服务</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'primary': '#1a56db', | |
| 'accent': '#d4af37', | |
| 'light-bg': '#f9fafb', | |
| 'card-bg': '#ffffff' | |
| }, | |
| boxShadow: { | |
| 'card': '0 4px 12px rgba(0, 0, 0, 0.05)', | |
| 'button': '0 2px 4px rgba(0, 0, 0, 0.1)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| background-color: #f5f7fa; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .card { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); | |
| } | |
| .badge { | |
| font-size: 0.7rem; | |
| padding: 2px 8px; | |
| } | |
| .nav-item.active { | |
| color: #1a56db; | |
| position: relative; | |
| } | |
| .nav-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 6px; | |
| height: 6px; | |
| background-color: #1a56db; | |
| border-radius: 50%; | |
| } | |
| .question-item, .ticket-item { | |
| border-bottom: 1px solid #edf2f7; | |
| } | |
| .question-item:last-child, .ticket-item:last-child { | |
| border-bottom: none; | |
| } | |
| .status-badge { | |
| font-size: 0.75rem; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #1a56db, #3b82f6); | |
| } | |
| .btn-accent { | |
| background: linear-gradient(135deg, #d4af37, #e5c046); | |
| } | |
| .btn-outline { | |
| border: 1px solid #cbd5e0; | |
| } | |
| .btn-outline:hover { | |
| background-color: #f8fafc; | |
| } | |
| .scroll-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #cbd5e0 #f1f5f9; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 3px; | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background-color: #cbd5e0; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Main Container --> | |
| <div class="max-w-md mx-auto min-h-screen bg-light-bg flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white py-4 px-5 shadow-sm"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-xl font-bold text-primary">客服工作台</h1> | |
| <p class="text-sm text-gray-600 mt-1">欢迎，张敏客服 | 当前服务家庭：王先生（华远九都汇）</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent to-yellow-300 flex items-center justify-center text-white"> | |
| <span class="font-semibold">张</span> | |
| </div> | |
| <span class="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-1 overflow-y-auto px-4 py-4 pb-20 scroll-container"> | |
| <!-- Family Knowledge Management Section --> | |
| <section class="mb-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-semibold text-gray-800">家庭知识管理</h2> | |
| <span class="text-xs text-gray-500">最近更新: 今天 10:30</span> | |
| </div> | |
| <div class="card bg-card-bg rounded-xl shadow-card p-5"> | |
| <div class="grid grid-cols-2 gap-4 mb-5"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-primary">21</div> | |
| <div class="text-sm text-gray-600">知识条目</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-accent">4</div> | |
| <div class="text-sm text-gray-600">本月新增</div> | |
| </div> | |
| </div> | |
| <button class="btn-primary w-full py-2.5 rounded-lg text-white font-medium flex items-center justify-center"> | |
| <i class="fas fa-cog mr-2"></i>设置知识 | |
| </button> | |
| <div class="mt-4 text-xs text-gray-500"> | |
| <p>添加/编辑产品使用说明（如洗衣机、空调等）</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Unresolved AI Questions Section --> | |
| <section class="mb-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-semibold text-gray-800">AI未能回答的问题</h2> | |
| <span class="text-xs text-gray-500">3条未处理</span> | |
| </div> | |
| <div class="card bg-card-bg rounded-xl shadow-card overflow-hidden"> | |
| <div class="max-h-80 overflow-y-auto"> | |
| <!-- Question Item 1 --> | |
| <div class="question-item p-4"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">洗衣机一直报警怎么办？</h3> | |
| <div class="flex items-center mt-2 text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>今天 09:15</span> | |
| <i class="far fa-user ml-3 mr-1"></i> | |
| <span>王先生</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-yellow-100 text-yellow-800 badge rounded-full">新问题</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <button class="btn-outline text-xs px-3 py-1.5 rounded">查看详情</button> | |
| <button class="btn-primary text-xs px-3 py-1.5 rounded text-white ml-2">我来回答</button> | |
| <button class="btn-accent text-xs px-3 py-1.5 rounded text-white ml-2">转工单</button> | |
| </div> | |
| </div> | |
| <!-- Question Item 2 --> | |
| <div class="question-item p-4"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">空调突然不制冷是什么原因？</h3> | |
| <div class="flex items-center mt-2 text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>昨天 16:45</span> | |
| <i class="far fa-user ml-3 mr-1"></i> | |
| <span>王先生</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <button class="btn-outline text-xs px-3 py-1.5 rounded">查看详情</button> | |
| <button class="btn-primary text-xs px-3 py-1.5 rounded text-white ml-2">我来回答</button> | |
| <button class="btn-accent text-xs px-3 py-1.5 rounded text-white ml-2">转工单</button> | |
| </div> | |
| </div> | |
| <!-- Question Item 3 --> | |
| <div class="question-item p-4"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">智能门锁无法识别指纹如何处理？</h3> | |
| <div class="flex items-center mt-2 text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>昨天 10:20</span> | |
| <i class="far fa-user ml-3 mr-1"></i> | |
| <span>王太太</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <button class="btn-outline text-xs px-3 py-1.5 rounded">查看详情</button> | |
| <button class="btn-primary text-xs px-3 py-1.5 rounded text-white ml-2">我来回答</button> | |
| <button class="btn-accent text-xs px-3 py-1.5 rounded text-white ml-2">转工单</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-gray-50 text-center"> | |
| <button class="text-primary text-sm font-medium"> | |
| <i class="fas fa-chevron-down mr-1"></i>查看全部问题 | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Order Processing Section --> | |
| <section class="mb-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-semibold text-gray-800">工单处理</h2> | |
| <span class="text-xs text-gray-500">2个进行中</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Ticket Item 1 --> | |
| <div class="card bg-card-bg rounded-xl shadow-card p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <span class="font-medium text-gray-800">工单 #21045</span> | |
| <span class="status-badge bg-blue-100 text-blue-800 ml-2">待处理</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mt-1">来源: 问答模块</div> | |
| </div> | |
| <div class="text-xs text-gray-500">今天 11:20</div> | |
| </div> | |
| <div class="mt-3 text-sm"> | |
| 问题描述: 客厅智能灯光系统无法调节亮度 | |
| </div> | |
| <div class="flex justify-between mt-4"> | |
| <button class="btn-outline text-xs px-3 py-1.5 rounded">查看</button> | |
| <div> | |
| <button class="btn-primary text-xs px-3 py-1.5 rounded text-white">完成</button> | |
| <button class="btn-accent text-xs px-3 py-1.5 rounded text-white ml-2">转派</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ticket Item 2 --> | |
| <div class="card bg-card-bg rounded-xl shadow-card p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <span class="font-medium text-gray-800">工单 #21038</span> | |
| <span class="status-badge bg-green-100 text-green-800 ml-2">处理中</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mt-1">来源: 服务预约</div> | |
| </div> | |
| <div class="text-xs text-gray-500">昨天 14:30</div> | |
| </div> | |
| <div class="mt-3 text-sm"> | |
| 问题描述: 厨房智能冰箱温度显示异常 | |
| </div> | |
| <div class="flex justify-between mt-4"> | |
| <button class="btn-outline text-xs px-3 py-1.5 rounded">查看</button> | |
| <div> | |
| <button class="btn-primary text-xs px-3 py-1.5 rounded text-white">完成</button> | |
| <button class="btn-accent text-xs px-3 py-1.5 rounded text-white ml-2">转派</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Completed Ticket --> | |
| <div class="card bg-gray-50 rounded-xl p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <span class="font-medium text-gray-600">工单 #21029</span> | |
| <span class="status-badge bg-gray-200 text-gray-700 ml-2">已完成</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">来源: 问答模块</div> | |
| </div> | |
| <div class="text-xs text-gray-500">前天 16:15</div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-600"> | |
| 问题描述: 卧室智能窗帘遥控失灵 | |
| </div> | |
| <div class="mt-3 text-right"> | |
| <button class="text-xs text-gray-500 underline">查看详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation Bar --> | |
| <nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full max-w-md py-3 px-6 flex justify-around"> | |
| <a href="#" class="nav-item active flex flex-col items-center text-primary"> | |
| <i class="fas fa-book-open text-lg"></i> | |
| <span class="text-xs mt-1">知识</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-question-circle text-lg"></i> | |
| <span class="text-xs mt-1">问题</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-clipboard-list text-lg"></i> | |
| <span class="text-xs mt-1">工单</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">我的</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <script> | |
| // Simple interaction enhancements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add hover effects to buttons | |
| const buttons = document.querySelectorAll('button'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| this.classList.add('opacity-90'); | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| this.classList.remove('opacity-90'); | |
| }); | |
| }); | |
| // Card click effect | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.classList.add('ring-2', 'ring-blue-200'); | |
| setTimeout(() => { | |
| this.classList.remove('ring-2', 'ring-blue-200'); | |
| }, 300); | |
| }); | |
| }); | |
| // Navigation active state | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| navItems.forEach(i => i.classList.remove('active', 'text-primary')); | |
| this.classList.add('active', 'text-primary'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/home7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |