71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
|
<div class="pos-relative w-300px h-full">
|
|
<template v-for="part in infoStore.avatarParts" :key="part">
|
|
<div
|
|
class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
|
|
:style="infoStyle(part)"
|
|
@click="choosePart(part)"
|
|
>
|
|
{{ partName(part) }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="EquList">
|
|
import { getImageURL } from '@/utils/images'
|
|
import { useVModel } from '@vueuse/core'
|
|
import { useInfoStore, useConfigStore } from '@/stores'
|
|
|
|
const props = defineProps({
|
|
part: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
const partModelValue = useVModel(props, 'part')
|
|
const infoStore = useInfoStore()
|
|
|
|
const infoStyle = (part: string) => {
|
|
let x = 15
|
|
let y = 5
|
|
let index = infoStore.avatarParts.findIndex((p) => p == part)
|
|
// if (index == 13) {
|
|
// index -= 7
|
|
// } else if (index >= 5 && index <= 12) {
|
|
// x += 179
|
|
// index -= 5
|
|
// }
|
|
if (part == '宠物') {
|
|
x += 5 * 39
|
|
y += 1 * 40
|
|
} else if (part.includes('宠物装备')) {
|
|
x += 6 * 39
|
|
y += (index - infoStore.avatarParts.findIndex((p) => p == '宠物装备-红')) * 40
|
|
} else {
|
|
x += (index % 4) * 39
|
|
y += Math.floor(index / 4) * 40
|
|
}
|
|
|
|
const style = {
|
|
left: `${x}px`,
|
|
top: `${y}px`,
|
|
zIndex: 6,
|
|
// fontWeight: 900,
|
|
}
|
|
return style
|
|
}
|
|
|
|
const choosePart = (part: string) => {
|
|
partModelValue.value = part
|
|
}
|
|
|
|
const partName = (part: string) => {
|
|
if (part == '武器装扮') return '武器'
|
|
if (part == '快捷栏装备') return '快捷'
|
|
return part.replace('宠物装备-', '')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|