diff --git a/world.html b/world.html index 202c3a1..dada74f 100644 --- a/world.html +++ b/world.html @@ -353,6 +353,62 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa border-bottom: 2px solid var(--mv-accent, #4aafff); background-image: linear-gradient(0deg, rgba(12,18,32,0.97), rgba(8,12,22,0.97)); box-shadow: 0 -6px 24px rgba(0,0,0,.45); + display: flex; align-items: center; justify-content: space-between; gap: 12px; + position: relative; +} +/* 微观世界底部角色 HUD:金币 / 等级 / 经验条 横向展开 */ +#charHud { + display: none; + align-items: center; + padding: 5px 14px; + background: rgba(10,16,28,.82); + border: 1px solid rgba(100,200,255,.32); + border-radius: 10px; + box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.35); + backdrop-filter: blur(6px); + color: #e0e8f2; + pointer-events: auto; +} +#charHud .ch-row { + display: flex; align-items: center; gap: 18px; + white-space: nowrap; +} +#charHud .ch-gold { + display: inline-flex; align-items: center; gap: 5px; + font-size: 14px; color: #ffd54f; font-weight: 700; +} +#charHud .ch-gold b { font-size: 16px; } +#charHud .ch-lv { + display: inline-flex; align-items: center; gap: 4px; + font-size: 14px; color: #ffd27f; font-weight: 700; +} +#charHud .ch-exp-wrap { + display: inline-flex; align-items: center; gap: 10px; + min-width: 220px; +} +#charHud .ch-exp-bar { + flex: 1; height: 10px; min-width: 120px; + background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden; +} +#charHud .ch-exp-bar > div { + height: 100%; width: 0%; + background: linear-gradient(90deg,#3a7afe,#46e0c8); + border-radius: 5px; transition: width .35s ease; +} +#charHud .ch-exp-txt { font-size: 12px; color: #9fb0c0; min-width: 92px; text-align: right; } +@media (max-width: 900px) { + #charHud .ch-row { gap: 12px; } + #charHud .ch-exp-wrap { min-width: 160px; } + #charHud .ch-exp-bar { min-width: 80px; } +} +@media (max-width: 640px) { + #charHud { padding: 5px 10px; } + #charHud .ch-row { gap: 10px; } + #charHud .ch-gold, #charHud .ch-lv { font-size: 12px; } + #charHud .ch-gold b { font-size: 13px; } + #charHud .ch-exp-wrap { min-width: 130px; } + #charHud .ch-exp-bar { min-width: 60px; } + #charHud .ch-exp-txt { font-size: 11px; min-width: 78px; } } /* 顶部工具按钮 */ @@ -1119,7 +1175,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa 平原村落 微观世界视角 -