From 734f4aed05e1d35ead8c0540f7904dfa12aa77b8 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 00:32:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=88=90=E5=B0=B1):=20=E6=88=90=E5=B0=B1?=
 =?UTF-8?q?=E7=BA=BF=E7=9A=84=E8=BF=9B=E5=BA=A6=E7=BA=BF=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E4=BB=8E=E5=BE=BD=E7=AB=A0=E4=B8=AD=E9=97=B4=E9=80=8F=E5=87=BA?=
 =?UTF-8?q?=E6=9D=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

徽章底色是半透明的稀有度色，压在线上面挡不住；底下垫一层卡片底色

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/achievement/components/Medal.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/oj/achievement/components/Medal.vue b/apps/web/src/oj/achievement/components/Medal.vue
index c9ca36f..93e32db 100644
--- a/apps/web/src/oj/achievement/components/Medal.vue
+++ b/apps/web/src/oj/achievement/components/Medal.vue
@@ -24,6 +24,14 @@ const color = computed(() => RARITY_COLOR[props.rarity])
 const r = computed(() => props.size / 2 + 3)
 const box = computed(() => props.size + 8)
 const circumference = computed(() => 2 * Math.PI * r.value)
+// 底色都是半透明的，下面垫一层卡片底色 —— 不然成就线的进度线会从徽章中间透出来
+const onBg = computed(
+  () => `linear-gradient(${color.value}26, ${color.value}26), ${theme.value.cardColor}`,
+)
+const offBg = computed(
+  () =>
+    `linear-gradient(${theme.value.actionColor}, ${theme.value.actionColor}), ${theme.value.cardColor}`,
+)
 </script>
 
 <template>
@@ -55,7 +63,7 @@ const circumference = computed(() => 2 * Math.PI * r.value)
       v-else
       class="disc"
       :class="state"
-      :style="state === 'on' ? { borderColor: color, background: `${color}26` } : undefined"
+      :style="state === 'on' ? { borderColor: color, background: onBg } : undefined"
     >
       <AchievementIcon :icon="icon" :size="Math.round(size * 0.56)" />
     </span>
@@ -98,7 +106,7 @@ const circumference = computed(() => 2 * Math.PI * r.value)
 
 .disc.off {
   border-color: v-bind("theme.borderColor");
-  background: v-bind("theme.actionColor");
+  background: v-bind(offBg);
 }
 
 .disc.off :deep(svg),
@@ -110,7 +118,7 @@ const circumference = computed(() => 2 * Math.PI * r.value)
 
 .disc.unknown {
   border: 1.5px dashed v-bind("theme.borderColor");
-  background: v-bind("theme.actionColor");
+  background: v-bind(offBg);
   color: v-bind("theme.textColor3");
   font-weight: 700;
 }