generated from root/feiqiu-ETL
214 lines
10 KiB
HTML
214 lines
10 KiB
HTML
<!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>
|