🌱 完成右侧天赋展示 4/5

#20

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

@@ -1,2 +1,50 @@
-<template></template>
-<script lang="ts" setup></script>
+<template>
+  <div class="duc-dort-box">
+    <div :title="talent.name" v-for="talent in talents" :key="talent.pos" class="duc-dort-item">
+      <img :src="talent.icon" alt="talent" />
+      <span>Lv.{{ talent.level }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface DucDetailOrtProps {
+  modelValue: TGApp.Sqlite.Character.RoleTalent[];
+}
+
+const props = defineProps<DucDetailOrtProps>();
+const talents = computed(() => {
+  return props.modelValue ?? [];
+});
+</script>
+<style lang="css" scoped>
+.duc-dort-box {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.duc-dort-item {
+  display: flex;
+  column-gap: 10px;
+}
+
+.duc-dort-item img {
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  border-radius: 50%;
+  backdrop-filter: blur(5px);
+  background: rgba(0 0 0 /40%);
+}
+
+.duc-dort-item span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-title);
+  font-size: 16px;
+  text-shadow: 0 0 5px rgba(0 0 0/40%);
+}
+</style>

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

@@ -14,9 +14,9 @@
           <DucDetailOlt :data="props.dataVal" mode="avatar" />
           <DucDetailOlt :data="JSON.parse(props.dataVal.weapon)" mode="weapon" />
         </div>
-        <!-- 右下天赋 -->
-        <div class="duc-doc-rb">
-          <DucDetailOrt :data="JSON.parse(props.dataVal.talent)" />
+        <!-- 右侧天赋 -->
+        <div class="duc-doc-rt">
+          <DucDetailOrt :model-value="JSON.parse(props.dataVal.talent)" />
         </div>
         <!-- 左下命座 -->
         <div class="duc-doc-lb">
@@ -125,7 +125,7 @@ async function loadData(): Promise<void> {
 .duc-do-container {
   position: relative;
   overflow: hidden;
-  width: 50vw;
+  width: 800px;
   border-radius: 5px;
   aspect-ratio: 21 / 10;
   background: var(--box-bg-1);
@@ -159,13 +159,11 @@ async function loadData(): Promise<void> {
   row-gap: 10px;
 }
 
-.duc-doc-rb {
+.duc-doc-rt {
   position: absolute;
-  right: 20px;
-  bottom: 20px;
-  width: 100px;
-  height: 300px;
-  background: var(--common-shadow-2);
+  top: 10px;
+  right: 10px;
+  padding: 10px;
 }
 
 .duc-doc-lb {