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.
115 lines
3.0 KiB
115 lines
3.0 KiB
2 weeks ago
|
<template>
|
||
|
|
<div class="attribute">
|
||
|
|
|
||
|
|
<Tooltip placement="bottom" :infos="[t('atk.1')]">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.atk">
|
||
|
|
<span class="value">
|
||
|
|
{{ formartNum(attribute.atk) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip placement="bottom" :infos="[t('crit.1')]">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.crit">
|
||
|
|
<span class="value">
|
||
|
|
{{ attribute.crit }}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip placement="bottom" :infos="[t('critDmg.1')]">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.critDmg">
|
||
|
|
<span class="value">
|
||
|
|
{{ attribute.critDmg }}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip placement="bottom" :infos="[t('hp.1'), t('hp.2'),]">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.hp">
|
||
|
|
<span class="value">
|
||
|
|
{{ formartNum(attribute.curHp) }}/{{ (attribute.hp) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip placement="bottom"
|
||
|
|
:infos="[t('def.1'), t('def.2'), t('def.3')]"
|
||
|
|
width="20rem">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.def">
|
||
|
|
<span class="value">
|
||
|
|
{{ formartNum(attribute.def) }}({{ (attribute.reducPercent * 100).toFixed(2) }}%)
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Tooltip placement="bottom" :infos="[t('bloc.1'), t('bloc.2'),]">
|
||
|
|
<div class="item">
|
||
|
|
<img :src="attr_icon_urls.bloc">
|
||
|
|
<span class="value">
|
||
|
|
{{ formartNum(attribute.bloc) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { computed, onMounted, ref } from "vue";
|
||
|
|
import { useI18n } from "vue3-i18n";
|
||
|
|
import { Tooltip } from "@/components"
|
||
|
|
import { formartNum } from "@/tool";
|
||
|
|
import { attr_icon_urls } from "@/config";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
|
||
|
|
const attribute = computed(() => {
|
||
|
|
return state.playerAttribute.attribute;
|
||
|
|
})
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.attribute {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
position: absolute;
|
||
|
|
top: 3rem;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&>div,
|
||
|
|
.item {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 33.3%;
|
||
|
|
margin-top: 0.2rem;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 2.2rem !important;
|
||
|
|
height: 2.2rem !important;
|
||
|
|
float: left;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 2.2rem;
|
||
|
|
height: 2.2rem;
|
||
|
|
float: left;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|