Merge pull request #226 from HXSecurity/feature

fixed:Beautify page

Author: 奇淼（piexlmax

src/views/setting/AgentManage.vue

@@ -244,7 +244,7 @@
       </el-table-column>
       <el-table-column
         :label="$t('views.agentManage.manage')"
-        width="360px"
+        width="280px"
         fixed="right"
       >
         <template slot-scope="{ row }">

src/views/setting/SysInfo.vue

@@ -74,6 +74,7 @@
           width="200"
           :label="$t('views.sysInfo.operation')"
           align="center"
+          fixed="right"
         >
           <template slot-scope="scope">
             <div class="table-btn-box">

src/views/setting/components/dangerTable.vue

@@ -184,31 +184,34 @@
       <el-table-column
         prop=""
         :label="$t('views.hookPage.address')"
-        width="100"
+        width="200"
         align="center"
         :fixed="tableData.length ? 'right' : false"
       >
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            style="color: #4a72ae"
-            @click="editRow(scope.row)"
-          >
-            {{ $t('views.hookPage.edit') }}
-          </el-button>
-          <el-popconfirm
-            :title="$t('views.hookPage.delpop')"
-            @confirm="changeStatus(scope.row, 'delete')"
-          >
+          <div class="table-btn-box">
             <el-button
-              slot="reference"
-              size="small"
-              style="margin-left: 6px; color: #f56262"
               type="text"
-              >{{ $t('views.hookPage.del') }}</el-button
+              size="small"
+              style="color: #4a72ae"
+              @click="editRow(scope.row)"
             >
-          </el-popconfirm>
+              {{ $t('views.hookPage.edit') }}
+            </el-button>
+            <span class="l"> | </span>
+            <el-popconfirm
+              :title="$t('views.hookPage.delpop')"
+              @confirm="changeStatus(scope.row, 'delete')"
+            >
+              <el-button
+                slot="reference"
+                size="small"
+                style="color: #f56262"
+                type="text"
+                >{{ $t('views.hookPage.del') }}</el-button
+              >
+            </el-popconfirm>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -916,4 +919,23 @@ export default class HookTable extends VueBase {
     }
   }
 }
+.table-btn-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  .el-button {
+    box-sizing: border-box;
+    font-size: 14px;
+  }
+  .l {
+    color: #38435a;
+    line-height: 14px;
+    padding: 4px 4px 8px 4px;
+    display: inline-block;
+  }
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+}
 </style>

src/views/setting/components/hookTable.vue

@@ -181,30 +181,33 @@
         prop="address"
         :label="$t('views.hookPage.address')"
         align="center"
-        width="100"
+        width="200"
         :fixed="tableData.length ? 'right' : false"
       >
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            style="color: #4a72ae"
-            @click="editRow(scope.row)"
-          >
-            {{ $t('views.hookPage.edit') }}
-          </el-button>
-          <el-popconfirm
-            :title="$t('views.hookPage.delpop')"
-            @confirm="changeStatus(scope.row, 'delete')"
-          >
+          <div class="table-btn-box">
             <el-button
-              slot="reference"
-              style="margin-left: 6px; color: #f56262"
-              size="small"
               type="text"
-              >{{ $t('views.hookPage.del') }}</el-button
+              size="small"
+              style="color: #4a72ae"
+              @click="editRow(scope.row)"
             >
-          </el-popconfirm>
+              {{ $t('views.hookPage.edit') }}
+            </el-button>
+            <span class="l"> | </span>
+            <el-popconfirm
+              :title="$t('views.hookPage.delpop')"
+              @confirm="changeStatus(scope.row, 'delete')"
+            >
+              <el-button
+                slot="reference"
+                style="color: #f56262"
+                size="small"
+                type="text"
+                >{{ $t('views.hookPage.del') }}</el-button
+              >
+            </el-popconfirm>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -963,4 +966,23 @@ export default class HookTable extends VueBase {
     }
   }
 }
+.table-btn-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  .el-button {
+    box-sizing: border-box;
+    font-size: 14px;
+  }
+  .l {
+    color: #38435a;
+    line-height: 14px;
+    padding: 4px 4px 8px 4px;
+    display: inline-block;
+  }
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+}
 </style>

src/views/setting/scaManage.vue

@@ -119,7 +119,7 @@
           prop="address"
           :label="$t('views.scaManage.address')"
           align="center"
-          width="100"
+          width="200"
           :fixed="tableData.length ? 'right' : false"
         >
           <template slot-scope="scope">

src/views/setting/templateManage.vue

@@ -56,6 +56,7 @@
         <el-table-column
           :label="$t('views.templateManage.settings')"
           align="center"
+          width="200px"
         >
           <template slot-scope="{ row }">
             <div class="table-btn-box">