dev

2025-04-06 02:26:06 +08:00
parent 41d14c947c
commit 718bba9136
39 changed files with 386 additions and 80 deletions
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex" v-if="configStore.result.state">
-    <Info></Info>
+  <div class="flex gap-2" v-if="configStore.result.state">
+    <Info :suits="configStore.result.state.suits" :info="configStore.result.state.info" :equs="configStore.config.equips"></Info>
    <Skill :data="configStore.result.state.skills"></Skill>
  </div>
 </template>
@@ -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>
@@ -1,12 +1,30 @@
 <template>
-  <div class="flex flex-col gap-1" v-if="data && data.length > 0">
-    <div class="flex gap-2 text-white items-center jus" v-for="skill in data" :key="skill.name">
-      <div class="flex-1 flex items-center">
-        <img :src="getImageURL(skill.icon)" alt="" class="w-8 h-8" />
+  <div class="bg-hex-000000/60 p-4 border-solid border-#FFFF/15" v-if="data && data.length > 0">
+    <div class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0">
+      <div class="flex px-1px gap-1px">
+        <div class="item-head w-150px">技能</div>
+        <div class="item-head w-80px">CD</div>
+        <div class="item-head w-150px">伤害</div>
+        <div class="item-head w-150px">秒伤</div>
+      </div>
+      <div class="overflow-y-auto max-h-580px">
+        <div class="flex px-1px gap-1px h-8.5" v-for="skill in data" :key="skill.name">
+          <div class="flex w-150px items-center gap-10px">
+            <div class="w-28px h-28px relative">
+              <img :src="getImageURL(skill.icon)" alt="" class="w-28px h-28px" />
+              <div v-if="skill.lv" class="skill-lv-min" :data-text="`Lv ${ skill.lv }`">Lv {{ skill.lv }}</div>
+            </div>
+            <div>{{ skill.name }}</div>
+          </div>
+          <div class="w-80px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
+          <div class="w-150px flex items-center justify-center">
+            {{ Math.round(skill.damage).toLocaleString() }}
+          </div>
+          <div class="w-150px flex items-center justify-center">
+            {{ Math.round(skill.damage / skill.cd).toLocaleString() }}
+          </div>
+        </div>
      </div>
-      <div class="w-150px">{{ skill.name }}</div>
-      <div class="flex-1">{{ skill.cd.toFixed(2) }}s</div>
-      <div class="flex-1">{{ skill.damage.toFixed(0) }}</div>
    </div>
  </div>
 </template>
@@ -19,8 +37,40 @@ const props = defineProps<{
 }>()

 const data = computed(() => {
-  return props.data.sort((a,b)=>b.damage - a.damage)
+  return props.data.sort((a, b) => b.damage - a.damage)
 })
 </script>

-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.item-head {
+  background: linear-gradient(#2b2817, #171407);
+  border-top: 1px solid #423d2c;
+  border-bottom: 1px solid #211d15;
+  text-align: center;
+}
+
+.skill-lv-min {
+    position: absolute;
+    z-index: 0;
+    top: -3px;
+    right: -4px;
+    font-size: 12px;
+    transform: scale(0.7);
+    color: black;
+    text-shadow: none;
+    font-weight: bolder;
+    font-family: Arial;
+  }
+
+  .skill-lv-min::before {
+    // text-shadow: #37fa38 2px 0 0, #37fa38 0 2px 0, #37fa38 -2px 0 0, #37fa38 0 -2px 0;
+    // -webkit-text-stroke-width: 1px;
+    // -webkit-text-stroke-color: #37fa38;
+    content: attr(data-text);
+    position: absolute;
+    -webkit-text-stroke: 2.5px #37fa38;
+    font-family: Arial;
+    text-shadow: none;
+    z-index: -1;
+  }
+</style>