vue-idle-game/src/views/backpack/player.vue

<template>
    <div class="player">
        <div class="attributes">
            <div class="label">
                <div>{{ t('reborn.0') }}:</div>
                <div> {{ t('lv') }}: </div>
                <div> {{ t('coins.0') }}: </div>
                <div v-for="attr in attrs" :key="attr">
                    {{ t(attr + '.0') }}:
                </div>
            </div>
            <div class="value">
                <div>{{ state.rebornPoints.count }}</div>
                <div> {{ state.playerAttribute.lv }} </div>
                <div> {{ coins }} </div>
                <div v-for="attr in attrs" :key="attr">{{ attribute[attr] }}{{ attr_unitys[attr] }} </div>
            </div>
        </div>
        <div class="equips">
            <img class="player-img" :src="playerImg2" />
            <div :class="['equip', 'equip-' + idx]" v-for="equip, idx in equips"
                @mouseover="equip && commit('show_equip_tip', { equip: equip, e: $event })"
                @mouseleave="equip && commit('close_equip_tip')">
                <EquipIcon :equip="equip" @dblclick="equip && commit('takeOffEquip', equip.type)" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, computed } from "vue";
import { useI18n } from "vue3-i18n";
import { EquipIcon } from "@/components"
import { attr_unitys, playerImg2 } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const equips = computed(() => {
    return [
        state.playerAttribute.shoes,
        state.playerAttribute.pants,
        state.playerAttribute.bracers,
        state.playerAttribute.armor,
        state.playerAttribute.weapon,
        state.playerAttribute.jewelry,
        state.playerAttribute.ring,
        state.playerAttribute.neck,
    ]
})
const attribute = computed(() => {
    return state.playerAttribute.attribute;
});

const attrs = ['dps', 'atk', 'crit', 'critDmg', 'dmgPercent', 'hp', 'def', 'bloc', 'dmgReduc', 'critAvoid', 'critDmgReduc', 'moveSpeed'];
const coins = computed(() => {
    const coins = state.playerAttribute.coins;
    if (coins > 100000000) {
        return (coins / 1000000).toFixed(1) + 'm';
    }
    if (coins > 100000) {
        return (coins / 1000).toFixed(1) + 'k';
    }
    return coins;
})

onMounted(() => { });
</script>
<style lang="scss" scoped>
.player {
    width: 30rem;
    padding: 0.5rem;
    height: 17rem;
    color: white;
}

.attributes {
    padding-top: 0.5rem;
    width: 12rem;
    height: 100%;
    float: left;
    font-size: 1.1rem;
    overflow: auto;

    .label {
        float: left;
        width: 5.5rem;
        height: 100%;
        color: #f87d02;
        text-align: start;
    }

    .value {
        float: left;
        height: 100%;
        color: #f3bb82;
        text-align: start;
    }

}

.equips {
    width: 17rem;
    position: relative;
    height: 100%;
    float: right;

    .player-img {
        width: 14rem;
        height: 14rem;
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    .equip {
        position: absolute;
    }

    .equip-0 {
        left: 0.5rem;
        bottom: 0rem;
    }

    .equip-1 {
        left: 0.5rem;
        bottom: 4rem;
    }

    .equip-2 {
        left: 0.5rem;
        bottom: 8rem;
    }

    .equip-3 {
        left: 0.5rem;
        bottom: 12rem;
    }

    .equip-4 {
        right: 0.5rem;
        bottom: 0rem;
    }

    .equip-5 {
        right: 0.5rem;
        bottom: 4rem;
    }

    .equip-6 {
        right: 0.5rem;
        bottom: 8rem;
    }

    .equip-7 {
        right: 0.5rem;
        bottom: 12rem;
    }

}

@media only screen and (max-width: 768px) {
    .player {
        width: 22rem;
        padding: 0.2rem;
        height: 11rem;
        color: white;
    }

    .attributes {
        padding-top: 0.5rem;
        width: 10rem;
        height: 100%;
        float: left;
        font-size: 0.8rem;

        .label {
            float: left;
            width: 4rem;
            height: 100%;
            color: #f87d02;
            text-align: start;
        }

        .value {
            float: left;
            height: 100%;
            color: #f3bb82;
            text-align: start;
        }

    }

    .equips {
        width: 11rem;
        position: relative;
        height: 100%;
        float: right;

        .player-img {
            width: 10rem;
            height: 10rem;
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
        }

        .equip {
            position: absolute;
        }

        .equip-0 {
            left: 0.2rem;
            bottom: 0rem;
        }

        .equip-1 {
            left: 0.2rem;
            bottom: 2.7rem;
        }

        .equip-2 {
            left: 0.2rem;
            bottom: 5.4rem;
        }

        .equip-3 {
            left: 0.2rem;
            bottom: 8.1rem;
        }

        .equip-4 {
            right: 0.2rem;
            bottom: 0rem;
        }

        .equip-5 {
            right: 0.2rem;
            bottom: 2.7rem;
        }

        .equip-6 {
            right: 0.2rem;
            bottom: 5.4rem;
        }

        .equip-7 {
            right: 0.2rem;
            bottom: 8.1rem;
        }

    }

}
</style>