190 lines
3.3 KiB
Vue
190 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="equipment-oath"
|
|
:style="{ backgroundImage: withBg ? `url(${getImageURL('/common/oath/head.png')})` : 'none' }"
|
|
>
|
|
<template v-for="part in parts" :key="part">
|
|
<div class="equipment-oath__slot" :style="infoStyle(part)" @click="choosePart(part)">
|
|
<template v-if="detail?.[part]?.id">
|
|
<EquipmentIcon :equipment="equ(detail[part].id, part)" useDisplayUrl />
|
|
</template>
|
|
<template v-else-if="!withBg">
|
|
{{ part != '11' ? '星蕴' : '誓约' }}
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="EquList">
|
|
import { getImageURL } from '@/utils/images'
|
|
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
|
|
import { useInfoStore, type IConfigOath } from '@/stores'
|
|
|
|
const props = defineProps({
|
|
withBg: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
detail: {
|
|
type: Object as PropType<Record<string, IConfigOath>>,
|
|
},
|
|
})
|
|
const partModelValue = defineModel<string>('part', { default: '0' })
|
|
const infoStore = useInfoStore()
|
|
|
|
const parts = computed(() => {
|
|
const parts = infoStore.oathParts
|
|
return parts
|
|
})
|
|
|
|
const equ = (id: string, part: string) => {
|
|
return infoStore.oaths.find((e) => e.id == id && e.oathPos == part)
|
|
}
|
|
|
|
const position = [
|
|
{
|
|
x: 30,
|
|
y: 12,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 46,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 80.5,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 12,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 46,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 80.5,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 74,
|
|
y: 131.5,
|
|
},
|
|
{
|
|
x: 118,
|
|
y: 145.5,
|
|
},
|
|
{
|
|
x: 162,
|
|
y: 131.5,
|
|
},
|
|
{
|
|
x: 118,
|
|
y: 111,
|
|
},
|
|
]
|
|
|
|
const positionSimple = [
|
|
{
|
|
x: 30,
|
|
y: 12,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 46,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 80.5,
|
|
},
|
|
{
|
|
x: 30,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 12,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 46,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 80.5,
|
|
},
|
|
{
|
|
x: 206,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 74,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 118,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 162,
|
|
y: 114,
|
|
},
|
|
{
|
|
x: 118,
|
|
y: 80.5,
|
|
},
|
|
]
|
|
|
|
const infoStyle = (part: string) => {
|
|
const coordinates = (props.withBg ? position : positionSimple)[Number.parseInt(part)]
|
|
|
|
return {
|
|
'--ui-equipment-slot-left': `${coordinates.x}px`,
|
|
'--ui-equipment-slot-top': `${coordinates.y}px`,
|
|
}
|
|
}
|
|
|
|
const choosePart = (part: string) => {
|
|
partModelValue.value = part
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.equipment-oath {
|
|
position: relative;
|
|
width: var(--ui-equipment-board-inline-size, 264px);
|
|
height: 100%;
|
|
flex: 0 0 auto;
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
background-size: var(--ui-equipment-board-inline-size, 264px) auto;
|
|
|
|
&__slot {
|
|
position: absolute;
|
|
z-index: var(--ui-equipment-slot-z-index, 6);
|
|
left: var(--ui-equipment-slot-left);
|
|
top: var(--ui-equipment-slot-top);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: var(--ui-equipment-slot-size, 26px);
|
|
height: var(--ui-equipment-slot-size, 26px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: var(--ui-component-stroke-size) solid var(--ui-equipment-slot-border, var(--ui-border));
|
|
color: var(--ui-equipment-slot-foreground, var(--ui-muted-foreground));
|
|
font-size: var(--ui-equipment-preview-slot-font-size, 12px);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|