|
|
| 第365行: |
第365行: |
|
| |
|
| <html> | | <html> |
| <div id="jzy-game-info" class="jzy-game-info"> | | <div id="jzy-game-info"> |
| <style>
| |
| .jzy-game-info{
| |
| background:
| |
| radial-gradient(circle at 12% 8%,rgba(110,220,190,.18),transparent 28%),
| |
| radial-gradient(circle at 85% 18%,rgba(242,199,107,.15),transparent 24%),
| |
| linear-gradient(135deg,rgba(4,31,49,.94),rgba(10,82,88,.90) 48%,rgba(35,83,53,.92));
| |
| color:#f6fbf7;
| |
| padding:18px 26px 40px;
| |
| border:1px solid rgba(190,241,220,.22);
| |
| border-radius:18px;
| |
| box-shadow:0 18px 42px rgba(2,18,28,.35),inset 0 1px 0 rgba(255,255,255,.10);
| |
| font-family:"Microsoft YaHei",Arial,sans-serif;
| |
| overflow:hidden;
| |
| }
| |
| .jzy-game-info *{box-sizing:border-box}
| |
| .jzy-game-shell{max-width:1120px;margin:0 auto}
| |
| .jzy-tabs{
| |
| width:max-content;
| |
| max-width:100%;
| |
| margin:0 auto 22px;
| |
| padding:5px;
| |
| display:flex;
| |
| gap:12px;
| |
| flex-wrap:wrap;
| |
| justify-content:center;
| |
| background:rgba(2,24,38,.58);
| |
| border:1px solid rgba(196,241,230,.28);
| |
| border-radius:20px;
| |
| box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
| |
| backdrop-filter:blur(4px);
| |
| }
| |
| .jzy-tab{
| |
| min-width:106px;
| |
| height:56px;
| |
| border:0;
| |
| border-radius:15px;
| |
| background:transparent;
| |
| color:#d6eee6;
| |
| font-size:20px;
| |
| font-weight:800;
| |
| cursor:pointer;
| |
| letter-spacing:.02em;
| |
| }
| |
| .jzy-tab:hover{color:#fff4c7;background:rgba(255,255,255,.08)}
| |
| .jzy-tab.is-active{
| |
| background:linear-gradient(180deg,#fff4c7,#f4cf78);
| |
| color:#164554;
| |
| box-shadow:0 5px 16px rgba(244,207,120,.24),inset 0 -3px 0 rgba(141,102,31,.24);
| |
| }
| |
| .jzy-heading{
| |
| height:58px;
| |
| margin:0 0 30px;
| |
| border:1px solid rgba(210,244,235,.34);
| |
| border-radius:8px;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| font-size:28px;
| |
| font-weight:900;
| |
| color:#fffaf0;
| |
| background:rgba(4,29,43,.35);
| |
| box-shadow:inset 0 -3px 0 rgba(242,199,107,.36);
| |
| text-shadow:0 2px 3px rgba(0,0,0,.35);
| |
| }
| |
| .jzy-grid{
| |
| display:grid;
| |
| grid-template-columns:repeat(3,minmax(0,1fr));
| |
| gap:18px 14px;
| |
| padding:0 24px;
| |
| }
| |
| .jzy-card{
| |
| min-height:138px;
| |
| padding:18px 24px 18px 28px;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:space-between;
| |
| gap:18px;
| |
| background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
| |
| border:1px solid rgba(207,246,229,.22);
| |
| border-radius:16px;
| |
| box-shadow:0 7px 0 rgba(12,52,64,.66),0 14px 24px rgba(3,18,26,.22);
| |
| color:#f7fbf6!important;
| |
| text-decoration:none!important;
| |
| font-size:22px;
| |
| font-weight:900;
| |
| transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
| |
| }
| |
| .jzy-card:hover{
| |
| transform:translateY(-2px);
| |
| background:linear-gradient(145deg,rgba(255,244,199,.18),rgba(99,211,182,.10));
| |
| border-color:rgba(244,207,120,.58);
| |
| color:#fff1b8!important;
| |
| }
| |
| .jzy-icon{
| |
| width:124px;
| |
| height:96px;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| flex:0 0 124px;
| |
| }
| |
| .jzy-icon img{width:78px;height:78px;object-fit:contain;display:block;filter:drop-shadow(0 7px 10px rgba(0,0,0,.28))}
| |
| .jzy-fallback{
| |
| display:none;
| |
| width:74px;
| |
| height:74px;
| |
| align-items:center;
| |
| justify-content:center;
| |
| border-radius:18px;
| |
| background:linear-gradient(145deg,#e8cc7b,#75d5bd);
| |
| color:#073647;
| |
| border:2px solid rgba(255,255,255,.38);
| |
| font-size:30px;
| |
| font-weight:900;
| |
| box-shadow:0 8px 18px rgba(0,0,0,.20);
| |
| }
| |
| .jzy-name{text-align:right;line-height:1.2;text-shadow:0 2px 3px rgba(0,0,0,.35)}
| |
| .jzy-card:nth-last-child(1):nth-child(3n+1){grid-column:2}
| |
| @media(max-width:900px){
| |
| .jzy-grid{grid-template-columns:repeat(2,1fr);padding:0}
| |
| .jzy-card:nth-last-child(1):nth-child(3n+1){grid-column:auto}
| |
| }
| |
| @media(max-width:560px){
| |
| .jzy-game-info{padding:14px 12px 30px;border-radius:14px}
| |
| .jzy-tabs{gap:6px}
| |
| .jzy-tab{min-width:82px;height:46px;font-size:16px}
| |
| .jzy-heading{font-size:22px}
| |
| .jzy-grid{grid-template-columns:1fr}
| |
| .jzy-card{min-height:110px;font-size:20px}
| |
| .jzy-icon{width:92px;flex-basis:92px}
| |
| }
| |
| </style>
| |
| | |
| <div class="jzy-game-shell"> | | <div class="jzy-game-shell"> |
| <div id="jzy-tabs" class="jzy-tabs"></div> | | <div id="jzy-tabs" class="jzy-tabs"></div> |
| 第504行: |
第371行: |
| <div id="jzy-grid" class="jzy-grid"></div> | | <div id="jzy-grid" class="jzy-grid"></div> |
| </div> | | </div> |
|
| |
| <script> | | <script> |
| (function() { | | (function() { |
| var groups = [ | | var groups = [ |
| {id:"base",tab:"基础",title:"游戏基础",items:["游戏简介","金唱片","收集器","个人收集","职业","海岛大世界",{label:"属性",page:"属性",icon:"https://wiki.mcjzy.net/images/0/0f/%E5%B1%9E%E6%80%A7.png"},"NPC","集市","任务","拍卖","更新日志","教学"]}, | | {id:"base",tab:"基础",title:"游戏基础",items:["游戏简介","金唱片","收集器","个人收集","职业","海岛大世界","属性","NPC","集市","任务","拍卖","更新日志","教学"]}, |
| {id:"combat",tab:"装备/战斗",title:"装备 / 战斗",items:["武器","盔甲","饰品","附魔","重铸","宝石镶嵌","药水","宠物","怪物","猎手","辅助物品","地下城","宠物物品"]}, | | {id:"combat",tab:"装备/战斗",title:"装备 / 战斗",items:["武器","盔甲","饰品","附魔","重铸","宝石镶嵌","药水","宠物","怪物","猎手","辅助物品","地下城","宠物物品"]}, |
| {id:"skills",tab:"技能",title:"技能",items:["武斗法","斩木术","采宝术","田园道","渔乐道"]}, | | {id:"skills",tab:"技能",title:"技能",items:["武斗法","斩木术","采宝术","田园道","渔乐道"]}, |
| 第514行: |
第380行: |
| {id:"other",tab:"其他",title:"其他内容",items:["指令","家具","商店"]} | | {id:"other",tab:"其他",title:"其他内容",items:["指令","家具","商店"]} |
| ]; | | ]; |
|
| |
| var tabs = document.getElementById("jzy-tabs"); | | var tabs = document.getElementById("jzy-tabs"); |
| var heading = document.getElementById("jzy-heading"); | | var heading = document.getElementById("jzy-heading"); |
| var grid = document.getElementById("jzy-grid"); | | var grid = document.getElementById("jzy-grid"); |
| | | function normalize(item) { return typeof item === "string" ? {label:item, page:item} : item; } |
| function normalize(item) { | |
| return typeof item === "string" ? {label:item, page:item} : item;
| |
| }
| |
| | |
| function pageUrl(title) { | | function pageUrl(title) { |
| title = String(title || "").trim().replace(/\s+/g, "_"); | | title = String(title || "").trim().replace(/\s+/g, "_"); |
| if (window.mw && mw.util && mw.util.getUrl) { | | if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(title); |
| return mw.util.getUrl(title);
| | if (window.wgArticlePath) return window.wgArticlePath.replace("$1", encodeURIComponent(title)); |
| }
| |
| if (window.wgArticlePath) { | |
| return window.wgArticlePath.replace("$1", encodeURIComponent(title));
| |
| }
| |
| var script = window.wgScript || "/index.php"; | | var script = window.wgScript || "/index.php"; |
| return script + "?title=" + encodeURIComponent(title); | | return script + "?title=" + encodeURIComponent(title); |
| } | | } |
|
| |
| function makeCard(item) { | | function makeCard(item) { |
| item = normalize(item); | | item = normalize(item); |
| 第541行: |
第397行: |
| a.className = "jzy-card"; | | a.className = "jzy-card"; |
| a.href = item.url || pageUrl(page); | | a.href = item.url || pageUrl(page); |
|
| |
| var icon = document.createElement("span"); | | var icon = document.createElement("span"); |
| icon.className = "jzy-icon"; | | icon.className = "jzy-icon"; |
|
| |
| var fallback = document.createElement("span"); | | var fallback = document.createElement("span"); |
| fallback.className = "jzy-fallback"; | | fallback.className = "jzy-fallback"; |
| fallback.textContent = String(item.label).charAt(0); | | fallback.textContent = String(item.label).charAt(0); |
| fallback.style.display = item.icon ? "none" : "flex"; | | fallback.style.display = "flex"; |
| | |
| if (item.icon) { | | if (item.icon) { |
| var img = document.createElement("img"); | | var img = document.createElement("img"); |
| img.alt = item.label; | | img.alt = item.label; |
| img.src = item.icon; | | img.src = item.icon; |
| img.onerror = function () { | | img.onerror = function () { img.remove(); fallback.style.display = "flex"; }; |
| img.remove();
| |
| fallback.style.display = "flex";
| |
| };
| |
| icon.appendChild(img); | | icon.appendChild(img); |
| } | | } |
|
| |
| var name = document.createElement("span"); | | var name = document.createElement("span"); |
| name.className = "jzy-name"; | | name.className = "jzy-name"; |
| name.textContent = item.label; | | name.textContent = item.label; |
|
| |
| icon.appendChild(fallback); | | icon.appendChild(fallback); |
| a.appendChild(icon); | | a.appendChild(icon); |
| 第570行: |
第418行: |
| return a; | | return a; |
| } | | } |
|
| |
| function render(id) { | | function render(id) { |
| var group = groups.find(function(g) { return g.id === id; }) || groups[0]; | | var group = groups.find(function(g) { return g.id === id; }) || groups[0]; |
| heading.textContent = group.title; | | heading.textContent = group.title; |
| grid.innerHTML = ""; | | grid.innerHTML = ""; |
| group.items.forEach(function(item) { | | group.items.forEach(function(item) { grid.appendChild(makeCard(item)); }); |
| grid.appendChild(makeCard(item));
| |
| });
| |
| tabs.querySelectorAll(".jzy-tab").forEach(function(btn) { | | tabs.querySelectorAll(".jzy-tab").forEach(function(btn) { |
| btn.classList.toggle("is-active", btn.dataset.id === group.id); | | btn.classList.toggle("is-active", btn.dataset.id === group.id); |
| }); | | }); |
| } | | } |
|
| |
| groups.forEach(function(group) { | | groups.forEach(function(group) { |
| var btn = document.createElement("button"); | | var btn = document.createElement("button"); |
| 第589行: |
第433行: |
| btn.dataset.id = group.id; | | btn.dataset.id = group.id; |
| btn.textContent = group.tab; | | btn.textContent = group.tab; |
| btn.onclick = function() { | | btn.onclick = function() { render(group.id); }; |
| render(group.id);
| |
| };
| |
| tabs.appendChild(btn); | | tabs.appendChild(btn); |
| }); | | }); |
|
| |
| render("base"); | | render("base"); |
| })(); | | })(); |
| /* ===== 全局背景与字体 ===== */
| |
| body {
| |
| color: #e0e0e0;
| |
| background: url("/images/1/18/%E4%B8%BB%E9%A1%B5%E8%83%8C%E6%99%AF1980.png") no-repeat fixed center center / cover;
| |
| }
| |
|
| |
| /* ===== 内容区 — 轻透玻璃质感,让背景图自然透出 ===== */
| |
| #mw-page-base,
| |
| .mw-body,
| |
| .mw-body-content {
| |
| background: rgba(20, 35, 50, 0.42) !important;
| |
| color: #d8e0e8 !important;
| |
| }
| |
|
| |
| /* 侧边栏 */
| |
| #mw-panel {
| |
| background: rgba(15, 28, 40, 0.48) !important;
| |
| color: #c8d4e0 !important;
| |
| }
| |
|
| |
| /* 正文段落 */
| |
| .mw-body-content p {
| |
| line-height: 1.85 !important;
| |
| color: #d8e0e8 !important;
| |
| }
| |
|
| |
| /* 粗体文字 */
| |
| .mw-body-content b,
| |
| .mw-body-content strong {
| |
| color: #f0f4f8 !important;
| |
| }
| |
|
| |
| /* ===== 标题层级 ===== */
| |
|
| |
| h1, .firstHeading {
| |
| color: #f0f6fa !important;
| |
| font-weight: 900 !important;
| |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
| |
| }
| |
|
| |
| h2 {
| |
| color: #a0e0ec !important;
| |
| font-weight: 800 !important;
| |
| font-size: 1.65em !important;
| |
| border-bottom: none !important;
| |
| padding-bottom: 6px !important;
| |
| text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
| |
| }
| |
|
| |
| h2::after {
| |
| content: '';
| |
| display: block;
| |
| width: 100%;
| |
| height: 3px;
| |
| margin-top: 10px;
| |
| border-radius: 2px;
| |
| background: linear-gradient(90deg, #6ec8d8, #5ab878, #d4a848);
| |
| }
| |
|
| |
| h3 {
| |
| color: #a0e0b8 !important;
| |
| font-weight: 700 !important;
| |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
| |
| }
| |
|
| |
| h4 {
| |
| color: #90d0e0 !important;
| |
| font-weight: 700 !important;
| |
| }
| |
|
| |
| /* ===== 链接颜色 ===== */
| |
|
| |
| .mw-body-content a:link {
| |
| color: #78d8f0 !important;
| |
| }
| |
|
| |
| .mw-body-content a:visited {
| |
| color: #68c0d8 !important;
| |
| }
| |
|
| |
| .mw-body-content a:hover {
| |
| color: #f4cf78 !important;
| |
| text-decoration: underline !important;
| |
| }
| |
|
| |
| #mw-panel a:link,
| |
| #mw-panel a:visited {
| |
| color: #a8d0e0 !important;
| |
| }
| |
|
| |
| #mw-panel a:hover {
| |
| color: #f4cf78 !important;
| |
| }
| |
|
| |
| /* ===== TOC 目录 ===== */
| |
|
| |
| .toc {
| |
| background: rgba(20, 35, 50, 0.5) !important;
| |
| border: 1px solid rgba(120, 180, 200, 0.25) !important;
| |
| border-radius: 10px !important;
| |
| padding: 14px 18px !important;
| |
| color: #d0dce8 !important;
| |
| }
| |
|
| |
| .toc h2 {
| |
| color: #a0e0ec !important;
| |
| font-weight: 700 !important;
| |
| }
| |
|
| |
| .toclevel-1 > .toclink::before {
| |
| content: '▸ ';
| |
| color: #78d8f0;
| |
| }
| |
|
| |
| /* ===== 页脚 ===== */
| |
| #footer {
| |
| color: #90a0b0 !important;
| |
| }
| |
|
| |
| /* ===== 用户原有 CSS 类 — 与海洋主题匹配的适中色调 ===== */
| |
|
| |
| .feature-card {
| |
| padding: 18px 14px;
| |
| border-radius: 12px;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| border-bottom: 3px solid;
| |
| }
| |
| .feature-card-blue {
| |
| background: rgba(8, 43, 58, 0.75);
| |
| color: #c8eef0;
| |
| border-bottom-color: #0a8b94;
| |
| }
| |
| .feature-card-green {
| |
| background: rgba(10, 46, 31, 0.75);
| |
| color: #b8e6cc;
| |
| border-bottom-color: #1a7a4c;
| |
| }
| |
| .feature-card-orange {
| |
| background: rgba(46, 31, 8, 0.75);
| |
| color: #f0d9a8;
| |
| border-bottom-color: #b8860b;
| |
| }
| |
| .feature-card-red {
| |
| background: rgba(46, 16, 31, 0.75);
| |
| color: #e8b8d0;
| |
| border-bottom-color: #9b3068;
| |
| }
| |
|
| |
| .hot-card {
| |
| padding: 14px 16px;
| |
| border-radius: 8px;
| |
| font-weight: 600;
| |
| text-align: center;
| |
| border-bottom: 3px solid;
| |
| }
| |
| .hot-card-green {
| |
| background: rgba(10, 46, 31, 0.75);
| |
| color: #b8e6cc;
| |
| border-bottom-color: #1a7a4c;
| |
| }
| |
| .hot-card-red {
| |
| background: rgba(46, 16, 31, 0.75);
| |
| color: #e8b8d0;
| |
| border-bottom-color: #9b3068;
| |
| }
| |
| .hot-card-cyan {
| |
| background: rgba(8, 43, 58, 0.75);
| |
| color: #c8eef0;
| |
| border-bottom-color: #0a8b94;
| |
| }
| |
| .hot-card-orange {
| |
| background: rgba(46, 31, 8, 0.75);
| |
| color: #f0d9a8;
| |
| border-bottom-color: #b8860b;
| |
| }
| |
|
| |
| .stat-card {
| |
| padding: 20px 16px;
| |
| border-radius: 12px;
| |
| text-align: center;
| |
| font-weight: 700;
| |
| border-bottom: 3px solid;
| |
| }
| |
| .stat-card-blue {
| |
| background: rgba(8, 43, 58, 0.75);
| |
| color: #c8eef0;
| |
| border-bottom-color: #0a8b94;
| |
| }
| |
| .stat-card-green {
| |
| background: rgba(10, 46, 31, 0.75);
| |
| color: #b8e6cc;
| |
| border-bottom-color: #1a7a4c;
| |
| }
| |
|
| |
| .divider {
| |
| border: 0;
| |
| border-bottom: 3px solid;
| |
| margin: 20px 0;
| |
| }
| |
|
| |
| /* ===== 移动端适配 ===== */
| |
| @media (max-width: 560px) {
| |
| h2 {
| |
| font-size: 1.35em !important;
| |
| }
| |
| h2::after {
| |
| height: 2px;
| |
| margin-top: 6px;
| |
| }
| |
| }
| |
| </script> | | </script> |
| </div> | | </div> |
| </html> | | </html> |
| | |
| <div class="jzy-divider"></div> | | <div class="jzy-divider"></div> |
|
| |
|