修改图片

src/views/operationsManagement/article/index.vue

@@ -165,7 +165,7 @@
               <img :src="form.url[0]" alt="" class="avatar1">
             </div>
             <!-- 当图片数量为4或6时，上下两排展示 -->
-            <div v-else-if="form.url.length === 4 || form.url.length === 2" style="padding-left: 40px">
+            <div v-else-if=" form.url.length === 2" style="padding-left: 40px">
               <el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
                 <el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
                   <div style="padding-left: 10px;">
@@ -174,6 +174,16 @@
                 </el-col>
               </el-row>
             </div>
+            <!-- 当图片数量为4或6时，上下两排展示 -->
+            <div v-else-if="form.url.length === 4 " style="padding-left: 40px">
+              <el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
+                <el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
+                  <div style="padding-left: 10px;">
+                    <img :src="imagePath" alt="" class="avatar5">
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
             <!-- 当图片数量为5, 7, 8或9时，按九宫格显示 -->
             <el-row v-else :gutter="2" style="padding-left: 40px">
               <el-col v-for="(imagePath, index) in form.url" :key="index" :span="8">
@@ -693,9 +703,8 @@ export default {
   display: block;
 }
 .avatar3 {
-  width: 260px;
+  width: 263px;
   height: 200px;
-  padding-top: 4px;
   display: block;
 }
 .avatar4 {
@@ -703,6 +712,12 @@ export default {
   height: 178px;
   display: block;
 }
+.avatar5 {
+  width: 255px;
+  height: 200px;
+  padding-top: 4px;
+  display: block;
+}
 .commentTitle{
   display: flex;
   justify-content: space-between;