From d3ee11d27a5ee9a69107d9a220cf3ba0cf95bf57 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Fri, 2 Oct 2026 13:42:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(viral-video):=20=E7=B4=A0=E6=9D=90=E5=BA=93?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97=E9=80=89=E4=B8=AD=E6=80=81?= =?UTF-8?q?=E8=A7=86=E8=A7=89=E5=A2=9E=E5=BC=BA=20(#2144)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/viral-video/ViralVideoPage.css | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css index 32a584922..63379cfd8 100644 --- a/apps/web/src/pages/viral-video/ViralVideoPage.css +++ b/apps/web/src/pages/viral-video/ViralVideoPage.css @@ -1509,7 +1509,7 @@ } .vv-thumb-card { position: relative; - border: 1px solid #e5e7eb; + border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; @@ -1517,11 +1517,19 @@ transition: all 0.15s; } .vv-thumb-card:hover { - border-color: #7c3aed; + border-color: #c4b5fd; } -.vv-thumb-card.picked { +.vv-thumb-card.selected { border-color: #7c3aed; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); +} +.vv-thumb-card.selected::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(124, 58, 237, 0.1); + pointer-events: none; + z-index: 1; } .vv-thumb-ph { aspect-ratio: 1; @@ -1541,7 +1549,7 @@ } .vv-asset-image { position: relative; - border: 1px solid #e5e7eb; + border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; @@ -1553,18 +1561,21 @@ position: absolute; top: 6px; right: 6px; - width: 22px; - height: 22px; + width: 24px; + height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; display: none; align-items: center; justify-content: center; - font-size: 12px; + font-size: 13px; font-weight: 700; + z-index: 2; + box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4); + border: 2px solid #fff; } -.vv-thumb-card.picked .vv-thumb-check { +.vv-thumb-card.selected .vv-thumb-check { display: flex; } .vv-thumb-name {