✨ 添加圣遗物展示

src/components/userCharacter/tuc-detail-desc-constellation.vue

@@ -34,13 +34,22 @@ interface TucDetailDescConstellationProps {
 const props = defineProps<TucDetailDescConstellationProps>();
 </script>
 <style lang="css" scoped>
+.tuc-ddc-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-around;
+  height: 100%;
+  margin-left: 5px;
+}
+
 .tuc-ddc-top {
-  margin-left: 15px;
   color: var(--common-color-blue-2);
+  height: 20px;
 }
 
 .tuc-ddc-bottom {
-  margin-left: 15px;
+  height: 20px;
 }
 
 .tuc-ddc-bottom :nth-child(1) {

src/components/userCharacter/tuc-detail-desc-relic.vue

@@ -0,0 +1,77 @@
+<template>
+  <TucDetailDesc>
+    <template #title>
+      <span>圣遗物</span>
+    </template>
+    <template #content>
+      <TucDetailRelic v-model="props.modelValue" pos="props.modelValue.pos" />
+      <div class="tuc-ddr-content">
+        <div class="tuc-ddrc-top">
+          <span>{{ props.modelValue.name }}</span>
+          <span>+</span>
+          <span>{{ props.modelValue.level }}</span>
+        </div>
+        <div class="tuc-ddrc-bottom">
+          <img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star">
+        </div>
+      </div>
+    </template>
+    <template #desc>
+      <div class="tuc-ddrd-title">
+        {{ props.modelValue.set.name }}：
+      </div>
+      <div v-for="desc in props.modelValue.set.effect" class="tuc-ddrc-desc">
+        <span>{{ desc.active }}件套：</span>
+        <span>{{ desc.description }}</span>
+      </div>
+    </template>
+  </TucDetailDesc>
+</template>
+<script lang="ts" setup>
+// vue
+import TucDetailDesc from "./tuc-detail-desc.vue";
+import TucDetailRelic from "./tuc-detail-relic.vue";
+
+interface TucDetailDescRelicProps {
+  modelValue: TGApp.Sqlite.Character.RoleReliquary;
+}
+
+const props = defineProps<TucDetailDescRelicProps>();
+</script>
+<style lang="css" scoped>
+.tuc-ddr-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-around;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.tuc-ddrc-top {
+  height: 20px;
+}
+
+.tuc-ddrc-top :nth-child(1) {
+  margin-right: 10px;
+}
+
+.tuc-ddrc-top :nth-child(3) {
+  color: var(--common-color-yellow);
+}
+
+.tuc-ddrc-bottom {
+  height: 20px;
+}
+
+.tuc-ddrc-bottom img {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.tuc-ddrd-title {
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+</style>

src/components/userCharacter/tuc-detail-desc-weapon.vue

@@ -45,13 +45,14 @@ const box = computed(() => {
 .tuc-ddw-content {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: start;
-  justify-content: center;
+  justify-content: space-around;
   height: 100%;
+  margin-left: 5px;
 }
 
 .tuc-ddwc-top {
-  margin-left: 10px;
+  height: 20px;
 }
 
 .tuc-ddwc-top span {
@@ -64,7 +65,7 @@ const box = computed(() => {
 }
 
 .tuc-ddwc-bottom {
-  margin-left: 15px;
+  height: 20px;
 }
 
 .tuc-ddwc-bottom img {

src/components/userCharacter/tuc-detail-overlay.vue

@@ -13,6 +13,51 @@
           <div class="tuc-dol-item" @click="showDetail(data.weapon,'武器')">
             <TucDetailItemBox v-model="weaponBox" />
           </div>
+          <div
+            class="tuc-dol-item"
+            :style="{
+              cursor: data.reliquary[1] ? 'pointer' : 'default',
+            }"
+            @click="showDetail(data.reliquary[1],'圣遗物')"
+          >
+            <TucDetailRelic v-model="data.reliquary[1]" pos="1" />
+          </div>
+          <div
+            class="tuc-dol-item"
+            :style="{
+              cursor: data.reliquary[2] ? 'pointer' : 'default',
+            }"
+            @click="showDetail(data.reliquary[2],'圣遗物')"
+          >
+            <TucDetailRelic v-model="data.reliquary[2]" pos="2" />
+          </div>
+          <div
+            class="tuc-dol-item"
+            :style="{
+              cursor: data.reliquary[3] ? 'pointer' : 'default',
+            }"
+            @click="showDetail(data.reliquary[3],'圣遗物')"
+          >
+            <TucDetailRelic v-model="data.reliquary[3]" pos="3" />
+          </div>
+          <div
+            class="tuc-dol-item"
+            :style="{
+              cursor: data.reliquary[4] ? 'pointer' : 'default',
+            }"
+            @click="showDetail(data.reliquary[4],'圣遗物')"
+          >
+            <TucDetailRelic v-model="data.reliquary[4]" pos="4" />
+          </div>
+          <div
+            class="tuc-dol-item"
+            :style="{
+              cursor: data.reliquary[5] ? 'pointer' : 'default',
+            }"
+            @click="showDetail(data.reliquary[5],'圣遗物')"
+          >
+            <TucDetailRelic v-model="data.reliquary[5]" pos="5" />
+          </div>
         </div>
         <!-- 右侧环状排列6个命座 -->
         <div class="tuc-do-right">
@@ -29,7 +74,7 @@
         <div class="tuc-do-bottom">
           <TucDetailDescWeapon v-if="selected.type === '武器'" v-model="selected.data" />
           <TucDetailDescConstellation v-else-if="selected.type === '命座'" v-model="selected.data" />
-<!--          <TucDetailDescRelic v-else-if="selected.type === '圣遗物'" v-model="selected.data" />-->
+          <TucDetailDescRelic v-else-if="selected.type === '圣遗物'" v-model="selected.data" />
         </div>
       </div>
     </div>
@@ -41,9 +86,10 @@ import { computed, onMounted, ref } from "vue";
 import TOverlay from "../main/t-overlay.vue";
 import TucDetailDescWeapon from "./tuc-detail-desc-weapon.vue";
 import TucDetailDescConstellation from "./tuc-detail-desc-constellation.vue";
-// import TucDetailDescRelic from "./tuc-detail-desc-relic.vue";
+import TucDetailDescRelic from "./tuc-detail-desc-relic.vue";
 import TucDetailItemBox from "./tuc-detail-itembox.vue";
 import TucDetailConstellation from "./tuc-detail-constellation.vue";
+import TucDetailRelic from "./tuc-detail-relic.vue";
 
 interface ToUcDetailProps {
   modelValue: boolean;
@@ -52,7 +98,6 @@ interface ToUcDetailProps {
 
 interface ToUcDetailEmits {
   (e: "update:modelValue", value: TGApp.Sqlite.Character.UserRole): void;
-
   (e: "cancel"): void;
 }
 
@@ -70,7 +115,13 @@ const visible = computed({
 const data = ref({
   weapon: {} as TGApp.Sqlite.Character.RoleWeapon,
   constellation: [] as TGApp.Sqlite.Character.RoleConstellation[],
-  reliquary: [] as TGApp.Sqlite.Character.RoleReliquary[],
+  reliquary: {
+    1: false as TGApp.Sqlite.Character.RoleReliquary | false,
+    2: false as TGApp.Sqlite.Character.RoleReliquary | false,
+    3: false as TGApp.Sqlite.Character.RoleReliquary | false,
+    4: false as TGApp.Sqlite.Character.RoleReliquary | false,
+    5: false as TGApp.Sqlite.Character.RoleReliquary | false,
+  },
 });
 const selected = ref({
   data: {} as TGApp.Sqlite.Character.RoleConstellation
@@ -80,13 +131,13 @@ const selected = ref({
 });
 
 onMounted(() => {
-  data.value = {
+  data.value.weapon = JSON.parse(props.dataVal.weapon) as TGApp.Sqlite.Character.RoleWeapon;
-    weapon: JSON.parse(props.dataVal.weapon) as TGApp.Sqlite.Character.RoleWeapon,
+  data.value.constellation = JSON.parse(props.dataVal.constellation) as TGApp.Sqlite.Character.RoleConstellation[];
-    constellation: JSON.parse(props.dataVal.constellation) as TGApp.Sqlite.Character.RoleConstellation[],
+  if (props.dataVal.reliquary !== "") {
-    reliquary: [],
+    const relics = JSON.parse(props.dataVal.reliquary) as TGApp.Sqlite.Character.RoleReliquary[];
-  };
+    relics.map((item) => {
-  if (props.dataVal.reliquary) {
+      data.value.reliquary[item.pos] = item;
-    data.value.reliquary = JSON.parse(props.dataVal.reliquary) as TGApp.Sqlite.Character.RoleReliquary[];
+    });
   }
   selected.value = {
     data: data.value.weapon,
@@ -107,7 +158,14 @@ const onCancel = () => {
   emits("cancel");
 };
 
-function showDetail (item: TGApp.Sqlite.Character.RoleConstellation | TGApp.Sqlite.Character.RoleWeapon | TGApp.Sqlite.Character.RoleReliquary, type: string) {
+function showDetail (
+  item:
+  TGApp.Sqlite.Character.RoleConstellation |
+  TGApp.Sqlite.Character.RoleWeapon |
+  TGApp.Sqlite.Character.RoleReliquary |
+  false,
+  type: string) {
+  if (!item) return;
   selected.value = {
     data: item,
     type,
@@ -142,10 +200,10 @@ function showDetail (item: TGApp.Sqlite.Character.RoleConstellation | TGApp.Sqli
 .tuc-do-quote {
   position: absolute;
   bottom: 5px;
-  right: 5px;
+  right: 10px;
   font-family: var(--font-text);
   font-size: 12px;
-  color: var(--common-color-yellow);
+  color: var(--common-color-grey-2);
 }
 
 .tuc-do-show {
@@ -160,6 +218,7 @@ function showDetail (item: TGApp.Sqlite.Character.RoleConstellation | TGApp.Sqli
 .tuc-do-left {
   width: 50%;
   height: 400px;
+  position: relative;
 //background: rgb(255 255 255 / 30%);
 }
 
@@ -176,13 +235,42 @@ function showDetail (item: TGApp.Sqlite.Character.RoleConstellation | TGApp.Sqli
 /* 左侧显示区域 */
 .tuc-dol-item {
   position: absolute;
+  cursor: pointer;
 }
 
+/* 排列武器跟5个圣遗物 */
 .tuc-dol-item:nth-child(1) {
-  top: 30px;
+  top: 40px;
-  left: 20px;
+  left: 10px;
 }
 
+.tuc-dol-item:nth-child(2) {
+  top: 90px;
+  left: 80px;
+}
+
+.tuc-dol-item:nth-child(3) {
+  top: 140px;
+  left: 10px;
+}
+
+.tuc-dol-item:nth-child(4) {
+  top: 190px;
+  left: 80px;
+}
+
+.tuc-dol-item:nth-child(5) {
+  top: 240px;
+  left: 10px;
+}
+
+.tuc-dol-item:nth-child(6) {
+  top: 290px;
+  left: 80px;
+}
+
+/* 右侧显示区域 */
+
 .tuc-dor-box {
   width: 100%;
   height: 100%;

src/components/userCharacter/tuc-detail-relic.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="tuc-dr-box">
+    <div class="tuc-dr-bg">
+      <img :src="`/icon/relic/${props.pos}.webp`" alt="relic">
+    </div>
+    <div v-if="props.modelValue" class="tuc-dr-bg">
+      <img :src="`/icon/bg/${props.modelValue.star}-Star.webp`" alt="bg">`
+    </div>
+    <div v-if="props.modelValue" class="tuc-dr-icon">
+      <img :src="props.modelValue.icon" alt="relic">
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TucDetailRelicProps {
+  modelValue: TGApp.Sqlite.Character.RoleReliquary | false;
+  pos: string;
+}
+
+const props = defineProps<TucDetailRelicProps>();
+</script>
+<style lang="css" scoped>
+.tuc-dr-box {
+  width: 60px;
+  height: 60px;
+  border-radius: 5px;
+  background: rgb(0 0 0 /20%);
+  position: relative;
+}
+
+.tuc-dr-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.tuc-dr-bg:nth-child(1) {
+  padding: 5px;
+}
+
+.tuc-dr-bg img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+
+.tuc-dr-icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.tuc-dr-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+</style>

src/components/userCharacter/tuc-role-box.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tuc-rb-box" @click="visible = true">
+  <div class="tuc-rb-box" @click="showOverlay">
     <div class="tuc-rb-top">
       <TItemBox v-model="avatarBox" />
       <TItemBox v-model="weaponBox" />
@@ -26,7 +26,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { computed, ref, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import TItemBox from "../main/t-itembox.vue";
 import ToUcDetail from "./tuc-detail-overlay.vue";
 // utils
@@ -87,6 +87,10 @@ function getAvatarName () {
         : props.modelValue.name
   );
 }
+
+function showOverlay () {
+  visible.value = true;
+}
 </script>
 <style lang="css" scoped>
 .tuc-rb-box {