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.
69 lines
1.6 KiB
69 lines
1.6 KiB
2 months ago
|
<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">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>
|