diff --git a/world.html b/world.html index 3bc4a31..e22b96c 100644 --- a/world.html +++ b/world.html @@ -245,6 +245,47 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa .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; } +/* ===== 任务侧栏(左侧固定面板,独立于通用 modal) ===== */ +.task-side-panel{ + position: fixed; left: max(14px, env(safe-area-inset-left)); top: calc(58px + env(safe-area-inset-top) + 12px + 100px); + width: 320px; + /* 高度限制:可用高度(减 topBar58 + bottomBar72 + padding24 + 安全区)再减半,避免盖住聊天框 */ + max-height: calc((100vh - 58px - 72px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); + z-index: 250; /* 高于 #microView(200),进入微观世界也能看到;低于 #dataPanel(260) 与 #appModal(400) */ + display:flex; flex-direction: column; + background: linear-gradient(180deg, rgba(17,23,42,.96), rgba(10,14,26,.96)); + border: 1px solid rgba(139,92,246,.35); border-radius: 14px; + box-shadow: 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); + backdrop-filter: blur(8px); + font-size: 13px; color: #cfd5ea; +} +.task-side-panel[hidden]{ display:none !important; } +.tsp-head{ + display: flex; align-items: center; justify-content: space-between; + padding: 12px 14px; border-bottom: 1px solid rgba(139,92,246,.22); flex: 0 0 auto; +} +.tsp-title{ font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .5px; } +.tsp-close{ + width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); + background: rgba(255,80,80,.12); color: #ffaaaa; + font-size: 14px; font-weight: 700; cursor: pointer; + display: inline-flex; align-items: center; justify-content: center; + transition: background .15s, transform .12s; +} +.tsp-close:hover{ background: rgba(255,80,80,.28); color: #fff; transform: scale(1.06); } +.tsp-close:active{ transform: scale(.94); } +.tsp-body{ flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.35) rgba(255,255,255,.04); } +.tsp-body::-webkit-scrollbar{ width: 6px; } +.tsp-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 4px; } +.tsp-body::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.35); border-radius: 4px; } +.tsp-body::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.55); } +@media (max-width: 768px){ + .task-side-panel{ width: min(300px, calc(100vw - 28px)); } +} +@media (max-width: 420px){ + .task-side-panel{ left: 8px; right: 8px; width: auto; max-height: 50vh; } +} + /* 世界等级经验条(位于 bottomBar 内最左侧,加大加清晰) */ #worldExpBarWrap{ flex:0 0 auto; width:520px; height:100%; @@ -1173,7 +1214,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa