diff --git a/src/components/devCharacter/duc-detail-relics.vue b/src/components/devCharacter/duc-detail-relics.vue
index cad31fc7..66b949d8 100644
--- a/src/components/devCharacter/duc-detail-relics.vue
+++ b/src/components/devCharacter/duc-detail-relics.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="ddr-box">
     <DucDetailRelic
-      v-for="relic in props.data"
-      :key="relic.id"
+      v-for="(relic, index) in transData"
+      :key="index"
       :model-value="relic"
-      :pos="relic.pos"
+      :pos="index + 1"
     />
   </div>
 </template>
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import DucDetailRelic from "./duc-detail-relic.vue";
 
 interface DucDetailRelicsProps {
@@ -16,6 +18,15 @@ interface DucDetailRelicsProps {
 }
 
 const props = defineProps<DucDetailRelicsProps>();
+const transData = computed(() => {
+  let relics: (TGApp.Sqlite.Character.RoleReliquary | false)[] = [];
+  for (let i = 0; i < 5; i++) {
+    const relic = props.data.find((relic) => relic.pos === i + 1);
+    if (relic) relics.push(relic);
+    else relics.push(false);
+  }
+  return relics;
+});
 </script>
 <style lang="css" scoped>
 .ddr-box {