feat 新增網路版介紹電子書

This commit is contained in:
2026-05-14 16:09:17 +08:00
parent 538547b490
commit 0986073b85
27 changed files with 986 additions and 428 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 954 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

+311 -232
View File
@@ -50,291 +50,370 @@
<tbody>
<tr>
<td>
<div class="member-card m1 parchment-card">
<div class="parchment-inner">
<div class="njtw-td-fill">
<div class="member-card m1 parchment-card">
<div class="parchment-inner">
<!-- <div class="parchment-logo" aria-hidden="true">新西遊記<span class="parchment-logo-num">5</span></div> -->
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">姜鎬臉男 姜鎬童</p>
<p class="parchment-byline">吃得津津有味的鬼怪</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">視覺</span>
<div class="parchment-stat-balls">
<!-- 將每顆 img 的 src 改成你的龍珠圖片網址(或同資料夾檔名) -->
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<!-- <div class="parchment-logo" aria-hidden="true">新西遊記<span class="parchment-logo-num">5</span></div> -->
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">姜鎬臉男 姜鎬童</p>
<p class="parchment-byline">吃得津津有味的鬼怪</p>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">注目度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">可愛</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">視覺</span>
<div class="parchment-stat-balls">
<!-- 將每顆 img 的 src 改成你的龍珠圖片網址(或同資料夾檔名) -->
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">注目度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">可愛</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
</div>
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
</div>
</div>
</td>
<td>
<div class="member-card m2 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">鬼娃恰吉 李壽根</p>
<p class="parchment-byline">不搞笑會死的鬼怪</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">娃娃美</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-td-fill">
<div class="member-card m2 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">鬼娃恰吉 李壽根</p>
<p class="parchment-byline">不搞笑會死的鬼怪</p>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">語言能力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">體能</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">娃娃美</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">語言能力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">體能</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
</div>
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
</div>
</div>
</td>
<td>
<div class="member-card m3 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">陰間使者 殷志源</p>
<p class="parchment-byline">戴上黑帽子 神志源回來了!</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">化妝消化力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-td-fill">
<div class="member-card m3 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">陰間使者 殷志源</p>
<p class="parchment-byline">戴上黑帽子 神志源回來了!</p>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">黑眼圈</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">暴走</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">化妝消化力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">黑眼圈</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">暴走</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
</div>
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
</div>
</div>
</td>
<td class="njtw-layout-slot shinmyohan OB">
<h1>OB</h1>
<img src="1.png" alt="" class=""><img src="2.png" alt="" class=""><img src="3.png" alt=""
class="">
<div class="njtw-td-fill">
<div class="njtw-slot-stack njtw-team-panel ob-panel">
<div class="njtw-slot-visual">
<div class="njtw-team-title-band">
<h2 class="njtw-team-hero-title" id="njtw-ob-team-title">OB 隊:老練的瘋子們</h2>
</div>
<div class="njtw-slot-faces">
<img src="1.png" alt="" />
<img src="2.png" alt="" />
<img src="3.png" alt="" />
</div>
</div>
<div class="team-info">
<p>看他們玩遊戲不是在看技術,是在看如何「鑽漏洞」和「互相背叛」。他們不用說話,光是一個眼神就能知道對方在想什麼(通常是壞主意)。</p>
<p><strong>圈粉亮點:</strong>鎬童的食量、壽根的即興才藝、志源那種「初丁」卻天才的直覺。</p>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">老練度</span>
<div class="parchment-stat-balls" aria-label="5">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">體力值</span>
<div class="parchment-stat-balls" aria-label="1">
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="njtw-team-catchphrase">口頭禪:喔嗚!吃吧!</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="njtw-layout-slot shinmyohan YB">
<h1>YB</h1>
<img src="4.png" alt="" class=""><img src="5.png" alt="" class=""><img src="6.png" alt=""
class="Shinmyohan">
</td>
</td>
<td>
<div class="member-card m4 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">帥氣殭屍 安宰賢</p>
<p class="parchment-byline">美貌&amp;藝能兼具 八面玲瓏的帥氣殭屍</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">帥氣度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-td-fill">
<div class="njtw-slot-stack njtw-team-panel yb-panel">
<div class="njtw-slot-visual">
<div class="njtw-team-title-band">
<h2 class="njtw-team-hero-title" id="njtw-yb-team-title">YB 隊:新瘋子隊</h2>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">瘋癲</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">臉紅紅</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-slot-faces">
<img src="4.png" alt="" />
<img src="5.png" alt="" />
<img src="6.png" alt="" class="Shinmyohan" />
</div>
</div>
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
<div class="team-info">
<p>一開始以為是來幫哥哥們打雜的,結果卻是一個比一個還瘋的「瘋子新秀」。他們擁有體力優勢,卻常常在簡單的常識題中全軍覆沒。</p>
<p><strong>圈粉亮點:</strong>安宰賢的紙片人運動神經、宋旻浩的藝術靈魂與神手指、P.O 的超大聲反應。</p>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">老練度</span>
<div class="parchment-stat-balls" aria-label="1">
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">體力值</span>
<div class="parchment-stat-balls" aria-label="5">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="njtw-team-catchphrase">口頭禪:哥!對不起!</p>
</div>
</div>
</div>
</td>
<td>
<div class="member-card m5 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">現代鬼 宋旻浩</p>
<p class="parchment-byline">獨特的文藝青年 現代鬼怪</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">髮型</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-td-fill">
<div class="member-card m4 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">帥氣殭屍 安宰賢</p>
<p class="parchment-byline">美貌&amp;藝能兼具 八面玲瓏的帥氣殭屍</p>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">清純美</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">時髦度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">帥氣度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">瘋癲</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">臉紅紅</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
</div>
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
</div>
</div>
</td>
<td>
<div class="member-card m6 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">德古拉 P.O</p>
<p class="parchment-byline">新血降臨!華麗誤答轟炸機!</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">腦力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="njtw-td-fill">
<div class="member-card m5 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">現代鬼 宋旻浩</p>
<p class="parchment-byline">獨特的文藝青年 現代鬼怪</p>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">披風+領子</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">藝能感</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">髮型</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">清純美</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">時髦度</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
</div>
</div>
</div>
</td>
<td>
<div class="njtw-td-fill">
<div class="member-card m6 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
<p class="parchment-name"></p>
<p class="parchment-role">德古拉 P.O</p>
<p class="parchment-byline">新血降臨!華麗誤答轟炸機!</p>
</div>
<div class="parchment-figure">
<div class="member-image"></div>
</div>
<div class="parchment-stats">
<div class="parchment-stat-row">
<span class="parchment-stat-label">腦力</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">披風+領子</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
<div class="parchment-stat-row">
<span class="parchment-stat-label">藝能感</span>
<div class="parchment-stat-balls">
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
<img src="dragon-ball.png" width="28" height="28" alt="" />
</div>
</div>
</div>
<p class="parchment-tags">#新弟子 #德古拉</p>
</div>
<p class="parchment-tags">#新弟子 #德古拉</p>
</div>
</div>
</td>
+222 -19
View File
@@ -19,7 +19,8 @@ body.njtw5-page {
/* 視窗 ≤ --njtw-member-zoom-max-px 起套用 zoom;除數略大於該值,寬度剛好等於斷點時 zoom 仍 < 1,避免龍珠壓字 */
--njtw-member-zoom-max-px: 1556;
--njtw-member-zoom-divisor-px: 1588;
/* OB/YB 隊伍列小頭貼(與成員卡 .member-image 不同:那是 div 背景裁切,尺度大很多) */
--njtw-slot-face-img-size: clamp(52px, min(13vw, 12vmin), 104px);
background:
radial-gradient(ellipse 85% 55% at 50% -8%, rgba(255, 220, 170, 0.35) 0%, transparent 52%),
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(255, 200, 160, 0.12) 0%, transparent 45%),
@@ -135,6 +136,7 @@ body.njtw5-page .njtw-member-table-wrap {
}
body.njtw5-page .njtw-member-table {
--njtw-member-td-pad: clamp(4px, 0.6vw, 8px);
table-layout: fixed;
width: 100%;
max-width: 100%;
@@ -148,9 +150,16 @@ body.njtw5-page .njtw-member-table {
overflow: visible;
}
/* 列高=該列最高欄;勿對 td 設 display:flex(會破壞 table-cell,整列儲存格會直向堆疊)。
* tbody tr height:1px 為表格常用技巧,讓同列 td 可算出一致高度;卡片放在 td 內 .njtw-td-fill 再 flex 撐滿。 */
body.njtw5-page .njtw-member-table tbody tr {
height: 1px;
}
body.njtw5-page .njtw-member-table td {
width: 25%;
padding: clamp(4px, 0.6vw, 8px);
height: inherit;
padding: var(--njtw-member-td-pad);
vertical-align: top;
box-sizing: border-box;
border: 0;
@@ -160,23 +169,201 @@ body.njtw5-page .njtw-member-table td {
color: inherit;
}
body.njtw5-page .njtw-member-table .member-card.parchment-card {
body.njtw5-page .njtw-member-table td > .njtw-td-fill {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 100%;
height: 100%;
box-sizing: border-box;
}
body.njtw5-page .njtw-member-table td > .njtw-td-fill > .member-card.parchment-card,
body.njtw5-page .njtw-member-table td > .njtw-td-fill > .njtw-team-panel {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.njtw5-page .njtw-member-table .njtw-layout-slot {
white-space: nowrap;
vertical-align: middle;
text-align: center;
font-weight: 800;
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
letter-spacing: 0.12em;
color: var(--njtw-ink);
opacity: 0.75;
/* 與成員卡同列時撐滿儲存格高度:內層直向 flex,標籤列貼底 */
body.njtw5-page .njtw-member-table .member-card.parchment-card {
display: flex;
flex-direction: column;
}
body.njtw5-page .njtw-member-table .member-card.parchment-card .parchment-inner {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
body.njtw5-page .njtw-member-table .parchment-card .parchment-tags {
margin-top: auto;
}
/* 表格內 OB/YB:深色「反色」羊皮紙+龍珠數值(與角色淺色卡對照) */
body.njtw5-page .njtw-member-table .njtw-layout-slot.shinmyohan {
white-space: normal;
text-align: left;
font-weight: inherit;
font-size: inherit;
letter-spacing: normal;
opacity: 1;
color: #f5e8d8;
}
body.njtw5-page .njtw-member-table .njtw-team-panel {
/* 內距與成員 .parchment-inner 對齊;字重與 .parchment-byline 同為 700 */
font-size: 1rem;
font-weight: 700;
line-height: 1.55;
display: flex;
flex-direction: column;
padding: clamp(12px, 2.4vw, 18px) clamp(10px, 2vw, 14px);
border-radius: 10px;
border: 2px solid rgba(255, 200, 140, 0.28);
background:
radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 200, 150, 0.12) 0%, transparent 55%),
linear-gradient(165deg, #3d2a22 0%, #2a1c18 42%, #1a1410 100%);
box-shadow:
inset 0 1px 0 rgba(255, 230, 200, 0.1),
inset 0 -12px 28px rgba(0, 0, 0, 0.18),
0 3px 0 rgba(0, 0, 0, 0.28),
0 10px 22px rgba(24, 12, 8, 0.35);
}
body.njtw5-page .njtw-member-table .njtw-team-panel.ob-panel {
border-top: 3px solid rgba(232, 136, 74, 0.65);
}
body.njtw5-page .njtw-member-table .njtw-team-panel.yb-panel {
border-top: 3px solid rgba(130, 190, 220, 0.55);
}
body.njtw5-page .njtw-member-table .njtw-slot-stack {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
gap: clamp(8px, 1.5vw, 12px);
}
body.njtw5-page .njtw-member-table .njtw-slot-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 2.2vw, 18px);
padding-bottom: clamp(10px, 1.8vw, 14px);
border-bottom: 1px dashed rgba(255, 200, 160, 0.22);
flex-shrink: 0;
}
/* 隊名專用區塊:對應成員卡 .parchment-headline 的呼吸空間,勿與臉圖擠在同一塊 */
body.njtw5-page .njtw-member-table .njtw-team-title-band {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: clamp(14px, 2.5vw, 22px) clamp(12px, 2.2vw, 20px);
border-radius: 10px;
border: 1px solid rgba(255, 200, 160, 0.26);
background:
radial-gradient(ellipse 110% 100% at 50% 0%, rgba(255, 210, 170, 0.16) 0%, transparent 55%),
linear-gradient(165deg, rgba(55, 38, 30, 0.95) 0%, rgba(34, 24, 20, 0.72) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 230, 200, 0.12),
inset 0 -10px 24px rgba(0, 0, 0, 0.12);
}
/* 原「OB/YB」單字大標的字級,改套在完整隊名上 */
body.njtw5-page .njtw-member-table .njtw-team-hero-title {
margin: 0;
max-width: 100%;
font-size: clamp(1.15rem, 2.6vw, 1.55rem);
font-weight: 900;
letter-spacing: 0.06em;
line-height: 1.25;
text-align: center;
background: linear-gradient(180deg, #ffd8a8 0%, #f0a060 45%, #d97840 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
body.njtw5-page .njtw-member-table .njtw-slot-faces {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 6px;
width: 100%;
}
body.njtw5-page .njtw-member-table td.OB .njtw-slot-faces {
justify-content: flex-end;
}
body.njtw5-page .njtw-member-table td.YB .njtw-slot-faces {
justify-content: flex-start;
}
/* 勿用欄寬百分比:窄 td 時 28% 會變成極小圖;尺寸見 --njtw-slot-face-img-size(仍遠小於成員卡 .member-image 背景區) */
body.njtw5-page .njtw-member-table .njtw-slot-faces img {
float: none;
width: var(--njtw-slot-face-img-size);
max-width: var(--njtw-slot-face-img-size);
height: auto;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.njtw5-page .njtw-member-table td.shinmyohan .team-info {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: rgba(250, 236, 220, 0.92);
text-align: left;
}
body.njtw5-page .njtw-member-table td.shinmyohan .team-info .parchment-stats {
margin-top: clamp(10px, 1.8vw, 14px);
}
body.njtw5-page .njtw-member-table td.shinmyohan .team-info p {
margin: 0 0 clamp(10px, 1.8vw, 15px);
font-size: inherit;
font-weight: inherit;
line-height: 1.65;
}
body.njtw5-page .njtw-member-table td.shinmyohan .team-info p:last-child {
margin-bottom: 0;
}
body.njtw5-page .njtw-member-table td.shinmyohan .team-info strong {
color: #ffd4a8;
font-weight: 800;
}
body.njtw5-page .njtw-member-table td.shinmyohan .njtw-team-catchphrase {
margin: clamp(10px, 1.8vw, 14px) 0 0;
padding-top: clamp(10px, 1.8vw, 14px);
border-top: 1px dashed rgba(255, 200, 160, 0.22);
font-weight: 700;
color: rgba(255, 236, 210, 0.95);
line-height: 1.55;
}
/* OB/YB 龍珠列:與成員卡共用 .parchment-stats / .parchment-stat-row 結構,樣式見下方合併規則與深色覆寫 */
body.njtw5-page .container .section-title,
body.njtw5-page .video-container .video-title {
font-weight: 800;
@@ -410,7 +597,8 @@ body.njtw5-page .parchment-card .member-image {
border-bottom: none;
}
body.njtw5-page .parchment-card .parchment-stats {
body.njtw5-page .parchment-card .parchment-stats,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stats {
text-align: left;
margin: 0;
padding: 0 clamp(4px, 1vw, 8px);
@@ -420,7 +608,8 @@ body.njtw5-page .parchment-card .parchment-stats {
}
/* 龍珠:單行不換行;球徑只看 .parchment-stats 的 font-size + em,全卡一致 */
body.njtw5-page .parchment-card .parchment-stat-row {
body.njtw5-page .parchment-card .parchment-stat-row,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
@@ -428,11 +617,13 @@ body.njtw5-page .parchment-card .parchment-stat-row {
margin-bottom: clamp(8px, 1.6vw, 12px);
}
body.njtw5-page .parchment-card .parchment-stat-row:last-of-type {
body.njtw5-page .parchment-card .parchment-stat-row:last-of-type,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-row:last-of-type {
margin-bottom: 0;
}
body.njtw5-page .parchment-card .parchment-stat-label {
body.njtw5-page .parchment-card .parchment-stat-label,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-label {
font-size: clamp(0.88rem, 2.1vw, 1rem);
font-weight: 800;
color: #7a4040;
@@ -441,7 +632,8 @@ body.njtw5-page .parchment-card .parchment-stat-label {
flex-shrink: 0;
}
body.njtw5-page .parchment-card .parchment-stat-balls {
body.njtw5-page .parchment-card .parchment-stat-balls,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
@@ -453,7 +645,8 @@ body.njtw5-page .parchment-card .parchment-stat-balls {
padding-bottom: 2px;
}
body.njtw5-page .parchment-card .parchment-stat-balls img {
body.njtw5-page .parchment-card .parchment-stat-balls img,
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls img {
display: block;
box-sizing: border-box;
width: 2.15em;
@@ -465,6 +658,16 @@ body.njtw5-page .parchment-card .parchment-stat-balls img {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
/* 深色隊伍卡:龍珠列標籤改淺色(覆寫上一段 #7a4040) */
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-label {
color: rgba(255, 214, 190, 0.96);
}
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls img {
float: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
body.njtw5-page .parchment-card .parchment-tags {
margin: clamp(12px, 2vw, 16px) 0 0;
padding-top: clamp(10px, 1.8vw, 14px);
@@ -522,7 +725,7 @@ body.njtw5-page .video-container .video-embed {
}
.shinmyohan img {
width: 33%;
width: 100%;
height: 100%;
object-fit: cover;
}