From 6fde4bbc0d72808ee9770b0178b1c07f185020ae Mon Sep 17 00:00:00 2001 From: wsy182 <2392948297@qq.com> Date: Wed, 25 Mar 2026 22:11:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor(styles):=20=E7=A7=BB=E9=99=A4=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E4=B8=AD=E7=9A=84=E7=8E=A9=E5=AE=B6?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除了.table-watermark、.player-badge、.avatar-panel、.avatar-card等类定义 - 移除了.dealer-mark、.missing-mark、.wall等与游戏桌相关的样式 - 保留了.center-deck样式并移至合适位置 - 在room.css中添加了.picture-scene下的玩家离线状态透明度样式 - 为右侧和左侧玩家添加了.meta区域旋转和布局调整样式 - 修复了missing-mark文字颜色样式缺失问题 --- src/assets/styles/global.css | 219 ----------------------------------- src/assets/styles/room.css | 24 ++++ 2 files changed, 24 insertions(+), 219 deletions(-) diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css index bbae90a..4260e62 100644 --- a/src/assets/styles/global.css +++ b/src/assets/styles/global.css @@ -746,225 +746,6 @@ button:disabled { border-style: solid; } -.table-watermark { - position: absolute; - left: 50%; - top: 24px; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - color: rgba(244, 240, 220, 0.82); - text-align: center; - pointer-events: none; -} - -.table-watermark span { - font-size: 12px; - color: #f7e4b0; -} - -.table-watermark strong { - font-size: 26px; - letter-spacing: 2px; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); -} - -.table-watermark small { - font-size: 12px; - color: #bdd8ca; -} - -.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); -} - -.avatar-panel { - position: relative; - flex: 0 0 auto; -} - -.player-badge.seat-top { - top: 20px; - left: 50%; - transform: translateX(-50%); -} - -.player-badge.seat-right { - right: -20px; - top: 50%; - transform: translateY(-50%) rotate(90deg); -} - -.player-badge.seat-bottom { - bottom: 20px; - left: 50%; - transform: translateX(-50%); -} - -.player-badge.seat-left { - left: -20px; - top: 50%; - transform: translateY(-50%) rotate(90deg); -} - -.player-badge.is-turn { - border-color: rgba(244, 222, 163, 0.72); -} - -.player-badge.offline { - opacity: 0.55; -} - -.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%); - color: #f7fff7; - font-weight: 800; - box-shadow: - inset 0 2px 4px rgba(255, 255, 255, 0.18), - 0 6px 14px rgba(0, 0, 0, 0.22); - overflow: hidden; -} - -.avatar-card img { - width: 100%; - height: 100%; - 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; - color: #eef5ff; -} - -.player-meta strong { - font-size: 15px; - color: #ffd85c; - text-shadow: 0 0 10px rgba(255, 216, 92, 0.2); -} - -.dealer-mark, -.missing-mark { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 28px; - height: 28px; - border-radius: 999px; - font-size: 12px; -} - -.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); -} - -.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); -} - -.missing-mark img { - width: 22px; - height: 22px; - object-fit: contain; -} - -.missing-mark span { - color: #effff5; -} - -.wall { - position: absolute; - display: flex; - gap: 2px; - filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22)); -} - -.wall img { - display: block; - object-fit: contain; -} - -.wall-top, -.wall-bottom { - left: 50%; - transform: translateX(-50%); -} - -.wall-left, -.wall-right { - top: 50%; - transform: translateY(-50%); - flex-direction: column; -} - -.wall-top { - top: 154px; -} - -.wall-top img, -.wall-bottom img { - width: 24px; - height: 36px; -} - -.wall-right { - right: 132px; -} - -.wall-left { - left: 132px; -} - -.wall-left img, -.wall-right img { - width: 36px; - height: 24px; -} - -.wall-bottom { - bottom: 176px; -} .center-deck { position: absolute; diff --git a/src/assets/styles/room.css b/src/assets/styles/room.css index fd0d74b..cccbec9 100644 --- a/src/assets/styles/room.css +++ b/src/assets/styles/room.css @@ -393,6 +393,10 @@ border-color: rgba(244, 222, 163, 0.72); } +.picture-scene .player-badge.offline { + opacity: 0.55; +} + .picture-scene .avatar-card { display: grid; place-items: center; @@ -425,6 +429,22 @@ color: #eef5ff; } +.picture-scene .player-badge.seat-right .player-meta, +.picture-scene .player-badge.seat-left .player-meta { + display: flex; + align-items: center; + justify-content: center; + min-height: 48px; + transform: rotate(-90deg); +} + +.picture-scene .player-badge.seat-right .player-meta p, +.picture-scene .player-badge.seat-left .player-meta p { + line-height: 1; + letter-spacing: 1px; + white-space: nowrap; +} + .picture-scene .dealer-mark, .picture-scene .missing-mark { display: inline-flex; @@ -461,6 +481,10 @@ object-fit: contain; } +.picture-scene .missing-mark span { + color: #effff5; +} + .wall { position: absolute; display: flex;