diff --git a/assets/game-api.js b/assets/game-api.js index 9869dd8..4029431 100644 --- a/assets/game-api.js +++ b/assets/game-api.js @@ -1,27 +1,41 @@ // 宇森游戏 · 前端与 Odoo 通信层 -// 本地调试:前端 8888 -> Odoo 8069(跨域,带调试 CORS 头) +// 本地调试:前端 8080/8888 -> Odoo 8069(跨域,带调试 CORS 头) // 生产部署:前端与 Odoo 同域,由 nginx 代理 /game/*。 // 库名说明:本地 Odoo 用 odoo.conf 钉死 yt_game;线上游戏库名为 game(dbfilter 不含 yt_game)。 // game/* 走统一 API_CONFIG.db;yt_world/* 单独带 ?db=,按 WORLD_DB 区分本地/线上,避免 git 同步互相覆盖。 +const _isLocalDev = () => + location.hostname === '127.0.0.1' || location.hostname === 'localhost'; + +const _isDevPort = (port) => + location.port === String(port) || + // 某些环境(如 Python http.server)可能不设 port(默认 80)或用空串 + (port === 80 && (location.port === '' || location.port === '80')); + const API_CONFIG = { - base: (location.hostname === '127.0.0.1' && location.port === '8888') - ? 'http://127.0.0.1:8069' - : (location.hostname === 'localhost' && location.port === '8888') - ? 'http://127.0.0.1:8069' - : '', - db: (location.hostname === '127.0.0.1' && location.port === '8888') ? 'study' : 'game', + base: (_isLocalDev() && (_isDevPort(8080) || _isDevPort(8888))) + ? `http://${location.hostname}:8069` + : '', + db: (_isLocalDev() && (_isDevPort(8080) || _isDevPort(8888))) ? 'study' : 'game', }; // 世界(yt_world)所在库:本地 Odoo 钉 yt_game;线上游戏库名为 game。按域名自适应,git 同步不冲突。 -const WORLD_DB = (location.hostname === '127.0.0.1' || location.hostname === 'localhost') ? 'yt_game' : 'game'; +const WORLD_DB = _isLocalDev() ? 'yt_game' : 'game'; + +// Odoo 后端基础 URL(世界 API 专用,兼容本地跨域 / 生产同域) +const WORLD_BASE = API_CONFIG.base || ''; const _cred = API_CONFIG.base ? 'include' : 'same-origin'; +const _wcred = WORLD_BASE ? 'include' : 'same-origin'; function _url(path) { return `${API_CONFIG.base}${path}?db=${API_CONFIG.db}`; } +function _worldUrl(path) { + return `${WORLD_BASE}${path}?db=${WORLD_DB}`; +} + const API = { async me() { return (await fetch(_url('/game/api/me'), { credentials: _cred })).json(); @@ -71,25 +85,25 @@ const API = { }, // ---------- 沙盘记忆(yt_world 模块) ---------- async world() { - return (await fetch('/yt_world/api/world?db=' + WORLD_DB, { credentials: 'same-origin' })).json(); + return (await fetch(_worldUrl('/yt_world/api/world'), { credentials: _wcred })).json(); }, async saveTiles(tiles) { - return (await fetch('/yt_world/api/tiles/save?db=' + WORLD_DB, { - method: 'POST', credentials: 'same-origin', + return (await fetch(_worldUrl('/yt_world/api/tiles/save'), { + method: 'POST', credentials: _wcred, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tiles }), })).json(); }, async saveSettings(settings) { - return (await fetch('/yt_world/api/settings?db=' + WORLD_DB, { - method: 'POST', credentials: 'same-origin', + return (await fetch(_worldUrl('/yt_world/api/settings'), { + method: 'POST', credentials: _wcred, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings }), })).json(); }, async renameWorld(name) { - return (await fetch('/yt_world/api/world/rename?db=' + WORLD_DB, { - method: 'POST', credentials: 'same-origin', + return (await fetch(_worldUrl('/yt_world/api/world/rename'), { + method: 'POST', credentials: _wcred, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }), })).json(); @@ -97,14 +111,14 @@ const API = { // ---------- 世界数据 / 包裹(后端接口预留:yt_world 暂未实现路由,前端 mock 兜底) ---------- async worldData() { try { - const r = await fetch('/yt_world/api/data?db=' + WORLD_DB, { credentials: 'same-origin' }); + const r = await fetch(_worldUrl('/yt_world/api/data'), { credentials: _wcred }); if (!r.ok) return null; return await r.json(); } catch (e) { return null; } }, async inventory() { try { - const r = await fetch('/yt_world/api/inventory?db=' + WORLD_DB, { credentials: 'same-origin' }); + const r = await fetch(_worldUrl('/yt_world/api/inventory'), { credentials: _wcred }); if (!r.ok) return null; return await r.json(); } catch (e) { return null; } diff --git a/world.html b/world.html index 13367ab..e813d30 100644 --- a/world.html +++ b/world.html @@ -33,18 +33,22 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa } #topBar .title img { width: 34px; height: 34px; border-radius: 7px; box-shadow: 0 0 12px rgba(74,175,255,.5); } #topBar .title .worldName { - font-size: 15px; font-weight: 600; color: #cfe1f3; -webkit-text-fill-color: #cfe1f3; - margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.28); + font-size: 22px; font-weight: 700; color: #cfe1f3; -webkit-text-fill-color: #cfe1f3; + pointer-events: auto; + position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); + white-space: nowrap; + padding: 4px 14px; border: 1.5px solid rgba(139,92,246,.55); border-radius: 8px; + background: rgba(10,14,23,.75); box-shadow: 0 0 12px rgba(139,92,246,.2); } #topBar .title .worldName.editable { cursor: pointer; padding: 2px 8px; border-radius: 5px; transition: background .15s; } #topBar .title .worldName.editable:hover { background: rgba(255,255,255,.08); } #topBar .title .worldName-input { background: transparent; border: 1px solid rgba(124,199,255,.6); color: #cfe1f3; font-size: 15px; font-weight: 600; padding: 2px 6px; border-radius: 5px; width: 180px; - font-family: inherit; outline: none; margin-left: 10px; padding-left: 10px; + font-family: inherit; outline: none; } #topBar .topRight { margin-left:auto; display:flex; align-items:center; gap:14px; } -#topBar .coords { font-size: 14px; color: #a8b8cc; } +#topBar .coords { font-size: 16px; font-weight: 700; color: #e6f0fb; font-variant-numeric: tabular-nums; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,0,0,.7); } /* ===== 顶部右侧用户区(融合进 #topBar,恒在最右侧) ===== */ #topBar .userArea{position:relative;pointer-events:auto;} @@ -57,18 +61,91 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa #topBar .ua-name{font-weight:600;color:#c77dff;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #topBar .ua-caret{font-size:10px;color:#9aa6c4;} #topBar .ua-trigger[aria-expanded="true"] .ua-caret{transform:rotate(180deg);} -#topBar .ua-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px; - background:#0e1428;border:1px solid rgba(139,92,246,.45);border-radius:12px;padding:6px; - box-shadow:0 4px 12px rgba(0,0,0,.5);z-index:120; - visibility:hidden;opacity:0;pointer-events:none;} -#topBar .ua-menu.open{visibility:visible;opacity:1;pointer-events:auto;} +/* 右侧滑出面板(玩家中心):参考左侧 #worldNav 的毛玻璃质感,从右侧整屏展开 */ +#uaBackdrop{position:fixed;inset:0;z-index:199;background:rgba(4,7,15,.5); + backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;} +#uaBackdrop.open{opacity:1;visibility:visible;} +#topBar .ua-menu{position:fixed;top:0;right:0;height:100vh;width:340px;max-width:86vw;z-index:210; + background:linear-gradient(180deg,rgba(17,23,42,.98),rgba(10,14,26,.98)); + border-left:1px solid rgba(139,92,246,.35);box-shadow:-14px 0 44px rgba(0,0,0,.55); + transform:translateX(106%);transition:transform .34s cubic-bezier(.22,.61,.36,1); + display:flex;flex-direction:column;overflow:hidden;} +#topBar .ua-menu.open{transform:translateX(0);} +#topBar .ua-menu *{box-sizing:border-box;} + +/* 头部 */ +.ua-head{display:flex;align-items:center;gap:12px;padding:18px 18px 14px; + background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(74,175,255,.12)); + border-bottom:1px solid rgba(255,255,255,.08);} +.ua-head-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;} +.ua-avatar-lg{width:48px;height:48px;border-radius:50%;flex:0 0 auto; + background:linear-gradient(135deg,#c77dff,#4af);display:flex;align-items:center;justify-content:center; + font-size:20px;font-weight:700;color:#fff;box-shadow:0 0 16px rgba(199,125,255,.5);} +.ua-head-info{min-width:0;} +.ua-head-name{font-size:17px;font-weight:700;color:#eef2fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} +.ua-head-sub{font-size:12px;color:#9fb0c8;margin-top:2px;display:flex;align-items:center;gap:6px;} +.ua-dot{width:7px;height:7px;border-radius:50%;background:#46e07a;box-shadow:0 0 8px #46e07a;} +.ua-close{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.14); + background:rgba(255,255,255,.05);color:#cdd8e6;font-size:14px;cursor:pointer;transition:.15s;} +.ua-close:hover{background:rgba(239,68,68,.2);color:#ffb4b4;border-color:rgba(239,68,68,.4);} + +/* 滚动区 */ +.ua-scroll{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px;} +.ua-scroll::-webkit-scrollbar{width:6px;} +.ua-scroll::-webkit-scrollbar-thumb{background:rgba(139,92,246,.4);border-radius:3px;} + +/* 卡片通用 */ +.ua-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;} +.ua-card-h{font-size:14px;font-weight:700;color:#dbe4f5;margin-bottom:10px;display:flex;align-items:center;gap:6px;} + +/* 缔造者等级卡 */ +.ua-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} +.ua-lv{font-size:13px;color:#cdd8e6;} +.ua-lv b{font-size:20px;color:#c77dff;font-weight:800;margin-left:2px;} +.ua-title{font-size:12px;color:#9fb0c8;padding:3px 10px;border-radius:999px;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.35);} +.ua-exp{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;} +.ua-exp-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#4af);border-radius:4px;} +.ua-exp-txt{font-size:11px;color:#8899aa;margin-top:5px;} + +/* 我的世界概览 */ +.ua-world-name{font-size:16px;font-weight:700;color:#eaf4ff;margin-bottom:12px; + padding:8px 10px;border-radius:10px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3); + overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} +.ua-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;} +.ua-stat{background:rgba(255,255,255,.03);border-radius:10px;padding:8px 10px;text-align:center;} +.ua-stat-v{font-size:15px;font-weight:700;color:#e6f0fb;} +.ua-stat-l{font-size:11px;color:#8899aa;margin-top:2px;} +.ua-res{display:flex;flex-direction:column;gap:7px;} +.ua-res-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#cdd8e6;} +.ua-res-row>span:first-child{width:62px;flex:0 0 auto;} +.ua-res-bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;} +.ua-res-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8b5cf6,#4af);} +.ua-res-row b{width:42px;text-align:right;color:#e6f0fb;font-size:12px;} + +/* 成就 */ +.ua-ach{display:flex;flex-direction:column;gap:8px;} +.ua-ach-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);} +.ua-ach-item.done{background:rgba(70,224,122,.1);border:1px solid rgba(70,224,122,.25);} +.ua-ach-item.locked{opacity:.55;} +.ua-ach-ic{font-size:18px;flex:0 0 auto;} +.ua-ach-t{font-size:13px;font-weight:600;color:#e6f0fb;} +.ua-ach-d{font-size:11px;color:#8899aa;margin-top:2px;} +.ua-ach-bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:4px;} +.ua-ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#4af);border-radius:3px;} + +/* 快捷操作 + 底部 */ +.ua-actions{display:flex;flex-direction:column;gap:6px;} #topBar .ua-item{display:flex;align-items:center;justify-content:space-between;width:100%; - background:transparent;border:none;color:#cfd5ea;padding:9px 12px;border-radius:8px; - font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:.15s;} -#topBar .ua-item:not(:disabled):hover{background:rgba(139,92,246,.2);color:#fff;} + background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#cfd5ea; + padding:11px 14px;border-radius:11px;font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:.15s;} +#topBar .ua-item:not(:disabled):hover{background:rgba(139,92,246,.22);color:#fff;border-color:rgba(139,92,246,.4);} #topBar .ua-item:disabled{opacity:.5;cursor:not-allowed;} -#topBar .ua-item--danger:not(:disabled):hover{background:rgba(239,68,68,.22);color:#ffb4b4;} -#topBar .ua-sep{height:1px;background:rgba(255,255,255,.08);margin:5px 4px;} +#topBar .ua-item--danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#ffb4b4; + width:100%;justify-content:center;} +#topBar .ua-item--danger:not(:disabled):hover{background:rgba(239,68,68,.25);color:#fff;} +.ua-badge{font-size:11px;font-weight:700;color:#fff;background:#ef4444;border-radius:999px;padding:1px 7px;} +.ua-foot{padding:14px;border-top:1px solid rgba(255,255,255,.08);} +#topBar .ua-sep{display:none;} #topBar .ua-soon{font-size:10px;color:#778;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:8px;} /* 主沙盘底部功能框架(预留区:放功能按钮 / 素材槽,比微观边框更高) */ @@ -327,6 +404,55 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa cursor: pointer; font-size: 13px; } +/* 通用信息弹窗(个人信息/设置/邮件) */ +#appModal { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.7); z-index: 400; display: none; + justify-content: center; align-items: center; +} +#appModal.active { display: flex; } +#appModal .modalContent { + background: #1a2030; border: 1px solid rgba(100,200,255,0.3); border-radius: 12px; + padding: 24px; max-width: 360px; width: 90%; pointer-events: auto; +} +#appModal .modalTitle { font-size: 16px; font-weight: bold; color: #e0e0e0; margin-bottom: 16px; } +#appModal .modalBody { color: #cfd5ea; font-size: 14px; line-height: 1.6; } +#appModal .infoRow { display: flex; justify-content: space-between; margin: 8px 0; font-size: 13px; } +#appModal .infoLabel { color: #8899aa; } +#appModal .infoValue { color: #e0e0e0; } +#appModal .mailItem { + background: rgba(255,255,255,0.05); border: 1px solid rgba(100,200,255,0.15); + border-radius: 8px; padding: 10px; margin: 8px 0; font-size: 13px; +} +#appModal .mailTitle { color: #7cc7ff; font-weight: 600; margin-bottom: 4px; } +#appModal .mailMeta { color: #778; font-size: 11px; margin-bottom: 4px; } +#appModal .settingRow { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; font-size: 13px; } +#appModal .mailTabs { display: flex; gap: 6px; margin-bottom: 12px; } +#appModal .mailTab { flex: 1; text-align: center; padding: 6px 0; font-size: 13px; color: #8899aa; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; cursor: pointer; transition: .15s; } +#appModal .mailTab.active { color: #fff; background: rgba(139,92,246,.25); border-color: rgba(139,92,246,.5); } +#appModal .mailEmpty { color: #8899aa; font-size: 13px; text-align: center; padding: 20px 0; } +#appModal .achItem { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; margin: 8px 0; } +#appModal .achItem.done { border-color: rgba(199,125,255,.5); background: rgba(139,92,246,.12); } +#appModal .achIcon { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } +#appModal .achIcon.locked { filter: grayscale(1); opacity: .6; } +#appModal .achMain { flex: 1; min-width: 0; } +#appModal .achName { font-size: 14px; font-weight: 600; color: #e0e0e0; } +#appModal .achDesc { font-size: 12px; color: #8899aa; margin-top: 2px; } +#appModal .achBar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin-top: 6px; } +#appModal .achFill { height: 100%; background: linear-gradient(90deg,#8b5cf6,#4af); border-radius: 3px; } +#appModal .achState { font-size: 12px; color: #9fd; flex-shrink: 0; } +#appModal .achItem.done .achState { color: #c77dff; font-weight: 600; } +#appModal .closeBtn { + display:none; +} +#appModal .modalBtns{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;} +#appModal .btn-cancel,#appModal .btn-confirm{padding:8px 18px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;border:1px solid transparent;transition:opacity .15s,transform .12s;} +#appModal .btn-cancel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#aab4cc;} +#appModal .btn-cancel:hover{background:rgba(255,255,255,.12);} +#appModal .btn-confirm{background:linear-gradient(135deg,#6b5ce7,#4a90d9);color:#fff;} +#appModal .btn-confirm:hover{opacity:.88;transform:scale(1.03);} +#appModal .btn-confirm:active{transform:scale(.96);} + /* ===== 世界内导航与数据面板 ===== */ #dataPanel{position:fixed;top:0;right:0;width:min(540px,94vw);height:100%;background:linear-gradient(180deg,rgba(10,14,23,.98),rgba(14,23,48,.98));border-left:1px solid rgba(100,200,255,.25);z-index:260;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.5);} #dataPanel.open{transform:translateX(0);} @@ -371,62 +497,49 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .dp-date{font-family:monospace;font-size:10px;color:#4af;margin-bottom:6px;} .dp-note-body{font-size:13px;color:#e0e0e0;line-height:1.6;} -/* 时间线:右上角闹钟(走动 + 点击播放暂停 + 拖动调时;背景色随四个时间节点变化) */ -#clockWidget{position:fixed;right:18px;top:58px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:5px; - padding:10px 16px;border-radius:16px;background:rgba(5,8,16,.94);backdrop-filter:blur(12px); - border:1px solid rgba(255,255,255,.22);cursor:default;user-select:none;transition:background-color .9s ease,border-color .2s; - box-shadow:0 6px 22px rgba(0,0,0,.6);} -#clockWidget svg{display:block;} -#clockWidget #clockLabel{font-size:18px;font-weight:700;color:#ffffff;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8);} -#clockWidget #calendarLabel{font-size:13px;font-weight:700;color:#ffffff;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.4px;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8);} -#clockWidget:hover{border-color:rgba(139,92,246,.5);} +/* 顶栏时间信息(钟表已移走,只保留文字两行) */ +.timeInfo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; pointer-events: none; } +#topBar .timeInfo #clockLabel { font-size: 16px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.8); } +#topBar .timeInfo #calendarLabel { font-size: 12px; font-weight: 600; color: #cfe1f3; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .4px; text-shadow: 0 1px 3px rgba(0,0,0,.85); } #sceneImage{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;} +/* 主世界简单游戏风边框(覆盖层,不拦截鼠标,避让顶/底栏) */ +#worldFrame{ + position:fixed; top:calc(58px + env(safe-area-inset-top)); left:0; right:0; + bottom:calc(72px + env(safe-area-inset-bottom)); pointer-events:none; z-index:5; + border:1.5px solid rgba(139,92,246,.45); + box-shadow:inset 0 0 28px rgba(100,200,255,.16), inset 0 0 0 1px rgba(255,255,255,.06); +} +#worldFrame span{position:absolute;width:20px;height:20px;border:2px solid rgba(199,125,255,.9);box-shadow:0 0 8px rgba(199,125,255,.5);} +#worldFrame .wf-tl{top:7px;left:7px;border-right:none;border-bottom:none;} +#worldFrame .wf-tr{top:7px;right:7px;border-left:none;border-bottom:none;} +#worldFrame .wf-bl{bottom:7px;left:7px;border-right:none;border-top:none;} +#worldFrame .wf-br{bottom:7px;right:7px;border-left:none;border-top:none;} /* 世界切换导航:竖向步骤条(圆点 + 连线),hover 出气泡提示(不撑栏) */ -#worldNav{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:30; - display:flex;flex-direction:column;padding:16px 14px;border-radius:22px; +#worldNav{position:fixed;left:18px;top:10%;transform:translateY(0);z-index:30; + display:flex;flex-direction:column;padding:10px 9px;border-radius:16px; background:rgba(10,16,30,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);} #worldNav .wn-item{position:relative;display:flex;align-items:center;justify-content:center; - width:52px;height:52px;margin:13px 0;border-radius:50%; - color:#9fb3cc;font-size:23px;cursor:pointer;user-select:none;line-height:1; + width:38px;height:38px;margin:8px 0;border-radius:50%; + color:#9fb3cc;font-size:17px;cursor:pointer;user-select:none;line-height:1; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16); transition:background-color .22s ease,color .22s ease,box-shadow .22s ease,border-color .22s ease,transform .15s ease;} /* 连接线:除最后一项外,从本点底部向下延伸,串起相邻点 */ -#worldNav .wn-item:not(:last-child)::after{content:'';position:absolute;top:52px;left:50%; - transform:translateX(-50%);width:2px;height:26px;background:rgba(255,255,255,.20);} +#worldNav .wn-item:not(:last-child)::after{content:'';position:absolute;top:38px;left:50%; + transform:translateX(-50%);width:2px;height:18px;background:rgba(255,255,255,.20);} #worldNav .wn-item:hover{background:rgba(139,92,246,.22);color:#eaf4ff;transform:scale(1.06); box-shadow:0 0 0 1px rgba(139,92,246,.45) inset,0 0 14px rgba(139,92,246,.25);} #worldNav .wn-item.active{background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(74,175,255,.25)); color:#fff;box-shadow:0 0 0 1px rgba(139,92,246,.55) inset,0 0 16px rgba(139,92,246,.3);} /* 气泡提示:hover 时浮在图标右侧,不影响栏宽 */ -#worldNav .wn-text{position:absolute;left:calc(100% + 12px);top:50%; +#worldNav .wn-text{position:absolute;left:calc(100% + 8px);top:50%; transform:translateY(-50%) translateX(-6px);opacity:0;pointer-events:none; - background:rgba(10,16,30,.92);padding:6px 11px;border-radius:9px;white-space:nowrap; - font-size:13px;color:#eaf4ff;border:1px solid rgba(255,255,255,.16); + background:rgba(10,16,30,.92);padding:5px 9px;border-radius:7px;white-space:nowrap; + font-size:12px;color:#eaf4ff;border:1px solid rgba(255,255,255,.16); transition:opacity .2s ease,transform .2s ease;} #worldNav .wn-item:hover .wn-text{opacity:1;transform:translateY(-50%) translateX(0);} /* 右下角导航控件:方向 + 缩放(白色半透、大气精致) */ -#navControls{position:fixed;bottom:120px;right:22px;z-index:50; - display:grid;grid-template-columns:repeat(3,68px);grid-template-rows:repeat(3,68px);gap:7px;} -#navControls button{width:68px;height:68px;border:none;border-radius:17px; - background:rgba(255,255,255,0.18);color:#fff;font-size:28px;cursor:pointer; - display:flex;align-items:center;justify-content:center; - backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); - border:1px solid rgba(255,255,255,0.3); - box-shadow:0 4px 16px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2); - transition:background .15s,transform .12s;user-select:none;} -#navControls button:hover{background:rgba(255,255,255,0.32);transform:scale(1.08);} -#navControls button:active{background:rgba(255,255,255,0.44);transform:scale(0.94);} -#navControls .nc-up{grid-column:2;grid-row:1;} -#navControls .nc-nw{grid-column:1;grid-row:1;} -#navControls .nc-ne{grid-column:3;grid-row:1;} -#navControls .nc-left{grid-column:1;grid-row:2;} -#navControls .nc-center{grid-column:2;grid-row:2;background:rgba(255,255,255,0.06)!important; - cursor:default;border-color:transparent;box-shadow:none;} -#navControls .nc-right{grid-column:3;grid-row:2;} -#navControls .nc-sw{grid-column:1;grid-row:3;} -#navControls .nc-down{grid-column:2;grid-row:3;} -#navControls .nc-se{grid-column:3;grid-row:3;} +#navControls{display:none;} /* ===== 登录闸门(小型居中转圈,不遮挡主屏幕) ===== */ #authSplash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; @@ -447,7 +560,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa @media (max-width:768px){ #topBar .coords{display:none;} #topBar .title{font-size:16px;} - #topBar .title .worldName{font-size:13px;margin-left:7px;padding-left:7px;} + #topBar .title .worldName{font-size:13px;} #topBar .title img{width:28px;height:28px;} #bottomBar{gap:8px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));} #bottomBar .bb-btn{padding:8px 11px;font-size:12px;} @@ -476,23 +589,89 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa +
宇森加载中…
坐标: (0, 0) +
+
清晨 07:30
+
星元 1年 · 春
+
@@ -505,45 +684,11 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa - +
- -
- - - - - - - - - - - - - - - - - - - - - - - - -
清晨 07:30
-
星元 1年 · 春
-
星空
@@ -647,8 +792,9 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa background:linear-gradient(180deg,rgba(10,14,23,.97),rgba(14,22,40,.97)); border-right:1px solid rgba(100,200,255,.22); display:flex;flex-direction:column; - transform:translateX(-100%);transition:transform .28s ease; + transform:translateX(-100%);transition:transform .18s ease-out; box-shadow:8px 0 40px rgba(0,0,0,.45); + will-change:transform;backface-visibility:hidden; } #sidePanel.open{transform:translateX(0);} .sp-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px;display:none;min-height:0;} @@ -834,9 +980,18 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
+ +
+
+
标题
+
+ +
+
+ + + + +
+ +
+ 💬 + +
+ +
+
+ 世界频道 + +
+
+ +
+
+ + +
+
+
+ - + \ No newline at end of file