You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.6 KiB
70 lines
1.6 KiB
<template> |
|
<div class='icon' :class="{ 'red-flash': equip && isUnique(equip) }" |
|
:style="{ 'box-shadow': 'inset 0 0 7px 2px ' + ((equip && equip.quality.color) || '#a1a1a1') }"> |
|
<span v-if="equip"> |
|
<img :src="require('@/assets/icons/equips/' + equip.base.icon)"> |
|
<div class="lv" v-if="equip.lv">lv{{ equip.lv }}</div> |
|
</span> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { useStore } from "vuex"; |
|
import { reactive, onMounted, ref, computed } from "vue"; |
|
import { useI18n } from "vue3-i18n"; |
|
import { qualitys } from "@/config"; |
|
|
|
const { t } = useI18n(); |
|
const { state, commit, dispatch } = useStore(); |
|
|
|
const prop = defineProps({ |
|
equip: { |
|
type: Object, |
|
default: '' |
|
} |
|
}) |
|
|
|
const isUnique = (equip) => { |
|
if (!equip) { |
|
return false; |
|
} |
|
const quality = equip.quality.quality; |
|
return quality && quality == qualitys[4]; |
|
} |
|
|
|
const iconClass = computed(() => { |
|
if (prop.equip && prop.equip.isUnique()) { |
|
return |
|
} |
|
return ""; |
|
}) |
|
|
|
onMounted(() => { }); |
|
</script> |
|
<style lang="scss" scoped> |
|
.icon { |
|
width: 3.5rem; |
|
height: 3.5rem; |
|
background: #000; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 0.3rem; |
|
position: relative; |
|
|
|
.lv { |
|
position: absolute; |
|
left: 0.1rem; |
|
bottom: 0.1rem; |
|
color: white; |
|
font-size: 0.8rem; |
|
} |
|
} |
|
|
|
.red-flash.icon { |
|
background-image: url(@/assets/icons/red.gif) !important; |
|
background-repeat: no-repeat !important; |
|
background-position: center !important; |
|
background-size: contain !important; |
|
} |
|
</style> |