init

src/views/cai/userForbid/index.vue

@@ -26,57 +26,60 @@
     </el-form>
 
     <el-table v-loading="loading" :data="userForbidList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="类型" align="center" prop="type" >
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="类型" align="center" prop="type">
         <template v-slot="scope">
-          <cai-dict-tag :options="forbidTypeList" :value="scope.row.type" />
+          <cai-dict-tag :options="forbidTypeList" :value="scope.row.type"/>
         </template>
       </el-table-column>
       <el-table-column label="封号对象" align="center" prop="member">
         <template v-slot="scope">
-          <span v-if="scope.row.type === 1">
-            {{scope.row.nickname}}【{{scope.row.member}}】<image-avatar :src="scope.row.avatar"/>
-          </span>
+          <div class="context-avatar-center" v-if="scope.row.type === 1">
+            {{ scope.row.nickname }}【{{ scope.row.member }}】
+            <image-avatar :src="scope.row.avatar"/>
+          </div>
           <span v-if="scope.row.type !== 1">
-            {{scope.row.member}}
+            {{ scope.row.member }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="开始时间" align="center" prop="beginTime" />
-      <el-table-column label="结束时间" align="center" prop="endTime" />
-      <el-table-column label="最后封禁理由" align="center" prop="reason" />
-      <el-table-column label="状态" align="center" prop="forbidStatus" >
+      <el-table-column label="开始时间" align="center" prop="beginTime"/>
+      <el-table-column label="结束时间" align="center" prop="endTime"/>
+      <el-table-column label="最后封禁理由" align="center" prop="reason"/>
+      <el-table-column label="状态" align="center" prop="forbidStatus">
         <template v-slot="scope">
-          <cai-dict-tag :options="forbidStatusList" :value="scope.row.forbidStatus" />
+          <cai-dict-tag :options="forbidStatusList" :value="scope.row.forbidStatus"/>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
         <template v-slot="scope">
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            v-if="scope.row.forbidStatus === 1"
-            @click="handleForbid(scope.row)"
-          >解封</el-button>
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              v-if="scope.row.forbidStatus === 1"
+              @click="handleForbid(scope.row)"
+          >解封
+          </el-button>
           <el-button
               size="mini"
               type="text"
               @click="handleForbidLogInfo(scope.row)"
-          >封禁记录</el-button>
+          >封禁记录
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
     />
 
-    <user-forbid-log-list v-if="userForbidLogListVisible" ref="userForbidLogList" />
+    <user-forbid-log-list v-if="userForbidLogListVisible" ref="userForbidLogList"/>
   </div>
 </template>
 
@@ -87,12 +90,12 @@ import UserForbidLogList from "@/views/cai/userForbid/user-forbid-log-list";
 
 export default {
   name: "UserForbid",
-  components:{
+  components: {
     UserForbidLogList
   },
   data() {
     return {
-      forbidTimeList,forbidTypeList,forbidStatusList,
+      forbidTimeList, forbidTypeList, forbidStatusList,
       userForbidLogListVisible: false,
       // 遮罩层
       loading: true,
@@ -145,10 +148,10 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    handleForbid(row){
+    handleForbid(row) {
       this.$modal.confirm('是否确认解封对象："' + row.member + '"的数据项？').then(() => {
         this.loading = true;
         return unForbid(row.id);
@@ -161,7 +164,7 @@ export default {
         this.loading = false;
       });
     },
-    handleForbidLogInfo(row){
+    handleForbidLogInfo(row) {
       this.userForbidLogListVisible = true
       this.$nextTick(() => {
         this.$refs.userForbidLogList.init(row.member)
@@ -170,3 +173,10 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+  .context-avatar-center {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+  }
+</style>