💄 角色详情overlay样式迭代

src/components/devCharacter/duc-detail-overlay.vue

@@ -13,18 +13,18 @@
         <div class="duc-doc-lt">
           <DucDetailOlt :data="props.dataVal" mode="avatar" />
           <DucDetailOlt :data="JSON.parse(props.dataVal.weapon)" mode="weapon" />
-          <!-- todo 分享 btn 移至右上角并移除文字，该位置添加圣遗物 icon 及其数据 -->
-          <v-btn
-            class="duc-doc-btn"
-            @click="share"
-            variant="outlined"
-            :loading="loading"
-            data-html2canvas-ignore
-          >
-            <v-icon>mdi-share-variant</v-icon>
-            <span>分享</span>
-          </v-btn>
+          <DucDetailRelics :data="JSON.parse(props.dataVal.reliquary)" />
         </div>
+        <v-btn
+          class="duc-doc-btn"
+          @click="share"
+          variant="outlined"
+          :loading="loading"
+          data-html2canvas-ignore
+        >
+          <v-icon>mdi-share-variant</v-icon>
+          <span>分享</span>
+        </v-btn>
         <!-- 右侧天赋 -->
         <div class="duc-doc-rt">
           <DucDetailOrt :model-value="JSON.parse(props.dataVal.talent)" />
@@ -57,6 +57,7 @@ import TOverlay from "../main/t-overlay.vue";
 import DucDetailOlb from "./duc-detail-olb.vue";
 import DucDetailOlt from "./duc-detail-olt.vue";
 import DucDetailOrt from "./duc-detail-ort.vue";
+import DucDetailRelics from "./duc-detail-relics.vue";
 
 interface DucDetailOverlayProps {
   modelValue: boolean;
@@ -191,6 +192,9 @@ async function share(): Promise<void> {
 }
 
 .duc-doc-btn {
+  position: absolute;
+  bottom: 90px;
+  left: 370px;
   color: var(--tgc-white-1);
 }
 

src/components/devCharacter/duc-detail-relic.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="duc-dr-box">
+    <div class="duc-dr-bg">
+      <img :src="`/icon/relic/${props.pos}.webp`" alt="relic" />
+    </div>
+    <div v-if="props.modelValue" class="duc-dr-bg">
+      <img :src="`/icon/bg/${props.modelValue.star}-Star.webp`" alt="bg" />
+    </div>
+    <div v-if="props.modelValue" class="duc-dr-icon">
+      <img :src="props.modelValue.icon" alt="relic" />
+    </div>
+    <div v-if="props.modelValue !== false" class="duc-dr-level">
+      {{ props.modelValue.level }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface ducDetailRelicProps {
+  modelValue: TGApp.Sqlite.Character.RoleReliquary | false;
+  pos: number;
+}
+
+const props = defineProps<ducDetailRelicProps>();
+</script>
+<style lang="css" scoped>
+.duc-dr-box {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgb(50 56 68/50%);
+}
+
+.duc-dr-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.duc-dr-bg:nth-child(1) {
+  padding: 5px;
+}
+
+.duc-dr-bg img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.duc-dr-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.duc-dr-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+
+.duc-dr-level {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--tgc-yellow-3);
+  color: var(--tgc-white-1);
+  font-family: var(--font-title);
+  font-size: 12px;
+  line-height: 1;
+}
+</style>

src/components/devCharacter/duc-detail-relics.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="ddr-box">
+    <DucDetailRelic
+      v-for="relic in props.data"
+      :key="relic.id"
+      :model-value="relic"
+      :pos="relic.pos"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import DucDetailRelic from "./duc-detail-relic.vue";
+
+interface DucDetailRelicsProps {
+  data: TGApp.Sqlite.Character.RoleReliquary[];
+}
+
+const props = defineProps<DucDetailRelicsProps>();
+</script>
+<style lang="css" scoped>
+.ddr-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 10px;
+}
+</style>