diff --git a/gmweb/app.js b/gmweb/app.js index f248463..64a16e7 100644 --- a/gmweb/app.js +++ b/gmweb/app.js @@ -66,6 +66,7 @@ for (var j = 0; j < panes.length; j++) { panes[j].className = 'pane' + (panes[j].id === 'pane-' + name ? ' on' : ''); } + try { if (location.hash !== '#' + name) location.hash = '#' + name; } catch (e) { } } function bindTabs() { @@ -73,6 +74,13 @@ for (var i = 0; i < tabs.length; i++) { tabs[i].onclick = function () { switchTab(this.getAttribute('data-tab')); }; } + // 支持用 #item / #char / #about / #home 直接打开某一页 + var h = (location.hash || '').replace('#', ''); + if (h && document.getElementById('pane-' + h)) switchTab(h); + window.onhashchange = function () { + var n = (location.hash || '').replace('#', ''); + if (n && document.getElementById('pane-' + n)) switchTab(n); + }; } /* ---------------------------------------------------------------- 状态页 */ @@ -419,16 +427,20 @@ function bindQr(id) { var img = $(id); if (!img) { return; } - img.onerror = function () { - var box = this.parentNode; + function showMiss() { + var box = img.parentNode; if (box) { box.className = 'qr-box miss'; } - this.style.display = 'none'; - }; - img.onload = function () { - var box = this.parentNode; + img.style.display = 'none'; + } + function showImg() { + var box = img.parentNode; if (box) { box.className = 'qr-box'; } - this.style.display = ''; - }; + img.style.display = ''; + } + img.onerror = showMiss; + img.onload = showImg; + /* 图片是 HTML 里带的 src，可能在脚本执行前就已经 404 了，onerror 来不及触发 */ + if (img.complete && img.naturalWidth === 0) { showMiss(); } } /* ---------------------------------------------------------------- 启动 */ @@ -501,6 +513,7 @@ fillTypeOptions(); bindQr('qr-alipay'); bindQr('qr-wechat'); + bindQr('qr-gzh'); renderPicked(); forceIME(); diff --git a/gmweb/index.html b/gmweb/index.html index 3f4057d..9b69f95 100644 --- a/gmweb/index.html +++ b/gmweb/index.html @@ -4,20 +4,19 @@ GM 控制台 - + -
+
+
连接中…
-
- 状态 - 角色 - 发物品 - 赞助 -
-
@@ -130,30 +129,56 @@
强化 0-31、增幅等级 0-31、锻造 0-8。增幅填了就直接覆盖强化（红字装不能同时白字强化），非装备行忽略这些值。
-
-
赞助支持
-
服务器长期免费维护。如果玩得开心，可以扫码赞助一点，金额随意，感谢支持。
-
-
-
支付宝
-
支付宝收款码 -
二维码未配置
gmweb\qr\alipay.png
+
+
+
+
地下城与勇士 · 九零轮回单机
+
汉服电脑宅 · 灵宝小竹模拟器
+
由灵宝仙尊联合淡竹茹开发，由汉服电脑宅团队开发维护
+
本模拟器资源禁止倒卖，请到官方微信公众号或社群下载
+
+ +
+
+
赞助我们
+
+
+
支付宝
+
支付宝收款码 +
二维码未配置
gmweb\qr\alipay.png
+
+
+
+
微信
+
微信收款码 +
二维码未配置
gmweb\qr\wechat.png
+
+
+
金额随意，感谢支持。扫码后备注游戏名，方便记录。
-
-
微信
-
微信收款码 -
二维码未配置
gmweb\qr\wechat.png
+ +
+
团队公众号
+
+
+
扫码关注
+
团队公众号二维码 +
二维码未配置
gmweb\qr\gzh.jpg
+
+
+
更新公告 · 开服时间
-
把收款码图片按上面的文件名放进 gmweb\qr\ 目录，刷新这一页就会显示；换成 jpg 也可以，改一下上面的文件名后缀即可。
+
+
- + diff --git a/gmweb/qr/alipay.png b/gmweb/qr/alipay.png new file mode 100644 index 0000000..9da38f7 Binary files /dev/null and b/gmweb/qr/alipay.png differ diff --git a/gmweb/qr/gzh.jpg b/gmweb/qr/gzh.jpg new file mode 100644 index 0000000..47a7bf8 Binary files /dev/null and b/gmweb/qr/gzh.jpg differ diff --git a/gmweb/qr/wechat.png b/gmweb/qr/wechat.png new file mode 100644 index 0000000..ba4b11b Binary files /dev/null and b/gmweb/qr/wechat.png differ diff --git a/gmweb/qr/放收款码到这里.txt b/gmweb/qr/放收款码到这里.txt index 0844e0f..f5c27f4 100644 --- a/gmweb/qr/放收款码到这里.txt +++ b/gmweb/qr/放收款码到这里.txt @@ -1,11 +1,11 @@ -把收款码图片放到这个目录，文件名固定为： +这个目录存放三张二维码图片，文件名与页面一一对应（已配置好，直接覆盖同名文件即可换图）： - alipay.png 支付宝收款码 - wechat.png 微信收款码 + alipay.png 支付宝收款码 （关于页 · 赞助我们 · 左） + wechat.png 微信收款码 （关于页 · 赞助我们 · 中） + gzh.jpg 团队公众号二维码 （关于页 · 团队公众号 · 右） 说明： -- 建议正方形图片（页面按 194x194 显示，非正方形会被拉伸） -- 支持 png / jpg / jpeg / gif / bmp / webp / svg -- 用 jpg 的话，把 gmweb\index.html 里对应 的后缀改成 .jpg 即可 -- 换图后刷新控制台页面（标题栏的刷新按钮）就能看到，不用重启服务 -- 图片没放时，赞助页显示「二维码未配置」占位，不影响其他功能 +- 三张图都按正方形显示（页面 132x132 等比缩放），原图 600x600 / 430x430 都正常，非正方形会被拉伸变形 +- 支持 png / jpg / jpeg / gif / bmp / webp；若换成别的后缀，需同步改 gmweb\index.html 里对应 的后缀 +- 换图后刷新控制台页面（标题栏刷新按钮或 Ctrl+F5）就能看到，不用重启服务 +- 图片缺失时，关于页会显示「二维码未配置 + 文件路径」的占位，不影响其他功能 diff --git a/gmweb/style.css b/gmweb/style.css index 689c18d..b73aef2 100644 --- a/gmweb/style.css +++ b/gmweb/style.css @@ -5,25 +5,32 @@ html, body { font: 12px/1.5 "Microsoft YaHei", "SimSun", Tahoma, sans-serif; overflow: hidden; } -#hd { - height: 26px; padding: 0 10px; - background: #1d2029; border-bottom: 1px solid #2b3040; - line-height: 26px; +/* 顶部一行：左边页面切换，右边连接状态（绿点 + 文字） */ +#topbar { + height: 32px; padding-left: 4px; + background: #191c24; border-bottom: 1px solid #2b3040; + overflow: hidden; +} +#tabs { float: left; } +#hd-s { + float: right; height: 31px; line-height: 31px; + padding: 0 12px; color: #8d94a6; + border-left: 1px solid #262b36; } -#hd-s { float: right; color: #8d94a6; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; margin-right: 6px; } .dot.on { background: #4ec46a; } .dot.off { background: #b04a4a; } -#tabs { height: 28px; background: #191c24; border-bottom: 1px solid #2b3040; padding-left: 4px; } .tab { - float: left; padding: 0 14px; line-height: 28px; color: #98a0b3; + display: block; float: left; padding: 0 14px; + height: 29px; line-height: 29px; + color: #98a0b3; text-decoration: none; border-bottom: 2px solid transparent; } .tab:hover { color: #d8dbe2; } .tab.on { color: #e8c979; border-bottom-color: #e8c979; background: #20242e; } -#body { position: absolute; top: 55px; bottom: 62px; left: 0; right: 0; overflow: auto; } +#body { position: absolute; top: 33px; bottom: 71px; left: 0; right: 0; overflow: auto; } .pane { display: none; padding: 10px; } .pane.on { display: block; } @@ -111,18 +118,48 @@ select.inp { padding: 3px 2px; } background: #e8c979; color: #1a1e27; border-radius: 2px; } -/* 赞助页：收款码（IE11 不支持 flex，用 float 排两列） */ -.qr-wrap { overflow: hidden; margin-top: 10px; } +/* 关于页：整体是一列居中内容（介绍卡片 + 组合面板），宽度固定 534 */ +/* 关于页整块在可视区里垂直居中：绝对定位 + translateY（IE11 支持 transform） */ +#pane-about.on { display: block; position: relative; height: 100%; box-sizing: border-box; } +#pane-about .about-inner { + position: absolute; top: 50%; left: 10px; right: 10px; + -ms-transform: translateY(-50%); transform: translateY(-50%); +} +.about-card { + width: 534px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box; + background: #1a1e27; border: 1px solid #2b3040; +} +.about-name { color: #e8c979; font-size: 14px; letter-spacing: 1px; } +.about-line { color: #8d94a6; margin-top: 4px; } + +.box { margin-top: 12px; border: 1px solid #2b3040; background: #171b23; } +/* 两个分组框合成一个整体面板：外框统一，中间一条竖线分隔 */ +.cols { + width: 534px; margin: 12px auto 0; + border: 1px solid #2b3040; background: #171b23; overflow: hidden; +} +.cols .box { margin-top: 0; min-height: 264px; float: left; border: 0; background: transparent; box-sizing: border-box; } +.cols .box-l { width: 353px; } +.cols .box-r { width: 179px; border-left: 1px solid #3f4759; background: #14171d; } +.box-hd { + height: 26px; line-height: 26px; padding: 0 10px; + background: #1d2230; border-bottom: 1px solid #2b3040; + color: #e8c979; letter-spacing: 1px; +} +.box-bd { padding: 10px; overflow: hidden; } +.box-note { clear: both; color: #666e80; font-size: 11px; padding-top: 8px; } + .qr-card { - float: left; width: 216px; margin: 0 14px 10px 0; - background: #1a1e27; border: 1px solid #2b3040; padding: 10px; + float: left; width: 158px; margin: 0 8px 0 0; box-sizing: border-box; + background: #1a1e27; border: 1px solid #2b3040; padding: 8px; } .qr-title { color: #e8c979; letter-spacing: 1px; margin-bottom: 8px; } .qr-box { - width: 194px; height: 194px; position: relative; overflow: hidden; - background: #0f1116; border: 1px dashed #3a4154; text-align: center; + width: 140px; height: 140px; position: relative; overflow: hidden; box-sizing: border-box; + background: #0f1116; border: 1px dashed #3a4154; padding: 3px; text-align: center; } -.qr-box img { display: block; width: 194px; height: 194px; } -.qr-miss { display: none; padding-top: 72px; color: #666e80; line-height: 1.8; } +.qr-box img { display: block; width: 132px; height: 132px; background: #fff; } +.qr-miss { display: none; padding-top: 44px; color: #666e80; line-height: 1.8; } .qr-box.miss .qr-miss { display: block; } .qr-path { color: #4c5365; font-size: 11px; margin-top: 2px; } +