vue-idle-game/src/components/equip-tips.vue

<template>
    <teleport to="body">
        <div class="tip" v-if="tipsShow && equip" :style='tipsStyle' :key="1">
            <Equip :equip="equip" />
        </div>
        <div class="tip" v-if="tipsShow && compare && curEquip" :style='tipsStyle2' :key="2">
            <Equip :equip="curEquip" :used="true" />
            <img class="equip-used" :src="used_icon"></img>
        </div>
    </teleport>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import Equip from "./equip.vue"
import { used_icon } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();

const tipsShow = computed(() => {
    return state.equipTip.tipsShow;
});
const compare = computed(() => {
    return state.equipTip.compare;
});
const tipsStyle = computed(() => {
    return state.equipTip.tipsStyle;
});
const tipsStyle2 = computed(() => {
    return state.equipTip.tipsStyle2;
});
const equip = computed(() => {
    return state.equipTip.equip;
});
const curEquip = computed(() => {
    if (equip.value) {
        return state.playerAttribute[equip.value.type];
    }
    return null;
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
.tip {
    position: absolute;
    z-index: 9999;
    justify-content: space-between;

    color: #f1f1f1;
    height: auto;
    background: rgba(0, 0, 0, 0.8);
    border: #393839;
    border-radius: 0.4rem;
    box-sizing: border-box;

    .equip-used {
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        top: 0;
        left: 0;
    }

}

</style>