diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css index 0f384c7..bbae90a 100644 --- a/src/assets/styles/global.css +++ b/src/assets/styles/global.css @@ -799,27 +799,27 @@ button:disabled { } .player-badge.seat-top { - top: 28px; + top: 20px; left: 50%; transform: translateX(-50%); } .player-badge.seat-right { - right: 24px; + right: -20px; top: 50%; - transform: translateY(-50%); + transform: translateY(-50%) rotate(90deg); } .player-badge.seat-bottom { - bottom: 136px; + bottom: 20px; left: 50%; transform: translateX(-50%); } .player-badge.seat-left { - left: 24px; + left: -20px; top: 50%; - transform: translateY(-50%); + transform: translateY(-50%) rotate(90deg); } .player-badge.is-turn { @@ -853,6 +853,14 @@ button:disabled { object-fit: cover; } +.player-badge.seat-right .avatar-card img { + transform: rotate(-90deg); +} + +.player-badge.seat-left .avatar-card img { + transform: rotate(-90deg); +} + .player-meta p { font-size: 14px; font-weight: 700; diff --git a/src/assets/styles/room.css b/src/assets/styles/room.css index 89c8a20..1eea20b 100644 --- a/src/assets/styles/room.css +++ b/src/assets/styles/room.css @@ -1,4 +1,5 @@ .picture-scene { + min-height: 100vh; min-height: 100dvh; padding: 18px; @@ -341,6 +342,125 @@ color: rgba(7, 42, 19, 0.24); } +/* Chengdu 游戏页玩家卡:由 room.css 独立控制,避免受 global.css 同名类影响 */ +.picture-scene .player-badge { + position: absolute; + display: flex; + align-items: center; + gap: 10px; + min-width: 154px; + padding: 9px 12px; + border-radius: 16px; + border: 1px solid rgba(248, 226, 173, 0.24); + background: + linear-gradient(180deg, rgba(43, 52, 73, 0.84), rgba(17, 22, 34, 0.82)), + radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 40%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 12px 28px rgba(0, 0, 0, 0.24); +} + +.picture-scene .avatar-panel { + position: relative; + flex: 0 0 auto; +} + +.picture-scene .player-badge.seat-top { + top: 20px; + left: 50%; + transform: translateX(-50%); +} + +.picture-scene .player-badge.seat-right { + right: -20px; + top: 50%; + transform: translateY(-50%) rotate(90deg); +} + +.picture-scene .player-badge.seat-bottom { + bottom: 20px; + left: 50%; + transform: translateX(-50%); +} + +.picture-scene .player-badge.seat-left { + left: -20px; + top: 50%; + transform: translateY(-50%) rotate(90deg); +} + +.picture-scene .player-badge.is-turn { + border-color: rgba(244, 222, 163, 0.72); +} + +.picture-scene .avatar-card { + display: grid; + place-items: center; + width: 48px; + height: 48px; + border-radius: 10px; + border: 1px solid rgba(255, 248, 215, 0.32); + background: + linear-gradient(145deg, #b3e79c, #4eaf4a 46%, #2f7e28 100%); + box-shadow: + inset 0 2px 4px rgba(255, 255, 255, 0.18), + 0 6px 14px rgba(0, 0, 0, 0.22); + overflow: hidden; +} + +.picture-scene .avatar-card img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.picture-scene .player-badge.seat-right .avatar-card img, +.picture-scene .player-badge.seat-left .avatar-card img { + transform: rotate(-90deg); +} + +.picture-scene .player-meta p { + font-size: 14px; + font-weight: 700; + color: #eef5ff; +} + +.picture-scene .dealer-mark, +.picture-scene .missing-mark { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 28px; + height: 28px; + border-radius: 999px; + font-size: 12px; +} + +.picture-scene .dealer-mark { + position: absolute; + right: -8px; + bottom: -6px; + background: linear-gradient(180deg, #ffe38a 0%, #f1b92e 100%); + color: #5f3200; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18); +} + +.picture-scene .missing-mark { + margin-left: auto; + width: 34px; + height: 34px; + padding: 0; + overflow: hidden; + background: linear-gradient(180deg, rgba(114, 219, 149, 0.2) 0%, rgba(21, 148, 88, 0.34) 100%); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16); +} + +.picture-scene .missing-mark img { + width: 22px; + height: 22px; + object-fit: contain; +} + .wall { position: absolute; display: flex; @@ -367,7 +487,7 @@ } .wall-top { - top: 54px; + top: -100px; } .wall-top img, @@ -378,6 +498,7 @@ .wall-right { right: 110px; + gap: 0; } .wall-left { @@ -390,8 +511,35 @@ height: 24px; } +.wall-left img + img, +.wall-right img + img { + margin-top: -15px; +} + +.wall-top img + img, +.wall-bottom img + img { + margin-left: -4px; +} + .wall-bottom { - bottom: 126px; + bottom: 108px; +} + +/* 提高特异性,保证本页使用 room.css 配置值 */ +.picture-scene .wall-top { + top: -100px; +} + +.picture-scene .wall-right { + right: 110px; +} + +.picture-scene .wall-bottom { + bottom: 108px; +} + +.picture-scene .wall-left { + left: 110px; } .center-desk {