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

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,29 +52,16 @@
               </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>
@@ -96,38 +69,14 @@
 
           <!-- 命中统计表格 -->
           <div v-if="item && item.newRemake && item.newRemake.hit">
-            <div
-              class="title"
-              style="font-weight: 600; margin-bottom: 10px"
-            >
+            <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>
@@ -138,27 +87,14 @@
       </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>
@@ -274,7 +210,8 @@ 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;
     }
 
@@ -362,6 +299,7 @@ export default {
 
 .remakeDetails {
   word-break: break-all;
+
   ::v-deep img {
     max-width: 200px;
     max-height: 200px;