diff --git a/src/components/Apps/ResourceActivity/index.vue b/src/components/Apps/ResourceActivity/index.vue
index ba9c7f629..41cdc112c 100644
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="16" :sm="24" class="resource-activity">
+      <el-col :md="20" :sm="24" class="resource-activity">
         <IBox :title="title" class="block" v-bind="$attrs">
           <el-timeline>
             <el-timeline-item
diff --git a/src/components/Col/index.vue b/src/components/Col/index.vue
new file mode 100644
index 000000000..61432967b
--- /dev/null
+++ b/src/components/Col/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-col />
+</template>
+
+<script>
+export default {
+  name: 'Col',
+  props: {
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index cbc8cace3..999be1147 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24" class="auto-detail-card">
+      <el-col :md="24" :sm="24" class="auto-detail-card">
         <AutoDetailCard :object="object" v-bind="detail" />
       </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
         <QuickActions :actions="quickActions" type="primary" />
         <ViewSecret
           v-if="showViewSecretDialog"
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
index b518e30a8..b6fef77f2 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
index 40ec6677f..f8229d7f7 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
@@ -9,20 +9,18 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import AccountBackupInfo from './AccountBackupInfo.vue'
-import AccountBackupExecutionList
-from '@/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue'
 
 export default {
   name: 'AccountBackupDetail',
   components: {
     GenericDetailPage,
-    AccountBackupInfo,
-    AccountBackupExecutionList
+    AccountBackupInfo
   },
   data() {
     return {
       plan: { name: '', comment: '' },
       config: {
+        url: `/api/v1/accounts/account-backup-plans/`,
         activeMenu: 'AccountBackupInfo',
         submenu: [
           {
@@ -31,8 +29,7 @@ export default {
           }
         ],
         actions: {
-          detailApiUrl: `/api/v1/accounts/account-backup-plans/${this.$route.params.id}/`,
-          deleteApiUrl: `/api/v1/accounts/account-backup-plans/${this.$route.params.id}/`,
+          detailApiUrl: `/api/v1/accounts/account-backup-plans/`,
           deleteSuccessRoute: 'AccountBackupList'
         }
       }
diff --git a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
index dd9d6e95e..0e4b6b8fd 100644
--- a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -66,8 +66,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/accounts/AccountBackup/AccountBackupList.vue b/src/views/accounts/AccountBackup/AccountBackupList.vue
index 079ba2827..c1b928638 100644
--- a/src/views/accounts/AccountBackup/AccountBackupList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupList.vue
@@ -1,5 +1,10 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <GenericListTable
+    :create-drawer="createDrawer"
+    :detail-drawer="detailDrawer"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+  />
 </template>
 
 <script>
@@ -16,6 +21,8 @@ export default {
     const vm = this
     return {
       drawerTitle: '',
+      createDrawer: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue'),
+      detailDrawer: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/index.vue'),
       showTableUpdateDrawer: false,
       currentTemplate: null,
       tableConfig: {
@@ -44,7 +51,8 @@ export default {
                 name: 'AccountBackupDetail',
                 params: { id: row.id },
                 query: { type: 'pam' }
-              })
+              }),
+              drawer: true
             }
           },
           types: {
@@ -75,16 +83,6 @@ export default {
               onClone: ({ row }) => {
                 vm.$router.push({ name: 'AccountBackupCreate', query: { clone_from: row.id }})
               },
-              onUpdate: ({ row }) => {
-                this.$route.params.id = row.id
-
-                // 解决表单详情中的跳转
-                this.$route.query.type = 'pam'
-
-                this.currentTemplate = 'AccountBackupUpdate'
-                this.drawerTitle = this.$t('AccountBackupUpdate')
-                this.showTableUpdateDrawer = true
-              },
               extraActions: [
                 {
                   title: vm.$t('Execute'),
@@ -111,17 +109,7 @@ export default {
       headerActions: {
         hasRefresh: true,
         hasExport: false,
-        hasImport: false,
-        createRoute: () => {
-          return {
-            name: 'AccountBackupCreate'
-          }
-        },
-        onCreate: () => {
-          this.currentTemplate = 'AccountBackupCreate'
-          this.drawerTitle = this.$t('AccountBackupCreate')
-          this.showTableUpdateDrawer = true
-        }
+        hasImport: false
       }
     }
   }
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
index 460062603..be3834fb9 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <GenericListTable
         ref="listTable"
         :header-actions="headerActions"
         :table-config="tableConfig"
       />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
     </el-col>
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
index eb1bf4c82..2d848af63 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -50,8 +50,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
index 443665f31..03c9b4073 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/AccountDetail/info.vue b/src/views/accounts/AccountDiscover/AccountDetail/info.vue
index fcc141bcc..52dc51bc8 100644
--- a/src/views/accounts/AccountDiscover/AccountDetail/info.vue
+++ b/src/views/accounts/AccountDiscover/AccountDetail/info.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/AccountDetail/more.vue b/src/views/accounts/AccountDiscover/AccountDetail/more.vue
index 29599ac6d..9e30ecb41 100644
--- a/src/views/accounts/AccountDiscover/AccountDetail/more.vue
+++ b/src/views/accounts/AccountDiscover/AccountDetail/more.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :object="detail" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue b/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
index f51ec6cd0..950d34e54 100644
--- a/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
+++ b/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue b/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
index effda724f..393350021 100644
--- a/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
+++ b/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
index e29fe69de..b93bd5d65 100644
--- a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
index cf80fe3e7..dc4b0849c 100644
--- a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
index 8221ebb83..0f9b749e7 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
@@ -8,10 +8,10 @@
       </el-col>
     </el-row>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24" class="generic-list-table">
+      <el-col :md="24" :sm="24" class="generic-list-table">
         <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
         <QuickActions :actions="quickActions" type="primary" />
       </el-col>
       <ViewSecret
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
index 9a84d4c5d..ec4bde19f 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24" class="auto-detail-card">
+    <el-col :md="24" :sm="24" class="auto-detail-card">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24" class="quick-actions">
+    <el-col :md="20" :sm="24" class="quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue b/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
index 850365de3..087204c42 100644
--- a/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
+++ b/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :object="object" v-bind="detail" />
     </el-col>
   </el-row>
@@ -17,7 +17,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
diff --git a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
index 2bd9e1049..c188235ea 100644
--- a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
+++ b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -38,8 +38,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
index 6e5ac37fc..2bc8f2c81 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -17,7 +17,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -41,8 +42,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
index fb51eae0a..6ca95799b 100644
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -17,7 +17,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -25,8 +26,7 @@ export default {
       url: `/api/v1/acls/command-groups/${this.object.id}/`
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
index 0d4c71a8d..9f8cfc40f 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -38,8 +38,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/acl/UserLoginACL/UserDetail/Detail.vue b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
index 072808f4d..d229fa932 100644
--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/assets/Asset/AssetDetail/Account.vue b/src/views/assets/Asset/AssetDetail/Account.vue
index f75749064..505c4f22b 100644
--- a/src/views/assets/Asset/AssetDetail/Account.vue
+++ b/src/views/assets/Asset/AssetDetail/Account.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="24">
-      <el-col :md="15" :sm="24" class="generic-list-table">
+      <el-col :md="24" :sm="24" class="generic-list-table">
         <AccountListTable
           ref="ListTable"
           :asset="object"
@@ -21,7 +21,7 @@
           @onConfirm="onConfirm"
         />
       </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
         <QuickActions :actions="quickActions" :title="title" type="primary" />
       </el-col>
     </el-row>
diff --git a/src/views/assets/Asset/AssetDetail/PermUser.vue b/src/views/assets/Asset/AssetDetail/PermUser.vue
index 12e07fa83..05897cd7f 100644
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24" class="list-table">
+      <el-col :md="24" :sm="24" class="list-table">
         <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
-      <el-col :md="9" :sm="24" class="perm-user-group-card">
+      <el-col :md="20" :sm="24" class="perm-user-group-card">
         <PermUserGroupCard v-bind="UserGroupCardConfig" />
       </el-col>
     </el-row>
diff --git a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
index 0fe60d078..b55139086 100644
--- a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
         <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
         <AutoDetailCard :fields="detailFields" :object="object" :title="$tc('TaskDetail')" :url="url" />
       </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
         <QuickActions :actions="quickEditActions" type="primary" />
         <QuickActions :actions="quickExecuteActions" type="primary" />
         <RelationCard
diff --git a/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue b/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
index 21dd5bd6f..1779ef3ae 100644
--- a/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
+++ b/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/assets/Domain/DomainDetail/Detail.vue b/src/views/assets/Domain/DomainDetail/Detail.vue
index 3032a03f1..7397159da 100644
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/assets/Platform/PlatformDetail/Detail.vue b/src/views/assets/Platform/PlatformDetail/Detail.vue
index 3a98d47e4..51bf2e4b5 100644
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
       <IBox :title="$tc('Protocols')">
         <ProtocolSelector
diff --git a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
index 31f9a08f3..7b9b70cd7 100644
--- a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
+++ b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="16" :sm="24">
+      <el-col :md="20" :sm="24">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
     </el-row>
@@ -19,7 +19,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -30,8 +31,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
index a58cc0173..dd064552e 100644
--- a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
+++ b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
         <QuickActions
           v-if="object.id"
           :actions="quickActions"
diff --git a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
index 4a0e80f4b..025cc0d31 100644
--- a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
+++ b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard
         :excludes="excludes"
         :fields="detailFields"
@@ -8,7 +8,7 @@
         :url="url"
       />
     </el-col>
-    <el-col v-if="hasSummary" :md="9" :sm="24">
+    <el-col v-if="hasSummary" :md="20" :sm="24">
       <IBox
         v-if="object.summary.ok"
         :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
diff --git a/src/views/ops/Job/JobDetail/JobDetail.vue b/src/views/ops/Job/JobDetail/JobDetail.vue
index 0b5d5757c..099149e66 100644
--- a/src/views/ops/Job/JobDetail/JobDetail.vue
+++ b/src/views/ops/Job/JobDetail/JobDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
index e78ab59e2..d906515f6 100644
--- a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
+++ b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
index 2e4394425..f23778a42 100644
--- a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
+++ b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
index 5c7a1b62e..fed5c0360 100644
--- a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
+++ b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
         <QuickActions :actions="quickActions" type="primary" />
       </el-col>
     </el-row>
diff --git a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
index 81775516a..c1dbc3f56 100644
--- a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue b/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
index 1c5814633..9c8bfea72 100644
--- a/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -45,8 +45,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
index c7c6c3aa2..c0b2fd959 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AccountListTable
         ref="ListTable"
         :asset="object"
@@ -13,7 +13,7 @@
         :url="url"
       />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <IBox :title="$tc('Account')" type="primary">
         <AccountFormatter
           :assets="assetIds"
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
index 1208324d4..db580f2b7 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" class- />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
     </el-col>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
index 39e654ad4..f73ab0e4b 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
index 73de31947..c9e9cb0ac 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <RelationCard type="primary" v-bind="userRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="groupRelationConfig" />
     </el-col>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 1a03b1e3c..03e2f148b 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -2,10 +2,10 @@
   <Page v-bind="$attrs">
     <div>
       <el-row :gutter="20">
-        <el-col :md="15" :sm="24">
+        <el-col :md="24" :sm="24">
           <DetailCard :items="detailCardItems" />
         </el-col>
-        <el-col :md="9" :sm="24">
+        <el-col :md="20" :sm="24">
           <QuickActions
             :actions="authQuickActions"
             :title="$tc('AuthSettings')"
diff --git a/src/views/sessions/SessionDetail/SessionDetailInfo.vue b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
index b6e965975..b9fbd33c7 100644
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <DetailCard v-if="object" :items="detailItems" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions v-if="object" :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue b/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue
index 77f5f5561..e48dbee93 100644
--- a/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue
+++ b/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue b/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue
index 579085dbd..37bbd10b0 100644
--- a/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue
+++ b/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
index 92c85b717..abac6a195 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
index ccc745046..ef48bce61 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@@ -1,11 +1,11 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard v-bind="detailBasicConfig" />
       <AutoDetailCard v-bind="detailSpecInfoConfig" />
       <AutoDetailCard v-bind="detailInfoConfig" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
       <RelationCard
         ref="LabelRelation"
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
index 7d473adc3..ce0aaf654 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/License.vue b/src/views/settings/License.vue
index d44ca7e32..458231ed8 100644
--- a/src/views/settings/License.vue
+++ b/src/views/settings/License.vue
@@ -5,10 +5,10 @@
         {{ this.$t('ImportLicenseTip') }}
       </el-alert>
       <el-row :gutter="20">
-        <el-col :md="15" :sm="24">
+        <el-col :md="24" :sm="24">
           <DetailCard :items="detailItems" :title="cardTitle" />
         </el-col>
-        <el-col :md="9" :sm="24">
+        <el-col :md="20" :sm="24">
           <QuickActions :actions="quickActions" type="primary" />
         </el-col>
       </el-row>
diff --git a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
index da467aae4..a0d241c82 100644
--- a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
+++ b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24" />
+    <el-col :md="20" :sm="24" />
   </el-row>
 </template>
 
diff --git a/src/views/settings/Task/TaskDetail/TaskDetail.vue b/src/views/settings/Task/TaskDetail/TaskDetail.vue
index bf60acbea..1dfa76e54 100644
--- a/src/views/settings/Task/TaskDetail/TaskDetail.vue
+++ b/src/views/settings/Task/TaskDetail/TaskDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <DetailCard :items="detailCardItems" :title="cardTitle" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
index 6170fcc48..bda23cb1e 100644
--- a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="16" :sm="24">
+      <el-col :md="20" :sm="24">
         <AutoDetailCard :object="object" :url="url" />
       </el-col>
     </el-row>
@@ -19,7 +19,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
diff --git a/src/views/users/Group/UserGroupDetail/GroupInfo.vue b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
index 19178b0d9..c0d1202a4 100644
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
@@ -26,16 +26,14 @@ export default {
       excludes: ['users']
     }
   },
-  computed: {
-  },
+  computed: {},
   watch: {
     group(iNew, iOld) {
       this.$log.debug('Group has changed')
       this.relationConfig.hasObjectsId = iNew.users
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 
diff --git a/src/views/users/Group/UserGroupDetail/GroupUser.vue b/src/views/users/Group/UserGroupDetail/GroupUser.vue
index d9c21458d..51f35e5f9 100644
--- a/src/views/users/Group/UserGroupDetail/GroupUser.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupUser.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
         <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
         <RelationCard :key="relationKey" v-bind="relationConfig" @addSuccess="addSuccess" />
       </el-col>
     </el-row>
diff --git a/src/views/users/Role/RoleDetail/RoleUsers.vue b/src/views/users/Role/RoleDetail/RoleUsers.vue
index 5162fb7a8..c171e3b6e 100644
--- a/src/views/users/Role/RoleDetail/RoleUsers.vue
+++ b/src/views/users/Role/RoleDetail/RoleUsers.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <ListTable
         ref="ListTable"
         :header-actions="headerActions"
         :table-config="tableConfig"
       />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <RelationCard v-if="!loading" ref="userRelation" v-bind="relationConfig" />
     </el-col>
   </el-row>
diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
index 0c76308f3..67971a841 100644
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :formatters="detailFormatters" :object="object" :url="url" />
     </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="relationConfig" />
     </el-col>