素材
李鹏宇
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
@@ -185,11 +185,15 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
/* 场景悬浮工具条：浮于场景画面、紧贴顶部栏下方 */
|
||||
#sceneToolbar{
|
||||
position:fixed; top:calc(58px + env(safe-area-inset-top) + 12px); right:max(18px, env(safe-area-inset-right)); z-index:90;
|
||||
display:flex; align-items:center; gap:10px; pointer-events:auto;
|
||||
padding:9px 11px; border-radius:16px;
|
||||
display:grid; grid-template-columns:repeat(3,46px); grid-auto-rows:46px; gap:10px; pointer-events:auto;
|
||||
padding:11px; border-radius:16px;
|
||||
background:rgba(12,18,32,.78); border:1px solid rgba(139,92,246,.35);
|
||||
backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
|
||||
transition:padding .2s, border-radius .2s;
|
||||
}
|
||||
/* 折叠态：只显示汉堡按钮（单列） */
|
||||
#sceneToolbar.collapsed{ grid-template-columns:46px; grid-auto-rows:46px; }
|
||||
#sceneToolbar.collapsed .top-icon:not(#btnToolbarToggle){ display:none; }
|
||||
.top-icon{
|
||||
position:relative; width:46px; height:46px; border-radius:13px; flex-shrink:0;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
@@ -205,6 +209,11 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
font-size:11px; font-weight:800; color:#fff; background:#ef4444; border-radius:999px;
|
||||
display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(239,68,68,.5);
|
||||
}
|
||||
.top-icon-badge[hidden]{display:none !important;}
|
||||
.top-icon.active{outline:2px solid rgba(255,255,255,.75); box-shadow:0 0 18px rgba(140,180,255,.6); border-color:rgba(139,92,246,.7);}
|
||||
.top-icon svg{width:56%;height:56%;object-fit:contain;pointer-events:none;}
|
||||
.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; }
|
||||
|
||||
/* 世界等级经验条（位于 bottomBar 内最左侧，加大加清晰） */
|
||||
#worldExpBarWrap{
|
||||
@@ -762,7 +771,8 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
#navControls{bottom:calc(96px + env(safe-area-inset-bottom));right:14px;
|
||||
grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:6px;}
|
||||
#navControls button{width:60px;height:60px;font-size:24px;border-radius:15px;}
|
||||
#sceneToolbar{right:12px;gap:7px;padding:8px 10px;}
|
||||
#sceneToolbar{right:12px;gap:7px;padding:9px 10px;grid-template-columns:repeat(3,40px);grid-auto-rows:40px;}
|
||||
#sceneToolbar.collapsed{grid-template-columns:40px;grid-auto-rows:40px;}
|
||||
#sceneToolbar .top-icon{width:40px;height:40px;font-size:19px;}
|
||||
}
|
||||
@media (max-width:420px){
|
||||
@@ -770,7 +780,8 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
#bottomBar .bb-btn{padding:7px 9px;font-size:11px;}
|
||||
#worldExpBarWrap{width:280px;gap:5px;}
|
||||
#worldExpBarWrap .we-title{display:none;}
|
||||
#sceneToolbar{right:8px;gap:5px;padding:6px 7px;top:calc(58px + env(safe-area-inset-top) + 6px);}
|
||||
#sceneToolbar{right:8px;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(3,34px);grid-auto-rows:34px;}
|
||||
#sceneToolbar.collapsed{grid-template-columns:34px;grid-auto-rows:34px;}
|
||||
#sceneToolbar .top-icon{width:34px;height:34px;font-size:16px;}
|
||||
}
|
||||
|
||||
@@ -948,30 +959,33 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
</div>
|
||||
|
||||
<!-- 场景悬浮工具条：顶部栏正下方、浮于场景画面上 -->
|
||||
<div id="sceneToolbar">
|
||||
<button class="top-icon" id="btnTask" type="button" title="任务"><img src="assets/icons/task.png?v=1" alt="任务"></button>
|
||||
<button class="top-icon" id="btnMall" type="button" title="商城"><img src="assets/icons/shop.png?v=3" alt="商城"></button>
|
||||
<button class="top-icon" id="btnMail" type="button" title="邮箱"><span class="ti-label"><img src="assets/icons/mail.png?v=1" alt="邮箱"></span><span class="top-icon-badge" id="topMailBadge" style="display:none;">0</span></button>
|
||||
<button class="top-icon" id="btnSettings" type="button" title="设置"><img src="assets/icons/settings.png?v=1" alt="设置"></button>
|
||||
<button class="top-icon" id="btnWebsite" type="button" title="官网"><img src="assets/icons/website.png?v=1" alt="官网"></button>
|
||||
<button class="top-icon" id="btnNotice" type="button" title="公告"><img src="assets/icons/notice.png?v=1" alt="公告"></button>
|
||||
<button class="top-icon" id="btnRank" type="button" title="排行榜"><img src="assets/icons/rank.png?v=1" alt="排行榜"></button>
|
||||
<button class="top-icon" id="btnCalendar" type="button" title="日历"><img src="assets/icons/calendar.png?v=1" alt="日历"></button>
|
||||
<button class="top-icon" id="btnAuction" type="button" title="拍卖行"><img src="assets/icons/auction.png?v=1" alt="拍卖行"></button>
|
||||
<div id="sceneToolbar" class="collapsed">
|
||||
<button class="top-icon toolbar-toggle" id="btnToolbarToggle" type="button" title="展开/收起菜单">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
|
||||
</button>
|
||||
<button class="top-icon" id="btnTask" type="button" title="任务"><img src="assets/icons/task/task.png?v=2" alt="任务"></button>
|
||||
<button class="top-icon" id="btnMall" type="button" title="商城"><img src="assets/icons/shop/shop.png?v=4" alt="商城"></button>
|
||||
<button class="top-icon" id="btnMail" type="button" title="邮箱"><span class="ti-label"><img src="assets/icons/mail/mail.png?v=2" alt="邮箱"></span><span class="top-icon-badge" id="topMailBadge" style="display:none;">0</span></button>
|
||||
<button class="top-icon" id="btnSettings" type="button" title="设置"><img src="assets/icons/settings/settings.png?v=2" alt="设置"></button>
|
||||
<button class="top-icon" id="btnWebsite" type="button" title="官网"><img src="assets/icons/website/website.png?v=2" alt="官网"></button>
|
||||
<button class="top-icon" id="btnNotice" type="button" title="公告"><img src="assets/icons/notice/notice.png?v=2" alt="公告"></button>
|
||||
<button class="top-icon" id="btnRank" type="button" title="排行榜"><img src="assets/icons/rank/rank.png?v=3" alt="排行榜"></button>
|
||||
<button class="top-icon" id="btnCalendar" type="button" title="日历"><img src="assets/icons/calendar/calendar.png?v=2" alt="日历"></button>
|
||||
<button class="top-icon" id="btnAuction" type="button" title="拍卖行"><img src="assets/icons/auction/auction.png?v=2" alt="拍卖行"></button>
|
||||
<button class="top-icon" id="btnData" type="button" title="数据"><img src="assets/icons/data/data.png?v=2" alt="数据"></button>
|
||||
<button class="top-icon" id="btnInventory" type="button" title="包裹"><img src="assets/icons/inventory/inventory.png?v=2" alt="包裹"></button>
|
||||
<button class="top-icon" id="btnTerrain" type="button" title="地形"><img src="assets/icons/terrain/terrain.png?v=2" alt="地形"></button>
|
||||
<button class="top-icon" id="btnMove" type="button" title="移动"><img src="assets/icons/move/move.png?v=2" alt="移动"></button>
|
||||
<button class="top-icon" id="btnHeight" type="button" title="高度"><img src="assets/icons/height/height.png?v=2" alt="高度"></button>
|
||||
<button class="top-icon" id="btnTech" type="button" title="科技"><img src="assets/icons/tech/tech.png?v=2" alt="科技"></button>
|
||||
<button class="top-icon" id="btnFriends" type="button" title="好友"><img src="assets/icons/friends/friends.png?v=2" alt="好友"><span class="top-icon-badge" id="friendBadge" hidden>0</span></button>
|
||||
<button class="top-icon" id="btnAchievements" type="button" title="成就"><img src="assets/icons/achievement/achievement.png?v=5" alt="成就"><span class="top-icon-badge" id="achBadge" hidden></span></button>
|
||||
</div>
|
||||
|
||||
<!-- 主沙盘底部功能框架（世界等级经验条置于最右侧） -->
|
||||
<div id="bottomBar">
|
||||
<div class="bb-slots">
|
||||
<button class="bb-btn" id="btnData" type="button">📊 数据</button>
|
||||
<button class="bb-btn" id="btnInventory" type="button">🎒 包裹</button>
|
||||
<button class="bb-btn" id="btnTerrain" type="button">🌿 地形</button>
|
||||
<button class="bb-btn" id="btnMove" type="button">✋ 移动</button>
|
||||
<button class="bb-btn" id="btnHeight" type="button">⛰️ 高度</button>
|
||||
<button class="bb-btn" id="btnManage" type="button" style="display:none;">⚙️ 管理</button>
|
||||
<button class="bb-btn" id="btnTech" type="button">🔬 科技</button>
|
||||
<button class="bb-btn" id="btnFriends" type="button">👥 好友<span class="bb-badge" id="friendBadge" hidden>0</span></button>
|
||||
<button class="bb-btn" id="btnAchievements" type="button">🏆 成就<span class="bb-badge" id="achBadge" hidden></span></button>
|
||||
</div>
|
||||
<div id="worldExpBarWrap">
|
||||
<div class="we-info">
|
||||
@@ -1086,9 +1100,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
#btnBuild{background:rgba(100,200,255,.12);border:1px solid rgba(100,200,255,.3);color:#9fd;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;pointer-events:auto;transition:.2s;box-shadow:0 4px 16px rgba(80,120,255,.35);}
|
||||
#btnBuild:hover{filter:brightness(1.12);}
|
||||
#btnBuild.active{background:linear-gradient(135deg,#8b5cf6,#4aafff);color:#fff;border-color:transparent;box-shadow:0 0 14px rgba(100,170,255,.5);}
|
||||
#btnTech{background:rgba(120,255,200,.12);border:1px solid rgba(120,255,200,.3);color:#9ff;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;pointer-events:auto;transition:.2s;box-shadow:0 4px 16px rgba(80,255,180,.3);}
|
||||
#btnTech:hover{filter:brightness(1.12);}
|
||||
#btnTech.active{background:linear-gradient(135deg,#10b981,#4aafff);color:#fff;border-color:transparent;box-shadow:0 0 14px rgba(100,220,180,.5);}
|
||||
#btnTech.active{background:linear-gradient(135deg,#10b981,#4aafff);border-color:transparent;box-shadow:0 0 14px rgba(100,220,180,.5);}
|
||||
.bb-btn.active{outline:2px solid rgba(255,255,255,.75);box-shadow:0 0 18px rgba(140,180,255,.6);}
|
||||
|
||||
/* ===== 统一左侧面板（数据 / 包裹 / 建造 三合一） ===== */
|
||||
@@ -7671,6 +7683,11 @@ if (typeof fitWorld === 'function') fitWorld();
|
||||
// 场景悬浮工具条：官网、任务、商城、公告、排行榜、日历、拍卖行
|
||||
const btnWebsite = document.getElementById('btnWebsite');
|
||||
if (btnWebsite) btnWebsite.addEventListener('click', () => { location.href = 'index.html'; });
|
||||
const btnToolbarToggle = document.getElementById('btnToolbarToggle');
|
||||
if (btnToolbarToggle) btnToolbarToggle.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
document.getElementById('sceneToolbar').classList.toggle('collapsed');
|
||||
});
|
||||
const btnTask = document.getElementById('btnTask');
|
||||
if (btnTask) btnTask.addEventListener('click', () => { openTaskPanel(); });
|
||||
const btnMall = document.getElementById('btnMall');
|
||||
|
||||