vue-idle-game/src/views/message/attribute.vue

<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: 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>