dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-04-06 02:26:06 +08:00
parent 41d14c947c
commit 718bba9136
39 changed files with 386 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Result/components/Info.vue
+119 -1
View File
@@ -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>
frontend/src/pages/Character/Result/components/Skill.vue
+59 -9
View File
@@ -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>