+
2026年二季度体重管理活动
减重排名
@@ -1124,11 +1183,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
-
@@ -1249,6 +1308,7 @@ function applyPageType(type) {
var progressCard = document.querySelector('.progress-card');
var rankCardNormal = document.getElementById('rankCardNormal');
var rankCardEmpty = document.getElementById('rankCardEmpty');
+ var rankMy = rankCardNormal ? rankCardNormal.querySelector('.rank-card__my') : null;
// 菜单项高亮
document.querySelectorAll('.type-menu__item').forEach(function(item) {
@@ -1261,12 +1321,14 @@ function applyPageType(type) {
if (progressCard) progressCard.style.display = '';
if (rankCardNormal) rankCardNormal.style.display = '';
if (rankCardEmpty) rankCardEmpty.style.display = 'none';
+ if (rankMy) rankMy.style.display = '';
} else if (type === 'personal') {
- // 已设置个人目标：隐藏排名副标题，排行榜改为缺省样式
+ // 已设置个人目标：照搬活动排行榜，但隐藏自己的排名
if (rankSubBar) rankSubBar.style.display = 'none';
if (progressCard) progressCard.style.display = '';
- if (rankCardNormal) rankCardNormal.style.display = 'none';
- if (rankCardEmpty) rankCardEmpty.style.display = '';
+ if (rankCardNormal) rankCardNormal.style.display = '';
+ if (rankCardEmpty) rankCardEmpty.style.display = 'none';
+ if (rankMy) rankMy.style.display = 'none';
} else if (type === 'none') {
// 未参加未设置：隐藏排名副标题，隐藏减重进度卡片，排行榜改为缺省样式
if (rankSubBar) rankSubBar.style.display = 'none';
@@ -1277,11 +1339,13 @@ function applyPageType(type) {
}
applyPageType(currentPageType);
+var balanceMonthlyInited = false;
function switchBalanceTab(el, tab) {
el.parentElement.querySelectorAll('.balance-tab').forEach(t => t.classList.remove('active'));
el.classList.add('active');
document.getElementById('balance-daily').style.display = tab === 'daily' ? '' : 'none';
document.getElementById('balance-monthly').style.display = tab === 'monthly' ? '' : 'none';
+ if (tab === 'monthly' && !balanceMonthlyInited) { balanceMonthlyInited = true; renderCal(); renderBars(); }
}
function switchRecordTab(el, tab) {
el.parentElement.querySelectorAll('.record-tab').forEach(t => t.classList.remove('active'));
@@ -1292,8 +1356,8 @@ function switchRecordTab(el, tab) {
}
// 折线图数据点 tooltip — 体重
function showTip(el) {
- var area = document.getElementById('chart-area');
var tip = document.getElementById('chart-tooltip');
+ if (!tip) return;
var date = el.getAttribute('data-date');
var weight = el.getAttribute('data-weight');
tip.querySelector('.chart-tooltip__date').textContent = date;
@@ -1302,13 +1366,13 @@ function showTip(el) {
var x = parseFloat(el.getAttribute('data-x'));
var y = parseFloat(el.getAttribute('data-y'));
tip.style.left = x + '%';
- tip.style.top = '0px';
- tip.style.transform = 'translateX(-50%) translateY(-100%)';
+ tip.style.top = y + '%';
+ tip.style.transform = 'translate(-50%, -120%)';
}
// 折线图数据点 tooltip — 体脂
function showFatTip(el) {
- var area = document.getElementById('chart-area-fat');
var tip = document.getElementById('chart-tooltip-fat');
+ if (!tip) return;
var date = el.getAttribute('data-date');
var weight = el.getAttribute('data-weight');
tip.querySelector('.chart-tooltip__date').textContent = date;
@@ -1317,13 +1381,13 @@ function showFatTip(el) {
var x = parseFloat(el.getAttribute('data-x'));
var y = parseFloat(el.getAttribute('data-y'));
tip.style.left = x + '%';
- tip.style.top = '0px';
- tip.style.transform = 'translateX(-50%) translateY(-100%)';
+ tip.style.top = y + '%';
+ tip.style.transform = 'translate(-50%, -120%)';
}
// 折线图数据点 tooltip — 腰围
function showWaistTip(el) {
- var area = document.getElementById('chart-area-waist');
var tip = document.getElementById('chart-tooltip-waist');
+ if (!tip) return;
var date = el.getAttribute('data-date');
var weight = el.getAttribute('data-weight');
tip.querySelector('.chart-tooltip__date').textContent = date;
@@ -1332,8 +1396,8 @@ function showWaistTip(el) {
var x = parseFloat(el.getAttribute('data-x'));
var y = parseFloat(el.getAttribute('data-y'));
tip.style.left = x + '%';
- tip.style.top = '0px';
- tip.style.transform = 'translateX(-50%) translateY(-100%)';
+ tip.style.top = y + '%';
+ tip.style.transform = 'translate(-50%, -120%)';
}
// 点击图表空白区域关闭 tooltip
document.addEventListener('click', function(e) {
@@ -1347,7 +1411,168 @@ document.addEventListener('click', function(e) {
tip.style.display = 'none';
}
});
+ // 同时关闭本月吃动 tooltip
+ var balanceTip = document.getElementById('balanceTip');
+ if (balanceTip && !e.target.closest('.bar-hit') && !e.target.closest('.balance-tip')) {
+ balanceTip.style.display = 'none';
+ }
});
+
+/* ===== 本月吃动 Tab 逻辑 ===== */
+var currentYear = 2026, currentMonth = 8, selectedDay = null;
+var dayData = {};
+var balanceMock = [
+ {d:1,i:1920,e:1680,c:1100,f:490,p:330,bf:520,l:820,dn:580,ba:1100,s:320,w:260},
+ {d:2,i:2100,e:1750,c:1200,f:540,p:360,bf:580,l:900,dn:620,ba:1120,s:350,w:280},
+ {d:3,i:1850,e:1920,c:1050,f:470,p:330,bf:480,l:780,dn:590,ba:1130,s:480,w:310},
+ {d:4,i:2050,e:1700,c:1160,f:520,p:370,bf:550,l:870,dn:630,ba:1110,s:310,w:280},
+ {d:5,i:1780,e:1850,c:1010,f:450,p:320,bf:460,l:750,dn:570,ba:1140,s:420,w:290},
+ {d:6,i:2200,e:1600,c:1260,f:560,p:380,bf:620,l:940,dn:640,ba:1100,s:260,w:240},
+ {d:7,i:1950,e:1780,c:1110,f:495,p:345,bf:510,l:830,dn:610,ba:1120,s:360,w:300},
+ {d:8,i:1880,e:1960,c:1070,f:475,p:335,bf:490,l:800,dn:590,ba:1150,s:500,w:310},
+ {d:9,i:1960,e:1720,c:1120,f:500,p:340,bf:530,l:840,dn:590,ba:1110,s:330,w:280},
+ {d:10,i:2080,e:1800,c:1180,f:530,p:370,bf:560,l:890,dn:630,ba:1130,s:370,w:300},
+ {d:11,i:1820,e:1900,c:1030,f:460,p:330,bf:470,l:770,dn:580,ba:1140,s:450,w:310},
+ {d:12,i:1940,e:1760,c:1100,f:490,p:350,bf:520,l:830,dn:590,ba:1120,s:340,w:300},
+ {d:13,i:1900,e:1820,c:1080,f:480,p:340,bf:500,l:810,dn:590,ba:1130,s:380,w:310},
+];
+balanceMock.forEach(function(m){
+ dayData['2026-08-'+(m.d<10?'0'+m.d:m.d)] = m;
+});
+
+/* 日历渲染 */
+function renderCal(){
+ var c = document.getElementById('cal-days');
+ if (!c) return;
+ c.innerHTML = '';
+ document.getElementById('nav-month').textContent = currentYear+'年'+currentMonth+'月';
+ var fd = new Date(currentYear, currentMonth-1, 1).getDay();
+ var dim = new Date(currentYear, currentMonth, 0).getDate();
+ var off = fd===0?6:fd-1;
+ var today = new Date();
+ var tk = today.getFullYear()+'-'+String(today.getMonth()+1).padStart(2,'0')+'-'+String(today.getDate()).padStart(2,'0');
+ for(var i=0;i
';
+ rw.appendChild(oo);
+ var inn=document.createElement('div');inn.className='cal-ring--i';
+ var cc2=2*Math.PI*8;
+ inn.innerHTML='
';
+ rw.appendChild(inn);el.appendChild(rw);
+ var df=document.createElement('div');df.className='cal-day-diff';
+ df.innerHTML='
-1520/-300';el.appendChild(df);
+ }
+ c.appendChild(el);
+ }
+}
+
+function selDay(d,k){
+ selectedDay=d;
+ document.querySelectorAll('#balance-monthly .cal-day').forEach(function(el){el.classList.remove('sel');if(+el.getAttribute('data-d')===d)el.classList.add('sel');});
+ renderBars();
+ var intBar=document.querySelector('#balance-monthly .bar-hit[data-k="'+k+'"]');
+ if(intBar) showBalanceTipIn(intBar);
+}
+
+function selectDayFromBar(dk,type){
+ var d=+dk.split("-")[2];
+ selectedDay=d;
+ document.querySelectorAll("#balance-monthly .cal-day").forEach(function(el){el.classList.remove("sel");if(+el.getAttribute("data-d")===d)el.classList.add("sel");});
+ renderBars();
+ var h=document.querySelector('#balance-monthly .bar-hit[data-k="'+dk+'"]');
+ if(h){ if(type==="in")showBalanceTipIn(h); else showBalanceTipEx(h); }
+}
+
+function changeMonth(delta){
+ currentMonth+=delta;
+ if(currentMonth>12){currentMonth=1;currentYear++;}
+ if(currentMonth<1){currentMonth=12;currentYear--;}
+ selectedDay=null;renderCal();renderBars();
+}
+
+/* 柱状图渲染 */
+function renderBars(){
+ var g=document.getElementById('bars'),ov=document.getElementById('bar-overlay');
+ if(!g||!ov) return;
+ g.innerHTML='';ov.innerHTML='';
+ var dim=new Date(currentYear,currentMonth,0).getDate();
+ var md=dim;
+ var chartLeft=38, chartRight=350, chartTop=12, chartBot=170;
+ var chartW=chartRight-chartLeft, chartH=chartBot-chartTop;
+ var pairW=chartW/md, gap=3, barW=(pairW-gap)/2;
+ var maxY=2500;
+ for(var d=1;d<=md;d++){
+ var k=currentYear+'-'+String(currentMonth).padStart(2,'0')+'-'+String(d).padStart(2,'0');
+ var data=dayData[k];
+ var xs=chartLeft+(d-1)*pairW, hl=selectedDay===d;
+ if(data){
+ var iH=(data.i/maxY)*chartH, iY=chartTop+chartH-iH;
+ var iX=xs+1, iC=hl?'#5470c6':'url(#ig)';
+ if(hl) g.innerHTML+='
';
+ g.innerHTML+='
';
+ var eH=(data.e/maxY)*chartH, eY=chartTop+chartH-eH;
+ var eX=xs+barW+gap;
+ g.innerHTML+='
';
+ var lpV=iX/360*100, tpV=iY/208*100, wpV=barW/360*100, hpI=iH/208*100, hpE=eH/208*100;
+ var ih=document.createElement('div');ih.className='bar-hit';
+ ih.style.cssText='left:'+lpV.toFixed(2)+'%;top:'+tpV.toFixed(2)+'%;width:'+wpV.toFixed(2)+'%;height:'+hpI.toFixed(2)+'%;background:'+(hl?'#5470c6':'rgba(84,112,198,0.5)');
+ ih.setAttribute('data-k',k);ih.onclick=function(ev){ev.stopPropagation();var dk=this.getAttribute("data-k");selectDayFromBar(dk,"in");};ov.appendChild(ih);
+ var eh=document.createElement('div');eh.className='bar-hit';
+ var elpV=eX/360*100, etpV=eY/208*100; eh.style.cssText='left:'+elpV.toFixed(2)+'%;top:'+etpV.toFixed(2)+'%;width:'+wpV.toFixed(2)+'%;height:'+hpE.toFixed(2)+'%;background:rgba(250,200,88,0.5)';
+ eh.setAttribute('data-k',k);eh.onclick=function(ev){ev.stopPropagation();var dk=this.getAttribute("data-k");selectDayFromBar(dk,"ex");};ov.appendChild(eh);
+ }
+ var step=md>20?5:md>10?3:1;
+ if(d===1||d%step===0||d===md){
+ var lx=xs+pairW/2;
+ g.innerHTML+='
'+currentMonth+'/'+d+'';
+ }
+ }
+}
+
+function showBalanceTip(el,dl,html){
+ var t=document.getElementById('balanceTip');if(!t) return;
+ t.querySelector('.balance-tip__date').textContent=dl;
+ t.querySelector('.balance-tip__body').innerHTML=html;t.style.display='block';
+ t.style.left='50%';t.style.top='2px';t.style.transform='translateX(-50%) translateY(-100%)';
+ setTimeout(function(){document.addEventListener('click',closeBalanceTip,{once:true});},10);
+}
+function closeBalanceTip(e){if(!e.target.closest('.bar-hit')&&!e.target.closest('.balance-tip'))document.getElementById('balanceTip').style.display='none';}
+function showBalanceTipIn(el){
+ var k=el.getAttribute('data-k'),data=dayData[k];if(!data)return;
+ var p=k.split('-');
+ showBalanceTip(el,p[0]+'年'+(+p[1])+'月'+(+p[2])+'日',
+ '
'+
+ '
碳水'+data.c+' 千卡
'+
+ '
脂肪'+data.f+' 千卡
'+
+ '
蛋白质'+data.p+' 千卡
'+
+ '
'+
+ '
早餐'+data.bf+' 千卡
'+
+ '
午餐'+data.l+' 千卡
'+
+ '
晚餐'+data.dn+' 千卡
');
+}
+function showBalanceTipEx(el){
+ var k=el.getAttribute('data-k'),data=dayData[k];if(!data)return;
+ var p=k.split('-');
+ showBalanceTip(el,p[0]+'年'+(+p[1])+'月'+(+p[2])+'日',
+ '
'+
+ '
基础代谢'+data.ba+' 千卡
'+
+ '
运动消耗'+data.s+' 千卡
'+
+ '
步行消耗'+data.w+' 千卡
');
+}