在准备环境前提交次全部更改。
This commit is contained in:
@@ -12,71 +12,40 @@
|
||||
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',
|
||||
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'],
|
||||
}
|
||||
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); }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 80px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.orig-price { text-decoration: line-through; color: #a6a6a6; font-size: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<!-- 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>
|
||||
<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">
|
||||
@@ -93,7 +62,6 @@
|
||||
</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">
|
||||
@@ -113,275 +81,202 @@
|
||||
</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>
|
||||
<h2 class="st 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 orange text-sm font-semibold text-gray-13 mb-4">消费记录</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- Record 1: 台桌详情 - 有食品酒水，2位助教 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">台桌详情</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-02-05</span>
|
||||
</div>
|
||||
<!-- 时间轴 -->
|
||||
<div class="px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-primary ring-4 ring-primary/10"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">开台</span>
|
||||
<span class="text-sm font-bold text-gray-13">21:30</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center mx-2 -mt-4">
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/40 to-primary/20 flex-1"></div>
|
||||
<div class="px-3 py-1 bg-primary/10 rounded-full mx-1">
|
||||
<span class="text-[11px] font-semibold text-primary">3h 20min</span>
|
||||
</div>
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/20 to-primary/40 flex-1"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-400 ring-4 ring-gray-200"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">结束</span>
|
||||
<span class="text-sm font-bold text-gray-13">00:50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教 & 明细 -->
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-pink-50 text-pink-600 text-[10px] rounded font-medium">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-blue-50 text-primary text-[10px] rounded font-medium">基础课</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">服务 2.5h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start justify-between border-t border-dashed border-gray-100 pt-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-green-50 text-green-600 text-[10px] rounded font-medium">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-orange-50 text-warning text-[10px] rounded font-medium">激励课</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-6">服务 0.5h</span>
|
||||
<span class="text-xs text-orange-500 font-medium">定档绩效：1小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-100 pt-3">
|
||||
<span class="text-xs text-gray-6">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning">¥260</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-200 pt-3">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error">¥640</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 2: 台桌详情 - 无食品酒水，有定档绩效 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">台桌详情</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-02-01</span>
|
||||
</div>
|
||||
<div class="px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-primary ring-4 ring-primary/10"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">开台</span>
|
||||
<span class="text-sm font-bold text-gray-13">14:00</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center mx-2 -mt-4">
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/40 to-primary/20 flex-1"></div>
|
||||
<div class="px-3 py-1 bg-primary/10 rounded-full mx-1">
|
||||
<span class="text-[11px] font-semibold text-primary">2h 00min</span>
|
||||
</div>
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/20 to-primary/40 flex-1"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-400 ring-4 ring-gray-200"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">结束</span>
|
||||
<span class="text-sm font-bold text-gray-13">16:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-purple-50 text-purple-600 text-[10px] rounded font-medium">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-orange-50 text-warning text-[10px] rounded font-medium">激励课</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-6">服务 1.5h</span>
|
||||
<span class="text-xs text-orange-500 font-medium">定档绩效：2小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-200 pt-3">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error">¥220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 3: 商城订单 - 有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-green-50 px-4 py-2.5 flex items-center justify-between border-b border-green-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-success rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-success">商城订单</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-01-28</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-pink-50 text-pink-600 text-[10px] rounded font-medium">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-blue-50 text-primary text-[10px] rounded font-medium">基础课</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">服务 1h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-100 pt-3">
|
||||
<span class="text-xs text-gray-6">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning">¥180</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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 pink text-sm font-semibold text-gray-13 mb-4">最喜欢的助教</h2>
|
||||
<h2 class="st pink text-sm font-semibold text-gray-13 mb-4">最喜欢的助教</h2>
|
||||
<div class="space-y-3">
|
||||
<!-- 小燕 -->
|
||||
<div class="p-4 bg-gradient-to-br from-pink-50/80 to-rose-50/60 rounded-xl border border-pink-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">❤️</span>
|
||||
<span class="text-sm font-semibold text-gray-13">小燕</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-success">0.92</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">❤️</span><span class="text-sm font-semibold text-gray-13">小燕</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-[10px] text-gray-7">关系指数</span><span class="text-lg font-bold text-success">0.92</span></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<p class="text-[10px] text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">12h</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">5h</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">18次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥5,000</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">基础</p><p class="text-sm font-bold text-primary">12h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">激励</p><p class="text-sm font-bold text-warning">5h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">上课</p><p class="text-sm font-bold text-gray-13">18次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">充值</p><p class="text-sm font-bold text-success">¥5,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 泡芙 -->
|
||||
<div class="p-4 bg-gradient-to-br from-amber-50/80 to-yellow-50/60 rounded-xl border border-amber-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-semibold text-gray-13">泡芙</span>
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">💛</span><span class="text-sm font-semibold text-gray-13">泡芙</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-[10px] text-gray-7">关系指数</span><span class="text-lg font-bold text-warning">0.78</span></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">基础</p><p class="text-sm font-bold text-primary">8h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">激励</p><p class="text-sm font-bold text-warning">3h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">上课</p><p class="text-sm font-bold text-gray-13">12次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">充值</p><p class="text-sm font-bold text-success">¥3,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消费记录（放在最下方） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-sm font-semibold text-gray-13 mb-4">消费记录</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- 台桌详情 Record 1：有团购折扣，2位助教，有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">A12号台</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-warning">0.78</span>
|
||||
<span class="text-xs text-gray-8">2026-02-05</span>
|
||||
</div>
|
||||
<!-- 时间信息：紧凑一行 -->
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-gray-13 font-medium pv">21:30</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">00:50</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] rounded-full font-medium">3h20min</span>
|
||||
</div>
|
||||
<!-- 台费（有团购折扣） -->
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥180</span>
|
||||
<span class="orig-price ml-1">¥240</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">8h</p>
|
||||
<!-- 助教列表：一行2个卡片 -->
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<!-- 助教卡片1：小燕 -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[9px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">基础课 · 2.5h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教卡片2：Amy -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">Amy</span>
|
||||
<span class="px-1 py-px bg-green-50 text-green-600 text-[9px] rounded">初级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">激励课 · 0.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-[10px] text-orange-500">定档绩效：1h</span>
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">3h</p>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between py-2 border-t border-gray-100">
|
||||
<span class="text-xs text-gray-8">🍷 食品酒水</span>
|
||||
<div class="text-right">
|
||||
<span class="text-sm font-medium text-warning pv">¥210</span>
|
||||
<span class="orig-price ml-1">¥260</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">12次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥3,000</p>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<div class="text-right">
|
||||
<span class="text-base font-bold text-error pv">¥640</span>
|
||||
<span class="orig-price ml-1">¥750</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Amy -->
|
||||
<div class="p-4 bg-gradient-to-br from-slate-50/80 to-gray-50/60 rounded-xl border border-gray-200/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-semibold text-gray-13">Amy</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-gray-7">0.65</span>
|
||||
|
||||
<!-- 台桌详情 Record 2：无食品酒水，有定档绩效，无折扣 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">888号台</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-8">2026-02-01</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">5h</p>
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-gray-13 font-medium pv">14:00</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">16:00</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] rounded-full font-medium">2h00min</span>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">2h</p>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥120</span>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">泡芙</span>
|
||||
<span class="px-1 py-px bg-purple-50 text-purple-600 text-[9px] rounded">中级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">激励课 · 1.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-[10px] text-orange-500">定档绩效：2h</span>
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">8次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥2,000</p>
|
||||
<!-- 总金额（无食品酒水，不展示该行） -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error pv">¥220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商城订单 Record 3：有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-green-50 px-4 py-2 flex items-center justify-between border-b border-green-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-success rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-success">商城订单</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-8">2026-01-28</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-2.5">
|
||||
<!-- 助教卡片列表：同台桌详情风格 -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[9px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">基础课 · 1h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-100">
|
||||
<span class="text-xs text-gray-8">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning pv">¥180</span>
|
||||
</div>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error pv">¥280</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -389,47 +284,13 @@
|
||||
<!-- 底部操作栏 -->
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
Reference in New Issue
Block a user