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.
149 lines
3.7 KiB
149 lines
3.7 KiB
<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, onBeforeUnmount } 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(); |
|
let interval = 0; |
|
const attribute = computed(() => { |
|
return state.playerAttribute.attribute; |
|
}) |
|
|
|
onMounted(() => { |
|
interval = setInterval(() => { |
|
commit('add_player_curhp', Math.ceil(attribute.value.hp * 0.02)) |
|
}, 1000); |
|
}); |
|
onBeforeUnmount(() => { |
|
clearInterval(interval); |
|
}) |
|
</script> |
|
<style lang="scss" scoped> |
|
.attribute { |
|
display: flex; |
|
flex-wrap: wrap; |
|
position: absolute; |
|
top: 2.5rem; |
|
width: 100%; |
|
|
|
&>div, |
|
.item { |
|
cursor: pointer; |
|
width: 33.3%; |
|
margin-top: 0.2rem; |
|
|
|
img { |
|
width: 2.2rem; |
|
height: 2.2rem; |
|
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%; |
|
} |
|
} |
|
|
|
@media only screen and (max-width: 768px) { |
|
.attribute { |
|
top: 2rem; |
|
|
|
&>div, |
|
.item { |
|
width: 50%; |
|
margin-top: 0.1rem; |
|
|
|
img { |
|
width: 2rem; |
|
height: 2rem; |
|
margin-left: 0.1rem; |
|
} |
|
|
|
.value { |
|
font-size: 1rem; |
|
line-height: 2rem; |
|
height: 2rem; |
|
margin-left: 0.1rem; |
|
} |
|
} |
|
|
|
.item { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
</style> |