From c4c95926d7f695ba557436d5c6c652d17125ecb3 Mon Sep 17 00:00:00 2001 From: yuthonyun Date: Fri, 24 Jul 2026 19:02:40 +0800 Subject: [PATCH] =?UTF-8?q?style(frontend):=20yt=20=E9=9D=99=E6=80=81?= =?UTF-8?q?=E7=AB=99=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=93=8D=E5=BA=94=E5=BC=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D=EF=BC=88=E9=A1=B6=E6=A0=8F=E6=8A=98=E5=8F=A0?= =?UTF-8?q?/=E5=AE=89=E5=85=A8=E5=8C=BA/=E7=94=BB=E5=B8=83=E8=A7=A6?= =?UTF-8?q?=E6=91=B8=E5=B9=B3=E7=A7=BB=E7=BC=A9=E6=94=BE=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 52 ++++++++++++++++++++++++++++++++++- login.html | 11 ++++++-- world.html | 79 +++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 133 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index ac8424a..f10ed9c 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + 宇森 · Yusen｜活的文明系统模拟 @@ -299,6 +299,56 @@ .nav{overflow-x:auto;scrollbar-width:none;} .nav::-webkit-scrollbar{display:none;} } + + /* ===== 移动端适配（手机 / 平板竖屏） ===== */ + @media (max-width:768px){ + html,body{height:100%;} + body{height:100dvh;} + .app{height:100dvh;} + .topbar{height:auto;min-height:54px;flex-wrap:wrap;align-items:center;padding:8px 14px;gap:10px;} + .logo .cn{font-size:22px;letter-spacing:2px;} + .logo .en{display:none;} + .spacer{display:none;} + .user-box{margin-left:auto;font-size:13px;gap:8px;} + .user-box .auth-btn{padding:6px 13px;font-size:12px;} + .nav{order:3;flex:1 0 100%;width:100%;margin-left:0;gap:4px;padding-top:6px;border-top:1px solid var(--card-bd);} + .nav button{font-size:13px;padding:7px 9px;white-space:nowrap;} + .hero .copy{left:18px;right:18px;bottom:82px;} + .hero .copy h1{font-size:32px;letter-spacing:4px;} + .hero .copy .tag{font-size:16px;} + .hero .copy .desc{font-size:13.5px;max-width:100%;} + .hero .enter-wrap{bottom:28px;} + .hero .enter-btn{font-size:15px;padding:11px 30px;} + .panel{padding:18px 18px;} + .sec-title{font-size:26px;letter-spacing:2px;} + .bg-page-title{font-size:30px;} + .bg-page-body{font-size:15.5px;line-height:1.9;} + .grid{grid-template-columns:repeat(2,1fr);gap:12px;} + .card{min-height:120px;padding:15px 16px;} + .codex-search{width:140px;} + .reader-inner{padding:26px 18px 80px;} + .reader-inner h1{font-size:23px;} + #worlddata{padding:28px 16px 80px;} + #background{padding:30px 16px 80px;} + .story-toc{flex-basis:auto;} + .tier-row{grid-template-columns:72px 92px 1fr;gap:8px;} + } + @media (max-width:480px){ + .topbar{padding:8px 10px;gap:8px;} + .logo .cn{font-size:20px;} + .nav button{font-size:12px;padding:6px 7px;} + .user-box .auth-btn{padding:6px 11px;} + .hero .copy{left:14px;right:14px;bottom:74px;} + .hero .copy h1{font-size:26px;letter-spacing:2px;} + .hero .copy .tag{font-size:14px;} + .grid{grid-template-columns:1fr;} + .panel{padding:14px 14px;} + .codex-search{width:118px;flex:1 1 100%;} + .codex-subrow{flex-wrap:wrap;} + .reader-inner{padding:22px 14px 70px;} + .tier-row{grid-template-columns:60px 76px 1fr;gap:6px;} + .codex-cats button,.codex-subs button{padding:7px 11px;font-size:13px;} + } diff --git a/login.html b/login.html index 98926fc..b2e7e16 100644 --- a/login.html +++ b/login.html @@ -2,7 +2,7 @@ - + 宇森 · 登录 diff --git a/world.html b/world.html index 297b520..614c1f2 100644 --- a/world.html +++ b/world.html @@ -2,7 +2,7 @@ - + 宇森 - 微观场景 @@ -10,16 +10,16 @@ @@ -2923,6 +2939,57 @@ canvas.addEventListener('mouseleave', () => { document.getElementById('coords').style.display = 'none'; }); +// ============ 移动端触摸支持（单指平移/点选 + 双指捏合缩放）============ +(function setupTouch(){ + if (!('ontouchstart' in window)) return; // 仅触摸设备启用，桌面不受影响 + canvas.style.touchAction = 'none'; + let mode = null; // 'pan' | 'pinch' + let panId = null; + let lastDist = 0; + const fire = (type, t) => canvas.dispatchEvent(new MouseEvent(type, { + clientX: t.clientX, clientY: t.clientY, button: 0, buttons: 1, + bubbles: true, cancelable: true + })); + canvas.addEventListener('touchstart', e => { + if (microViewOpen) return; + if (e.touches.length === 1) { + mode = 'pan'; panId = e.touches[0].identifier; + e.preventDefault(); + fire('mousedown', e.touches[0]); + } else if (e.touches.length >= 2) { + if (mode === 'pan') { fire('mouseup', e.touches[0]); } + mode = 'pinch'; + lastDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); + e.preventDefault(); + } + }, { passive: false }); + canvas.addEventListener('touchmove', e => { + if (microViewOpen) return; + if (mode === 'pan' && e.touches.length === 1) { + const t = e.touches[0]; + if (t.identifier === panId) { e.preventDefault(); fire('mousemove', t); } + } else if (mode === 'pinch' && e.touches.length >= 2) { + e.preventDefault(); + const d = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY); + if (lastDist > 0) { + camera.zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, camera.zoom * (d / lastDist))); + } + lastDist = d; + } + }, { passive: false }); + const endTouch = e => { + if (mode === 'pan') { fire('mouseup', e.changedTouches[0]); } + else if (mode === 'pinch' && e.touches.length === 1) { + // 从捏合退回单指：重置为平移起点，避免相机跳变 + mode = 'pan'; panId = e.touches[0].identifier; + fire('mousedown', e.touches[0]); + } + if (e.touches.length === 0) mode = null; + }; + canvas.addEventListener('touchend', endTouch); + canvas.addEventListener('touchcancel', endTouch); +})(); + // ============ 建造模式：地形 & 板块交换 ============ // 地形笔：点击地块刷地形 + 选定素材变体（仅大地层） function handleBuildClick(tile) {