From 3235545a0212cef4c7dc84ac7afbbdfe34aac062 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 11 Sep 2025 12:35:17 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E7=88=B1?=
 =?UTF-8?q?=E8=AF=BA=E5=A4=A9=E8=B5=8B=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=98=AF=E5=90=A6=E8=A7=A3=E9=94=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../userAvatarCard/duc-detail-ort.vue         | 48 ++++++++++++++-----
 .../userAvatarCard/tuc-detail-card.vue        |  8 ++--
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/components/userAvatarCard/duc-detail-ort.vue b/src/components/userAvatarCard/duc-detail-ort.vue
index dda7c684..9b1a1df7 100644
--- a/src/components/userAvatarCard/duc-detail-ort.vue
+++ b/src/components/userAvatarCard/duc-detail-ort.vue
@@ -8,6 +8,9 @@
     >
       <span>{{ talent.name }}</span>
       <div class="duc-dort-icon">
+        <div v-if="!talent.is_unlock" class="duc-dort-lock">
+          <v-icon color="white">mdi-lock</v-icon>
+        </div>
         <TMiImg :ori="true" :src="talent.icon" alt="talent" />
       </div>
       <span>Lv.{{ talent.level === 0 ? 1 : talent.level }}</span>
@@ -25,20 +28,49 @@ const props = defineProps<DucDetailOrtProps>();
 .duc-dort-box {
   display: flex;
   flex-direction: column;
-  row-gap: 10px;
+  row-gap: 8px;
 }
 
 .duc-dort-item {
   display: flex;
   justify-content: flex-end;
   column-gap: 8px;
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--tgc-white-1);
+    font-family: var(--font-title);
+    font-size: 16px;
+    text-shadow: 0 0 5px #00000066;
+
+    &:last-child {
+      width: 48px;
+    }
+  }
+}
+
+.duc-dort-lock {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  width: 44px;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 50%;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  background-color: #00000066;
 }
 
 .duc-dort-icon {
   position: relative;
   display: flex;
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -54,14 +86,4 @@ const props = defineProps<DucDetailOrtProps>();
     object-fit: contain;
   }
 }
-
-.duc-dort-item span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--tgc-white-1);
-  font-family: var(--font-title);
-  font-size: 16px;
-  text-shadow: 0 0 5px #00000066;
-}
 </style>
diff --git a/src/components/userAvatarCard/tuc-detail-card.vue b/src/components/userAvatarCard/tuc-detail-card.vue
index 008b3d70..4322b30f 100644
--- a/src/components/userAvatarCard/tuc-detail-card.vue
+++ b/src/components/userAvatarCard/tuc-detail-card.vue
@@ -35,8 +35,7 @@
     </div>
     <!-- 底部水印信息 -->
     <div class="duc-doc-bt">
-      UID: {{ props.modelValue.uid }} Updated: {{ props.modelValue.updated }} | Rendered by
-      TeyvatGuide v{{ version }}
+      UID: {{ props.modelValue.uid }} {{ props.modelValue.updated }} | TeyvatGuide v{{ version }}
     </div>
   </div>
 </template>
@@ -149,9 +148,8 @@ async function share(): Promise<void> {
 
 .duc-doc-rt {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px;
+  top: 8px;
+  right: 8px;
 }
 
 .duc-doc-lb {