root/Neo-ZQYY
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Neo
2026-03-15 10:15:02 +08:00
parent 2dd217522c
commit 72bb11b34f
916 changed files with 65306 additions and 16102803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
_DEL/Delete/ai-icon-demo.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 标识配色演示</title>
<link href="../css/ai-icons.css" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans SC', -apple-system, sans-serif; background: #f5f5f5; padding: 20px; }
h1 { font-size: 18px; color: #242424; margin-bottom: 20px; text-align: center; }
h2 { font-size: 15px; color: #5e5e5e; margin: 24px 0 12px; padding-left: 8px; border-left: 3px solid #667eea; }
.demo-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.demo-row .label { font-size: 13px; color: #8b8b8b; min-width: 36px; }
.demo-row .sample-text { font-size: 14px; color: #5e5e5e; display: flex; align-items: center; }
.note { font-size: 12px; color: #a6a6a6; text-align: center; margin-top: 8px; }
</style>
</head>
<body>
<h1>AI 标识配色方案演示</h1>
<!-- ===== 嵌入 Icon ===== -->
<h2>嵌入 Icon（行首小图标 · 机器人）</h2>
<div class="demo-row">
<span class="label">红</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-red"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<div class="demo-row">
<span class="label">橙</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-orange"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<div class="demo-row">
<span class="label">黄</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-yellow"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<div class="demo-row">
<span class="label">蓝</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-blue"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<div class="demo-row">
<span class="label">靛</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-indigo"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<div class="demo-row">
<span class="label">紫</span>
<span class="sample-text"><span class="ai-inline-icon ai-color-purple"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
</div>
<p class="note">每个页面所有嵌入 Icon 统一使用一种配色，刷新后随机分配</p>
<!-- ===== Title AI 标识 ===== -->
<h2>Title AI 标识（标题行右侧 · 机器人 · 浅色背景+边框）</h2>
<div class="demo-row">
<span class="label">红</span>
<span class="ai-title-badge ai-color-red"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<div class="demo-row">
<span class="label">橙</span>
<span class="ai-title-badge ai-color-orange"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<div class="demo-row">
<span class="label">黄</span>
<span class="ai-title-badge ai-color-yellow"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<div class="demo-row">
<span class="label">蓝</span>
<span class="ai-title-badge ai-color-blue"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<div class="demo-row">
<span class="label">靛</span>
<span class="ai-title-badge ai-color-indigo"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<div class="demo-row">
<span class="label">紫</span>
<span class="ai-title-badge ai-color-purple"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
</div>
<p class="note">每个页面所有 Title AI 标识统一使用一种配色，刷新后随机分配</p>
</body>
</html>

217
_DEL/Delete/b-class-test.html Normal file
View File

@@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B 类能力实测对照页</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0052d9',
'primary-light': '#ecf2fe',
success: '#00a870',
warning: '#ed7b2f',
error: '#e34d59',
'gray-1': '#f3f3f3',
'gray-7': '#8b8b8b',
'gray-9': '#5e5e5e',
'gray-13': '#242424',
}
}
}
}
</script>
<style>
@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.anim-pulse { animation: pulse-soft 2s ease-in-out infinite; }
.anim-float { animation: float-y 3s ease-in-out infinite; }
</style>
</head>
<body class="bg-gray-1 text-gray-13 pb-8">
<!-- ===== 顶栏 sticky ===== -->
<div class="bg-white px-4 py-3 text-lg font-semibold sticky top-0 z-50 shadow-sm">
B 类能力实测（H5 端）
</div>
<!-- ===== 1. Grid 布局 ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">1. Grid 布局</p>
<div class="bg-white rounded-lg p-3">
<p class="text-xs text-gray-7 mb-1">grid-cols-2</p>
<div class="grid grid-cols-2 gap-2 mb-3">
<div class="bg-primary-light rounded-lg p-3 text-center text-sm">A</div>
<div class="bg-primary-light rounded-lg p-3 text-center text-sm">B</div>
</div>
<p class="text-xs text-gray-7 mb-1">grid-cols-3</p>
<div class="grid grid-cols-3 gap-2 mb-3">
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">1</div>
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">2</div>
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">3</div>
</div>
<p class="text-xs text-gray-7 mb-1">grid-cols-4</p>
<div class="grid grid-cols-4 gap-2">
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">甲</div>
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">乙</div>
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">丙</div>
<div class="bg-primary-light rounded-lg p-2 text-center text-xs">丁</div>
</div>
</div>
</section>
<!-- ===== 2. Sticky 定位 ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">2. Sticky（需滚动观察）</p>
<div class="bg-white rounded-lg overflow-hidden">
<div class="sticky top-[52px] z-40 bg-primary text-white text-center py-2 text-sm">
sticky 元素 top-52px
</div>
<div class="p-3">
<div class="h-[160px] bg-gray-1 rounded-lg flex items-center justify-center text-xs text-gray-7">
占位区域
</div>
</div>
</div>
</section>
<!-- ===== 3. line-clamp ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">3. line-clamp 多行截断</p>
<div class="bg-white rounded-lg p-3">
<p class="text-xs text-gray-7 mb-1">line-clamp-2</p>
<p class="text-sm line-clamp-2 mb-3">这是一段很长的文本用于测试多行截断效果。微信小程序中 -webkit-line-clamp 属于条件能力，需要配合 display:-webkit-box 和 -webkit-box-orient:vertical 使用。在不同基础库版本上表现可能不一致，需要真机验证确认。</p>
<p class="text-xs text-gray-7 mb-1">line-clamp-3</p>
<p class="text-sm line-clamp-3">这是另一段很长的文本用于测试三行截断。第一行内容开始。第二行内容继续延伸到这里。第三行内容到这里应该被截断了。如果你能看到第四行的内容说明 line-clamp-3 没有生效。这段文字需要足够长才能触发三行截断的效果所以多写一些。</p>
</div>
</section>
<!-- ===== 4. vh 单位 ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">4. vh 单位</p>
<div class="bg-white rounded-lg p-3">
<div class="min-h-[25vh] bg-primary/5 rounded-lg flex items-center justify-center">
<span class="text-sm text-primary">min-height: 25vh</span>
</div>
</div>
</section>
<!-- ===== 5. backdrop-filter ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">5. backdrop-filter: blur</p>
<div class="bg-white rounded-lg p-3">
<div class="relative h-[100px] rounded-lg overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-primary to-success"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white/20 backdrop-blur-md rounded-lg px-6 py-3">
<span class="text-white text-sm font-medium">毛玻璃效果</span>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 6. space-y ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">6. space-y 子元素间距</p>
<div class="bg-white rounded-lg p-3">
<p class="text-xs text-gray-7 mb-1">space-y-2 (8px)</p>
<div class="space-y-2 mb-3">
<div class="bg-primary-light rounded p-2 text-sm">项目 A</div>
<div class="bg-primary-light rounded p-2 text-sm">项目 B</div>
<div class="bg-primary-light rounded p-2 text-sm">项目 C</div>
</div>
<p class="text-xs text-gray-7 mb-1">space-y-4 (16px)</p>
<div class="space-y-4">
<div class="bg-primary-light rounded p-2 text-sm">项目 X</div>
<div class="bg-primary-light rounded p-2 text-sm">项目 Y</div>
</div>
</div>
</section>
<!-- ===== 7. gap-x / gap-y ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">7. gap-x / gap-y 方向性间距</p>
<div class="bg-white rounded-lg p-3">
<p class="text-xs text-gray-7 mb-1">flex-wrap + gap-x-3 gap-y-2</p>
<div class="flex flex-wrap gap-x-3 gap-y-2">
<span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">标签一</span>
<span class="bg-success/10 text-success text-xs px-3 py-1 rounded-full">标签二</span>
<span class="bg-warning/10 text-warning text-xs px-3 py-1 rounded-full">标签三</span>
<span class="bg-error/10 text-error text-xs px-3 py-1 rounded-full">标签四</span>
<span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">标签五</span>
<span class="bg-success/10 text-success text-xs px-3 py-1 rounded-full">标签六</span>
</div>
</div>
</section>
<!-- ===== 8. CSS transition ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">8. CSS transition</p>
<div class="bg-white rounded-lg p-3">
<p class="text-xs text-gray-7 mb-2">点击按钮切换颜色（transition-colors 300ms）</p>
<button id="btn-transition" class="bg-primary text-white text-sm px-4 py-2 rounded-lg transition-colors duration-300" onclick="this.classList.toggle('bg-success')">
点我变色
</button>
</div>
</section>
<!-- ===== 9. CSS animation ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">9. CSS @keyframes 动画</p>
<div class="bg-white rounded-lg p-3 flex gap-6 items-center">
<div class="flex flex-col items-center gap-1">
<div class="w-10 h-10 rounded-full bg-primary anim-pulse"></div>
<span class="text-xs text-gray-7">pulse</span>
</div>
<div class="flex flex-col items-center gap-1">
<div class="w-10 h-10 rounded-full bg-success anim-float"></div>
<span class="text-xs text-gray-7">float</span>
</div>
</div>
</section>
<!-- ===== 10. overflow-x 横向滚动 ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">10. overflow-x-auto 横向滚动</p>
<div class="bg-white rounded-lg p-3">
<div class="overflow-x-auto">
<div class="flex gap-3" style="width: max-content;">
<div class="w-[120px] h-[80px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary shrink-0">卡片 1</div>
<div class="w-[120px] h-[80px] bg-success/10 rounded-lg flex items-center justify-center text-xs text-success shrink-0">卡片 2</div>
<div class="w-[120px] h-[80px] bg-warning/10 rounded-lg flex items-center justify-center text-xs text-warning shrink-0">卡片 3</div>
<div class="w-[120px] h-[80px] bg-error/10 rounded-lg flex items-center justify-center text-xs text-error shrink-0">卡片 4</div>
<div class="w-[120px] h-[80px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary shrink-0">卡片 5</div>
</div>
</div>
</div>
</section>
<!-- ===== 11. divide-y 分割线 ===== -->
<section class="mx-4 mt-4">
<p class="text-sm font-semibold mb-2">11. divide-y 分割线</p>
<div class="bg-white rounded-lg overflow-hidden">
<div class="divide-y divide-gray-200">
<div class="px-3 py-3 text-sm">列表项 1</div>
<div class="px-3 py-3 text-sm">列表项 2</div>
<div class="px-3 py-3 text-sm">列表项 3</div>
<div class="px-3 py-3 text-sm">列表项 4</div>
</div>
</div>
</section>
<!-- ===== 12. env(safe-area-inset-bottom) ===== -->
<section class="mx-4 mt-4 mb-4">
<p class="text-sm font-semibold mb-2">12. safe-area-inset-bottom</p>
<div class="bg-white rounded-lg p-3">
<div class="bg-primary text-white text-center py-3 rounded-lg text-sm" style="padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));">
底部按钮（含安全区补偿）
</div>
</div>
</section>
</body>
</html>

295
_DEL/Delete/benchmark.html Normal file
View File

@@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=430, initial-scale=1.0, user-scalable=no">
<title>基准测试页 v3</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{scrollbar-width:none;-ms-overflow-style:none;}
::-webkit-scrollbar{display:none;}
body{width:430px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;background:#f5f5f5;color:#333;overflow-x:hidden;position:relative;}
/* 右侧贯穿彩条 — absolute，高度=视口高度752px */
.ruler-strip{position:absolute;top:0;right:0;width:10px;z-index:9999;display:flex;flex-direction:column;}
.ruler-bar{width:10px;height:752px;border-left:1px solid #000;}
.ruler-bar.blue{background:#0052d9;}
.ruler-bar.green{background:#00a870;}
/* 通用 section */
.sec{padding:6px 0 6px 0;border-bottom:1px solid #ddd;margin-right:10px;}
.sec-t{font-size:11px;font-weight:600;color:#0052d9;padding:0 0 4px 4px;}
/* 行 */
.row{display:flex;align-items:center;padding:2px 4px;}
.lbl{font-size:10px;color:#999;width:80px;flex-shrink:0;}
.val{flex:1;}
/* 横条 */
.bar{display:flex;align-items:center;color:#fff;font-size:9px;padding-left:4px;}
</style>
</head>
<body>
<!-- 右侧贯穿彩条 -->
<div class="ruler-strip" id="rulerStrip"></div>
<script>
(function(){
var c=document.getElementById('rulerStrip');
for(var i=0;i<4;i++){
var d=document.createElement('div');
d.className='ruler-bar '+(i%2===0?'blue':'green');
c.appendChild(d);
}
})();
</script>
<!-- 1. font-size -->
<div class="sec">
<div class="sec-t">1. font-size</div>
<div class="row"><span class="lbl">10px</span><span class="val" style="font-size:10px;">中文ABC123</span></div>
<div class="row"><span class="lbl">11px</span><span class="val" style="font-size:11px;">中文ABC123</span></div>
<div class="row"><span class="lbl">12px</span><span class="val" style="font-size:12px;">中文ABC123</span></div>
<div class="row"><span class="lbl">13px</span><span class="val" style="font-size:13px;">中文ABC123</span></div>
<div class="row"><span class="lbl">14px</span><span class="val" style="font-size:14px;">中文ABC123</span></div>
<div class="row"><span class="lbl">16px</span><span class="val" style="font-size:16px;">中文ABC123</span></div>
<div class="row"><span class="lbl">18px</span><span class="val" style="font-size:18px;">中文ABC123</span></div>
<div class="row"><span class="lbl">20px</span><span class="val" style="font-size:20px;">中文ABC123</span></div>
<div class="row"><span class="lbl">24px</span><span class="val" style="font-size:24px;">中文ABC123</span></div>
<div class="row"><span class="lbl">28px</span><span class="val" style="font-size:28px;">中文ABC123</span></div>
<div class="row"><span class="lbl">32px</span><span class="val" style="font-size:32px;">中文ABC123</span></div>
</div>
<!-- 2. font-weight -->
<div class="sec">
<div class="sec-t">2. font-weight</div>
<div class="row"><span class="lbl">300</span><span class="val" style="font-size:16px;font-weight:300;">中文ABC123</span></div>
<div class="row"><span class="lbl">400</span><span class="val" style="font-size:16px;font-weight:400;">中文ABC123</span></div>
<div class="row"><span class="lbl">500</span><span class="val" style="font-size:16px;font-weight:500;">中文ABC123</span></div>
<div class="row"><span class="lbl">600</span><span class="val" style="font-size:16px;font-weight:600;">中文ABC123</span></div>
<div class="row"><span class="lbl">700</span><span class="val" style="font-size:16px;font-weight:700;">中文ABC123</span></div>
</div>
<!-- 3. line-height -->
<div class="sec">
<div class="sec-t">3. line-height (14px)</div>
<div style="font-size:14px;line-height:1.0;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.0 中文测试文字验证行高</div>
<div style="font-size:14px;line-height:1.25;background:#e8f8f0;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.25 中文测试文字验证行高</div>
<div style="font-size:14px;line-height:1.5;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;margin-right:10px;">LH1.5 中文测试文字验证行高</div>
<div style="font-size:14px;line-height:2.0;background:#e8f8f0;padding:2px 4px;margin-right:10px;">LH2.0 中文测试文字验证行高</div>
</div>
<!-- 4. letter-spacing -->
<div class="sec">
<div class="sec-t">4. letter-spacing</div>
<div class="row"><span class="lbl">0px</span><span class="val" style="font-size:14px;letter-spacing:0px;">中文ABC123</span></div>
<div class="row"><span class="lbl">0.5px</span><span class="val" style="font-size:14px;letter-spacing:0.5px;">中文ABC123</span></div>
<div class="row"><span class="lbl">1px</span><span class="val" style="font-size:14px;letter-spacing:1px;">中文ABC123</span></div>
<div class="row"><span class="lbl">2px</span><span class="val" style="font-size:14px;letter-spacing:2px;">中文ABC123</span></div>
</div>
<!-- 5. width bars (25%/50%/75%/100%) -->
<div class="sec">
<div class="sec-t">5. width bars</div>
<div class="bar" style="width:108px;height:30px;background:#0052d9;margin-bottom:2px;">108 (25%)</div>
<div class="bar" style="width:215px;height:30px;background:#00a870;margin-bottom:2px;">215 (50%)</div>
<div class="bar" style="width:323px;height:30px;background:#ed7b2f;margin-bottom:2px;">323 (75%)</div>
<div class="bar" style="width:420px;height:30px;background:#e34d59;">420 (≈100%-10)</div>
</div>
<!-- 6. height bars -->
<div class="sec">
<div class="sec-t">6. height bars</div>
<div style="display:flex;gap:4px;align-items:flex-end;padding:0 4px;">
<div style="width:40px;height:20px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">20</div>
<div style="width:40px;height:40px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">40</div>
<div style="width:40px;height:60px;background:#ed7b2f;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">60</div>
<div style="width:40px;height:80px;background:#e34d59;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">80</div>
<div style="width:40px;height:100px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">100</div>
</div>
</div>
<!-- 7. padding -->
<div class="sec">
<div class="sec-t">7. padding</div>
<div style="display:flex;gap:4px;flex-wrap:wrap;padding:0 4px;">
<div style="padding:4px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p4</div>
<div style="padding:8px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p8</div>
<div style="padding:12px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p12</div>
<div style="padding:16px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p16</div>
<div style="padding:20px;background:#ecf2fe;border:1px solid #0052d9;font-size:9px;color:#0052d9;">p20</div>
</div>
</div>
<!-- 8. margin -->
<div class="sec">
<div class="sec-t">8. margin</div>
<div style="background:#f0f0f0;padding:2px 0;">
<div style="margin-left:0;width:80px;height:20px;background:#0052d9;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:0</div>
<div style="margin-left:10px;width:80px;height:20px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:10</div>
<div style="margin-left:20px;width:80px;height:20px;background:#ed7b2f;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;margin-bottom:2px;">ml:20</div>
<div style="margin-left:40px;width:80px;height:20px;background:#e34d59;color:#fff;font-size:8px;display:flex;align-items:center;padding-left:2px;">ml:40</div>
</div>
</div>
<!-- 9. border-radius -->
<div class="sec">
<div class="sec-t">9. border-radius</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;padding:0 4px;">
<div style="width:40px;height:40px;border-radius:2px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r2</div>
<div style="width:40px;height:40px;border-radius:4px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r4</div>
<div style="width:40px;height:40px;border-radius:8px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r8</div>
<div style="width:40px;height:40px;border-radius:12px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r12</div>
<div style="width:40px;height:40px;border-radius:20px;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">r20</div>
<div style="width:40px;height:40px;border-radius:50%;background:#00a870;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;">50%</div>
</div>
</div>
<!-- 10. border-width -->
<div class="sec">
<div class="sec-t">10. border-width</div>
<div style="display:flex;gap:6px;padding:0 4px;">
<div style="width:50px;height:30px;border:1px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">1px</div>
<div style="width:50px;height:30px;border:2px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">2px</div>
<div style="width:50px;height:30px;border:3px solid #333;font-size:8px;display:flex;align-items:center;justify-content:center;">3px</div>
</div>
</div>
<!-- 11. gap -->
<div class="sec">
<div class="sec-t">11. gap</div>
<div style="padding:0 4px;">
<div style="font-size:9px;color:#999;">gap:4px</div>
<div style="display:flex;gap:4px;margin-bottom:4px;">
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
</div>
<div style="font-size:9px;color:#999;">gap:8px</div>
<div style="display:flex;gap:8px;margin-bottom:4px;">
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
</div>
<div style="font-size:9px;color:#999;">gap:12px</div>
<div style="display:flex;gap:12px;margin-bottom:4px;">
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
<div style="width:24px;height:24px;background:#ed7b2f;"></div>
</div>
</div>
</div>
<!-- 12. box-shadow -->
<div class="sec">
<div class="sec-t">12. box-shadow</div>
<div style="display:flex;gap:10px;padding:4px;">
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">sm</div>
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">md</div>
<div style="width:60px;height:40px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.12);font-size:8px;display:flex;align-items:center;justify-content:center;color:#999;">lg</div>
</div>
</div>
<!-- 13. 色板 -->
<div class="sec">
<div class="sec-t">13. colors</div>
<div style="display:flex;gap:2px;flex-wrap:wrap;padding:0 4px;">
<div style="width:36px;height:20px;background:#0052d9;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">pri</div>
<div style="width:36px;height:20px;background:#00a870;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">suc</div>
<div style="width:36px;height:20px;background:#ed7b2f;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">wrn</div>
<div style="width:36px;height:20px;background:#e34d59;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">err</div>
<div style="width:36px;height:20px;background:#f5f5f5;border-radius:2px;color:#333;font-size:7px;display:flex;align-items:center;justify-content:center;">g1</div>
<div style="width:36px;height:20px;background:#eee;border-radius:2px;color:#333;font-size:7px;display:flex;align-items:center;justify-content:center;">g2</div>
<div style="width:36px;height:20px;background:#999;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">g6</div>
<div style="width:36px;height:20px;background:#333;border-radius:2px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center;">g13</div>
</div>
</div>
<!-- 14. text-align -->
<div class="sec">
<div class="sec-t">14. text-align</div>
<div style="font-size:12px;text-align:left;background:#ecf2fe;padding:2px 4px;margin-bottom:1px;margin-right:10px;">left 左对齐</div>
<div style="font-size:12px;text-align:center;background:#e8f8f0;padding:2px 4px;margin-bottom:1px;margin-right:10px;">center 居中</div>
<div style="font-size:12px;text-align:right;background:#ecf2fe;padding:2px 4px;margin-right:10px;">right 右对齐</div>
</div>
<!-- 15. text-overflow -->
<div class="sec">
<div class="sec-t">15. text-overflow</div>
<div style="width:200px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#ecf2fe;padding:2px 4px;margin-bottom:2px;">这是一段很长的文字用于测试文本溢出省略号效果展示</div>
<div style="width:200px;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:#e8f8f0;padding:2px 4px;line-height:1.4;">这是一段很长的文字用于测试多行文本溢出省略号效果展示两行截断</div>
</div>
<!-- 16. flex布局 -->
<div class="sec">
<div class="sec-t">16. flex layout</div>
<div style="padding:0 4px;">
<div style="font-size:9px;color:#999;">space-between</div>
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
<div style="width:50px;height:24px;background:#0052d9;"></div>
<div style="width:50px;height:24px;background:#00a870;"></div>
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
</div>
<div style="font-size:9px;color:#999;">space-around</div>
<div style="display:flex;justify-content:space-around;margin-bottom:4px;">
<div style="width:50px;height:24px;background:#0052d9;"></div>
<div style="width:50px;height:24px;background:#00a870;"></div>
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
</div>
<div style="font-size:9px;color:#999;">center</div>
<div style="display:flex;justify-content:center;gap:8px;">
<div style="width:50px;height:24px;background:#0052d9;"></div>
<div style="width:50px;height:24px;background:#00a870;"></div>
<div style="width:50px;height:24px;background:#ed7b2f;"></div>
</div>
</div>
</div>
<!-- 17. 综合卡片 -->
<div class="sec">
<div class="sec-t">17. card</div>
<div style="background:#fff;border-radius:8px;padding:10px;margin:0 4px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
<span style="font-size:14px;font-weight:600;">经营一览</span>
<span style="font-size:9px;background:#ecf2fe;color:#0052d9;padding:2px 6px;border-radius:4px;">本月</span>
</div>
<div style="font-size:22px;font-weight:600;margin-bottom:4px;">¥128,560.00</div>
<div style="font-size:11px;color:#999;">较上月 +12.5%</div>
</div>
</div>
<!-- 18. 列表项 -->
<div class="sec">
<div class="sec-t">18. list items</div>
<div style="padding:0 4px;">
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;">
<span style="font-size:13px;">台费收入</span><span style="font-size:13px;font-weight:600;">¥85,200</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;">
<span style="font-size:13px;">商品收入</span><span style="font-size:13px;font-weight:600;">¥32,100</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;">
<span style="font-size:13px;">助教收入</span><span style="font-size:13px;font-weight:600;">¥11,260</span>
</div>
</div>
</div>
<!-- 19. 全宽色条 -->
<div class="sec" style="border-bottom:none;">
<div class="sec-t">19. full-width bars</div>
<div style="display:flex;height:16px;margin-right:10px;">
<div style="flex:1;background:#0052d9;"></div>
<div style="flex:1;background:#00a870;"></div>
<div style="flex:1;background:#ed7b2f;"></div>
<div style="flex:1;background:#e34d59;"></div>
</div>
</div>
</body>
</html>

155
_DEL/Delete/home-settings.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0052d9',
'primary-light': '#ecf2fe',
success: '#00a870',
warning: '#ed7b2f',
error: '#e34d59',
'gray-1': '#f3f3f3',
'gray-2': '#eeeeee',
'gray-3': '#e7e7e7',
'gray-4': '#dcdcdc',
'gray-5': '#c5c5c5',
'gray-6': '#a6a6a6',
'gray-7': '#8b8b8b',
'gray-8': '#777777',
'gray-9': '#5e5e5e',
'gray-10': '#4b4b4b',
'gray-11': '#393939',
'gray-12': '#2c2c2c',
'gray-13': '#242424',
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}
.safe-area-top {
padding-top: env(safe-area-inset-top, 44px);
}
.radio-checked {
border-color: #0052d9;
background: #0052d9;
}
.radio-checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.option-card {
transition: all 0.2s ease;
}
.option-card.selected {
border-color: #0052d9;
background: linear-gradient(135deg, #ecf2fe 0%, #f8faff 100%);
}
</style>
</head>
<body class="bg-gray-1 min-h-screen">
<!-- 顶部导航 -->
<div class="safe-area-top bg-white sticky top-0 z-10">
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
<button onclick="history.back()" class="absolute left-4 p-1">
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15 18 9 12 15 6"/>
</svg>
</button>
<h1 class="flex-1 text-center text-base font-medium text-gray-13">首页设置</h1>
</div>
</div>
<!-- 说明文字 -->
<div class="px-4 py-4">
<p class="text-sm text-gray-7">选择登录后默认显示的首页</p>
</div>
<!-- 选项列表 -->
<div class="px-4 space-y-3">
<div id="option-task" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer selected" onclick="selectHome('task')">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center shadow-sm">
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg>
</div>
<div class="flex-1">
<p class="text-base font-medium text-gray-13 mb-1">任务</p>
<p class="text-xs text-gray-6">查看待办任务和业绩概览</p>
</div>
<div id="radio-task" class="w-5 h-5 border-2 border-gray-4 rounded-full relative radio-checked"></div>
</div>
</div>
<div id="option-board" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer" onclick="selectHome('board')">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center shadow-sm">
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div class="flex-1">
<p class="text-base font-medium text-gray-13 mb-1">看板</p>
<p class="text-xs text-gray-6">查看财务、客户、助教数据</p>
</div>
<div id="radio-board" class="w-5 h-5 border-2 border-gray-4 rounded-full relative"></div>
</div>
</div>
</div>
<!-- 提示信息 -->
<div class="px-4 py-6">
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl">
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
<p class="text-xs text-gray-7 leading-relaxed">设置会自动保存，切换选项后即刻生效。退出登录后重新登录仍会保持您的设置。</p>
</div>
</div>
<script>
function selectHome(type) {
const taskRadio = document.getElementById('radio-task');
const boardRadio = document.getElementById('radio-board');
const taskOption = document.getElementById('option-task');
const boardOption = document.getElementById('option-board');
if (type === 'task') {
taskRadio.classList.add('radio-checked');
boardRadio.classList.remove('radio-checked');
taskOption.classList.add('selected');
boardOption.classList.remove('selected');
} else {
boardRadio.classList.add('radio-checked');
taskRadio.classList.remove('radio-checked');
boardOption.classList.add('selected');
taskOption.classList.remove('selected');
}
console.log('已设置默认首页为:', type);
}
</script>
</body>
</html>