style 調整配色

This commit is contained in:
2026-05-14 13:20:59 +08:00
parent b3592f30b1
commit ff358e76ce
2 changed files with 300 additions and 258 deletions
+257 -251
View File
@@ -44,288 +44,294 @@
</header>
<div class="container">
<h2 class="section-title">鬼神介紹</h2>
<!-- 第一排 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<div class="member-card m1 parchment-card">
<div class="parchment-inner">
<!-- tr/td 必須放在 <table> 裡;外層用 div 接在 .container 的 grid 下,佔滿整列 -->
<div class="njtw-member-table-wrap">
<table class="njtw-member-table">
<tbody>
<tr>
<td>
<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 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>
<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-figure">
<div class="member-image"></div>
</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>
</div>
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
</div>
</div>
<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="" />
</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>
<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-figure">
<div class="member-image"></div>
</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>
</div>
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
</div>
</div>
<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="" />
</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>
<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 class="parchment-figure">
<div class="member-image"></div>
</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>
</div>
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
</div>
</div>
<!-- 第二排 -->
<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="" />
</td>
<td class="njtw-layout-slot">OB</td>
</tr>
<tr>
<td class="njtw-layout-slot">YB</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>
<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 class="parchment-figure">
<div class="member-image"></div>
</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 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>
</div>
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
</div>
</div>
<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="" />
</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>
<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-figure">
<div class="member-image"></div>
</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="" />
</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>
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
</div>
</div>
<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="" />
</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>
<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-figure">
<div class="member-image"></div>
</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="" />
</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>
</div>
<p class="parchment-tags">#新弟子 #德古拉</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 影片區塊:將 iframe 的 src 換成 https://www.youtube.com/embed/你的影片ID -->