diff --git a/world.html b/world.html index 045ff9e..74a3820 100644 --- a/world.html +++ b/world.html @@ -207,20 +207,36 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa #topBar .ua-soon{font-size:10px;color:#778;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:8px;} /* 场景悬浮工具条:顶部栏下方居中、按钮横向排列 - 折叠态:一行 4 个核心按钮;展开态:两行 7 列共 14 个按钮 */ + 布局:功能按钮网格 + 底部全宽箭头条(不占格子) */ #sceneToolbar{ position:fixed; top:calc(58px + env(safe-area-inset-top) + 8px); right:max(18px, env(safe-area-inset-right)); left:auto; transform:none; z-index:110; - display:grid; grid-template-columns:repeat(7,64px); - grid-template-rows:repeat(2,72px); grid-auto-rows:72px; - grid-auto-flow:row; gap:10px; pointer-events:auto; - padding:11px; border-radius:16px; + display:grid; grid-template-columns:repeat(5,64px); + grid-auto-rows:auto; + grid-auto-flow:row dense; gap:8px; pointer-events:auto; + padding:10px; 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:all .25s ease; } -/* 折叠态:一行 4 列(汉堡键 + 任务/设置/排行榜) */ -#sceneToolbar.collapsed{ grid-template-columns:repeat(4,64px); grid-template-rows:72px; } +/* 折叠态:一行 4 个核心按钮(任务/设置/排行榜/官网),箭头在底部横条 */ +#sceneToolbar.collapsed{ grid-template-columns:repeat(5,64px); } #sceneToolbar.collapsed .top-icon:not(.toolbar-core):not(#btnToolbarToggle){ display:none; } +/* 箭头按钮:横跨全宽的扁长条,不占功能按钮格子 */ +#btnToolbarToggle{ + grid-column: 1 / -1 !important; + height:28px !important; width:auto !important; + border-radius:9px !important; + background:rgba(139,92,246,.15) !important; + border:1px solid rgba(139,92,246,.3) !important; + flex-direction:row !important; gap:6px !important; + font-size:12px !important; color:#c4b5fd !important; + justify-content:center !important; + padding:0 !important; + margin:2px 0 0 0; +} +#btnToolbarToggle svg{ width:16px !important; height:16px !important; transition:transform .3s ease; } +/* 展开时箭头旋转 180° */ +#sceneToolbar:not(.collapsed) #btnToolbarToggle svg{ transform:rotate(180deg); } .top-icon{ 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; @@ -231,7 +247,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .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: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 svg{width:28px;height:28px;object-fit:contain;pointer-events:none;transition:transform .3s ease;} .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; @@ -458,15 +474,17 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .we-pct{margin-left:2px; font-size:13px; font-weight:700; color:#c4b5fd; min-width:34px; text-align:right;} .we-bar{width:100%; height:14px; background:rgba(255,255,255,.10); border-radius:7px; overflow:hidden;} .we-fill{height:100%; width:0%; background:linear-gradient(90deg,#8b5cf6,#4af); border-radius:7px; transition:width .3s ease; box-shadow:0 0 12px rgba(139,92,246,.45);} -.we-currencies{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0;} -.wc-item{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#e6f0fb; background:rgba(255,255,255,.06); padding:3px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.08); white-space:nowrap;} -.wc-item b{font-variant-numeric:tabular-nums;} +.we-currencies{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;font-size:12px;font-weight:700;color:#e6f0fb;white-space:nowrap;} +.we-currencies .wc-tag{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.08);} +.we-currencies .wc-val{font-variant-numeric:tabular-nums;} +.wc-tag{display:inline-flex;align-items:center;gap:3px;opacity:.9;transition:opacity .15s;} +.wc-tag:hover{opacity:1;} +.wc-tag .wc-val{font-variant-numeric:tabular-nums;color:#fff;} @media (max-width:768px){ - .we-currencies{gap:5px;} - .wc-item{font-size:11px; padding:2px 6px;} + .we-currencies{gap:6px;font-size:11px;} } @media (max-width:420px){ - .we-currencies{display:none;} + .we-currencies{gap:4px;font-size:10px;} } /* 主沙盘底部功能框架(预留区:放功能按钮 / 素材槽,比微观边框更高) */ @@ -1244,8 +1262,9 @@ 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;left:auto;transform:none;gap:7px;padding:9px 10px;grid-template-columns:repeat(7,52px);grid-template-rows:repeat(2,58px);grid-auto-rows:58px;grid-auto-flow:row;} - #sceneToolbar.collapsed{grid-template-columns:repeat(4,52px);grid-template-rows:58px;} + #sceneToolbar{right:12px;left:auto;transform:none;gap:7px;padding:9px 10px;grid-template-columns:repeat(5,52px);grid-auto-flow:row;} + #sceneToolbar.collapsed{grid-template-columns:repeat(5,52px);} + #btnToolbarToggle{height:24px !important;} #sceneToolbar .top-icon{width:52px;height:52px;font-size:17px;} #sceneToolbar .top-icon img, #sceneToolbar .top-icon svg{width:22px;height:22px;} @@ -1261,8 +1280,9 @@ 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;left:auto;transform:none;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(7,46px);grid-template-rows:repeat(2,52px);grid-auto-rows:52px;grid-auto-flow:row;} - #sceneToolbar.collapsed{grid-template-columns:repeat(4,46px);grid-template-rows:52px;} + #sceneToolbar{right:8px;left:auto;transform:none;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(5,46px);grid-auto-flow:row;} + #sceneToolbar.collapsed{grid-template-columns:repeat(5,46px);} + #btnToolbarToggle{height:22px !important;} #sceneToolbar .top-icon{width:46px;height:46px;font-size:15px;} #sceneToolbar .top-icon img, #sceneToolbar .top-icon svg{width:20px;height:20px;} @@ -1461,9 +1481,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa