From 5def59df2790c3a65b07c3a169c3b38c983eea3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E5=AE=87?= Date: Fri, 4 Sep 2026 18:45:03 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- world.html | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 76 insertions(+), 6 deletions(-) diff --git a/world.html b/world.html index 3bc4a31..e22b96c 100644 --- a/world.html +++ b/world.html @@ -245,6 +245,47 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .toolbar-toggle{ background:rgba(139,92,246,.2); border-color:rgba(139,92,246,.5); color:#c4b5fd; } .toolbar-toggle:hover{ background:linear-gradient(135deg, rgba(139,92,246,.4), rgba(74,175,255,.3)); border-color:rgba(139,92,246,.7); color:#fff; } +/* ===== 任务侧栏（左侧固定面板，独立于通用 modal） ===== */ +.task-side-panel{ + position: fixed; left: max(14px, env(safe-area-inset-left)); top: calc(58px + env(safe-area-inset-top) + 12px + 100px); + width: 320px; + /* 高度限制：可用高度(减 topBar58 + bottomBar72 + padding24 + 安全区)再减半，避免盖住聊天框 */ + max-height: calc((100vh - 58px - 72px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); + z-index: 250; /* 高于 #microView(200)，进入微观世界也能看到；低于 #dataPanel(260) 与 #appModal(400) */ + display:flex; flex-direction: column; + background: linear-gradient(180deg, rgba(17,23,42,.96), rgba(10,14,26,.96)); + border: 1px solid rgba(139,92,246,.35); border-radius: 14px; + box-shadow: 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); + backdrop-filter: blur(8px); + font-size: 13px; color: #cfd5ea; +} +.task-side-panel[hidden]{ display:none !important; } +.tsp-head{ + display: flex; align-items: center; justify-content: space-between; + padding: 12px 14px; border-bottom: 1px solid rgba(139,92,246,.22); flex: 0 0 auto; +} +.tsp-title{ font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .5px; } +.tsp-close{ + width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); + background: rgba(255,80,80,.12); color: #ffaaaa; + font-size: 14px; font-weight: 700; cursor: pointer; + display: inline-flex; align-items: center; justify-content: center; + transition: background .15s, transform .12s; +} +.tsp-close:hover{ background: rgba(255,80,80,.28); color: #fff; transform: scale(1.06); } +.tsp-close:active{ transform: scale(.94); } +.tsp-body{ flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.35) rgba(255,255,255,.04); } +.tsp-body::-webkit-scrollbar{ width: 6px; } +.tsp-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 4px; } +.tsp-body::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.35); border-radius: 4px; } +.tsp-body::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.55); } +@media (max-width: 768px){ + .task-side-panel{ width: min(300px, calc(100vw - 28px)); } +} +@media (max-width: 420px){ + .task-side-panel{ left: 8px; right: 8px; width: auto; max-height: 50vh; } +} + /* 世界等级经验条（位于 bottomBar 内最左侧，加大加清晰） */ #worldExpBarWrap{ flex:0 0 auto; width:520px; height:100%; @@ -1173,7 +1214,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
清晨 07:30
星元 1年 · 春
- + + + +
✦星空
@@ -2830,16 +2884,25 @@ async function openTaskPanel() { // 首次进入可能任务数据尚未拉取，先确保就绪；再发射"打开面板"事件（ch1_welcome 由此变可领取） if (!taskData) await fetchTasks(); await emitTaskEvent('panel_opened'); - const body = `
${renderTaskPanel()}
-
完成主线任务可获经验与金币，推动世界成长。
`; - openAppModal('任务', body); - // 绑定领取按钮（setTimeout 等待 modal 注入 DOM） + const sideBody = document.getElementById('taskSideBody'); + if (sideBody) { + sideBody.innerHTML = `
${renderTaskPanel()}
+
完成主线任务可获经验与金币，推动世界成长。
`; + } + const panel = document.getElementById('taskSidePanel'); + if (panel) panel.hidden = false; + setMenuOpen(false); + // 绑定领取按钮（setTimeout 等待 DOM 注入） setTimeout(() => { document.querySelectorAll('.task-claim-btn').forEach(btn => { btn.addEventListener('click', () => claimTask(btn.getAttribute('data-code'), btn)); }); }, 30); } +function closeTaskPanel() { + const panel = document.getElementById('taskSidePanel'); + if (panel) panel.hidden = true; +} async function claimTask(code, btn) { try { @@ -8435,7 +8498,14 @@ if (typeof fitWorld === 'function') fitWorld(); document.getElementById('sceneToolbar').classList.toggle('collapsed'); }); const btnTask = document.getElementById('btnTask'); - if (btnTask) btnTask.addEventListener('click', () => { openTaskPanel(); }); + if (btnTask) btnTask.addEventListener('click', () => { + // 任务面板是左侧常驻侧栏：再次点击同一按钮可关闭（toggle） + const panel = document.getElementById('taskSidePanel'); + if (panel && !panel.hidden) { closeTaskPanel(); return; } + openTaskPanel(); + }); + const taskSideClose = document.getElementById('taskSideClose'); + if (taskSideClose) taskSideClose.addEventListener('click', () => closeTaskPanel()); const btnMall = document.getElementById('btnMall'); if (btnMall) btnMall.addEventListener('click', () => { openAppModal('商城', '
商城系统即将开放

可购买皮肤、道具、加速器与会员服务。
'); -- 2.34.1