|
|
| （未显示同一用户的5个中间版本） |
| 第1行： |
第1行： |
| == 2026年冬季新番 · PV 导视（方案：左侧卡片 + 右侧播放器） == | | <!-- ============================= |
| | 🎬 PV导视 · TV / 剧场版切换区块 |
| | ============================= --> |
|
| |
|
| 以下为本季度番剧的 PV 列表，你可点击左侧任何卡片在右侧播放。
| | <div style="border:1px solid #d9e6f2; background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%); padding:20px 22px; border-radius:12px; margin-bottom:25px; box-shadow:0 2px 6px rgba(0,0,0,0.06);"> |
|
| |
|
| <!-- ==========================
| | <div style="font-size:20px; font-weight:bold; margin-bottom:12px;"> |
| 主布局（两栏：左卡片 + 右播放器）
| | 🎥 2026年动画 PV 导视 |
| ========================== -->
| | </div> |
| <div class="pv-layout">
| |
| | |
| <!-- 左侧：PV 卡片列表 -->
| |
| <div class="pv-left"> | |
| | |
| <div class="pv-item" onclick="switchPV('k1G8EvZg_BY')">
| |
| <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg">
| |
| <div class="pv-title">Fate/strange Fake ｜ 第1弾PV</div>
| |
| </div> | |
|
| |
|
| <div class=" pv- item" onclick="switchPV('MwP4gqRys4c')"> | | <div style=" display:flex; gap:20px; flex- wrap:wrap;"> |
| <img src="https://img.youtube.com/vi/MwP4gqRys4c/hqdefault.jpg">
| | <div style="flex:1; min-width:180px;"> |
| <div class="pv-title">葬送的芙莉莲 第2期 ｜ PV第2弾</div> | | [[2026年冬季新番/PV导视（生肉版）|<div style=" background:#e6f3ff; border:1px solid #8ac4f9; padding:12px 16px; border-radius:10px; text-align:center; font- weight:bold; color:#1a73e8; transition:.2s;"> 📺 TV动画 PV</div> ]] |
| </div> | | </div> |
| | | <div style="flex:1; min-width:180px;"> |
| <div class="pv-item" onclick="switchPV('JDltDG8n7Do')"> | | [[2026年剧场版动画/ PV导视（生肉版）|<div style=" background:#fcefe8; border:1px solid #f4aa8b; padding:12px 16px; border- radius:10px; text-align:center; font- weight:bold; color:#e86c3a; transition:. 2s;"> 🎬 剧场版 PV</div> ]] |
| <img src="https://img.youtube.com/vi/JDltDG8n7Do/hqdefault.jpg"> | |
| <div class=" pv- title">咒术回战 死灭回游 前篇 ｜ 第1弾PV</div> | |
| </div>
| |
| | |
| <div class="pv-item" onclick="switchPV('5QUyhQsXXtw')">
| |
| <img src="https://img.youtube.com/vi/5QUyhQsXXtw/hqdefault.jpg">
| |
| <div class="pv-title">地狱乐 第2期 ｜ 第1弾PV</div>
| |
| </div> | | </div> |
|
| |
| </div>
| |
|
| |
| <!-- 右侧：唯一的主播放器 -->
| |
| <div class="pv-right">
| |
| <div id="pv-player-box">
| |
| {{#ev:youtube|k1G8EvZg_BY|width=960|alignment=center}}
| |
| </div>
| |
| </div> | | </div> |
|
| |
|
| </div> | | </div> |
|
| |
| <!-- ==========================
| |
| 页面专属 CSS
| |
| ========================== -->
| |
| <style>
| |
| .pv-layout {
| |
| display: flex;
| |
| gap: 32px;
| |
| margin: 20px 0;
| |
| }
| |
| .pv-left {
| |
| width: 340px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 20px;
| |
| }
| |
| .pv-item {
| |
| cursor: pointer;
| |
| background: #fff;
| |
| border-radius: 14px;
| |
| padding: 10px;
| |
| box-shadow: 0 4px 16px rgba(0,0,0,0.1);
| |
| transition: .2s;
| |
| }
| |
| .pv-item:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 10px 26px rgba(0,0,0,.18);
| |
| }
| |
| .pv-item img {
| |
| width: 100%;
| |
| border-radius: 10px;
| |
| }
| |
| .pv-title {
| |
| margin-top: 6px;
| |
| font-size: 15px;
| |
| font-weight: bold;
| |
| }
| |
| .pv-right {
| |
| flex: 1;
| |
| min-width: 600px;
| |
| }
| |
| </style>
| |
|
| |
|
| |
| <!-- ==========================
| |
| JS：切换 PV（唯一播放器更新）
| |
| ========================== -->
| |
| <script>
| |
| function switchPV(videoId) {
| |
| var box = document.getElementById("pv-player-box");
| |
| box.innerHTML =
| |
| '{{#ev:youtube|' + videoId + '|width=960|alignment=center}}';
| |
|
| |
| // 点击卡片后自动滚动到播放器顶部
| |
| document.querySelector(".pv-right").scrollIntoView({
| |
| behavior: "smooth",
| |
| block: "start"
| |
| });
| |
| }
| |
| </script>
| |
