generated from root/feiqiu-ETL
1637 lines
85 KiB
HTML
1637 lines
85 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">
|
||
<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: 280px;
|
||
}
|
||
.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;
|
||
}
|
||
#filterBar {
|
||
overflow: hidden;
|
||
max-height: 120px;
|
||
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
||
will-change: transform, opacity;
|
||
}
|
||
#filterBar.filter-bar-enter {
|
||
transform: translateY(-16px);
|
||
opacity: 0;
|
||
}
|
||
#filterBar.filter-bar-hidden {
|
||
opacity: 0;
|
||
transform: translateY(-110%);
|
||
pointer-events: none;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#filterBar { animation: none; transition: none; }
|
||
}
|
||
.summary-gradient {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
}
|
||
/* 对比开关样式 */
|
||
.compare-toggle {
|
||
width: 44px;
|
||
height: 24px;
|
||
background: #dcdcdc;
|
||
border-radius: 12px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
}
|
||
.compare-toggle.active {
|
||
background: #0052d9;
|
||
}
|
||
.compare-toggle::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: left 0.3s;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
}
|
||
.compare-toggle.active::after {
|
||
left: 22px;
|
||
}
|
||
/* 对比数据样式 - 最小字体12px */
|
||
.compare-data {
|
||
display: none;
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
.compare-data.show {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
.compare-up {
|
||
color: #e34d59;
|
||
}
|
||
.compare-down {
|
||
color: #00a870;
|
||
}
|
||
/* 提示弹窗遮罩 */
|
||
.tip-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 1999;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.tip-overlay.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
/* 提示弹窗样式 */
|
||
.tip-toast {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
left: 16px;
|
||
right: 16px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
|
||
z-index: 2000;
|
||
transform: translateY(120%);
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.tip-toast.show {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
.tip-toast-content {
|
||
font-size: 13px;
|
||
color: #4b4b4b;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
.tip-toast-content strong {
|
||
color: #242424;
|
||
font-weight: 600;
|
||
}
|
||
/* 问号图标样式 */
|
||
.help-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 50%;
|
||
font-size: 10px;
|
||
color: rgba(255,255,255,0.7);
|
||
cursor: pointer;
|
||
margin-left: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
.help-icon-dark {
|
||
background: rgba(0,0,0,0.08);
|
||
color: #777777;
|
||
}
|
||
/* 卡片标题样式 */
|
||
.card-section-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #393939;
|
||
margin-bottom: 12px;
|
||
}
|
||
/* 优惠流程样式 */
|
||
.flow-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
}
|
||
.flow-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.flow-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
.flow-line {
|
||
width: 2px;
|
||
height: 16px;
|
||
background: #e7e7e7;
|
||
margin-left: 3px;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
/* 赠送卡行样式 */
|
||
.gift-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14px 16px;
|
||
background: #fafafa;
|
||
border-radius: 12px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.gift-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.gift-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
margin-left: 6px;
|
||
}
|
||
.gift-tag-wine { background: #fef3f2; color: #dc2626; }
|
||
.gift-tag-table { background: #f0fdf4; color: #16a34a; }
|
||
.gift-tag-coupon { background: #eff6ff; color: #2563eb; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-1 min-h-screen">
|
||
<!-- 顶部导航 -->
|
||
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||
<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 id="filterBar" class="bg-gray-1 sticky top-[88px] z-10 px-4 py-2 border-b border-gray-2">
|
||
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-primary-light rounded-lg text-sm text-primary flex items-center justify-center gap-1 border border-primary/20">
|
||
<span id="timeLabel">本月</span>
|
||
<svg class="w-4 h-4 text-primary" 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 class="flex items-center gap-2 px-2">
|
||
<span class="text-xs text-gray-7">环比</span>
|
||
<div id="compareToggle" class="compare-toggle" onclick="toggleCompare()"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 遮罩层 -->
|
||
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||
|
||
<!-- 时间筛选弹窗 -->
|
||
<div id="timeDropdown" class="filter-dropdown">
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 区域筛选弹窗 -->
|
||
<div id="areaDropdown" class="filter-dropdown">
|
||
<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>
|
||
|
||
<!-- 经营状况一览 (黑色Banner) -->
|
||
<div class="summary-gradient mx-4 mt-4 rounded-2xl p-5 text-white">
|
||
<h3 class="text-sm font-medium text-white/80 mb-4">经营状况一览</h3>
|
||
|
||
<!-- 收入概览（经营链） -->
|
||
<div class="mb-4">
|
||
<p class="text-xs text-white/50 mb-3">收入概览（经营链）</p>
|
||
<!-- 第一行：发生额、总优惠、优惠占比 - 上下结构 -->
|
||
<div class="grid grid-cols-3 gap-3 mb-3">
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">发生额/正价</p>
|
||
<span class="help-icon" onclick="showTip('occurrence')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-white">¥823,456</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">总优惠</p>
|
||
<span class="help-icon" onclick="showTip('discount')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-amber-400">-¥113,336</p>
|
||
<div class="compare-data compare-down" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-3.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">优惠占比</p>
|
||
</div>
|
||
<p class="text-xl font-bold text-amber-400">13.8%</p>
|
||
<div class="compare-data compare-down" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-1.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 第二行：成交/确认收入 - 左右结构 -->
|
||
<div class="bg-white/10 rounded-xl px-4 py-3 flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<p class="text-white/70 text-sm">成交/确认收入</p>
|
||
<span class="help-icon" onclick="showTip('confirmed')">?</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<p class="text-xl font-bold text-green-400">¥710,120</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.7%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10 my-4"></div>
|
||
|
||
<!-- 现金概览 - 2x2结构 -->
|
||
<div>
|
||
<p class="text-xs text-white/50 mb-3">现金概览 <span class="text-white/30">（往期为已结算，本期为预估）</span></p>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<!-- 第一行 -->
|
||
<div class="bg-white/5 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">实收/现金流入</p>
|
||
<span class="help-icon" onclick="showTip('cashIn')">?</span>
|
||
</div>
|
||
<p class="text-lg font-bold text-green-400">¥698,500</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+5.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/5 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">现金支出</p>
|
||
<span class="help-icon" onclick="showTip('cashOut')">?</span>
|
||
</div>
|
||
<p class="text-lg font-bold text-rose-400">¥472,300</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+2.1%</span>
|
||
</div>
|
||
</div>
|
||
<!-- 第二行 -->
|
||
<div class="bg-white/5 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">现金结余</p>
|
||
<span class="help-icon" onclick="showTip('balance')">?</span>
|
||
</div>
|
||
<p class="text-lg font-bold text-blue-400">¥226,200</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+15.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/5 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-white/60 text-xs">结余率</p>
|
||
</div>
|
||
<p class="text-lg font-bold text-blue-400">32.4%</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+3.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI分析 -->
|
||
<div class="mx-4 mt-4 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 rounded-2xl p-4 border border-indigo-200/50">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<div class="w-7 h-7 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 rounded-full flex items-center justify-center shadow-sm">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- 机器人头部 -->
|
||
<rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
|
||
<!-- 天线 -->
|
||
<path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="12" cy="3" r="1.5" fill="white"/>
|
||
<!-- 眼睛 -->
|
||
<circle cx="9" cy="11.5" r="2" fill="#667eea"/>
|
||
<circle cx="15" cy="11.5" r="2" fill="#667eea"/>
|
||
<!-- 眼睛高光 -->
|
||
<circle cx="9.5" cy="11" r="0.7" fill="white"/>
|
||
<circle cx="15.5" cy="11" r="0.7" fill="white"/>
|
||
<!-- 微笑嘴巴 -->
|
||
<path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
|
||
<!-- 腮红 -->
|
||
<circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
|
||
<circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
|
||
<!-- 耳朵/装饰 -->
|
||
<rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
|
||
<rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-sm font-semibold text-gray-13">AI 财务分析</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm text-gray-9">
|
||
<p><strong class="text-gray-11">优惠率Top：</strong>团购(5.2%) / 大客户(3.1%) / 赠送卡(2.5%)</p>
|
||
<p><strong class="text-gray-11">差异最大项目：</strong>酒水(+18%) / 台桌(-5%) / 包厢(+12%)</p>
|
||
<p><strong class="text-gray-11">财务分析：</strong><span class="text-warning">充值高但消耗低</span>，建议关注会员活跃度</p>
|
||
</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-base font-semibold text-gray-13">充值与预收</h2>
|
||
</div>
|
||
|
||
<!-- 会员卡概览 -->
|
||
<div class="mb-5">
|
||
<p class="card-section-title">会员卡概览</p>
|
||
<!-- 储值卡充值实收 -->
|
||
<div class="bg-gray-50 rounded-xl px-4 py-3 mb-3">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<div class="flex items-center">
|
||
<p class="text-sm text-gray-9 font-medium">储值卡充值实收</p>
|
||
<span class="help-icon help-icon-dark" onclick="showTip('rechargeActual')">?</span>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xl font-bold text-gray-13">¥352,800</p>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+18.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2 mt-2">
|
||
<div class="flex-1 bg-white rounded-lg px-3 py-2 flex justify-between items-center">
|
||
<span class="text-sm text-gray-7">首充</span>
|
||
<span class="text-base font-semibold text-gray-10">¥188,500</span>
|
||
</div>
|
||
<div class="flex-1 bg-white rounded-lg px-3 py-2 flex justify-between items-center">
|
||
<span class="text-sm text-gray-7">续费</span>
|
||
<span class="text-base font-semibold text-gray-10">¥164,300</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 全类别会员卡余额合计 -->
|
||
<div class="bg-amber-50 rounded-xl px-4 py-3 flex justify-between items-center">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<p class="text-sm text-gray-9 font-medium">全类别会员卡余额合计</p>
|
||
<span class="help-icon help-icon-dark" onclick="showTip('allCardBalance')">?</span>
|
||
</div>
|
||
<span class="text-xs text-amber-600 bg-amber-100 px-2 py-0.5 rounded">仅经营参考，非财务属性</span>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xl font-bold text-gray-13">¥586,500</p>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 储值卡统计详情 -->
|
||
<div class="mb-5">
|
||
<p class="card-section-title">储值卡统计详情</p>
|
||
<div class="grid grid-cols-3 gap-1.5">
|
||
<div class="bg-gray-50 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-sm text-gray-8">充值</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('recharge')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-gray-13">¥352,800</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+18.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-sm text-gray-8">消耗</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('consume')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-gray-13">¥238,200</p>
|
||
<div class="compare-data compare-down" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-5.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-primary/5 rounded-xl p-3 text-center">
|
||
<div class="flex items-center justify-center mb-1">
|
||
<p class="text-sm text-gray-8">总余额</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('cardBalance')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-primary">¥642,600</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+11.4%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 赠送卡统计详情 -->
|
||
<div>
|
||
<p class="card-section-title">赠送卡统计详情</p>
|
||
<!-- 新增 -->
|
||
<div class="gift-row">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<p class="text-sm text-gray-9 font-medium">赠送卡新增</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('giftNew')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-gray-13">¥108,600</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+22.1%</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-1.5 min-w-[140px]">
|
||
<div class="flex justify-between items-center bg-red-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-red-600">酒水卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥43,200</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-green-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-green-600">台费卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥54,100</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-blue-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-blue-600">抵用券</span>
|
||
<span class="text-sm font-bold text-gray-13">¥11,300</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 消费 -->
|
||
<div class="gift-row">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<p class="text-sm text-gray-9 font-medium">赠送卡消费</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('giftConsume')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-gray-13">¥75,800</p>
|
||
<div class="compare-data compare-down" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-8.7%</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-1.5 min-w-[140px]">
|
||
<div class="flex justify-between items-center bg-red-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-red-600">酒水卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥32,100</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-green-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-green-600">台费卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥32,800</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-blue-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-blue-600">抵用券</span>
|
||
<span class="text-sm font-bold text-gray-13">¥10,900</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 总余额 -->
|
||
<div class="gift-row bg-primary/5">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<p class="text-sm text-gray-9 font-medium">赠送卡总余额</p>
|
||
<span class="help-icon help-icon-dark text-[10px]" onclick="showTip('giftBalance')">?</span>
|
||
</div>
|
||
<p class="text-xl font-bold text-primary">¥243,900</p>
|
||
<div class="compare-data compare-up" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.8%</span>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-1.5 min-w-[140px]">
|
||
<div class="flex justify-between items-center bg-red-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-red-600">酒水卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥118,500</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-green-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-green-600">台费卡</span>
|
||
<span class="text-sm font-bold text-gray-13">¥109,200</span>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-blue-50 rounded-lg px-3 py-1.5">
|
||
<span class="text-sm text-blue-600">抵用券</span>
|
||
<span class="text-sm font-bold text-gray-13">¥16,200</span>
|
||
</div>
|
||
</div>
|
||
</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-base font-semibold text-gray-13">发生额 → 入账收入 及 优惠影响</h2>
|
||
</div>
|
||
|
||
<!-- 收入确认（损益链）- UI设计 -->
|
||
<div class="mb-5">
|
||
<p class="card-section-title">收入确认（损益链）</p>
|
||
|
||
<!-- 发生额到成交收入的流程 -->
|
||
<div class="border-2 border-blue-200 rounded-2xl overflow-hidden">
|
||
<!-- 发生额 -->
|
||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-4">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-10 font-semibold">发生额（正价）</span>
|
||
<div class="text-right">
|
||
<span class="text-xl font-bold text-gray-13">¥823,456</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优惠项目 - 缩进表示从属关系 -->
|
||
<div class="bg-white px-4 py-3 border-l-4 border-orange-300 ml-4 mr-4 my-3 rounded-r-lg">
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-sm text-gray-9">团购优惠</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-error">-¥56,200</span>
|
||
<div class="compare-data compare-down text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-5.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-sm text-gray-9">手动调整 + 大客户优惠</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-error">-¥34,800</span>
|
||
<div class="compare-data compare-up text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+3.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<span class="text-sm text-gray-9">赠送卡抵扣</span>
|
||
<p class="text-xs text-gray-5 mt-0.5">台桌卡+酒水卡+抵用券</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-error">-¥22,336</span>
|
||
<div class="compare-data compare-up text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.6%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<span class="text-sm text-gray-9">其他优惠</span>
|
||
<p class="text-xs text-gray-5 mt-0.5">免单+抹零</p>
|
||
</div>
|
||
<span class="text-sm font-semibold text-gray-5">-¥0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成交/确认收入 -->
|
||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-4 border-t-2 border-green-200">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-10 font-semibold">成交/确认收入</span>
|
||
<div class="text-right">
|
||
<span class="text-xl font-bold text-success">¥710,120</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.7%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支付方式构成 - 整合到结构内 -->
|
||
<div class="bg-green-50/50 px-4 py-3 border-l-4 border-green-300 ml-4 mr-4 mb-4 rounded-r-lg">
|
||
<p class="text-xs text-gray-7 mb-2">由以下支付方式构成</p>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-9">储值卡结算冲销</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-gray-11">¥238,200</span>
|
||
<div class="compare-data compare-up text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+11.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-9">现金/线上支付</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-gray-11">¥345,800</span>
|
||
<div class="compare-data compare-up text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+7.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<span class="text-sm text-gray-9">团购核销确认收入</span>
|
||
<p class="text-xs text-gray-5 mt-0.5">团购成交价</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-semibold text-gray-11">¥126,120</span>
|
||
<div class="compare-data compare-up text-[12px]" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+5.3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收入结构 -->
|
||
<div>
|
||
<p class="card-section-title">收入结构</p>
|
||
<div class="bg-gray-50 rounded-xl overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5 bg-gray-100 text-sm text-gray-8">
|
||
<span>项目</span>
|
||
<span class="text-right">发生额</span>
|
||
<span class="text-right">优惠</span>
|
||
<span class="text-right">入账</span>
|
||
</div>
|
||
<!-- 表体 -->
|
||
<div class="divide-y divide-gray-100">
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3">
|
||
<span class="text-sm text-gray-11 font-semibold">开台与包厢</span>
|
||
<span class="text-right text-base text-gray-10">¥358,600</span>
|
||
<span class="text-right text-base text-error">-¥45,200</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥313,400</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+9.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50">
|
||
<span class="text-gray-7 pl-4">A区</span>
|
||
<span class="text-right text-gray-7">¥118,200</span>
|
||
<span class="text-right text-gray-7">-¥11,600</span>
|
||
<div class="text-right">
|
||
<span class="text-gray-7">¥106,600</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50">
|
||
<span class="text-gray-7 pl-4">B区</span>
|
||
<span class="text-right text-gray-7">¥95,800</span>
|
||
<span class="text-right text-gray-7">-¥11,200</span>
|
||
<div class="text-right">
|
||
<span class="text-gray-7">¥84,600</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50">
|
||
<span class="text-gray-7 pl-4">C区</span>
|
||
<span class="text-right text-gray-7">¥72,600</span>
|
||
<span class="text-right text-gray-7">-¥11,100</span>
|
||
<div class="text-right">
|
||
<span class="text-gray-7">¥61,500</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50">
|
||
<span class="text-gray-7 pl-4">团建区</span>
|
||
<span class="text-right text-gray-7">¥48,200</span>
|
||
<span class="text-right text-gray-7">-¥6,800</span>
|
||
<div class="text-right">
|
||
<span class="text-gray-7">¥41,400</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+5.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50">
|
||
<span class="text-gray-7 pl-4">麻将区</span>
|
||
<span class="text-right text-gray-7">¥23,800</span>
|
||
<span class="text-right text-gray-7">-¥4,500</span>
|
||
<div class="text-right">
|
||
<span class="text-gray-7">¥19,300</span>
|
||
<div class="compare-data compare-down text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-2.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3">
|
||
<div>
|
||
<span class="text-sm text-gray-11 font-semibold">助教</span>
|
||
<p class="text-xs text-gray-6">基础课</p>
|
||
</div>
|
||
<span class="text-right text-base text-gray-10">¥232,500</span>
|
||
<span class="text-right text-base text-gray-5">-</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥232,500</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+15.3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3">
|
||
<div>
|
||
<span class="text-sm text-gray-11 font-semibold">助教</span>
|
||
<p class="text-xs text-gray-6">激励课</p>
|
||
</div>
|
||
<span class="text-right text-base text-gray-10">¥112,800</span>
|
||
<span class="text-right text-base text-gray-5">-</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥112,800</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3">
|
||
<span class="text-sm text-gray-11 font-semibold">食品酒水</span>
|
||
<span class="text-right text-base text-gray-10">¥119,556</span>
|
||
<span class="text-right text-base text-error">-¥68,136</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥51,420</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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-primary"></span>
|
||
<h2 class="text-base font-semibold text-gray-13">现金流</h2>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center bg-gray-50 rounded-xl px-4 py-3">
|
||
<div>
|
||
<p class="text-sm text-gray-10 font-semibold">消费现金流入</p>
|
||
<p class="text-xs text-gray-6 mt-0.5">现金+线上+平台回款−退款</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-lg font-bold text-gray-13">¥471,920</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-gray-50 rounded-xl px-4 py-3">
|
||
<div>
|
||
<p class="text-sm text-gray-10 font-semibold">充值到账</p>
|
||
<p class="text-xs text-gray-6 mt-0.5">首充/续费</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-lg font-bold text-gray-13">¥352,800</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+18.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center bg-primary/5 rounded-xl px-4 py-4">
|
||
<span class="text-base text-gray-10 font-semibold">现金流入合计</span>
|
||
<div class="text-right">
|
||
<span class="text-xl font-bold text-primary">¥824,720</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+10.2%</span>
|
||
</div>
|
||
</div>
|
||
</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-base font-semibold text-gray-13">支出结构</h2>
|
||
</div>
|
||
|
||
<!-- 助教相关 - 2*2排布 -->
|
||
<p class="text-sm font-semibold text-gray-11 mb-2 flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-orange-400 mr-2"></span>助教相关</p>
|
||
<div class="grid grid-cols-2 gap-2 mb-6">
|
||
<div class="bg-orange-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">基础分成</p>
|
||
<p class="text-lg font-bold text-gray-13">¥116,250</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-orange-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">附加分成</p>
|
||
<p class="text-lg font-bold text-gray-13">¥23,840</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+5.6%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-orange-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">充值提成</p>
|
||
<p class="text-lg font-bold text-gray-13">¥12,640</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-orange-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">额外奖金</p>
|
||
<p class="text-lg font-bold text-gray-13">¥11,500</p>
|
||
<div class="compare-data compare-down text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-3.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 进货与运营 -->
|
||
<p class="text-sm font-semibold text-gray-11 mb-2 flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-cyan-400 mr-2"></span>进货与运营</p>
|
||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||
<div class="bg-cyan-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">食品饮料</p>
|
||
<p class="text-lg font-bold text-gray-13">¥108,200</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+4.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-cyan-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">耗材</p>
|
||
<p class="text-lg font-bold text-gray-13">¥21,850</p>
|
||
<div class="compare-data compare-down text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-2.1%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-cyan-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">报销</p>
|
||
<p class="text-lg font-bold text-gray-13">¥10,920</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+6.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 固定支出 - 2*2排布 -->
|
||
<p class="text-sm font-semibold text-gray-11 mb-2 flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-purple-400 mr-2"></span>固定支出</p>
|
||
<div class="grid grid-cols-2 gap-2 mb-6">
|
||
<div class="bg-purple-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">房租</p>
|
||
<p class="text-lg font-bold text-gray-13">¥125,000</p>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-purple-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">水电</p>
|
||
<p class="text-lg font-bold text-gray-13">¥24,200</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+3.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-purple-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">物业</p>
|
||
<p class="text-lg font-bold text-gray-13">¥11,500</p>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-purple-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">人员工资</p>
|
||
<p class="text-lg font-bold text-gray-13">¥112,000</p>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 平台服务费 -->
|
||
<p class="text-sm font-semibold text-gray-11 mb-2 flex items-center"><span class="w-1.5 h-1.5 rounded-full bg-indigo-400 mr-2"></span>平台服务费</p>
|
||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||
<div class="bg-indigo-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">汇来米</p>
|
||
<p class="text-lg font-bold text-gray-13">¥10,680</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+1.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-indigo-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">美团</p>
|
||
<p class="text-lg font-bold text-gray-13">¥11,240</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+2.8%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-indigo-50 rounded-lg px-3 py-4 text-center">
|
||
<p class="text-sm text-gray-8 mb-1">抖音</p>
|
||
<p class="text-lg font-bold text-gray-13">¥10,580</p>
|
||
<div class="compare-data compare-up text-[12px] justify-center" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+3.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支出合计 -->
|
||
<div class="bg-error/10 rounded-xl px-4 py-4 flex justify-between items-center border border-error/20">
|
||
<span class="text-base font-semibold text-gray-10">支出合计</span>
|
||
<div class="text-right">
|
||
<span class="text-xl font-bold text-error">¥600,400</span>
|
||
<div class="compare-data compare-up justify-end" data-compare>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+2.1%</span>
|
||
</div>
|
||
</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-base font-semibold text-gray-13">助教收支分析</h2>
|
||
</div>
|
||
|
||
<!-- 基础课 -->
|
||
<div class="mb-4">
|
||
<p class="card-section-title">助教 <span class="text-xs text-gray-7 font-normal">（基础课）</span></p>
|
||
<div class="bg-gray-50 rounded-xl overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5 bg-gray-100 text-sm text-gray-8">
|
||
<span>级别</span>
|
||
<span class="text-right">客户支付</span>
|
||
<span class="text-right">球房抽成</span>
|
||
<span class="text-right">小时平均</span>
|
||
</div>
|
||
<!-- 合计 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3 bg-primary/5">
|
||
<span class="text-sm text-gray-11 font-semibold">合计</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥232,500</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+15.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-success font-semibold">¥116,250</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+15.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥25/h</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+4.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 明细 -->
|
||
<div class="divide-y divide-gray-100">
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5">
|
||
<span class="text-sm text-gray-9">初级</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥68,600</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥34,300</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+12.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-7">¥20/h</span>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-end" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5">
|
||
<span class="text-sm text-gray-9">中级</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥82,400</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+18.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥41,200</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+18.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-7">¥25/h</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.7%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5">
|
||
<span class="text-sm text-gray-9">高级</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥57,800</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+14.6%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥28,900</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+14.6%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-7">¥30/h</span>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-end" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5">
|
||
<span class="text-sm text-gray-9">星级</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥23,700</span>
|
||
<div class="compare-data compare-down text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-3.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥11,850</span>
|
||
<div class="compare-data compare-down text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l8-8h-5V4H9v8H4z"/></svg>
|
||
<span>-3.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-7">¥35/h</span>
|
||
<div class="compare-data text-[12px] text-gray-5 justify-end" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 激励课 -->
|
||
<div>
|
||
<p class="card-section-title">助教 <span class="text-xs text-gray-7 font-normal">（激励课）</span></p>
|
||
<div class="bg-amber-50 rounded-xl overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2.5 bg-amber-100/50 text-sm text-gray-8">
|
||
<span>级别</span>
|
||
<span class="text-right">客户支付</span>
|
||
<span class="text-right">球房抽成</span>
|
||
<span class="text-right">小时平均</span>
|
||
</div>
|
||
<!-- 合计 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-3">
|
||
<span class="text-sm text-gray-11 font-semibold">合计</span>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-11 font-semibold">¥112,800</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-success font-semibold">¥33,840</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+8.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base text-gray-9">¥15/h</span>
|
||
<div class="compare-data compare-up text-[12px] justify-end" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+2.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示弹窗遮罩 -->
|
||
<div id="tipOverlay" class="tip-overlay" onclick="closeTip()" ontouchstart="closeTip()" ontouchmove="closeTip()"></div>
|
||
|
||
<!-- 提示弹窗 -->
|
||
<div id="tipToast" class="tip-toast">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<span class="text-sm text-primary font-medium" id="tipTitle">说明</span>
|
||
<button onclick="closeTip()" class="text-gray-5 hover:text-gray-7">
|
||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="tip-toast-content" id="tipContent"></div>
|
||
</div>
|
||
|
||
<!-- 悬浮助手按钮 -->
|
||
<script src="../js/ai-float-btn.js"></script>
|
||
|
||
<!-- 通用底部导航 -->
|
||
<script src="../js/bottom-nav.js"></script>
|
||
|
||
<script>
|
||
let currentFilter = null;
|
||
let compareEnabled = false;
|
||
|
||
// 提示内容配置
|
||
const tipContents = {
|
||
occurrence: {
|
||
title: '发生额/正价',
|
||
content: `按台桌/包厢/助教/酒水的"正价"计算出的理论销售额，反映经营规模与业务量。
|
||
|
||
计算方式 = 各收入项目按正价 × 数量/时长汇总计算。
|
||
|
||
<strong>不是最终收到了多少钱。</strong>`
|
||
},
|
||
discount: {
|
||
title: '总优惠',
|
||
content: `本期因团购差价、大客户折扣、赠送卡抵扣、免单/抹零等导致的让利总额，用于解释"发生额"与"成交/确认收入"的差异。
|
||
|
||
计算方式 = 发生额 − 成交/确认收入
|
||
或 = 团购优惠 + 大客户优惠 + 赠送抵扣 + 其他优惠/免单/抹零（汇总）`
|
||
},
|
||
confirmed: {
|
||
title: '成交/确认收入',
|
||
content: `扣除各种优惠后的成交金额，<strong>按记账规则统计的营业收入</strong>。
|
||
|
||
计算方式 = 发生额 − 团购优惠 − 大客户优惠 − 赠送抵扣（及其他优惠）。
|
||
|
||
<strong>不含充值营业收入</strong> 充值是预收/负债，但会影响现金流。`
|
||
},
|
||
cashIn: {
|
||
title: '实收/现金流入',
|
||
content: `统计真实进账的资金，包括现金 + 线上支付 + 平台回款。
|
||
|
||
计算方式 = 消费实收 + 平台团购 - 各类退款/冲正。
|
||
|
||
<strong>此为现金口径，不等于营业收入。</strong>区别为：充值属于预收款的现金流入，属于预存行为，球房债务。`
|
||
},
|
||
cashOut: {
|
||
title: '现金支出',
|
||
content: `本期所有支出项目的合计。
|
||
|
||
计算方式 = 房租 + 水电 + 进货成本支出 + 耗材 + 报销 + 助教分成 + 固定人员工资 + 平台服务费 + 其他费用`
|
||
},
|
||
balance: {
|
||
title: '现金结余',
|
||
content: `本期营业收入扣除全部成本后的利润，用于衡量经营质量。
|
||
|
||
计算方式= 实收/现金流入 − 总支出。`
|
||
},
|
||
rechargeActual: {
|
||
title: '储值卡充值实收',
|
||
content: `本期储值卡充值到账的新增金额。
|
||
按照首充，续费，合计路径进行统计。
|
||
|
||
计算方式 = 本期储值卡充值订单的实收金额。
|
||
不含赠送金额`
|
||
},
|
||
allCardBalance: {
|
||
title: '全类别会员卡余额合计',
|
||
content: `截至本期末，顾客充值后尚未消费的储值余额，包括赠送的台费卡酒水卡等类别，用于判断未来可转化的消费规模。
|
||
|
||
计算方式 = 各类会员卡往期余额 + 本期充值到账与赠送到账 − 本期卡消耗 ± 调整（退款/冲正/手工修正）`
|
||
},
|
||
recharge: {
|
||
title: '储值卡充值',
|
||
content: `本期储值卡充值到账的新增金额。`
|
||
},
|
||
consume: {
|
||
title: '储值卡消耗',
|
||
content: `余额卡在查询周期内消耗金额。
|
||
|
||
计算方式 = 本期消耗 ± 调整`
|
||
},
|
||
cardBalance: {
|
||
title: '储值卡总余额',
|
||
content: `截至本期末，余额卡可用的余额。
|
||
|
||
计算方式 = 期初余额卡余额 + 本期新增 − 本期消耗 ± 调整`
|
||
},
|
||
giftNew: {
|
||
title: '赠送卡新增合计',
|
||
content: `本期各类型赠送卡的新增金额。`
|
||
},
|
||
giftConsume: {
|
||
title: '赠送卡消费合计',
|
||
content: `本期各类型赠送卡在查询周期内消耗金额。
|
||
|
||
计算方式 = 本期消耗 ± 调整`
|
||
},
|
||
giftBalance: {
|
||
title: '赠送卡总余额合计',
|
||
content: `截至本期末，各类型赠送卡可用的余额。
|
||
|
||
计算方式 = 期初余额 + 本期新增 − 本期消耗 ± 调整`
|
||
}
|
||
};
|
||
|
||
function positionDropdown(dropdownEl) {
|
||
const bar = document.getElementById('filterBar');
|
||
if (!bar || !dropdownEl) return;
|
||
const rect = bar.getBoundingClientRect();
|
||
dropdownEl.style.top = `${rect.bottom}px`;
|
||
}
|
||
|
||
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') {
|
||
positionDropdown(timeDropdown);
|
||
timeDropdown.classList.add('show');
|
||
} else if (type === 'area') {
|
||
positionDropdown(areaDropdown);
|
||
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();
|
||
}
|
||
|
||
// 对比开关
|
||
function toggleCompare() {
|
||
compareEnabled = !compareEnabled;
|
||
const toggle = document.getElementById('compareToggle');
|
||
const compareDatas = document.querySelectorAll('[data-compare]');
|
||
|
||
if (compareEnabled) {
|
||
toggle.classList.add('active');
|
||
compareDatas.forEach(el => el.classList.add('show'));
|
||
} else {
|
||
toggle.classList.remove('active');
|
||
compareDatas.forEach(el => el.classList.remove('show'));
|
||
}
|
||
}
|
||
|
||
// 提示弹窗
|
||
function showTip(type) {
|
||
const toast = document.getElementById('tipToast');
|
||
const overlay = document.getElementById('tipOverlay');
|
||
const titleEl = document.getElementById('tipTitle');
|
||
const contentEl = document.getElementById('tipContent');
|
||
|
||
const tip = tipContents[type];
|
||
if (!tip) return;
|
||
|
||
titleEl.textContent = tip.title;
|
||
contentEl.innerHTML = tip.content;
|
||
|
||
overlay.classList.add('show');
|
||
toast.classList.add('show');
|
||
}
|
||
|
||
function closeTip() {
|
||
const toast = document.getElementById('tipToast');
|
||
const overlay = document.getElementById('tipOverlay');
|
||
toast.classList.remove('show');
|
||
overlay.classList.remove('show');
|
||
}
|
||
|
||
// 滚动时：下滑隐藏筛选栏，上滑显示
|
||
(function initFilterBarScrollBehavior() {
|
||
const bar = document.getElementById('filterBar');
|
||
if (!bar) return;
|
||
|
||
const TRIGGER_DISTANCE_DOWN = 24;
|
||
const TRIGGER_DISTANCE_UP = 12;
|
||
const JITTER_THRESHOLD = 2;
|
||
|
||
let lastY = window.scrollY || 0;
|
||
let lastDir = null;
|
||
let ticking = false;
|
||
let acc = 0;
|
||
let lockedDir = null;
|
||
|
||
bar.classList.add('filter-bar-enter');
|
||
window.requestAnimationFrame(() => {
|
||
bar.classList.remove('filter-bar-enter');
|
||
});
|
||
|
||
function setVisible(visible) {
|
||
if (visible) {
|
||
bar.classList.remove('filter-bar-hidden');
|
||
} else {
|
||
if (!bar.classList.contains('filter-bar-hidden')) closeAllFilters();
|
||
bar.classList.add('filter-bar-hidden');
|
||
}
|
||
}
|
||
|
||
function resetGesture(y) {
|
||
lastY = y;
|
||
lastDir = null;
|
||
acc = 0;
|
||
lockedDir = null;
|
||
}
|
||
|
||
function onScrollFrame() {
|
||
const y = window.scrollY || 0;
|
||
|
||
if (y <= 8) {
|
||
setVisible(true);
|
||
resetGesture(y);
|
||
return;
|
||
}
|
||
|
||
const delta = y - lastY;
|
||
if (Math.abs(delta) <= JITTER_THRESHOLD) {
|
||
lastY = y;
|
||
return;
|
||
}
|
||
|
||
const dir = delta > 0 ? 'down' : 'up';
|
||
if (delta !== 0) {
|
||
if (lastDir === null) {
|
||
lastDir = dir;
|
||
acc = 0;
|
||
lockedDir = null;
|
||
} else if (dir !== lastDir) {
|
||
lastDir = dir;
|
||
acc = 0;
|
||
lockedDir = null;
|
||
}
|
||
}
|
||
|
||
lastY = y;
|
||
|
||
if (lockedDir === dir) return;
|
||
acc += Math.abs(delta);
|
||
const threshold = dir === 'up' ? TRIGGER_DISTANCE_UP : TRIGGER_DISTANCE_DOWN;
|
||
if (acc < threshold) return;
|
||
|
||
setVisible(dir === 'up');
|
||
lockedDir = dir;
|
||
acc = 0;
|
||
}
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (ticking) return;
|
||
ticking = true;
|
||
window.requestAnimationFrame(() => {
|
||
onScrollFrame();
|
||
ticking = false;
|
||
});
|
||
}, { passive: true });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|