更新UI显示

src/components/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <teleport to="body">
+    <teleport to="#app">
         <div class="dialog" :draggable="true" v-show="show" @contextmenu.prevent="console.log('禁用浏览器默认右键功能')">
             <div class="title" v-if="showHeader">
                 <span>{{ title }}</span>
@@ -82,6 +82,7 @@ onMounted(() => {
     border-radius: 6px;
     box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.7);
     background: rgba(0, 0, 0, 0.7);
+    overflow: scroll;
 
 }
 

src/views/backpack/backpack.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.backpack" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('backpack')" v-model="show" top="20%" left='8%'>
+    <Dialog :title="t('backpack')" v-model="show" top="4rem" left='8%'>
         <Player />
         <Grid @openEquipMenu="openEquipMenu" />
     </Dialog>

src/views/index.vue

@@ -4,7 +4,6 @@
             <Message />
         </div>
         <Menu />
-        <!-- <Healthy /> -->
     </div>
     <EquipTips />
 </template>
@@ -13,8 +12,6 @@
 import { useStore } from "vuex";
 import { reactive, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
-// import Healthy from "./user-status/healthy.vue";
-// import UserItem from "./user-item";
 import Message from "./message";
 import Menu from "./menu.vue";
 import { EquipTips } from "@/components";
@@ -51,6 +48,7 @@ onMounted(() => {
     right: 0;
     color: #eee;
     height: 100%;
+    overflow: scroll;
 }
 
 .infomation {

src/views/message/attribute.vue

@@ -0,0 +1,115 @@
+<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, ref } 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();
+
+const attribute = computed(() => {
+    return state.playerAttribute.attribute;
+})
+
+onMounted(() => { });
+</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>

src/views/message/message.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="message">
+        <Attribute />
         <div class="clear" @click="commit('clear_sys_info')">清除信息</div>
         <SysInfo />
     </div>
@@ -10,6 +11,7 @@ import { useStore } from "vuex";
 import { reactive, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
 import SysInfo from './sys-info.vue';
+import Attribute from "./attribute.vue";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
@@ -24,7 +26,7 @@ onMounted(() => { });
     width: 52.5rem;
     transition: 0.2s;
     padding: 0.2rem;
-    padding-top: 3rem;
+    padding-top: 8.5rem;
 
     .clear {
         position: absolute;

src/views/reborn/reborn.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.reborn" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="10%" left='8%' padding="0.7rem">
+    <Dialog :title="t('rebornMenu.0')" v-model="showReborn" top="4rem" left='8%' padding="0.7rem">
         <div class="message">
             <p>{{ t('canGetPoint') + getPoints }}</p>
             <div class="tips">