优化违规记录界面样式与交互

src/views/ViolationRecord.vue

 <template>
   <div class="violationRecord">
-    <el-form
-      v-loading="loading"
-      class="violationRecordContent"
-      label-width="90px"
-    >
+    <el-form v-loading="loading" class="violationRecordContent" label-width="90px">
       <div v-if="violationList.length > 0">
-        <div
-          v-for="(item, index) in violationList"
-          :key="index"
-          class="contentItem"
-        >
+        <div v-for="(item, index) in violationList" :key="index" class="contentItem">
           <el-form-item label="违规时间:">
             <p>{{ item.violation_time }}</p>
           </el-form-item>
@@ -31,15 +23,9 @@
           <el-form-item label="是否允许申诉:">
             <p class="error">{{ item.appeal_name }}</p>
           </el-form-item>
-          <el-form-item
-            v-if="item.remake != ''"
-            label="详情:"
-          >
+          <el-form-item v-if="item.remake != ''" label="详情:">
             <!-- AI自动封禁 -->
-            <div
-              v-if="item.information_type === 6"
-              class="remarkType"
-            >
+            <div v-if="item.information_type === 6" class="remarkType">
               <p>
                 <span class="label">所属项目:</span><span>{{ item.newRemake.project || "" }}</span>
               </p>
@@ -66,68 +52,31 @@
               </p>
             </div>
             <!-- 其他类型 -->
-            <div
-              v-else
-              class="remarkType"
-            >
-              <div
-                v-if="item.remake.indexOf('src=') !== -1"
-                class="remakeImage"
-              >
+            <div v-else class="remarkType">
+              <div v-if="item.remake.indexOf('src=') !== -1" class="remakeImage">
                 <p class="watchDetails">
-                  <el-button
-                    type="text"
-                    icon="el-icon-view"
-                    size="medium"
+                  <el-button type="text" icon="el-icon-view" size="medium"
                     style="z-index: 1; position: relative; margin-left: 5px"
-                    @click="showRemake(item.remake)"
-                  >查看大图</el-button>
+                    @click="showRemake(item.remake)">查看大图</el-button>
                 </p>
                 <p class="remakeDetails" v-html="item.remake"></p>
               </div>
-              <div
-                v-else
-                class="remakeImage"
-              >
+              <div v-else class="remakeImage">
                 <p class="remakeDetails" v-html="item.remake"></p>
               </div>
             </div>
           </el-form-item>
-          
+
           <!-- 命中统计表格 -->
-          <div v-if="item && item.newRemake && item.newRemake.hit"> 
-            <div
-              class="title"
-              style="font-weight: 600; margin-bottom: 10px"
-            >
+          <div v-if="item && item.newRemake && item.newRemake.hit">
+            <div class="title" style="font-weight: 600; margin-bottom: 10px">
               命中统计
             </div>
-            <el-table
-              :data="item.newRemake.hit"
-              size="medium"
-              style="width: 100%"
-              class="hit-statistics-table"
-            >
-              <el-table-column
-                prop="content"
-                label="文本内容"
-                show-overflow-tooltip
-              />
-              <el-table-column
-                prop="type"
-                label="命中类型"
-                width="120"
-              />
-              <el-table-column
-                prop="key"
-                label="关键字"
-                width="120"
-                show-overflow-tooltip
-              />
-              <el-table-column
-                label="时间"
-                width="180"
-              >
+            <el-table :data="item.newRemake.hit" size="medium" style="width: 100%" class="hit-statistics-table">
+              <el-table-column prop="content" label="文本内容" show-overflow-tooltip />
+              <el-table-column prop="type" label="命中类型" width="120" />
+              <el-table-column prop="key" label="关键字" width="120" show-overflow-tooltip />
+              <el-table-column label="时间" width="180">
                 <template slot-scope="{ row }">
                   <span>{{ $moment(row.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
                 </template>
@@ -136,29 +85,16 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 无数据状态 -->
-      <div
-        v-if="!loading && violationList.length == 0"
-        class="noContent rowFlex allCenter"
-      >
+      <div v-if="!loading && violationList.length == 0" class="noContent rowFlex allCenter">
         <noContent title="暂无数据" description="当前没有任何数据，请稍后再试或联系管理员" />
       </div>
     </el-form>
-    
+
     <!-- 查看大图弹窗 -->
-    <el-dialog
-      title="查看大图"
-      :visible.sync="imageLayer"
-      width="320px"
-      center
-      append-to-body
-      @close="imageLayer = false"
-    >
-      <div
-        v-html="imageSrc"
-        class="layerImage"
-      ></div>
+    <el-dialog title="查看大图" :visible.sync="imageLayer" width="320px" center append-to-body @close="imageLayer = false">
+      <div v-html="imageSrc" class="layerImage"></div>
     </el-dialog>
   </div>
 </template>
@@ -188,13 +124,13 @@ export default {
     ...mapState("game", ["accountSelect"]),
   },
   mounted() {
-      this.requestViolationList()
+    this.requestViolationList()
   },
   methods: {
     memberChange() {
       this.requestViolationList()
     },
-    
+
     handleRemark(remark) {
       try {
         const remarkObj = JSON.parse(JSON.parse(remark.replace(/\r\n\t/g, "")));
@@ -204,12 +140,12 @@ export default {
         return remark;
       }
     },
-    
+
     showRemake(remake) {
       this.imageSrc = remake;
       this.imageLayer = true;
     },
-    
+
     requestViolationList() {
       const data = {
         account_type: 1,
@@ -262,8 +198,8 @@ export default {
   height: 100%;
   background: #fff;
   overflow-y: auto;
-  overflow-x: hidden; 
-  
+  overflow-x: hidden;
+
   .violationRecordContent {
     width: 100%;
     padding: 20px;
@@ -274,10 +210,11 @@ export default {
     border-bottom: 1px dashed #ebeef5;
     margin-bottom: 20px;
     padding-bottom: 20px;
-    ::v-deep .el-form-item__label{
+
+    ::v-deep .el-form-item__label {
       line-height: 40px;
     }
-    
+
     &:last-child {
       border-bottom: none;
     }
@@ -304,11 +241,11 @@ export default {
   .hit-statistics-table {
     margin-top: 10px;
     margin-bottom: 20px;
-    
+
     ::v-deep .el-table__header-wrapper th {
       background-color: #f7f8fa;
     }
-    
+
     ::v-deep .el-button--text {
       color: #3491FA;
     }
@@ -317,22 +254,22 @@ export default {
   ::v-deep .el-form-item {
     margin-bottom: 8px;
   }
-  
+
   ::v-deep .el-form-item__label {
     color: #86909C;
     font-weight: 500;
   }
-  
+
   ::v-deep .el-form-item__content {
     color: #333;
   }
-  
+
   .title {
     color: #333;
     font-size: 16px;
     position: relative;
     padding-left: 10px;
-    
+
     &:before {
       content: '';
       position: absolute;
@@ -345,15 +282,15 @@ export default {
       border-radius: 3px;
     }
   }
-  
+
   ::v-deep .el-dialog__header {
     padding: 15px 20px;
     background-color: #f7f8fa;
   }
-  
+
   ::v-deep .el-button--text {
     color: #3491FA;
-    
+
     &:hover {
       color: #5ba8fb;
     }
@@ -362,6 +299,7 @@ export default {
 
 .remakeDetails {
   word-break: break-all;
+
   ::v-deep img {
     max-width: 200px;
     max-height: 200px;