dev

2025-04-06 02:26:06 +08:00
parent 41d14c947c
commit 718bba9136
39 changed files with 386 additions and 80 deletions
@@ -1,8 +1,126 @@
-<template></template>
+<template>
+  <div class="bg-#000000bf w-264px">
+    <div class="h-177px">
+      <EquList :detail="props.equs"></EquList>
+    </div>
+    <div class="flex flex-wrap border-y-1px my-1px border-y-solid border-#FFFF/10">
+      <template v-for="info in props.info" :key="info.id">
+        <div
+          class="flex px-5px box-border mt-2px"
+          :style="{ width: info.value.toString().includes('/') ? '100%' : '50%' }"
+        >
+          <div class="w-60px text-hex-836832">{{ info.name }}</div>
+          <div class="ml-auto text-hex-3ea74e">{{ info.value }}</div>
+        </div>
+      </template>
+    </div>
+    <div class="border-y-1px border-y-solid my-1px border-#FFFF/10 bg-black">
+      <template v-for="suit in props.suits" :key="suit.id">
+        <div class="flex items-center px-5px">
+          <img
+            :src="getImageURL(`/equipment${suit.imageUrl}`)"
+            alt=""
+            class="w-20px h-20px object-contain"
+          />
+          <div class="flex px-5px flex-1 justify-between" :class="rarityClass(suit.rarity)">
+            <span>{{ suit.name }} 套装</span>
+            <span>{{ suit.rarity }} {{ lvFormat(suit.level, suit.rarity) }}</span>
+            <span>{{ suit.point }}点</span>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="border-y-1px border-y-solid my-1px border-#FFFF/10">
+      <div class="flex">
+        <div class="flex-1 flex items-center justify-center bg-#221A08 text-#9A7E4A">
+          穿戴装备信息
+        </div>
+      </div>
+      <template v-for="part in partOrder" :key="part">
+        <div class="flex p-2px partItem gap-5px">
+          <img
+            :src="getImageURL(`/equipment/icon/${part}.png`)"
+            alt=""
+            class="w-20px h-20px object-contain"
+          />
+          <div
+            class="flex items-center"
+            :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
+          >
+            +{{ props.equs[part]?.reinforce }}
+          </div>
+          <div class="rare" v-if="props.equs[part]?.refine > 0">({{ props.equs[part]?.refine }})</div>
+          <div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">{{equ(props.equs?.[part]?.id)?.name}}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

 <script setup lang="ts" name="Info">
+import { getImageURL } from '@/utils/images'
+import { rarityClass } from '@/utils'
+import type { IResultUserInfo, IResultSuit } from '@/api/calc/type'
+import EquList from '@/components/dnf/Equipment/List/index.vue'
+import type { IConfigEquip } from '@/stores/config'
+import { useInfoStore } from '@/stores'

+const props = defineProps<{
+  info: IResultUserInfo[]
+  suits: IResultSuit[]
+  equs: Record<string, IConfigEquip>
+}>()
+
+const partOrder = [
+  '武器',
+  '上衣',
+  '下装',
+  '头肩',
+  '腰带',
+  '鞋',
+  '项链',
+  '手镯',
+  '戒指',
+  '辅助装备',
+  '魔法石',
+  '耳环',
+]
+const infoStore = useInfoStore()
+
+const equ = (id: string) => {
+  return infoStore.equips.find((e) => e.id == id)
+}
+
+const lvFormat = (lv: number, rarity: string) => {
+  if (rarity == '太初') return ''
+  switch (lv) {
+    case 1:
+      return 'I'
+    case 2:
+      return 'II'
+    case 3:
+      return 'III'
+    case 4:
+      return 'IV'
+    case 5:
+      return 'V'
+    default:
+      return ''
+  }
+}
 </script>

 <style scoped lang="scss">
+.partItem {
+  display: flex;
+  align-items: center;
+}
+
+.partItem:nth-child(2n + 1) {
+  background-color: #0b090b;
+}
+
+.partItem:nth-child(2n) {
+  background-color: #000100;
+}
 </style>