diff --git a/variety/bangxiao.html b/variety/bangxiao.html index b0995b1..e8127ee 100644 --- a/variety/bangxiao.html +++ b/variety/bangxiao.html @@ -133,52 +133,39 @@ margin: 0 0 0.75rem; } - .bangxiao-page .result-members { - display: flex; - flex-direction: column; - gap: 8px; - margin-top: 0.85rem; + /* 卡片展開明細:永遠佔空間,卡片高度因此固定,未選時淡出 */ + .bangxiao-page .member-detail { + visibility: hidden; + opacity: 0; + width: 100%; + text-align: center; + border-top: 1px solid transparent; + margin-top: 10px; + padding-top: 10px; + transition: opacity 0.25s ease, visibility 0.25s ease, border-color 0.25s ease; } - .bangxiao-page .result-member { - display: grid; - grid-template-columns: auto auto 1fr; - gap: 0 10px; - align-items: baseline; - padding: 8px 12px; - background: rgba(255, 204, 0, 0.1); - border-radius: 8px; + .bangxiao-page .member-check:has(input:checked) .member-detail { + visibility: visible; + opacity: 1; + border-top-color: rgba(255, 204, 0, 0.35); } - .bangxiao-page .result-member__name { - font-weight: 800; - font-size: 0.95rem; - color: var(--color-text-dark); - white-space: nowrap; - } - - .bangxiao-page .result-member__count { - font-weight: 700; - font-size: 0.88rem; + .bangxiao-page .member-detail__count { + display: block; + font-size: 2rem; + font-weight: 900; color: var(--color-brand-dark); - white-space: nowrap; + letter-spacing: -0.02em; + margin: 0 0 6px; } - .bangxiao-page .result-member__works { - font-size: 0.82rem; + .bangxiao-page .member-detail__works { + font-size: 0.76rem; color: var(--color-text-muted); - line-height: 1.5; - } - - @media (max-width: 540px) { - .bangxiao-page .result-member { - grid-template-columns: auto auto; - grid-template-rows: auto auto; - } - - .bangxiao-page .result-member__works { - grid-column: 1 / -1; - } + line-height: 2; + margin: 0; + text-align: center; } @media (max-width: 540px) { @@ -206,16 +193,15 @@
-

為什麼叫爆笑養老院?

+

世紀級寶藏庫

- 因為水晶男孩的綜藝節目,多到要看到老才看得完。 - 從 2016 年回歸後,六個大男孩分別在各種節目裡全力失控—— - 隊長帶著弟弟們上山下海,弟弟們又各自出去繼續暴走, - 加上超人回來了裡的爸爸系燃點,算下來要補的清單長到讓人頭皮發麻。 + 水晶男孩的綜藝節目,多到要看到老才看得完。 + 從 1997 年出道、世紀解散後的各自精彩,再到後來的奇蹟合體,這群大男孩不論在哪個時期,都在各種節目裡全力失控—— + 隊長帶著弟弟們上山下海,弟弟們又各自出去繼續暴走,算下來這二十幾年累積的精采清單,多到讓人眼睛發亮。

在這裡你可以先算算,選完本命之後有幾個節目得補, - 然後找個舒服的位置坐好,慢慢養老,反正跑不掉了。 + 然後找個舒服的位置坐好,慢慢養老,反正寶藏這麼多,你這輩子是跑不掉了。

@@ -224,7 +210,7 @@
SELECT YOUR BIAS
-

勾選你的本命(可複選),算出你的補番清單有多長。

+

勾選你的本命(可複選),算出你的待補清單有多長。

@@ -316,7 +326,7 @@ }, }; - const calcBtn = $('#calcBtn'); + const calcBtn = $('#calcBtn'); const resultEl = $('#calcResult'); // 團飯全選:勾全部;個別全勾時也同步亮全選卡 @@ -325,7 +335,7 @@ }); $('input[name="member"]').on('change', function () { - const total = $('input[name="member"]').length; + const total = $('input[name="member"]').length; const checked = $('input[name="member"]:checked').length; $('#member-all').prop('checked', total === checked); }); @@ -339,35 +349,22 @@ } const isAll = checked.length === $('input[name="member"]').length; - let total = isAll ? GROUP_SCORE : 0; - let hasEst = false; - let worksHTML = ''; - + let total = isAll ? GROUP_SCORE : 0; + let hasEst = false; checked.each(function () { - const val = $(this).val(); - const data = memberData[val]; - const name = $(this).closest('label').find('.member-check__name').text(); - + const data = memberData[$(this).val()]; total += data.score; if (data.est) hasEst = true; - - worksHTML += - '
' + - '' + name + '' + - '' + data.score + (data.est ? '+' : '') + ' 部' + - '' + data.works.join('・') + '' + - '
'; }); - const totalStr = total + (hasEst ? '+' : ''); + const totalStr = total + (hasEst ? '+' : ''); const groupNote = isAll ? '

(含團體綜藝 ' + GROUP_SCORE + ' 部)

' : ''; resultEl.html( '

你總共有 ' + totalStr + ' 個節目要補,慢慢養老吧!

' + - groupNote + - '
' + worksHTML + '
' + groupNote ); }); }); @@ -377,4 +374,4 @@ - + \ No newline at end of file