From 8abb1e09808346299d383edc4e709e4bfab0cf1d Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 2 Nov 2021 16:07:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20alertLable=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=9B=A0=E5=AE=9A=E4=BD=8D=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E8=B6=85=E5=87=BA=E6=B5=8F=E8=A7=88=E5=99=A8=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.vue    | 20 +++++++++----------
 .../rightBox/administration/roleBox.vue       |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index d7dd06ab4..338eada27 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -300,7 +300,8 @@ export default {
   data () {
     return {
       alertLabelData: null,
-      loading: true
+      loading: true,
+      heightList: 0
     }
   },
   components: {
@@ -330,18 +331,15 @@ export default {
   },
   computed: {
     calcPosition () {
-      const self = this
       return function (position) {
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
         const leftOffSetView = this.detailList ? -80 : 10
-        const topOffSetView = this.detailList ? 0 : 0
-        const leftOffSet = this.detailList ? -80 : 20
-        const topOffSet = this.detailList ? 45 : 0
-        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
-        if (position.top + elHeight > clientHeight) {
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 60 : 22
+        if (position.top + this.heightList > clientHeight) {
           return {
             left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - elHeight + topOffSet}px`
+            top: `${position.top - this.heightList + topOffSet}px`
           }
         } else if (this.alertTableDialog) {
           const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
@@ -355,7 +353,7 @@ export default {
         } else {
           return {
             left: `${position.left + position.width + leftOffSetView}px`,
-            top: `${position.top + topOffSetView}px`
+            top: `${position.top}px`
           }
         }
       }
@@ -438,7 +436,9 @@ export default {
       }
     }
   },
-  mounted () {},
+  mounted () {
+    this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+  },
   beforeDestroy () {
 
   }
diff --git a/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue b/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
index 40d221421..149e330a9 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/roleBox.vue
@@ -6,9 +6,9 @@
         <span v-cancel="{obj: editRole, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
     </div>
-    <div class="right-box__container">
+    <div class="right-box__container right-box-container__left">
       <div class="container__form">
-        <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="roleForm">
+        <el-form :disabled="detail" :model="editRole" :rules="rules" label-position="top" label-width="120px" ref="roleForm">
           <!--name-->
           <el-form-item :label="$t('config.roles.name')" prop="name">
             <el-input  maxlength="64" placeholder="" id="role-box-input-name"