图片组件 只上传一张图片时居中显示，可等比缩放。

src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -3,45 +3,58 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div ref="pictureAreaBox" class="main">
       <div class="view-area">
-        <div class="picture-area">
-          <template v-if="'list' === data.property.view_method">
-            <el-carousel
-              ref="pictureCarousel"
-              class="view-list"
-              indicator-position="none"
-              :autoplay="false"
-              :style="{ height: elementHeight - 144 - 17 + 'px' }"
-              @change="handleChange"
-            >
-              <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
-                <el-image
-                  :id="file.file_id"
-                  :src="file.file_url"
-                  fit="contain"
-                  :preview-src-list="data.file_list.map((x) => x.file_url)"
-                />
-              </el-carousel-item>
-            </el-carousel>
-            <div class="container-box">
-              <button v-if="viewLeftRightBtn" class="arrow left" @click="scroll(-1)">
-                <i class="el-icon-arrow-left"></i>
-              </button>
-              <ul ref="container" class="view-list-bottom" :style="{ width: elementWidth + 'px' }">
-                <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
-                  <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
-                </li>
-              </ul>
-              <button v-if="viewLeftRightBtn" class="arrow right" @click="scroll(1)">
-                <i class="el-icon-arrow-right"></i>
-              </button>
-            </div>
-          </template>
-          <ul v-else class="view-independent">
-            <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
-              <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
-            </li>
-          </ul>
-        </div>
+        <template v-if="isMore">
+          <div v-if="isMore" class="picture-area">
+            <template v-if="'list' === data.property.view_method">
+              <el-carousel
+                ref="pictureCarousel"
+                class="view-list"
+                indicator-position="none"
+                :autoplay="false"
+                :style="{ height: elementHeight - 144 - 17 + 'px' }"
+                @change="handleChange"
+              >
+                <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
+                  <el-image
+                    :id="file.file_id"
+                    :src="file.file_url"
+                    fit="contain"
+                    :preview-src-list="data.file_list.map((x) => x.file_url)"
+                  />
+                </el-carousel-item>
+              </el-carousel>
+              <div class="container-box">
+                <button v-if="viewLeftRightBtn" class="arrow left" @click="scroll(-1)">
+                  <i class="el-icon-arrow-left"></i>
+                </button>
+                <ul ref="container" class="view-list-bottom" :style="{ width: elementWidth + 'px' }">
+                  <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
+                    <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
+                  </li>
+                </ul>
+                <button v-if="viewLeftRightBtn" class="arrow right" @click="scroll(1)">
+                  <i class="el-icon-arrow-right"></i>
+                </button>
+              </div>
+            </template>
+            <ul v-else class="view-independent">
+              <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
+                <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
+              </li>
+            </ul>
+          </div>
+        </template>
+        <template v-else>
+          <div v-for="(file, i) in data.file_list" :key="i" class="alone-pic-area">
+            <el-image
+              :id="file.file_id"
+              :src="file.file_url"
+              fit="contain"
+              :preview-src-list="data.file_list.map((x) => x.file_url)"
+              :style="{ height: elementHeight <= 0 ? data.min_height - 144 + 'px' : elementHeight + 'px' }"
+            />
+          </div>
+        </template>
         <div v-if="'list' === data.property.view_method && isEnable(data.property.view_memo)" class="memo-area">
           <div v-for="(file, i) in data.file_info_list" :key="i">
             <div v-if="curPictureMemoIndex === i" class="title-div">{{ file.title ?? file.title }}</div>
@@ -73,12 +86,16 @@ export default {
       curPictureMemoIndex: 0,
       isResizing: false,
       resizeObserver: null,
+      isMore: false,
     };
   },
   watch: {
     data: {
       handler(val) {
         this.fileLen = val.file_list.length;
+        if (this.fileLen > 1) {
+          this.isMore = true;
+        }
         if (this.fileLen > 0 && this.data.property.view_method === 'list') {
           const ele = this.$refs.pictureAreaBox;
           const sn_position = this.data.property.sn_position;
@@ -129,6 +146,9 @@ export default {
           this.elementHeight = ele.clientHeight;
         }
         this.fileLen = this.data.file_list.length;
+        if (this.fileLen > 1) {
+          this.isMore = true;
+        }
         this.isViewLeftRightBtn();
         return;
       }
@@ -223,6 +243,13 @@ export default {
     display: flex;
     column-gap: 7px;
 
+    .alone-pic-area {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+
     .memo-area {
       padding-left: 5px;
       text-align: left;