|
|
<!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> |
