2359 lines
118 KiB
HTML
2359 lines
118 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: '#333333',
|
||
'primary-light': '#f5f5f5',
|
||
success: '#2d2d2d',
|
||
warning: '#666666',
|
||
error: '#444444',
|
||
'gray-1': '#fafafa',
|
||
'gray-2': '#f5f5f5',
|
||
'gray-3': '#eeeeee',
|
||
'gray-4': '#e0e0e0',
|
||
'gray-5': '#bdbdbd',
|
||
'gray-6': '#9e9e9e',
|
||
'gray-7': '#757575',
|
||
'gray-8': '#616161',
|
||
'gray-9': '#424242',
|
||
'gray-10': '#333333',
|
||
'gray-11': '#212121',
|
||
'gray-12': '#1a1a1a',
|
||
'gray-13': '#111111',
|
||
},
|
||
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: visible;
|
||
}
|
||
/* 筛选按钮隐藏时的样式由JS控制 */
|
||
.summary-gradient {
|
||
background: #3a3a3a;
|
||
}
|
||
/* 经营一览头部加深 */
|
||
.summary-header {
|
||
background: #1a1a1a;
|
||
padding: 14px 16px;
|
||
}
|
||
/* 经营一览正文 */
|
||
.summary-content {
|
||
padding: 16px;
|
||
}
|
||
/* 对比开关样式 */
|
||
.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-data.show.justify-end {
|
||
justify-content: flex-end;
|
||
}
|
||
.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; }
|
||
|
||
/* ========== 筛选栏目录按钮样式 ========== */
|
||
.filter-toc-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #0052d9 0%, #5b9cf8 100%);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.filter-toc-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
.filter-toc-btn svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
color: white;
|
||
}
|
||
/* 筛选按钮和环比开关过渡效果 */
|
||
#timeBtn, #areaBtn, #filterBar .flex.items-center.gap-2.px-2 {
|
||
transition: opacity 0.2s ease-out;
|
||
}
|
||
/* 目录下拉面板 */
|
||
.toc-dropdown {
|
||
display: none;
|
||
position: fixed;
|
||
top: 108px; /* 44px(tab导航) + 筛选栏高度 */
|
||
left: 16px;
|
||
right: 16px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
z-index: 1001;
|
||
overflow: hidden;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
.toc-dropdown.show {
|
||
display: block;
|
||
}
|
||
.toc-dropdown-header {
|
||
background: linear-gradient(135deg, #f8faff 0%, #ecf2fe 100%);
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid #e7e7e7;
|
||
}
|
||
.toc-dropdown-header h4 {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #393939;
|
||
margin: 0;
|
||
}
|
||
.toc-dropdown-list {
|
||
padding: 8px 0;
|
||
}
|
||
.toc-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.toc-item:hover {
|
||
background: #f8faff;
|
||
}
|
||
.toc-item.active {
|
||
background: #ecf2fe;
|
||
}
|
||
.toc-item-emoji {
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
.toc-item-text {
|
||
font-size: 14px;
|
||
color: #4b4b4b;
|
||
}
|
||
.toc-item.active .toc-item-text {
|
||
color: #0052d9;
|
||
font-weight: 500;
|
||
}
|
||
/* 目录遮罩 */
|
||
.toc-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 1000;
|
||
display: none;
|
||
}
|
||
.toc-overlay.show {
|
||
display: block;
|
||
}
|
||
|
||
/* ========== 卡片头样式（简洁版-铺满头部） ========== */
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: -16px -16px 16px -16px;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(to bottom, #e8e8e8, #d8d8d8);
|
||
border-bottom: 1px solid #c8c8c8;
|
||
}
|
||
.card-header-emoji {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.card-header-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.card-header-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #222222;
|
||
margin-bottom: 2px;
|
||
letter-spacing: 0;
|
||
}
|
||
.card-header-desc {
|
||
font-size: 11px;
|
||
color: #666666;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* 卡片底部锯齿撕开样式（拟物风格） */
|
||
.card-section {
|
||
position: relative;
|
||
margin-bottom: 42px;
|
||
padding-bottom: 28px !important;
|
||
border-radius: 8px;
|
||
overflow: visible;
|
||
border-bottom: none !important;
|
||
}
|
||
.card-section::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 14px;
|
||
background:
|
||
linear-gradient(135deg, white 40%, transparent 40%),
|
||
linear-gradient(225deg, white 40%, transparent 40%);
|
||
background-size: 16px 14px;
|
||
background-color: transparent;
|
||
filter: drop-shadow(0 4px 3px rgba(0,0,0,0.10));
|
||
clip-path: inset(-1px -10px -10px -10px);
|
||
}
|
||
|
||
/* ========== 吸顶板块头样式（新版 - 与筛选框一体） ========== */
|
||
.sticky-section-header {
|
||
position: fixed;
|
||
top: 58px; /* 44px(tab导航) + 8px(py-2) + 6px(p-1.5) */
|
||
left: 70px; /* 16px(px-4) + 6px(p-1.5) + 40px(目录按钮) + 8px(gap) */
|
||
right: 22px; /* 16px(px-4) + 6px(p-1.5) */
|
||
height: 40px; /* 和筛选按钮高度一致 */
|
||
z-index: 15;
|
||
background: white;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 0 6px 6px 0;
|
||
/* 简单的滑入滑出效果 */
|
||
transform: scaleX(0);
|
||
transform-origin: left center;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: transform 0.25s ease-out, opacity 0.2s ease-out;
|
||
}
|
||
.sticky-section-header.show {
|
||
transform: scaleX(1);
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.sticky-section-emoji {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.sticky-section-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.sticky-section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
.sticky-section-desc {
|
||
font-size: 11px;
|
||
color: #999;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
/* 吸顶头右侧筛选条件显示 */
|
||
.sticky-section-filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.sticky-filter-tag {
|
||
font-size: 11px;
|
||
color: #5e5e5e;
|
||
background: #f3f3f3;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* AI洞察二级内容样式 */
|
||
.ai-insight-section {
|
||
margin: 16px -16px -16px -16px; /* 负边距撑满整个宽度和底部 */
|
||
padding: 16px;
|
||
background: #505050;
|
||
border-top: 1px dashed rgba(255,255,255,0.25);
|
||
}
|
||
.ai-insight-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.ai-insight-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
.ai-insight-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-1 min-h-screen">
|
||
<!-- 顶部导航 Tab -->
|
||
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||
<div class="flex border-b border-gray-2">
|
||
<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-[44px] z-10 px-4 py-2 border-b border-gray-2">
|
||
<div class="bg-white rounded-lg p-1.5 flex gap-2 border border-gray-200">
|
||
<!-- 目录按钮 -->
|
||
<div id="tocBtn" class="filter-toc-btn" onclick="toggleToc()">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="12" x2="15" y2="12"></line>
|
||
<line x1="3" y1="18" x2="18" y2="18"></line>
|
||
</svg>
|
||
</div>
|
||
<button id="timeBtn" onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-100 rounded text-sm text-gray-700 flex items-center justify-center gap-1 border border-gray-200">
|
||
<span id="timeLabel">本月</span>
|
||
<svg class="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
<button id="areaBtn" onclick="toggleFilter('area')" class="flex-1 px-3 py-2 bg-gray-50 rounded text-sm text-gray-700 flex items-center justify-center gap-1 border border-gray-200">
|
||
<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('本周')">
|
||
<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('最近6个月不含本月')">
|
||
<span>最近6个月不含本月</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>
|
||
|
||
<!-- 目录遮罩 -->
|
||
<div id="tocOverlay" class="toc-overlay" onclick="closeToc()"></div>
|
||
|
||
<!-- 目录下拉面板 -->
|
||
<div id="tocDropdown" class="toc-dropdown">
|
||
<div class="toc-dropdown-header">
|
||
<h4>📊 财务看板导航</h4>
|
||
</div>
|
||
<div class="toc-dropdown-list">
|
||
<div class="toc-item active" onclick="scrollToSection('section-overview')">
|
||
<span class="toc-item-emoji">📈</span>
|
||
<span class="toc-item-text">经营一览</span>
|
||
</div>
|
||
<div class="toc-item" onclick="scrollToSection('section-recharge')">
|
||
<span class="toc-item-emoji">💳</span>
|
||
<span class="toc-item-text">预收资产</span>
|
||
</div>
|
||
<div class="toc-item" onclick="scrollToSection('section-revenue')">
|
||
<span class="toc-item-emoji">💰</span>
|
||
<span class="toc-item-text">【记账】应计收入确认</span>
|
||
</div>
|
||
<div class="toc-item" onclick="scrollToSection('section-cashflow')">
|
||
<span class="toc-item-emoji">🧾</span>
|
||
<span class="toc-item-text">【现金流水】流入</span>
|
||
</div>
|
||
<div class="toc-item" onclick="scrollToSection('section-expense')">
|
||
<span class="toc-item-emoji">📤</span>
|
||
<span class="toc-item-text">【现金流水】流出</span>
|
||
</div>
|
||
<div class="toc-item" onclick="scrollToSection('section-coach')">
|
||
<span class="toc-item-emoji">🎱</span>
|
||
<span class="toc-item-text">助教分析</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 吸顶板块头（新版） -->
|
||
<div id="stickyHeader" class="sticky-section-header">
|
||
<span id="stickyEmoji" class="sticky-section-emoji">📈</span>
|
||
<div class="sticky-section-content">
|
||
<div id="stickyTitle" class="sticky-section-title"></div>
|
||
<div id="stickyDesc" class="sticky-section-desc"></div>
|
||
</div>
|
||
<div id="stickyFilters" class="sticky-section-filters"></div>
|
||
</div>
|
||
|
||
<!-- 经营状况一览 (黑色Banner) -->
|
||
<div id="section-overview" class="summary-gradient mx-4 mt-4 mb-8 rounded-lg text-white overflow-hidden" data-section-title="经营一览" data-section-desc="快速了解收入与现金流的整体健康度" data-section-emoji="📈" data-section-index="1">
|
||
<!-- 板块头（加深） -->
|
||
<div class="summary-header flex items-start gap-3">
|
||
<span class="text-xl">📈</span>
|
||
<div>
|
||
<h3 class="text-base font-semibold text-white">经营一览</h3>
|
||
<p class="text-xs text-white/50 mt-0.5">快速了解收入与现金流的整体健康度</p>
|
||
</div>
|
||
</div>
|
||
<!-- 板块正文 -->
|
||
<div class="summary-content">
|
||
|
||
<!-- 收入概览 -->
|
||
<div class="mb-4">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs text-white/70 font-medium">收入概览</span>
|
||
<span class="text-xs text-white/40">记账口径收入与优惠</span>
|
||
</div>
|
||
<!-- 第一行：发生额、总优惠、优惠占比 - 上下结构 -->
|
||
<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-red-500/85">-¥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-gray-300">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-gray-100">¥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>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs text-white/70 font-medium">现金流水概览</span>
|
||
<span class="text-xs text-white/40">往期为已结算 本期为截至当前的发生额</span>
|
||
</div>
|
||
<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-gray-100">¥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-gray-300">¥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-gray-100">¥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-gray-100">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>
|
||
|
||
<!-- AI洞察（二级内容） -->
|
||
<div class="ai-insight-section">
|
||
<div class="ai-insight-header">
|
||
<div class="ai-insight-icon">
|
||
<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>
|
||
<span class="ai-insight-title">AI 智能洞察</span>
|
||
</div>
|
||
<div class="space-y-2 text-sm text-white/85">
|
||
<p><span class="text-white/50">优惠率Top：</span>团购(5.2%) / 大客户(3.1%) / 赠送卡(2.5%)</p>
|
||
<p><span class="text-white/50">差异最大：</span>酒水(+18%) / 台桌(-5%) / 包厢(+12%)</p>
|
||
<p><span class="text-white/50">建议关注：</span><span class="text-white/85 underline">充值高但消耗低</span>，会员活跃度需提升</p>
|
||
</div>
|
||
</div>
|
||
</div><!-- end summary-content -->
|
||
</div>
|
||
|
||
<!-- 指标内容 -->
|
||
<div class="p-4 space-y-4">
|
||
<!-- 充值与预收 -->
|
||
<div id="section-recharge" class="bg-white rounded-lg p-4 border border-gray-200 card-section" data-section-title="预收资产" data-section-desc="会员卡充值与余额 掌握资金沉淀 辅助会员运营策略定制" data-section-emoji="💳" data-section-index="2">
|
||
<!-- 板块头 -->
|
||
<div class="card-header">
|
||
<span class="card-header-emoji">💳</span>
|
||
<div class="card-header-content">
|
||
<h3 class="card-header-title">预收资产</h3>
|
||
<p class="card-header-desc">会员卡充值与余额 掌握资金沉淀 辅助会员运营策略定制</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 储值卡统计 -->
|
||
<div class="mb-4">
|
||
<p class="card-section-title">储值卡统计</p>
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 行1：储值卡充值实收 -->
|
||
<div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-b border-gray-100">
|
||
<div class="flex items-center">
|
||
<p class="text-sm text-gray-700 font-medium">储值卡充值实收</p>
|
||
<span class="help-icon help-icon-dark" onclick="showTip('rechargeActual')">?</span>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-lg font-bold text-gray-900">¥352,800</p>
|
||
<div class="compare-data compare-up justify-end text-[11px]" 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>+18.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 行2：首充、续费、消耗 -->
|
||
<div class="bg-white px-4 py-3 grid grid-cols-3 gap-3 border-b border-gray-100">
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center gap-0.5 mb-1">
|
||
<span class="text-xs text-gray-500">首充</span>
|
||
<span class="help-icon help-icon-dark text-[9px]" onclick="showTip('firstCharge')">?</span>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">¥188,500</span>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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>+12.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center gap-0.5 mb-1">
|
||
<span class="text-xs text-gray-500">续费</span>
|
||
<span class="help-icon help-icon-dark text-[9px]" onclick="showTip('renewCharge')">?</span>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">¥164,300</span>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.7%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="flex items-center justify-center gap-0.5 mb-1">
|
||
<span class="text-xs text-gray-500">消耗</span>
|
||
<span class="help-icon help-icon-dark text-[9px]" onclick="showTip('consume')">?</span>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">¥238,200</span>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 行3：储值卡总余额 -->
|
||
<div class="bg-gray-100 px-4 py-3 flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<p class="text-sm text-gray-700 font-medium">储值卡总余额</p>
|
||
<span class="help-icon help-icon-dark" onclick="showTip('cardBalance')">?</span>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-lg font-bold text-gray-900">¥642,600</p>
|
||
<div class="compare-data compare-up justify-end text-[11px]" 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.4%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 赠送卡统计详情 -->
|
||
<div class="mb-4">
|
||
<p class="card-section-title">赠送卡统计详情</p>
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-sm text-gray-800 font-medium">
|
||
<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 border-b border-gray-100 items-center">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">新增</p>
|
||
<p class="text-[13px] text-gray-800 font-semibold">¥108,600</p>
|
||
<div class="compare-data compare-up text-[11px]" 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.8%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-500">¥43,200</span>
|
||
<div class="compare-data compare-up text-[10px] 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>+11.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-500">¥54,100</span>
|
||
<div class="compare-data compare-up text-[10px] 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 class="text-right">
|
||
<span class="text-sm text-gray-500">¥11,300</span>
|
||
<div class="compare-data compare-up text-[10px] 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-3 border-b border-gray-100 items-center">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">消费</p>
|
||
<p class="text-[13px] text-gray-800 font-semibold">¥75,800</p>
|
||
<div class="compare-data compare-up text-[11px]" 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.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-500">¥32,100</span>
|
||
<div class="compare-data compare-up text-[10px] 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.1%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-500">¥32,800</span>
|
||
<div class="compare-data compare-up text-[10px] 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.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-500">¥10,900</span>
|
||
<div class="compare-data compare-up text-[10px] 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-3 bg-gray-50 items-center">
|
||
<div>
|
||
<p class="text-sm text-gray-900 font-semibold">余额</p>
|
||
<p class="text-[13px] text-gray-900 font-bold">¥243,900</p>
|
||
<div class="compare-data compare-up text-[11px]" 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>+4.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-[13px] font-bold text-gray-900">¥118,500</span>
|
||
<div class="compare-data compare-up text-[10px] 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.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-[13px] font-bold text-gray-900">¥109,200</span>
|
||
<div class="compare-data compare-up text-[10px] 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>+3.8%</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-[13px] font-bold text-gray-900">¥16,200</span>
|
||
<div class="compare-data compare-up text-[10px] 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.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 全类别会员卡余额合计（放在最下方） -->
|
||
<div class="bg-gray-100 rounded-lg px-4 py-3 flex justify-between items-center border border-gray-200">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<p class="text-sm text-gray-700 font-medium">全类别会员卡余额合计</p>
|
||
<span class="help-icon help-icon-dark" onclick="showTip('allCardBalance')">?</span>
|
||
</div>
|
||
<span class="text-[10px] text-gray-400">仅经营参考，非财务属性</span>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xl font-bold text-gray-900">¥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 id="section-revenue" class="bg-white rounded-lg p-4 border border-gray-200 card-section" data-section-title="【记账】应计收入确认" data-section-desc="从发生额到入账收入的全流程" data-section-emoji="💰" data-section-index="3">
|
||
<!-- 板块头 -->
|
||
<div class="card-header">
|
||
<span class="card-header-emoji">💰</span>
|
||
<div class="card-header-content">
|
||
<h3 class="card-header-title">【记账】应计收入确认</h3>
|
||
<p class="card-header-desc">从发生额到入账收入的全流程</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收入结构 -->
|
||
<div class="mb-5">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-sm font-semibold text-gray-700">收入结构</span>
|
||
<span class="text-xs text-gray-400">按业务查看各项应计收入的构成</span>
|
||
</div>
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-xs text-gray-600">
|
||
<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-red-500/85">-¥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-red-500/85">-¥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-red-500/85">-¥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-red-500/85">-¥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-red-500/85">-¥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-red-500/85">-¥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-red-500/85">-¥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>
|
||
|
||
<!-- 收入确认（损益链）- UI设计 -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-sm font-semibold text-gray-700">收入确认</span>
|
||
<span class="text-xs text-gray-400">从正价到收款方式的损益链</span>
|
||
</div>
|
||
|
||
<!-- 发生额到成交收入的流程 -->
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 收入构成 标题栏 -->
|
||
<div class="bg-gray-50 px-4 py-2.5">
|
||
<span class="text-sm text-gray-700 font-semibold">项目正价</span>
|
||
<p class="text-xs text-gray-500">即标价测算</p>
|
||
</div>
|
||
<!-- 收入构成 列表（左侧竖线样式） -->
|
||
<div class="bg-white px-4 py-3 border-l-2 border-gray-300 ml-4 mr-4 my-2">
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-600">开台消费</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥358,600</span>
|
||
<div class="compare-data compare-up text-[11px]" data-compare>
|
||
<svg class="w-2 h-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
|
||
<span>+9.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-600">酒水商品</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥186,420</span>
|
||
<div class="compare-data compare-up text-[11px]" 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.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-600">包厢费用</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥165,636</span>
|
||
<div class="compare-data compare-up text-[11px]" 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="flex justify-between items-center">
|
||
<span class="text-sm text-gray-600">助教服务</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥112,800</span>
|
||
<div class="compare-data compare-up text-[11px]" 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>
|
||
</div>
|
||
</div>
|
||
<!-- 正价合计 标题栏 -->
|
||
<div class="bg-gray-100 px-4 py-3">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-sm text-gray-700 font-semibold">发生额</span>
|
||
<p class="text-xs text-gray-500">即上列正价合计</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-lg font-semibold text-gray-900">¥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-2 border-gray-300 ml-4 mr-4 my-2">
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-sm text-gray-600">团购优惠</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-red-500/85">-¥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-600">手动调整 + 大客户优惠</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-red-500/85">-¥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-600">赠送卡抵扣</span>
|
||
<p class="text-xs text-gray-400 mt-0.5">台桌卡+酒水卡+抵用券</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-red-500/85">-¥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-600">其他优惠</span>
|
||
<p class="text-xs text-gray-400 mt-0.5">免单+抹零</p>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-400">-¥0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成交/确认收入 标题栏 -->
|
||
<div class="bg-gray-100 px-4 py-3">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-sm text-gray-700 font-semibold">成交/确认收入</span>
|
||
<p class="text-xs text-gray-500 leading-relaxed">即发生额扣除以上优惠抵扣后的金额<br/>此金额收款渠道分布如下</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-lg font-bold text-gray-900">¥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-white px-4 py-3 border-l-2 border-gray-300 ml-4 mr-4 mb-3">
|
||
<p class="text-xs text-gray-500 mb-2">收款渠道明细</p>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-gray-600">储值卡结算冲销</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥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-600">现金/线上支付</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥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-600">团购核销确认收入</span>
|
||
<p class="text-xs text-gray-400 mt-0.5">团购成交价</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-gray-700">¥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>
|
||
|
||
<!-- 现金流 - 独立卡片 -->
|
||
<div id="section-cashflow" class="bg-white rounded-lg p-4 border border-gray-200 card-section" data-section-title="【现金流水】流入" data-section-desc="实际到账的资金来源明细" data-section-emoji="🧾" data-section-index="4">
|
||
<!-- 板块头 -->
|
||
<div class="card-header">
|
||
<span class="card-header-emoji">🧾</span>
|
||
<div class="card-header-content">
|
||
<h3 class="card-header-title">【现金流水】流入</h3>
|
||
<p class="card-header-desc">实际到账的资金来源明细</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<!-- 消费收入拆分 -->
|
||
<p class="text-xs text-gray-500 font-medium px-1">消费收入</p>
|
||
<div class="flex justify-between items-center border-b border-gray-100 px-2 py-2">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">纸币现金</p>
|
||
<p class="text-xs text-gray-400 mt-0.5">柜台现金收款</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base font-semibold text-gray-900">¥85,600</span>
|
||
<div class="compare-data compare-down text-[11px] justify-end" 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>-12.3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center border-b border-gray-100 px-2 py-2">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">线上收款</p>
|
||
<p class="text-xs text-gray-400 mt-0.5">微信/支付宝/刷卡 已扣除平台服务费</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base font-semibold text-gray-900">¥260,200</span>
|
||
<div class="compare-data compare-up text-[11px] 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.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center border-b border-gray-100 px-2 py-2">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">团购平台</p>
|
||
<p class="text-xs text-gray-400 mt-0.5">美团/抖音回款 已扣除平台服务费</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base font-semibold text-gray-900">¥126,120</span>
|
||
<div class="compare-data compare-up text-[11px] 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.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值收入 -->
|
||
<p class="text-xs text-gray-500 font-medium px-1 mt-3">充值收入</p>
|
||
<div class="flex justify-between items-center border-b border-gray-100 px-2 py-2">
|
||
<div>
|
||
<p class="text-sm text-gray-700 font-medium">会员充值到账</p>
|
||
<p class="text-xs text-gray-400 mt-0.5">首充/续费实收</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-base font-semibold text-gray-900">¥352,800</span>
|
||
<div class="compare-data compare-up text-[11px] 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>+18.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合计 -->
|
||
<div class="flex justify-between items-center bg-gray-100 rounded-lg px-4 py-3 mt-2 border-t border-gray-200">
|
||
<span class="text-sm text-gray-700 font-semibold">现金流入合计</span>
|
||
<div class="text-right">
|
||
<span class="text-lg font-bold text-gray-900">¥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 id="section-expense" class="bg-white rounded-lg p-4 border border-gray-200 card-section" data-section-title="【现金流水】流出" data-section-desc="清晰呈现各类开销与结构" data-section-emoji="📤" data-section-index="5">
|
||
<!-- 板块头 -->
|
||
<div class="card-header">
|
||
<span class="card-header-emoji">📤</span>
|
||
<div class="card-header-content">
|
||
<h3 class="card-header-title">【现金流水】流出</h3>
|
||
<p class="card-header-desc">清晰呈现各类开销与结构</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 进货与运营 -->
|
||
<p class="text-sm font-medium text-gray-700 mb-2">进货与运营</p>
|
||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">食品饮料</p>
|
||
<p class="text-base font-semibold text-gray-900">¥108,200</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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>+4.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">耗材</p>
|
||
<p class="text-base font-semibold text-gray-900">¥21,850</p>
|
||
<div class="compare-data compare-down text-[11px] justify-center" 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>-2.1%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">报销</p>
|
||
<p class="text-base font-semibold text-gray-900">¥10,920</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 固定支出 - 2*2排布 -->
|
||
<p class="text-sm font-medium text-gray-700 mb-2">固定支出</p>
|
||
<div class="grid grid-cols-2 gap-2 mb-4">
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">房租</p>
|
||
<p class="text-base font-semibold text-gray-900">¥125,000</p>
|
||
<div class="compare-data text-[11px] text-gray-400 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">水电</p>
|
||
<p class="text-base font-semibold text-gray-900">¥24,200</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.2%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">物业</p>
|
||
<p class="text-base font-semibold text-gray-900">¥11,500</p>
|
||
<div class="compare-data text-[11px] text-gray-400 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">人员工资</p>
|
||
<p class="text-base font-semibold text-gray-900">¥112,000</p>
|
||
<div class="compare-data text-[11px] text-gray-400 justify-center" data-compare>
|
||
<span>持平</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 助教薪资 - 2*2排布 -->
|
||
<p class="text-sm font-medium text-gray-700 mb-2">助教薪资</p>
|
||
<div class="grid grid-cols-2 gap-2 mb-4">
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">基础课分成</p>
|
||
<p class="text-base font-semibold text-gray-900">¥116,250</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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 class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">激励课分成</p>
|
||
<p class="text-base font-semibold text-gray-900">¥23,840</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.6%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">充值提成</p>
|
||
<p class="text-base font-semibold text-gray-900">¥12,640</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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>+12.3%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">额外奖金</p>
|
||
<p class="text-base font-semibold text-gray-900">¥11,500</p>
|
||
<div class="compare-data compare-down text-[11px] justify-center" 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>-3.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 平台服务费 -->
|
||
<p class="text-sm font-medium text-gray-700 mb-1">平台服务费</p>
|
||
<p class="text-xs text-gray-400 mb-2">服务费在流水流入时，平台已经扣除。不产生支出流水。</p>
|
||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">汇来米</p>
|
||
<p class="text-base font-semibold text-gray-900">¥10,680</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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>+1.5%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">美团</p>
|
||
<p class="text-base font-semibold text-gray-900">¥11,240</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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>+2.8%</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center">
|
||
<p class="text-xs text-gray-500 mb-1">抖音</p>
|
||
<p class="text-base font-semibold text-gray-900">¥10,580</p>
|
||
<div class="compare-data compare-up text-[11px] justify-center" 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.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 支出合计 -->
|
||
<div class="bg-gray-100 rounded-lg px-4 py-3 flex justify-between items-center border-t border-gray-200">
|
||
<span class="text-sm font-semibold text-gray-700">支出合计</span>
|
||
<div class="text-right">
|
||
<span class="text-lg font-bold text-gray-900">¥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 id="section-coach" class="bg-white rounded-lg p-4 border border-gray-200 card-section" data-section-title="助教分析" data-section-desc="全部助教服务收入与分成的平均值，用以评估球房分成效益" data-section-emoji="🎱" data-section-index="6">
|
||
<!-- 板块头 -->
|
||
<div class="card-header">
|
||
<span class="card-header-emoji">🎱</span>
|
||
<div class="card-header-content">
|
||
<h3 class="card-header-title">助教分析</h3>
|
||
<p class="card-header-desc">全部助教服务收入与分成的平均值，用以评估球房分成效益</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基础课 -->
|
||
<div class="mb-4">
|
||
<p class="card-section-title">助教 <span class="text-xs text-gray-500 font-normal">（基础课）</span></p>
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-xs text-gray-600">
|
||
<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-2 bg-gray-50 border-b border-gray-200">
|
||
<span class="text-sm text-gray-700 font-semibold">合计</span>
|
||
<div class="text-right">
|
||
<span class="text-sm text-gray-900 font-semibold">¥232,500</span>
|
||
<div class="compare-data compare-up text-[11px] 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-sm text-gray-900 font-semibold">¥116,250</span>
|
||
<div class="compare-data compare-up text-[11px] 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-sm text-gray-700">¥25/h</span>
|
||
<div class="compare-data compare-up text-[11px] 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-500 font-normal">（激励课）</span></p>
|
||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-xs text-gray-600">
|
||
<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-gray-900 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: `本期储值卡充值到账的新增金额。
|
||
按照首充，续费，合计路径进行统计。
|
||
|
||
计算方式 = 本期储值卡充值订单的实收金额。
|
||
不含赠送金额`
|
||
},
|
||
firstCharge: {
|
||
title: '首充',
|
||
content: `本期新会员首次充值的金额合计。
|
||
|
||
首充金额反映新客户获取与转化能力。`
|
||
},
|
||
renewCharge: {
|
||
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');
|
||
}
|
||
|
||
// ========== 目录导航功能 ==========
|
||
let tocOpen = false;
|
||
let currentSectionIndex = 1;
|
||
let lastScrollDirection = null;
|
||
let stickyVisible = false;
|
||
let isAnimating = false;
|
||
|
||
const sections = [
|
||
{ id: 'section-overview', index: 1 },
|
||
{ id: 'section-recharge', index: 2 },
|
||
{ id: 'section-revenue', index: 3 },
|
||
{ id: 'section-cashflow', index: 4 },
|
||
{ id: 'section-expense', index: 5 },
|
||
{ id: 'section-coach', index: 6 }
|
||
];
|
||
|
||
function toggleToc() {
|
||
tocOpen = !tocOpen;
|
||
const dropdown = document.getElementById('tocDropdown');
|
||
const overlay = document.getElementById('tocOverlay');
|
||
|
||
if (tocOpen) {
|
||
dropdown.classList.add('show');
|
||
overlay.classList.add('show');
|
||
} else {
|
||
dropdown.classList.remove('show');
|
||
overlay.classList.remove('show');
|
||
}
|
||
}
|
||
|
||
function closeToc() {
|
||
tocOpen = false;
|
||
document.getElementById('tocDropdown').classList.remove('show');
|
||
document.getElementById('tocOverlay').classList.remove('show');
|
||
}
|
||
|
||
function scrollToSection(sectionId) {
|
||
closeToc();
|
||
const section = document.getElementById(sectionId);
|
||
if (!section) return;
|
||
|
||
const headerOffset = 100; // 顶部偏移量
|
||
const elementPosition = section.getBoundingClientRect().top;
|
||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
|
||
function updateTocActiveItem(index) {
|
||
const items = document.querySelectorAll('.toc-item');
|
||
items.forEach((item, i) => {
|
||
if (i + 1 === index) {
|
||
item.classList.add('active');
|
||
} else {
|
||
item.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
function getCurrentSection() {
|
||
const scrollY = window.scrollY || window.pageYOffset;
|
||
const viewportHeight = window.innerHeight;
|
||
const triggerPoint = scrollY + 120; // 触发点在视口上方 120px 处
|
||
|
||
let currentIndex = 1;
|
||
|
||
for (let i = sections.length - 1; i >= 0; i--) {
|
||
const section = document.getElementById(sections[i].id);
|
||
if (section) {
|
||
const sectionTop = section.offsetTop;
|
||
if (triggerPoint >= sectionTop) {
|
||
currentIndex = sections[i].index;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
return currentIndex;
|
||
}
|
||
|
||
function updateStickyHeader(sectionIndex, direction) {
|
||
if (isAnimating) return;
|
||
|
||
const stickyHeader = document.getElementById('stickyHeader');
|
||
const stickyEmoji = document.getElementById('stickyEmoji');
|
||
const stickyTitle = document.getElementById('stickyTitle');
|
||
const stickyDesc = document.getElementById('stickyDesc');
|
||
const stickyFilters = document.getElementById('stickyFilters');
|
||
|
||
// 获取当前 section 的数据
|
||
const sectionEl = document.querySelector(`[data-section-index="${sectionIndex}"]`);
|
||
if (!sectionEl) return;
|
||
|
||
const title = sectionEl.dataset.sectionTitle;
|
||
const desc = sectionEl.dataset.sectionDesc;
|
||
const emoji = sectionEl.dataset.sectionEmoji || '📊';
|
||
|
||
// 更新筛选条件显示
|
||
function updateFilterTags() {
|
||
const timeLabel = document.getElementById('timeLabel')?.textContent || '本月';
|
||
const areaLabel = document.getElementById('areaLabel')?.textContent || '全部区域';
|
||
let tags = [];
|
||
|
||
// 非默认值才显示
|
||
if (timeLabel !== '本月') {
|
||
tags.push(`<span class="sticky-filter-tag">${timeLabel}</span>`);
|
||
}
|
||
if (areaLabel !== '全部区域') {
|
||
tags.push(`<span class="sticky-filter-tag">${areaLabel}</span>`);
|
||
}
|
||
|
||
stickyFilters.innerHTML = tags.join('');
|
||
}
|
||
|
||
// 滚动到顶部时隐藏
|
||
if (window.scrollY < 80) {
|
||
if (stickyVisible) {
|
||
hideStickyHeader();
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (direction === 'down' && !stickyVisible) {
|
||
// 下滑显示吸顶头
|
||
stickyEmoji.textContent = emoji;
|
||
stickyTitle.textContent = title;
|
||
stickyDesc.textContent = desc;
|
||
updateFilterTags();
|
||
showStickyHeader();
|
||
} else if (direction === 'up' && stickyVisible) {
|
||
// 上滑收起吸顶头，显示筛选
|
||
hideStickyHeader();
|
||
} else if (stickyVisible) {
|
||
// 吸顶头显示时，始终更新为当前板块内容
|
||
stickyEmoji.textContent = emoji;
|
||
stickyTitle.textContent = title;
|
||
stickyDesc.textContent = desc;
|
||
updateFilterTags();
|
||
}
|
||
}
|
||
|
||
function showStickyHeader() {
|
||
const stickyHeader = document.getElementById('stickyHeader');
|
||
const timeBtn = document.getElementById('timeBtn');
|
||
const areaBtn = document.getElementById('areaBtn');
|
||
const compareToggleWrap = document.querySelector('#filterBar .flex.items-center.gap-2.px-2');
|
||
|
||
// 隐藏筛选按钮和对比开关
|
||
if (timeBtn) { timeBtn.style.opacity = '0'; timeBtn.style.pointerEvents = 'none'; }
|
||
if (areaBtn) { areaBtn.style.opacity = '0'; areaBtn.style.pointerEvents = 'none'; }
|
||
if (compareToggleWrap) { compareToggleWrap.style.opacity = '0'; compareToggleWrap.style.pointerEvents = 'none'; }
|
||
|
||
stickyHeader.classList.add('show');
|
||
stickyVisible = true;
|
||
}
|
||
|
||
function hideStickyHeader() {
|
||
const stickyHeader = document.getElementById('stickyHeader');
|
||
const timeBtn = document.getElementById('timeBtn');
|
||
const areaBtn = document.getElementById('areaBtn');
|
||
const compareToggleWrap = document.querySelector('#filterBar .flex.items-center.gap-2.px-2');
|
||
|
||
isAnimating = true;
|
||
stickyHeader.classList.remove('show');
|
||
|
||
// 恢复筛选按钮
|
||
setTimeout(() => {
|
||
if (timeBtn) { timeBtn.style.opacity = '1'; timeBtn.style.pointerEvents = 'auto'; }
|
||
if (areaBtn) { areaBtn.style.opacity = '1'; areaBtn.style.pointerEvents = 'auto'; }
|
||
if (compareToggleWrap) { compareToggleWrap.style.opacity = '1'; compareToggleWrap.style.pointerEvents = 'auto'; }
|
||
stickyVisible = false;
|
||
isAnimating = false;
|
||
}, 250);
|
||
}
|
||
|
||
// 滚动监听 - 板块检测和吸顶
|
||
(function initSectionScrollBehavior() {
|
||
let lastY = window.scrollY || 0;
|
||
let ticking = false;
|
||
let scrollAcc = 0;
|
||
const SCROLL_THRESHOLD = 3; // 极低阈值，更灵敏的滚动触发
|
||
let prevSectionIndex = 1;
|
||
|
||
function onScrollFrame() {
|
||
const y = window.scrollY || 0;
|
||
const delta = y - lastY;
|
||
|
||
// 检测当前板块
|
||
const newIndex = getCurrentSection();
|
||
const sectionChanged = newIndex !== currentSectionIndex;
|
||
|
||
if (sectionChanged) {
|
||
prevSectionIndex = currentSectionIndex;
|
||
currentSectionIndex = newIndex;
|
||
updateTocActiveItem(currentSectionIndex);
|
||
|
||
// 板块切换时，如果吸顶头显示，立即更新内容
|
||
if (stickyVisible) {
|
||
const sectionEl = document.querySelector(`[data-section-index="${currentSectionIndex}"]`);
|
||
if (sectionEl) {
|
||
const stickyEmoji = document.getElementById('stickyEmoji');
|
||
const stickyTitle = document.getElementById('stickyTitle');
|
||
const stickyDesc = document.getElementById('stickyDesc');
|
||
stickyEmoji.textContent = sectionEl.dataset.sectionEmoji || '📊';
|
||
stickyTitle.textContent = sectionEl.dataset.sectionTitle;
|
||
stickyDesc.textContent = sectionEl.dataset.sectionDesc;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检测滚动方向和触发吸顶显示/隐藏
|
||
if (Math.abs(delta) > 5) {
|
||
const dir = delta > 0 ? 'down' : 'up';
|
||
|
||
if (dir !== lastScrollDirection) {
|
||
scrollAcc = 0;
|
||
}
|
||
|
||
scrollAcc += Math.abs(delta);
|
||
|
||
if (scrollAcc >= SCROLL_THRESHOLD) {
|
||
lastScrollDirection = dir;
|
||
updateStickyHeader(currentSectionIndex, dir);
|
||
scrollAcc = 0;
|
||
}
|
||
}
|
||
|
||
lastY = y;
|
||
}
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (ticking) return;
|
||
ticking = true;
|
||
window.requestAnimationFrame(() => {
|
||
onScrollFrame();
|
||
ticking = false;
|
||
});
|
||
}, { passive: true });
|
||
|
||
// 初始化时更新目录
|
||
updateTocActiveItem(getCurrentSection());
|
||
})();
|
||
|
||
// 滚动时：关闭弹窗，筛选按钮和对比开关隐藏/显示
|
||
(function initFilterBarScrollBehavior() {
|
||
const bar = document.getElementById('filterBar');
|
||
const timeBtn = document.getElementById('timeBtn');
|
||
const areaBtn = document.getElementById('areaBtn');
|
||
const compareToggleWrap = document.querySelector('#filterBar .flex.items-center.gap-2.px-2');
|
||
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;
|
||
|
||
// 添加过渡效果
|
||
if (timeBtn) timeBtn.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
|
||
if (areaBtn) areaBtn.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
|
||
if (compareToggleWrap) compareToggleWrap.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
|
||
|
||
function setFilterButtonsVisible(visible) {
|
||
if (visible) {
|
||
if (timeBtn) { timeBtn.style.opacity = '1'; timeBtn.style.transform = 'translateX(0)'; }
|
||
if (areaBtn) { areaBtn.style.opacity = '1'; areaBtn.style.transform = 'translateX(0)'; }
|
||
if (compareToggleWrap) { compareToggleWrap.style.opacity = '1'; compareToggleWrap.style.transform = 'translateX(0)'; }
|
||
} else {
|
||
closeAllFilters();
|
||
closeToc();
|
||
if (timeBtn) { timeBtn.style.opacity = '0'; timeBtn.style.transform = 'translateX(-10px)'; }
|
||
if (areaBtn) { areaBtn.style.opacity = '0'; areaBtn.style.transform = 'translateX(-10px)'; }
|
||
if (compareToggleWrap) { compareToggleWrap.style.opacity = '0'; compareToggleWrap.style.transform = 'translateX(-10px)'; }
|
||
}
|
||
}
|
||
|
||
function resetGesture(y) {
|
||
lastY = y;
|
||
lastDir = null;
|
||
acc = 0;
|
||
lockedDir = null;
|
||
}
|
||
|
||
function onScrollFrame() {
|
||
const y = window.scrollY || 0;
|
||
|
||
// 滚动时关闭目录弹框
|
||
if (tocOpen) closeToc();
|
||
|
||
if (y <= 8) {
|
||
setFilterButtonsVisible(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;
|
||
|
||
setFilterButtonsVisible(dir === 'up');
|
||
lockedDir = dir;
|
||
acc = 0;
|
||
}
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (ticking) return;
|
||
ticking = true;
|
||
window.requestAnimationFrame(() => {
|
||
onScrollFrame();
|
||
ticking = false;
|
||
});
|
||
}, { passive: true });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|