root/LLZQ-XCX
1
0
Fork 0
generated from root/feiqiu-ETL
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:引入 TDesign 以及前端初稿

Browse Source
This commit is contained in:
Neo
2026-01-24 22:56:57 +08:00
parent 6147924889
commit c972c52e04
80 changed files with 35245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
Prototype/pages/coach-detail.html Normal file
View 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>