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"