1792 lines
95 KiB
HTML
1792 lines
95 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>
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<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>
|
||
|
||
<!-- 悬浮助手按钮 -->
|
||
|
||
|
||
<!-- 通用底部导航 -->
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|