| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bob AI 助手</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| background-color: #F7F8FC; |
| color: #1A1A1A; |
| } |
| |
| .robot-avatar { |
| width: 48px; |
| height: 48px; |
| background: linear-gradient(135deg, #EDF5FF 0%, #E0ECFF 100%); |
| border-radius: 50%; |
| position: relative; |
| } |
| |
| .robot-eye { |
| position: absolute; |
| width: 16px; |
| height: 8px; |
| background-color: #2476FF; |
| border-radius: 8px 8px 0 0; |
| top: 16px; |
| left: 16px; |
| } |
| |
| .robot-smile { |
| position: absolute; |
| width: 24px; |
| height: 8px; |
| border-bottom: 2px solid #2476FF; |
| border-radius: 0 0 8px 8px; |
| bottom: 12px; |
| left: 12px; |
| } |
| |
| .highlight-blue { |
| color: #2476FF; |
| } |
| |
| .tool-card { |
| width: 72px; |
| height: 72px; |
| border-radius: 16px; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
| |
| .question-item::before { |
| content: ""; |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| background-color: #2476FF; |
| border-radius: 50%; |
| left: 16px; |
| top: 18px; |
| } |
| |
| .input-bar { |
| height: 44px; |
| border-radius: 22px; |
| box-shadow: 0 2px 12px rgba(240, 241, 245, 0.8); |
| } |
| |
| .send-button { |
| width: 32px; |
| height: 32px; |
| background-color: #2476FF; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <div class="h-14 flex items-center justify-between px-4 bg-[#F7F8FC]"> |
| <i class="fas fa-arrow-left text-gray-800 text-xl"></i> |
| <i class="fas fa-cog text-gray-800 text-xl"></i> |
| </div> |
| |
| |
| <div class="flex items-start px-6 py-4 h-18"> |
| <div class="robot-avatar mr-4"> |
| <div class="robot-eye"></div> |
| <div class="robot-smile"></div> |
| </div> |
| <div> |
| <h1 class="text-lg font-bold">HI!Bob是您的AI全能助理</h1> |
| <p class="text-sm text-gray-600"> |
| 可以帮你<span class="highlight-blue">想策略</span>、<span class="highlight-blue">作分析</span>、<span class="highlight-blue">答问题</span>！快来试试吧！ |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between px-6 my-4"> |
| <div class="tool-card flex flex-col items-center justify-center bg-white"> |
| <i class="fas fa-pencil-alt text-green-500 text-xl mb-1"></i> |
| <span class="text-xs">AI创作</span> |
| </div> |
| <div class="tool-card flex flex-col items-center justify-center bg-white"> |
| <i class="fas fa-robot text-blue-500 text-xl mb-1"></i> |
| <span class="text-xs">AI定制方案</span> |
| </div> |
| <div class="tool-card flex flex-col items-center justify-center bg-white"> |
| <i class="fas fa-user-tie text-blue-400 text-xl mb-1"></i> |
| <span class="text-xs">AI预核保</span> |
| </div> |
| <div class="tool-card flex flex-col items-center justify-center bg-white"> |
| <i class="fas fa-shield-alt text-orange-400 text-xl mb-1"></i> |
| <span class="text-xs">AI保障检视</span> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 px-6 mt-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <h2 class="text-base font-bold">热点问题</h2> |
| <span class="text-xs text-blue-500">更多></span> |
| </div> |
| |
| <div class="bg-white rounded-lg"> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">如何选择适合自己的保险产品？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">重疾险和医疗险有什么区别？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">投保后多久可以享受保障？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">如何查询保单的现金价值？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">保险理赔需要准备哪些材料？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center"> |
| <span class="text-sm truncate">保费可以分期支付吗？</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="text-center py-2"> |
| <span class="text-xs text-gray-400">换一批</span> |
| </div> |
| </div> |
| |
| |
| <div class="px-6 py-4 bg-[#F7F8FC]"> |
| <div class="input-bar flex items-center bg-white px-4"> |
| <i class="fas fa-microphone text-gray-400 mr-2"></i> |
| <input type="text" placeholder="有问题，找Bob" class="flex-1 text-sm text-gray-400 focus:outline-none"> |
| <button class="send-button rounded-full flex items-center justify-center"> |
| <i class="fas fa-paper-plane text-white text-sm"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const refreshBtn = document.querySelector('.text-center span'); |
| refreshBtn.addEventListener('click', function() { |
| alert('正在加载新一批热点问题...'); |
| |
| }); |
| |
| |
| const sendBtn = document.querySelector('.send-button'); |
| sendBtn.addEventListener('click', function() { |
| const input = document.querySelector('input'); |
| if (input.value.trim() !== '') { |
| alert('发送问题: ' + input.value); |
| input.value = ''; |
| } |
| }); |
| |
| |
| const questions = document.querySelectorAll('.question-item'); |
| questions.forEach(question => { |
| question.addEventListener('click', function() { |
| const text = this.querySelector('span').textContent; |
| alert('正在查询: ' + text); |
| }); |
| }); |
| }); |
| </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=toughhou/bob" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
