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.
58 lines
1.4 KiB
58 lines
1.4 KiB
2 weeks ago
|
<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" />
|
||
|
|
</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"
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|