汉堡菜单
This commit is contained in:
李鹏宇
+93
-32
@@ -185,25 +185,27 @@ 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:grid; grid-template-columns:repeat(3,46px); grid-auto-rows:46px; gap:10px; pointer-events:auto;
|
||||
display:grid; grid-template-columns:repeat(3,64px); grid-auto-rows:72px; 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; }
|
||||
/* 折叠态：显示汉堡按钮 + 5 个核心按钮（任务/包裹/好友/排行榜/成就），2 列布局 */
|
||||
#sceneToolbar.collapsed{ grid-template-columns:repeat(2,64px); grid-auto-rows:72px; }
|
||||
#sceneToolbar.collapsed .top-icon:not(.toolbar-core):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;
|
||||
position:relative; width:64px; height:64px; border-radius:13px; flex-shrink:0;
|
||||
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
|
||||
background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.13);
|
||||
color:#e6f0fb; font-size:22px; cursor:pointer; transition:.18s; pointer-events:auto;
|
||||
color:#e6f0fb; font-size:20px; cursor:pointer; transition:.18s; pointer-events:auto;
|
||||
text-shadow:0 1px 3px rgba(0,0,0,.45);
|
||||
}
|
||||
.top-icon:hover{background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(74,175,255,.22)); border-color:rgba(139,92,246,.55); color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(80,120,255,.35);}
|
||||
.top-icon:active{transform:translateY(0);}
|
||||
.top-icon img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none;}
|
||||
.top-icon img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none;}
|
||||
.top-icon svg{width:28px;height:28px;object-fit:contain;pointer-events:none;}
|
||||
.top-icon-label{font-size:10px;color:#b0c4de;line-height:1;text-align:center;white-space:nowrap;pointer-events:none;}
|
||||
.top-icon-badge{
|
||||
position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
|
||||
font-size:11px; font-weight:800; color:#fff; background:#ef4444; border-radius:999px;
|
||||
@@ -211,7 +213,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
}
|
||||
.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; }
|
||||
|
||||
@@ -759,18 +760,24 @@ 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: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;}
|
||||
#sceneToolbar{right:12px;gap:7px;padding:9px 10px;grid-template-columns:repeat(3,52px);grid-auto-rows:58px;}
|
||||
#sceneToolbar.collapsed{grid-template-columns:repeat(2,52px);grid-auto-rows:58px;}
|
||||
#sceneToolbar .top-icon{width:52px;height:52px;font-size:17px;}
|
||||
#sceneToolbar .top-icon img,
|
||||
#sceneToolbar .top-icon svg{width:22px;height:22px;}
|
||||
#sceneToolbar .top-icon-label{font-size:9px;}
|
||||
}
|
||||
@media (max-width:420px){
|
||||
#topBar .title .worldNameWrap{display:none;}
|
||||
#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: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;}
|
||||
#sceneToolbar{right:8px;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(3,46px);grid-auto-rows:52px;}
|
||||
#sceneToolbar.collapsed{grid-template-columns:repeat(2,46px);grid-auto-rows:52px;}
|
||||
#sceneToolbar .top-icon{width:46px;height:46px;font-size:15px;}
|
||||
#sceneToolbar .top-icon img,
|
||||
#sceneToolbar .top-icon svg{width:20px;height:20px;}
|
||||
#sceneToolbar .top-icon-label{font-size:8px;}
|
||||
}
|
||||
|
||||
/* ===== 我的天赋面板（顶栏 🌟 按钮 → 居中 modal） ===== */
|
||||
@@ -953,23 +960,77 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
|
||||
<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>
|
||||
<button class="top-icon toolbar-core" id="btnTask" type="button" title="任务">
|
||||
<img src="assets/icons/task/task.png?v=2" alt="任务">
|
||||
<span class="top-icon-label">任务</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnMall" type="button" title="商城">
|
||||
<img src="assets/icons/shop/shop.png?v=4" alt="商城">
|
||||
<span class="top-icon-label">商城</span>
|
||||
</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-label">邮箱</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="设置">
|
||||
<span class="top-icon-label">设置</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnWebsite" type="button" title="官网">
|
||||
<img src="assets/icons/website/website.png?v=2" alt="官网">
|
||||
<span class="top-icon-label">官网</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnNotice" type="button" title="公告">
|
||||
<img src="assets/icons/notice/notice.png?v=2" alt="公告">
|
||||
<span class="top-icon-label">公告</span>
|
||||
</button>
|
||||
<button class="top-icon toolbar-core" id="btnRank" type="button" title="排行榜">
|
||||
<img src="assets/icons/rank/rank.png?v=3" alt="排行榜">
|
||||
<span class="top-icon-label">排行榜</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnCalendar" type="button" title="日历">
|
||||
<img src="assets/icons/calendar/calendar.png?v=2" alt="日历">
|
||||
<span class="top-icon-label">日历</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnAuction" type="button" title="拍卖行">
|
||||
<img src="assets/icons/auction/auction.png?v=2" alt="拍卖行">
|
||||
<span class="top-icon-label">拍卖行</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnData" type="button" title="数据">
|
||||
<img src="assets/icons/data/data.png?v=2" alt="数据">
|
||||
<span class="top-icon-label">数据</span>
|
||||
</button>
|
||||
<button class="top-icon toolbar-core" id="btnInventory" type="button" title="包裹">
|
||||
<img src="assets/icons/inventory/inventory.png?v=2" alt="包裹">
|
||||
<span class="top-icon-label">包裹</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnTerrain" type="button" title="地形">
|
||||
<img src="assets/icons/terrain/terrain.png?v=2" alt="地形">
|
||||
<span class="top-icon-label">地形</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnMove" type="button" title="移动">
|
||||
<img src="assets/icons/move/move.png?v=2" alt="移动">
|
||||
<span class="top-icon-label">移动</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnHeight" type="button" title="高度">
|
||||
<img src="assets/icons/height/height.png?v=2" alt="高度">
|
||||
<span class="top-icon-label">高度</span>
|
||||
</button>
|
||||
<button class="top-icon" id="btnTech" type="button" title="科技">
|
||||
<img src="assets/icons/tech/tech.png?v=2" alt="科技">
|
||||
<span class="top-icon-label">科技</span>
|
||||
</button>
|
||||
<button class="top-icon toolbar-core" id="btnFriends" type="button" title="好友">
|
||||
<img src="assets/icons/friends/friends.png?v=2" alt="好友">
|
||||
<span class="top-icon-label">好友</span>
|
||||
<span class="top-icon-badge" id="friendBadge" hidden>0</span>
|
||||
</button>
|
||||
<button class="top-icon toolbar-core" id="btnAchievements" type="button" title="成就">
|
||||
<img src="assets/icons/achievement/achievement.png?v=5" alt="成就">
|
||||
<span class="top-icon-label">成就</span>
|
||||
<span class="top-icon-badge" id="achBadge" hidden></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主沙盘底部功能框架（世界等级经验条置于最右侧） -->
|
||||
|
||||
Reference in New Issue
Block a user