generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
180
Prototype/pages_BAKUP/apply.html
Normal file
180
Prototype/pages_BAKUP/apply.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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;
|
||||
}
|
||||
.bg-gradient-main {
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white/80 backdrop-blur-lg sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-200/50">
|
||||
<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="text-base font-medium text-gray-13">申请访问权限</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 p-4">
|
||||
<!-- 欢迎卡片 -->
|
||||
<div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold mb-1">欢迎加入球房运营助手</h2>
|
||||
<p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明文字 -->
|
||||
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<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>
|
||||
<div>
|
||||
<p class="text-sm text-primary font-medium mb-1">申请说明</p>
|
||||
<p class="text-xs text-gray-7 leading-relaxed">
|
||||
请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<div class="mb-3 flex items-center gap-1">
|
||||
<span class="text-error text-sm">*</span>
|
||||
<span class="text-sm font-medium text-gray-13">申请说明</span>
|
||||
</div>
|
||||
<textarea
|
||||
id="applyReason"
|
||||
class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
|
||||
placeholder="点击填写申请信息： 1. 您的姓名 2. 您的岗位（如：助教、店长等） 3. 所属门店 4. 其他说明（可选）"
|
||||
></textarea>
|
||||
<p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
|
||||
<div class="flex items-center justify-between mt-3">
|
||||
<span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
|
||||
<span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审核流程说明 -->
|
||||
<div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
|
||||
<span class="text-xs text-gray-7">提交申请</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
|
||||
<span class="text-xs text-gray-6">等待审核</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
|
||||
<span class="text-xs text-gray-6">审核通过</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
|
||||
<span class="text-xs text-gray-6">开始使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="p-4 pb-8 bg-white/80 backdrop-blur-lg border-t border-gray-100">
|
||||
<button id="submitBtn" class="w-full py-4 bg-gradient-to-r from-primary to-blue-500 rounded-xl text-white font-medium text-base shadow-lg shadow-primary/30 active:scale-[0.98] transition-transform">
|
||||
提交申请
|
||||
</button>
|
||||
<p class="text-xs text-gray-5 text-center mt-3">
|
||||
审核通常需要 1-3 个工作日
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const textarea = document.getElementById('applyReason');
|
||||
const charCount = document.getElementById('charCount');
|
||||
const errorTip = document.getElementById('errorTip');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
textarea.addEventListener('input', function() {
|
||||
const len = this.value.length;
|
||||
charCount.textContent = len;
|
||||
if (len > 200) {
|
||||
this.value = this.value.slice(0, 200);
|
||||
charCount.textContent = 200;
|
||||
}
|
||||
if (this.value.trim()) {
|
||||
errorTip.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
submitBtn.addEventListener('click', function() {
|
||||
if (!textarea.value.trim()) {
|
||||
errorTip.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
alert('申请已提交，请等待审核');
|
||||
window.location.href = 'reviewing.html';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
429
Prototype/pages_BAKUP/board-coach.html
Normal file
429
Prototype/pages_BAKUP/board-coach.html
Normal file
@@ -0,0 +1,429 @@
|
||||
<!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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.tab-active {
|
||||
color: #0052d9;
|
||||
position: relative;
|
||||
}
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.filter-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
.filter-dropdown {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 0 0 16px 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
z-index: 1001;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
.coach-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.coach-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||
</div>
|
||||
<!-- 一级 Tab -->
|
||||
<div class="flex">
|
||||
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">助教</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||
<button onclick="toggleFilter('sort')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="sortLabel">创收最多</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('skill')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="skillLabel">不限</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="timeLabel">本月</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||
|
||||
<!-- 排序筛选弹窗 -->
|
||||
<div id="sortDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最多')">创收最多</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('创收最低')">创收最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最高')">业绩最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('业绩最低')">业绩最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最高')">工资最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最低')">工资最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('潜在客源储值')">潜在客源储值</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 擅长项目筛选弹窗 -->
|
||||
<div id="skillDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('不限')">不限</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('中🎱')">中🎱</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('斯诺克')">斯诺克</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('麻将')">麻将</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('团建')">团建</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间筛选弹窗 -->
|
||||
<div id="timeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本月')">本月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上个月')">上个月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近3个月')">最近3个月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本季度')">本季度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助教列表 -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- 助教卡片 1 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">小</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">8.6万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 王先生</span>
|
||||
<span>💖 李女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课86小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 2 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">泡</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">7.2万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 陈先生</span>
|
||||
<span>💛 刘女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课72小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 3 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">6.8万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 张先生</span>
|
||||
<span>💛 周女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课68小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 4 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">M</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">麻将</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">5.5万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 赵先生</span>
|
||||
<span>💛 吴女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课55小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 5 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">糖</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">4.2万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 钱先生</span>
|
||||
<span>💛 孙女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课42小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 6 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">露</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">团建</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">3.8万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 郑先生</span>
|
||||
<span>💛 冯女士</span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课38小时</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 底部 TabBar -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4">
|
||||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
<span class="text-xs text-gray-6">任务</span>
|
||||
</a>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="text-xs text-primary font-medium">看板</span>
|
||||
</div>
|
||||
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<span class="text-xs text-gray-6">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<script>
|
||||
let currentFilter = null;
|
||||
|
||||
function toggleFilter(type) {
|
||||
const overlay = document.getElementById('filterOverlay');
|
||||
const sortDropdown = document.getElementById('sortDropdown');
|
||||
const skillDropdown = document.getElementById('skillDropdown');
|
||||
const timeDropdown = document.getElementById('timeDropdown');
|
||||
|
||||
if (currentFilter === type) {
|
||||
closeAllFilters();
|
||||
return;
|
||||
}
|
||||
|
||||
closeAllFilters();
|
||||
currentFilter = type;
|
||||
overlay.classList.add('show');
|
||||
|
||||
if (type === 'sort') {
|
||||
sortDropdown.classList.add('show');
|
||||
} else if (type === 'skill') {
|
||||
skillDropdown.classList.add('show');
|
||||
} else if (type === 'time') {
|
||||
timeDropdown.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllFilters() {
|
||||
currentFilter = null;
|
||||
document.getElementById('filterOverlay').classList.remove('show');
|
||||
document.getElementById('sortDropdown').classList.remove('show');
|
||||
document.getElementById('skillDropdown').classList.remove('show');
|
||||
document.getElementById('timeDropdown').classList.remove('show');
|
||||
}
|
||||
|
||||
function selectSort(value) {
|
||||
document.getElementById('sortLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
|
||||
function selectSkill(value) {
|
||||
document.getElementById('skillLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
|
||||
function selectTime(value) {
|
||||
document.getElementById('timeLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
427
Prototype/pages_BAKUP/board-customer.html
Normal file
427
Prototype/pages_BAKUP/board-customer.html
Normal file
@@ -0,0 +1,427 @@
|
||||
<!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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.tab-active {
|
||||
color: #0052d9;
|
||||
position: relative;
|
||||
}
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.filter-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
.filter-dropdown {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 0 0 16px 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
z-index: 1001;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
.customer-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.customer-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||
</div>
|
||||
<!-- 一级 Tab -->
|
||||
<div class="flex">
|
||||
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">客户</a>
|
||||
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||
<button onclick="toggleFilter('type')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="typeLabel">最应召回</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('project')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="projectLabel">不限</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||
|
||||
<!-- 类型筛选弹窗 -->
|
||||
<div id="typeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近到店')">最近到店</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最应召回')">最应召回</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最近充值')">最近充值</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高消费')">最高消费</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最高余额')">最高余额</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最频繁')">最频繁</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('潜力股')">潜力股</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectType('最专一')">最专一</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目筛选弹窗 -->
|
||||
<div id="projectDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('不限')">不限</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('中式/追分')">中式/追分</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('斯诺克')">斯诺克</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('麻将')">麻将</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectProject('团建')">团建</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户列表 -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- 客户卡片 1 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">王</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：15天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.92</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 小燕</span>
|
||||
<span>💛 泡芙</span>
|
||||
</div>
|
||||
<span class="text-gray-6">30天到店5次</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 2 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">李</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：20天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.88</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 Amy</span>
|
||||
<span>💖 小燕</span>
|
||||
</div>
|
||||
<span class="text-gray-6">余额8000元</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 3 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">张</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：10天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.85</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 小燕</span>
|
||||
</div>
|
||||
<span class="text-gray-6">高频客户</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 4 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">刘</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：8天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.78</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 泡芙</span>
|
||||
<span>💛 Amy</span>
|
||||
</div>
|
||||
<span class="text-gray-6">偏好斯诺克</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 5 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">陈</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：12天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.72</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 小燕</span>
|
||||
</div>
|
||||
<span class="text-gray-6">潜力客户</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 6 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">赵</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">VIP</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：5天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.68</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 泡芙</span>
|
||||
<span>💖 小燕</span>
|
||||
<span>💛 Amy</span>
|
||||
</div>
|
||||
<span class="text-gray-6">余额12000元</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户卡片 7 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">周</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">最近：7天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-primary font-semibold">0.65</p>
|
||||
<p class="text-xs text-gray-6">召回因子</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 Amy</span>
|
||||
</div>
|
||||
<span class="text-gray-6">新客户</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 底部 TabBar -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4">
|
||||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
<span class="text-xs text-gray-6">任务</span>
|
||||
</a>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="text-xs text-primary font-medium">看板</span>
|
||||
</div>
|
||||
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<span class="text-xs text-gray-6">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<script>
|
||||
let currentFilter = null;
|
||||
|
||||
function toggleFilter(type) {
|
||||
const overlay = document.getElementById('filterOverlay');
|
||||
const typeDropdown = document.getElementById('typeDropdown');
|
||||
const projectDropdown = document.getElementById('projectDropdown');
|
||||
|
||||
if (currentFilter === type) {
|
||||
closeAllFilters();
|
||||
return;
|
||||
}
|
||||
|
||||
closeAllFilters();
|
||||
currentFilter = type;
|
||||
overlay.classList.add('show');
|
||||
|
||||
if (type === 'type') {
|
||||
typeDropdown.classList.add('show');
|
||||
} else if (type === 'project') {
|
||||
projectDropdown.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllFilters() {
|
||||
currentFilter = null;
|
||||
document.getElementById('filterOverlay').classList.remove('show');
|
||||
document.getElementById('typeDropdown').classList.remove('show');
|
||||
document.getElementById('projectDropdown').classList.remove('show');
|
||||
}
|
||||
|
||||
function selectType(value) {
|
||||
document.getElementById('typeLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
|
||||
function selectProject(value) {
|
||||
document.getElementById('projectLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
402
Prototype/pages_BAKUP/board-finance.html
Normal file
402
Prototype/pages_BAKUP/board-finance.html
Normal file
@@ -0,0 +1,402 @@
|
||||
<!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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.tab-active {
|
||||
color: #0052d9;
|
||||
position: relative;
|
||||
}
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.filter-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
.filter-dropdown {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 0 0 16px 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
z-index: 1001;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
.summary-gradient {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-20">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">看板</h1>
|
||||
</div>
|
||||
<!-- 一级 Tab -->
|
||||
<div class="flex">
|
||||
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">财务</a>
|
||||
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">助教</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="bg-white sticky top-[88px] z-10 px-4 py-3 flex gap-2 border-b border-gray-2">
|
||||
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="timeLabel">本月</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('area')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="areaLabel">全部区域</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||
|
||||
<!-- 时间筛选弹窗 -->
|
||||
<div id="timeDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本月')">
|
||||
<span>本月</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-本月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个月')">
|
||||
<span>上个月</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近3个月')">
|
||||
<span>最近3个月</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近3个月" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('最近半年')">
|
||||
<span>最近半年</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-最近半年" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本季度')">
|
||||
<span>本季度</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-本季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上个季度')">
|
||||
<span>上个季度</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-上个季度" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('本周')">
|
||||
<span>本周</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-本周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between" onclick="selectTime('上周')">
|
||||
<span>上周</span>
|
||||
<svg class="w-4 h-4 text-primary hidden" id="time-check-上周" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域筛选弹窗 -->
|
||||
<div id="areaDropdown" class="filter-dropdown" style="top: 132px;">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectArea('全部区域')">全部区域</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('大厅')">大厅</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('A区')">A区</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('B区')">B区</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-7 hover:bg-primary/5 rounded-lg cursor-pointer pl-8" onclick="selectArea('C区')">C区</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('麻将房')">麻将房</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer font-medium" onclick="selectArea('团建房')">团建房</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务汇总 -->
|
||||
<div class="summary-gradient mx-4 mt-4 rounded-2xl p-5 text-white">
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<p class="text-white/60 text-xs mb-1">实际收入</p>
|
||||
<p class="text-xl font-bold text-green-400">28.5万</p>
|
||||
<p class="text-white/40 text-xs">预计</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/60 text-xs mb-1">实际支出</p>
|
||||
<p class="text-xl font-bold text-rose-400">18.2万</p>
|
||||
<p class="text-white/40 text-xs">预计</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/60 text-xs mb-1">净利润</p>
|
||||
<p class="text-xl font-bold text-blue-400">10.3万</p>
|
||||
<p class="text-white/40 text-xs">预计</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 指标内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 营业数据 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">营业数据</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">32.8万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">总流水</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">268元</p>
|
||||
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">1,226</p>
|
||||
<p class="text-xs text-gray-6 mt-1">开台数</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">892</p>
|
||||
<p class="text-xs text-gray-6 mt-1">场次</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">2.3h</p>
|
||||
<p class="text-xs text-gray-6 mt-1">停留时长</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">3.2</p>
|
||||
<p class="text-xs text-gray-6 mt-1">翻台率</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收入构成 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">12.5万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">桌费</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">8.6万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">助教费</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">4.2万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">酒水</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">2.8万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">餐饮</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">3.5万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">包房费</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支出构成 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">支出构成</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">6.0万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">房租</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">1.2万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">水电</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">8.5万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">人工</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">0.8万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">耗材</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">1.5万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">推广</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-t">
|
||||
<p class="text-lg font-bold text-gray-13">0.2万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">其他</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 利润构成 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">利润构成</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">14.6万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">毛利</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">10.3万</p>
|
||||
<p class="text-xs text-gray-6 mt-1">净利</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-success">44.5%</p>
|
||||
<p class="text-xs text-gray-6 mt-1">毛利率</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-success">31.4%</p>
|
||||
<p class="text-xs text-gray-6 mt-1">净利率</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 TabBar -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4">
|
||||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
<span class="text-xs text-gray-6">任务</span>
|
||||
</a>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
|
||||
<!-- 三个柱子，有间隙，激活时填充 -->
|
||||
<rect x="4" y="13" width="4" height="8" rx="1" fill="currentColor"/>
|
||||
<rect x="10" y="8" width="4" height="13" rx="1" fill="currentColor"/>
|
||||
<rect x="16" y="3" width="4" height="18" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="text-xs text-primary font-medium">看板</span>
|
||||
</div>
|
||||
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<span class="text-xs text-gray-6">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<script>
|
||||
let currentFilter = null;
|
||||
|
||||
function toggleFilter(type) {
|
||||
const overlay = document.getElementById('filterOverlay');
|
||||
const timeDropdown = document.getElementById('timeDropdown');
|
||||
const areaDropdown = document.getElementById('areaDropdown');
|
||||
|
||||
if (currentFilter === type) {
|
||||
closeAllFilters();
|
||||
return;
|
||||
}
|
||||
|
||||
closeAllFilters();
|
||||
currentFilter = type;
|
||||
overlay.classList.add('show');
|
||||
|
||||
if (type === 'time') {
|
||||
timeDropdown.classList.add('show');
|
||||
} else if (type === 'area') {
|
||||
areaDropdown.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllFilters() {
|
||||
currentFilter = null;
|
||||
document.getElementById('filterOverlay').classList.remove('show');
|
||||
document.getElementById('timeDropdown').classList.remove('show');
|
||||
document.getElementById('areaDropdown').classList.remove('show');
|
||||
}
|
||||
|
||||
function selectTime(value) {
|
||||
document.getElementById('timeLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
|
||||
function selectArea(value) {
|
||||
document.getElementById('areaLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
197
Prototype/pages_BAKUP/chat-history.html
Normal file
197
Prototype/pages_BAKUP/chat-history.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<!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);
|
||||
}
|
||||
.chat-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.chat-item:active {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
</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="divide-y divide-gray-100">
|
||||
<!-- 对话记录 1 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">如何提升王先生的到店频率？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">10分钟前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 8 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 2 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">帮我分析本月财务数据</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2小时前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 15 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 3 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">李女士的消费习惯分析</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 12 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 4 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">如何提高客户满意度？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 20 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 5 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-error to-red-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">小燕本月业绩如何？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 6 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 6 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">推荐一些促销活动方案</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">3天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 25 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 7 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">分析高流失客户群体</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">1周前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 18 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
185
Prototype/pages_BAKUP/chat.html
Normal file
185
Prototype/pages_BAKUP/chat.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!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);
|
||||
}
|
||||
.chat-container {
|
||||
height: calc(100vh - 44px - 70px - env(safe-area-inset-top, 44px));
|
||||
overflow-y: auto;
|
||||
}
|
||||
.message-bubble {
|
||||
max-width: 80%;
|
||||
}
|
||||
.voice-btn:active {
|
||||
background: #0052d9;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<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="chat-container flex-1 p-4 space-y-4">
|
||||
<!-- 引用内容卡片 -->
|
||||
<div class="bg-gray-2 rounded-lg p-3 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-7 mb-1">
|
||||
<svg class="w-4 h-4" 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 2"/>
|
||||
</svg>
|
||||
<span>来源：任务 - 高优先召回</span>
|
||||
</div>
|
||||
<p class="text-gray-9">王先生 · 最近到店15天前 · VIP客户</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">如何提升这位客户的到店频率？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
根据王先生的消费数据分析，我有以下建议：
|
||||
</p>
|
||||
<ol class="text-sm text-gray-13 leading-relaxed mt-2 list-decimal list-inside space-y-2">
|
||||
<li><strong>个性化邀约</strong>：王先生偏好晚间21:00后到店，建议在这个时间段前发送邀约消息。</li>
|
||||
<li><strong>活动推荐</strong>：他对斯诺克感兴趣，可以推荐即将举办的斯诺克比赛活动。</li>
|
||||
<li><strong>储值提醒</strong>：他的储值余额还有8600元，可以提醒他来消费，避免余额长期闲置。</li>
|
||||
<li><strong>专属服务</strong>：安排他熟悉的助教张三接待，提升服务体验。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">能帮我生成一条邀约话术吗？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
好的，根据王先生的特点，为您生成以下邀约话术：
|
||||
</p>
|
||||
<div class="mt-3 p-3 bg-primary-light rounded-lg">
|
||||
<p class="text-sm text-primary leading-relaxed">
|
||||
"王哥您好！好久不见了，最近工作顺利吧？😊 我们店里最近新到了几张英国进口的斯诺克球桌，球感特别好，知道您是斯诺克爱好者，第一时间想到邀请您来体验一下。这周末晚上有空吗？我提前给您预留好包厢～"
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2">💡 提示：建议在晚间8点左右发送，这是王先生活跃的时间段。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">太棒了，谢谢！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
不客气！祝您沟通顺利！如果需要更多帮助，随时问我。😊
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="bg-white border-t border-gray-2 p-3 pb-6">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="flex-1 bg-gray-1 rounded-2xl px-4 py-2.5 flex items-center">
|
||||
<input type="text" placeholder="输入消息..." class="flex-1 bg-transparent text-sm text-gray-13 placeholder-gray-6 outline-none">
|
||||
</div>
|
||||
<button class="voice-btn w-10 h-10 bg-gray-1 rounded-full flex items-center justify-center text-gray-7 transition-colors">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
|
||||
<path d="M19 10v2a7 7 0 01-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
213
Prototype/pages_BAKUP/coach-detail.html
Normal file
213
Prototype/pages_BAKUP/coach-detail.html
Normal file
@@ -0,0 +1,213 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* 覆盖banner样式 */
|
||||
.banner-bg.theme-coral .text-white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
.banner-bg.theme-coral .text-emerald-300 {
|
||||
color: #6ee7b7 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 助教信息 -->
|
||||
<div class="banner-bg theme-coral texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">助教详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 助教信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-amber-400/30 text-amber-100 rounded-full text-xs">星级</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/70 text-sm">
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">中🎱</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">🎯 斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">工龄</p>
|
||||
<p class="font-medium text-sm">3年</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">客户数</p>
|
||||
<p class="font-medium text-sm">68</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">本月课时</p>
|
||||
<p class="font-medium text-sm">85h</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">满意度</p>
|
||||
<p class="font-medium text-emerald-300 text-sm">4.9</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 专业技能 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">专业技能</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">中🎱 精通</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎯 斯诺克</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">🎳 花式</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
专攻中式八球和斯诺克教学，具有 3 年专业教学经验。擅长基础教学和进阶技巧指导，累计培训学员 200+，多名学员参加业余比赛获奖。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 擅长领域 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">擅长领域</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">基础入门</p>
|
||||
<p class="text-xs text-gray-6">零基础学员快速上手</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">技巧进阶</p>
|
||||
<p class="text-xs text-gray-6">走位、翻袋、解球</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">心态训练</p>
|
||||
<p class="text-xs text-gray-6">比赛心理素质培养</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">战术分析</p>
|
||||
<p class="text-xs text-gray-6">局面判断与策略</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.92</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
您是该助教的熟客，共接受过 25 次教学服务。该助教对您的技术水平和学习偏好非常了解，能够提供针对性指导。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 我与该助教相关的客户 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">相关客户</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💖</span>
|
||||
<span class="text-sm font-medium text-gray-13">张三</span>
|
||||
</div>
|
||||
<span class="text-sm text-success font-medium">0.95</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">李四</span>
|
||||
</div>
|
||||
<span class="text-sm text-warning font-medium">0.82</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">王五</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-7 font-medium">0.68</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
226
Prototype/pages_BAKUP/customer-detail.html
Normal file
226
Prototype/pages_BAKUP/customer-detail.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-dark-gold texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">客户详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">王</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">王先生</span>
|
||||
<span class="px-2 py-0.5 bg-gradient-to-r from-amber-500 to-yellow-400 text-black font-medium rounded-full text-xs">VIP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>138****5678</span>
|
||||
<span>VIP20231215</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 rounded-xl backdrop-blur-sm">
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
<p class="font-medium text-emerald-300 text-sm">¥8,600</p>
|
||||
<p class="text-white/60 text-xs mt-1">储值余额</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
<p class="font-medium text-sm">¥32,450</p>
|
||||
<p class="text-white/60 text-xs mt-1">累计消费</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||
<p class="text-white/60 text-xs mt-1">门店</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-error text-xs rounded-full border border-pink-100">🍷 爱点酒水</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。近 60 天到店 8 次，消费金额 2,800 元。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.85</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。该客户与您的互动频率较高，是您的重点维护客户。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 最喜欢的助教 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">最喜欢的助教</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💖</span>
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
</div>
|
||||
<span class="text-sm text-success font-medium">0.92</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||
</div>
|
||||
<span class="text-sm text-warning font-medium">0.78</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-7 font-medium">0.65</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
Prototype/pages_BAKUP/home-settings.html
Normal file
155
Prototype/pages_BAKUP/home-settings.html
Normal 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>
|
||||
198
Prototype/pages_BAKUP/login.html
Normal file
198
Prototype/pages_BAKUP/login.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!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;
|
||||
}
|
||||
.bg-gradient-main {
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||
}
|
||||
.checkbox-custom {
|
||||
position: relative;
|
||||
}
|
||||
.checkbox-custom:checked {
|
||||
background-color: #0052d9;
|
||||
border-color: #0052d9;
|
||||
}
|
||||
.checkbox-custom:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.btn-disabled {
|
||||
background-color: #dcdcdc !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse-soft 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||
<!-- 装饰元素 -->
|
||||
<div class="absolute top-20 left-8 w-16 h-16 bg-primary/10 rounded-full blur-xl pulse-soft"></div>
|
||||
<div class="absolute top-40 right-6 w-20 h-20 bg-cyan-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute bottom-40 left-12 w-12 h-12 bg-blue-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||
|
||||
<!-- 顶部区域 - Logo 和名称 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- Logo -->
|
||||
<div class="relative mb-6 float-animation">
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-400 rounded-3xl flex items-center justify-center shadow-xl shadow-primary/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="12" cy="12" r="6" fill="currentColor"/>
|
||||
<circle cx="12" cy="12" r="2" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-400 rounded-full shadow-lg"></div>
|
||||
<div class="absolute -bottom-2 -left-2 w-3 h-3 bg-blue-300 rounded-full shadow-lg"></div>
|
||||
</div>
|
||||
|
||||
<!-- 应用名称 -->
|
||||
<h1 class="text-2xl font-bold text-gray-13 mb-2">球房运营助手</h1>
|
||||
|
||||
<!-- 产品描述 -->
|
||||
<p class="text-gray-7 text-sm text-center leading-relaxed mb-8">
|
||||
为台球厅提升运营效率的内部管理工具
|
||||
</p>
|
||||
|
||||
<!-- 功能亮点 -->
|
||||
<div class="w-full max-w-sm bg-white/60 backdrop-blur-sm rounded-2xl p-5 mb-6">
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-primary" 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>
|
||||
<p class="text-xs text-gray-9 font-medium">任务管理</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-success" 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>
|
||||
<p class="text-xs text-gray-9 font-medium">数据看板</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-9 font-medium">智能助手</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部区域 - 登录按钮和协议 -->
|
||||
<div class="px-8 pb-10 relative z-10">
|
||||
<!-- 微信登录按钮 -->
|
||||
<button id="loginBtn" class="btn-disabled w-full py-4 rounded-xl text-white font-medium text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
|
||||
</svg>
|
||||
使用微信登录
|
||||
</button>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<div class="flex items-start gap-3 mt-5">
|
||||
<input type="checkbox" id="agreeCheckbox" class="checkbox-custom w-4 h-4 mt-0.5 border-2 border-gray-4 rounded appearance-none cursor-pointer transition-all duration-200 flex-shrink-0">
|
||||
<label for="agreeCheckbox" class="text-xs text-gray-7 leading-relaxed cursor-pointer">
|
||||
我已阅读并同意
|
||||
<a href="#" class="text-primary font-medium">《用户协议》</a>
|
||||
和
|
||||
<a href="#" class="text-primary font-medium">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 底部说明 -->
|
||||
<p class="text-xs text-gray-5 text-center mt-6">
|
||||
仅限球房内部员工使用
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const checkbox = document.getElementById('agreeCheckbox');
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
|
||||
function updateButtonState() {
|
||||
if (checkbox.checked) {
|
||||
loginBtn.classList.remove('btn-disabled');
|
||||
loginBtn.classList.add('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||
} else {
|
||||
loginBtn.classList.add('btn-disabled');
|
||||
loginBtn.classList.remove('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
|
||||
}
|
||||
}
|
||||
|
||||
checkbox.addEventListener('change', updateButtonState);
|
||||
|
||||
loginBtn.addEventListener('click', function() {
|
||||
if (!checkbox.checked) {
|
||||
return;
|
||||
}
|
||||
// 模拟登录
|
||||
alert('正在使用微信登录...');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
Prototype/pages_BAKUP/my-profile.html
Normal file
191
Prototype/pages_BAKUP/my-profile.html
Normal file
@@ -0,0 +1,191 @@
|
||||
<!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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">我的</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="bg-white p-6 flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden shadow-lg">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded">助教</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="mt-4">
|
||||
<a href="notes.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">备注记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="chat-history.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-success/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">助手对话记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="home-settings.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-warning/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">首页设置</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button onclick="showLogoutModal()" class="w-full flex items-center justify-between bg-white px-4 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-error/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">退出账号</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部 TabBar -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-2 flex items-center justify-around px-4">
|
||||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
<span class="text-xs text-gray-6">任务</span>
|
||||
</a>
|
||||
<a href="board-finance.html" class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
<span class="text-xs text-gray-6">看板</span>
|
||||
</a>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<span class="text-xs text-primary font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="logoutModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||
<div class="bg-white rounded-2xl w-72 overflow-hidden">
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-base font-medium text-gray-13 mb-2">确认退出</h3>
|
||||
<p class="text-sm text-gray-7">确认退出当前账号吗？</p>
|
||||
</div>
|
||||
<div class="flex border-t border-gray-2">
|
||||
<button onclick="hideLogoutModal()" class="flex-1 py-3 text-sm text-gray-7 border-r border-gray-2">取消</button>
|
||||
<button onclick="logout()" class="flex-1 py-3 text-sm text-error font-medium">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<script>
|
||||
function showLogoutModal() {
|
||||
document.getElementById('logoutModal').classList.remove('hidden');
|
||||
document.getElementById('logoutModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideLogoutModal() {
|
||||
document.getElementById('logoutModal').classList.add('hidden');
|
||||
document.getElementById('logoutModal').classList.remove('flex');
|
||||
}
|
||||
|
||||
function logout() {
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
144
Prototype/pages_BAKUP/no-permission.html
Normal file
144
Prototype/pages_BAKUP/no-permission.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!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',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-pattern {
|
||||
background-color: #f8fafc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e34d59' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-5deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
}
|
||||
.shake-animation {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-pattern min-h-screen flex flex-col">
|
||||
<!-- 顶部装饰 -->
|
||||
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-error/10 to-transparent"></div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div class="relative mb-8">
|
||||
<!-- 背景光晕 -->
|
||||
<div class="absolute inset-0 w-32 h-32 bg-error/20 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- 主图标 -->
|
||||
<div class="relative w-28 h-28 bg-gradient-to-br from-rose-400 to-red-500 rounded-3xl flex items-center justify-center shadow-xl shadow-error/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-2 -right-2 w-4 h-4 bg-error rounded-full opacity-60"></div>
|
||||
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-rose-300 rounded-full opacity-60"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-10 mb-3">无访问权限</h1>
|
||||
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||
很抱歉，您的访问申请未通过审核，或当前账号无访问权限
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 原因说明卡片 -->
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-10 h-10 bg-error/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-error" 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-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">可能的原因</p>
|
||||
<ul class="text-xs text-gray-6 space-y-1">
|
||||
<li>• 申请信息不完整或不符合要求</li>
|
||||
<li>• 非本店授权员工账号</li>
|
||||
<li>• 账号权限已被管理员收回</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-6">管理员联系方式</span>
|
||||
<span class="text-sm text-gray-13 font-medium">138****8888</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 帮助提示 -->
|
||||
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
|
||||
</svg>
|
||||
<span class="text-xs">如有疑问，请联系管理员重新申请</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-8 pb-12">
|
||||
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
更换登录账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchAccount() {
|
||||
// 清除登录凭证
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
// 返回登录页
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
142
Prototype/pages_BAKUP/notes.html
Normal file
142
Prototype/pages_BAKUP/notes.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!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);
|
||||
}
|
||||
</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="p-4 space-y-3">
|
||||
<!-- 备注卡片 1 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户今天表示下周有朋友生日聚会，想预约包厢。已告知包厢需要提前3天预约，客户说会尽快确定时间再联系。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：王先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-27 15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 2 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。已提醒客户储值卡还有2000元余额，下月到期需要续费。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：高优先召回</span>
|
||||
<span class="text-xs text-gray-6">2024-11-26 18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 3 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
泡芙本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：泡芙</span>
|
||||
<span class="text-xs text-gray-6">2024-11-25 10:20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 4 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户对今天的服务非常满意，特别提到小燕的教学很专业。客户表示会推荐朋友来店里体验。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：李女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-24 21:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 5 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
关系构建任务完成。与客户进行了30分钟的深入交流，了解到客户是企业高管，经常需要商务宴请场地。已记录客户需求，后续可以推荐团建套餐。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：关系构建</span>
|
||||
<span class="text-xs text-gray-6">2024-11-23 19:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 6 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户今天充值了5000元，选择的是尊享套餐。客户提到喜欢安静的环境，以后尽量安排包厢。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：张先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-22 14:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注卡片 7 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：Amy</span>
|
||||
<span class="text-xs text-gray-6">2024-11-21 09:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
226
Prototype/pages_BAKUP/performance.html
Normal file
226
Prototype/pages_BAKUP/performance.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
}
|
||||
/* 优化banner内元素对比度 */
|
||||
.banner-bg .stat-value {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
.banner-bg .stat-highlight {
|
||||
color: #a7f3d0;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
.banner-bg .stat-label {
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
.banner-bg .info-card {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen pb-8">
|
||||
<!-- 通栏 Banner -->
|
||||
<div class="banner-bg theme-blue-light texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">业绩详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 个人信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xl font-semibold">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||
</div>
|
||||
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心数据 -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||
<p class="stat-label text-xs mb-1">本月预计收入</p>
|
||||
<p class="stat-value text-2xl font-bold">¥12,300</p>
|
||||
</div>
|
||||
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||||
<p class="stat-label text-xs mb-1">综合完成率</p>
|
||||
<p class="stat-highlight text-2xl font-bold">87%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度信息 -->
|
||||
<div class="info-card rounded-xl p-4 backdrop-blur-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="stat-label text-sm font-medium">本月目标进度</span>
|
||||
<span class="stat-value text-xs font-medium">3万 / 5万</span>
|
||||
</div>
|
||||
<div class="h-2.5 bg-white/25 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-white rounded-full shadow-sm" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 指标内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 收入构成 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">收入构成</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">4000</p>
|
||||
<p class="text-xs text-gray-6 mt-1">基本工资</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">5680</p>
|
||||
<p class="text-xs text-success mt-1">课时 95%</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">1520</p>
|
||||
<p class="text-xs text-warning mt-1">充值 76%</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">1100</p>
|
||||
<p class="text-xs text-success mt-1">酒水 110%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 台球助教业绩 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">台球助教业绩</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">48</p>
|
||||
<p class="text-xs text-warning mt-1">课程 目标60</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">72h</p>
|
||||
<p class="text-xs text-warning mt-1">时长 目标90</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">32</p>
|
||||
<p class="text-xs text-success mt-1">客户 107%</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">4.8</p>
|
||||
<p class="text-xs text-success mt-1">满意度 107%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值业绩 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">充值业绩</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">1.52万</p>
|
||||
<p class="text-xs text-warning mt-1">金额 76%</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">8</p>
|
||||
<p class="text-xs text-warning mt-1">笔数 目标10</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">3</p>
|
||||
<p class="text-xs text-success mt-1">新客 100%</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">5</p>
|
||||
<p class="text-xs text-warning mt-1">续费 71%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 酒水业绩 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||
<h2 class="text-sm font-semibold text-gray-13">酒水业绩</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">1.1万</p>
|
||||
<p class="text-xs text-success mt-1">销售 110%</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">45</p>
|
||||
<p class="text-xs text-success mt-1">笔数 113%</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-gray-100">
|
||||
<p class="text-lg font-bold text-gray-13">244</p>
|
||||
<p class="text-xs text-gray-6 mt-1">客单价</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="text-lg font-bold text-gray-13">68%</p>
|
||||
<p class="text-xs text-success mt-1">转化 ↑5%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
164
Prototype/pages_BAKUP/reviewing.html
Normal file
164
Prototype/pages_BAKUP/reviewing.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!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',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-pattern {
|
||||
background-color: #f8fafc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230052d9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse-soft 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-pattern min-h-screen flex flex-col">
|
||||
<!-- 顶部装饰 -->
|
||||
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-warning/10 to-transparent"></div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div class="relative mb-8 float-animation">
|
||||
<!-- 背景光晕 -->
|
||||
<div class="absolute inset-0 w-32 h-32 bg-warning/20 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- 主图标 -->
|
||||
<div class="relative w-28 h-28 bg-gradient-to-br from-amber-400 to-orange-500 rounded-3xl flex items-center justify-center shadow-xl shadow-warning/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-2 -right-2 w-4 h-4 bg-warning rounded-full pulse-soft"></div>
|
||||
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-amber-300 rounded-full pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-10 mb-3">申请审核中</h1>
|
||||
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||
您的访问申请已提交成功，正在等待管理员审核，请耐心等待
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 进度提示卡片 -->
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-warning" 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-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-13">审核进度</p>
|
||||
<p class="text-xs text-gray-6">通常需要 1-3 个工作日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-success rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-gray-9">已提交</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200">
|
||||
<div class="h-full w-1/2 bg-warning rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-warning/20 rounded-full flex items-center justify-center">
|
||||
<div class="w-2 h-2 bg-warning rounded-full pulse-soft"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">审核中</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-gray-100 rounded-full"></div>
|
||||
<span class="text-xs text-gray-5">通过</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系提示 -->
|
||||
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
<span class="text-xs">如有疑问，请联系管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-8 pb-12">
|
||||
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
更换登录账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchAccount() {
|
||||
// 清除登录凭证
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
// 返回登录页
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
225
Prototype/pages_BAKUP/task-detail-callback.html
Normal file
225
Prototype/pages_BAKUP/task-detail-callback.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-teal texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">任务详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 任务标题 -->
|
||||
<div class="px-5 pt-2 pb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">客户回访</span>
|
||||
<span class="text-white/80 text-sm">常规回访，保持良好联系</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-1 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">赵</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">赵女士</span>
|
||||
<span class="px-2 py-0.5 bg-amber-400/30 text-amber-100 rounded-full text-xs">VIP</span>
|
||||
<span class="px-2 py-0.5 bg-emerald-400/30 text-emerald-100 rounded-full text-xs">忠实客</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>135****6677</span>
|
||||
<span>VIP20230815</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||
<p class="font-medium">💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">非常多</span></p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🎱 斯诺克爱好者</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">⭐ 高满意度</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">🍷 爱点酒水</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
忠实老客户，入会 1 年半。偏好周末下午时段，喜欢斯诺克。平均消费 420 元/次，月均到店 6-8 次，经常点酒水和小食。上次服务好评。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 88%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.88</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
长期合作关系良好，共有 45 次服务记录。客户多次指定您服务，评价均为 5 星。是您的核心客户之一，需要持续维护。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title purple text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||
📞 常规回访要点
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户上次到店是 3 天前，关系良好，进行常规关怀回访：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>询问上次体验是否满意，是否有改进建议</li>
|
||||
<li>告知近期新到的斯诺克相关设备或活动</li>
|
||||
<li>提前预约下次到店时间，提供专属服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-sm text-gray-9 leading-relaxed">
|
||||
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||
"赵姐您好！上次打球感觉怎么样？新到的球杆手感还习惯吗？这周末您有空的话，可以提前帮您预留老位置~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-teal-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
224
Prototype/pages_BAKUP/task-detail-priority.html
Normal file
224
Prototype/pages_BAKUP/task-detail-priority.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-orange texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">任务详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 任务标题 -->
|
||||
<div class="px-5 pt-2 pb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">优先召回</span>
|
||||
<span class="text-white/80 text-sm">消费频率下降，需主动关注</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-1 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">张</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">张先生</span>
|
||||
<span class="px-2 py-0.5 bg-blue-400/30 text-blue-100 rounded-full text-xs">偏好夜场</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>139****1234</span>
|
||||
<span>MEM20240318</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||
<p class="font-medium">💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">多</span></p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 偏好夜场</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 中式八球</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-600 text-xs rounded-full border border-purple-100">👥 爱组局</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
偏好晚间 20:00-23:00 时段，喜欢中式八球。平均消费 220 元/次，之前月均到店 3-4 次，近期明显减少。喜欢和朋友组局打球。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-sm font-semibold rounded-xl shadow-sm">一般</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full" style="width: 55%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-warning">0.55</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
最近 2 个月互动较少，仅有 3 次服务记录。客户对您的印象中等，有提升空间。建议增加互动频次，建立更好的服务关系。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 border border-orange-100">
|
||||
<p class="text-sm text-warning leading-relaxed font-medium mb-3">
|
||||
💡 建议执行
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户消费频率从月均 4 次下降到近月仅 1 次，需要关注原因：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>了解是否工作变动或搬家导致不便</li>
|
||||
<li>询问对门店服务是否有改进建议</li>
|
||||
<li>推荐近期的会员优惠活动</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-sm text-gray-9 leading-relaxed">
|
||||
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||
"张哥，好久没见您来打球了，最近忙吗？店里这周六有个球友聚会活动，想邀请您来玩，顺便认识一些新球友~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-orange-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-orange-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-orange-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
224
Prototype/pages_BAKUP/task-detail-relationship.html
Normal file
224
Prototype/pages_BAKUP/task-detail-relationship.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e91e63, #f48fb1); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-pink texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">任务详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 任务标题 -->
|
||||
<div class="px-5 pt-2 pb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">关系构建</span>
|
||||
<span class="text-white/80 text-sm">潜力客户，建议加强互动</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-1 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">陈</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">陈先生</span>
|
||||
<span class="px-2 py-0.5 bg-cyan-400/30 text-cyan-100 rounded-full text-xs">潜力股</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>137****8899</span>
|
||||
<span>NEW20240501</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||
<p class="font-medium">💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">一般</span></p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-amber-50 to-yellow-50 text-amber-600 text-xs rounded-full border border-amber-100">☀️ 偏好下午</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 初学者</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-pink-600 text-xs rounded-full border border-pink-100">💎 消费潜力大</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
新客户，入会 2 个月。偏好下午 14:00-18:00 时段，对台球感兴趣但技术一般。消费能力较强，单次消费 180 元，有提升空间。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white text-sm font-semibold rounded-xl shadow-sm">待加深</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-pink-400 to-rose-500 rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-pink-500">0.45</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
接触次数较少，仅有 2 次服务记录。客户对您还不太熟悉，但反馈良好。建议通过专业服务和关心，逐步建立信任关系。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-4 border border-pink-100">
|
||||
<p class="text-sm text-pink-600 leading-relaxed font-medium mb-3">
|
||||
💝 关系构建重点
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户消费潜力大但关系指数较低，建议重点培养：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>主动关心学习进度，提供技术指导</li>
|
||||
<li>了解其兴趣爱好，建立共同话题</li>
|
||||
<li>适时推荐适合初学者的课程套餐</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-sm text-gray-9 leading-relaxed">
|
||||
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-pink-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-pink-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-pink-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
222
Prototype/pages_BAKUP/task-detail.html
Normal file
222
Prototype/pages_BAKUP/task-detail.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-red texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" 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">任务详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 任务标题 -->
|
||||
<div class="px-5 pt-2 pb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2.5 py-1 bg-white/25 backdrop-blur-sm text-white text-xs font-medium rounded-lg">高优先召回</span>
|
||||
<span class="text-white/80 text-sm">客户流失风险较高，建议尽快联系</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-1 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">王</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">王先生</span>
|
||||
<span class="px-2 py-0.5 bg-emerald-400/30 text-emerald-100 rounded-full text-xs">常客</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>138****5678</span>
|
||||
<span>VIP20231215</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">储值余额</p>
|
||||
<p class="font-medium">💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">非常多</span></p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">所属门店</p>
|
||||
<p class="font-medium text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.85</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||
💡 建议执行
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户已有 15 天未到店，存在流失风险。建议通过微信联系：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>询问近期是否有空，邀请体验新到的器材</li>
|
||||
<li>告知本周末有会员专属活动</li>
|
||||
<li>根据其偏好时段（晚间）推荐合适的时间</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-sm text-gray-9 leading-relaxed">
|
||||
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
||||
"王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
362
Prototype/pages_BAKUP/task-list.html
Normal file
362
Prototype/pages_BAKUP/task-list.html
Normal file
@@ -0,0 +1,362 @@
|
||||
<!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">
|
||||
<link href="../css/banner.css" 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;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
/* 任务卡片边框颜色 */
|
||||
.task-card {
|
||||
position: relative;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
.task-card.high-priority {
|
||||
border-left-color: #f43f5e;
|
||||
}
|
||||
.task-card.priority {
|
||||
border-left-color: #f97316;
|
||||
}
|
||||
.task-card.relationship {
|
||||
border-left-color: #ec4899;
|
||||
}
|
||||
.task-card.callback {
|
||||
border-left-color: #14b8a6;
|
||||
}
|
||||
/* 标签颜色 - 圆角矩形 */
|
||||
.tag-high-priority {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-priority {
|
||||
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-relationship {
|
||||
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-callback {
|
||||
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* 底部导航 */
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
color: #8b8b8b;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #0052d9;
|
||||
}
|
||||
.nav-item.active svg {
|
||||
fill: #0052d9;
|
||||
}
|
||||
/* 进度条动画 */
|
||||
.progress-bar {
|
||||
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
|
||||
transition: width 0.6s ease-out;
|
||||
}
|
||||
/* 业绩卡片文字样式 */
|
||||
.stat-value {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
|
||||
}
|
||||
.stat-highlight {
|
||||
color: #6ee7b7;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
.stat-label {
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
.stat-secondary {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.stat-accent {
|
||||
color: #fcd34d;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部区域 - 用户信息和业绩卡片 -->
|
||||
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
|
||||
<!-- 用户信息 -->
|
||||
<div class="px-5 pt-10 pb-3">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xl font-semibold">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||||
</div>
|
||||
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 业绩进度卡片 -->
|
||||
<div class="mx-4">
|
||||
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-2.5 border border-white/20">
|
||||
<!-- 第一层：标题行 -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="stat-label text-sm font-medium">本月业绩进度</span>
|
||||
<span class="stat-accent text-xl font-bold">60%</span>
|
||||
</div>
|
||||
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
|
||||
查看详情
|
||||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 第二层：进度条 -->
|
||||
<div class="h-1.5 bg-white/20 rounded-full overflow-hidden mb-2.5">
|
||||
<div class="progress-bar h-full rounded-full" style="width: 60%"></div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层：核心数据 - 两列布局 -->
|
||||
<div class="flex items-stretch mb-2.5">
|
||||
<div class="flex-1 pr-3 border-r border-white/25 text-center">
|
||||
<div>
|
||||
<span class="stat-highlight text-xl font-bold">82.5</span>
|
||||
<span class="stat-secondary text-sm font-medium"> / 120</span>
|
||||
</div>
|
||||
<p class="stat-label text-xs">已完成 / 目标课时</p>
|
||||
</div>
|
||||
<div class="flex-1 pl-3 text-center">
|
||||
<div>
|
||||
<span class="stat-highlight text-xl font-bold">3.5</span>
|
||||
<span class="stat-secondary text-sm font-medium"> / 10</span>
|
||||
<span class="stat-secondary text-xs">万</span>
|
||||
</div>
|
||||
<p class="stat-label text-xs">已完成 / 目标销售额</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四层：预计收入 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/25">
|
||||
<span class="stat-label text-xs">11月预计收入</span>
|
||||
<a href="performance.html" class="flex items-center gap-1.5 group">
|
||||
<span class="stat-value text-lg font-bold">¥12,345</span>
|
||||
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待办任务列表 -->
|
||||
<div class="px-4 py-5">
|
||||
<!-- 标题 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-semibold text-gray-13">待办任务</h2>
|
||||
<span class="text-sm text-gray-6">共 7 项</span>
|
||||
</div>
|
||||
|
||||
<!-- 任务卡片列表 -->
|
||||
<div class="space-y-3">
|
||||
<!-- 高优先召回 - 王先生 -->
|
||||
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13">王先生</span>
|
||||
<span class="text-sm">💖</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：15天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">高流失风险，建议尽快联系</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 高优先召回 - 李女士 -->
|
||||
<a href="task-detail.html" class="task-card high-priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13">李女士</span>
|
||||
<span class="text-sm">🧡</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：20天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">VIP客户，储值余额较多</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 优先召回 - 张先生 -->
|
||||
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13">张先生</span>
|
||||
<span class="text-sm">💛</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：10天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">消费频率下降，需关注</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 优先召回 - 刘先生 -->
|
||||
<a href="task-detail-priority.html" class="task-card priority block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13">刘先生</span>
|
||||
<span class="text-sm">💙</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：8天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">偏好晚间时段，可推荐夜场套餐</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 关系构建 - 陈先生 -->
|
||||
<a href="task-detail-relationship.html" class="task-card relationship block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
|
||||
<span class="text-base font-semibold text-gray-13">陈先生</span>
|
||||
<span class="text-sm">💙</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：无</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">潜力客户，建议加强互动</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户回访 - 赵女士 -->
|
||||
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||
<span class="text-base font-semibold text-gray-13">赵女士</span>
|
||||
<span class="text-sm">🧡</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：3天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">常规回访，保持联系</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 客户回访 - 周先生 -->
|
||||
<a href="task-detail-callback.html" class="task-card callback block bg-white rounded-xl p-4 shadow-sm active:bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||
<span class="text-base font-semibold text-gray-13">周先生</span>
|
||||
<span class="text-sm">💛</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">最近到店：5天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed">新客户跟进，了解需求</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-2 flex items-center px-4 z-50">
|
||||
<a href="task-list.html" class="nav-item active">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium">任务</span>
|
||||
</a>
|
||||
<a href="board-coach.html" class="nav-item">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xs">看板</span>
|
||||
</a>
|
||||
<a href="my-profile.html" class="nav-item">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
<span class="text-xs">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user