图片和视频组件，只有一个文件的时候，居中显示

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

@@ -3,61 +3,75 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div ref="pictureAreaBox" class="main">
-      <div class="view-area">
-        <!-- 播放列表 -->
-        <div v-if="'list' === data.property.view_method">
-          <el-carousel
-            ref="pictureCarousel"
-            indicator-position="none"
-            :autoplay="false"
-            :style="{ height: `${elementHeight - 144 - 32}px` }"
-            @change="handleChange"
+      <div class="view-area" :style="data.file_list.length === 1 ? { justifyContent: 'center' } : {}">
+        <template v-if="1 !== data.file_list.length">
+          <!-- 播放列表 -->
+          <div v-if="'list' === data.property.view_method">
+            <el-carousel
+              ref="pictureCarousel"
+              indicator-position="none"
+              :autoplay="false"
+              :style="{ height: `${elementHeight - 144 - 32}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>
+          </div>
+          <div
+            v-for="file in data.file_list"
+            v-else
+            :key="file.file_id"
+            class="alone-pic-area"
+            :style="getVideoItemStyle()"
           >
-            <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>
+            <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 + 'px' }"
+            />
+          </div>
+
+          <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>
+              <div v-if="curPictureMemoIndex === i" class="memo-div">{{ file.intro ?? file.intro }}</div>
+            </div>
           </div>
-        </div>
-        <div
-          v-for="file in data.file_list"
-          v-else
-          :key="file.file_id"
-          class="alone-pic-area"
-          :style="getVideoItemStyle()"
-        >
-          <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 + 'px' }"
-          />
-        </div>
-
-        <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>
-            <div v-if="curPictureMemoIndex === i" class="memo-div">{{ file.intro ?? file.intro }}</div>
+        </template>
+        <!-- 独立排放 -->
+        <template v-else>
+          <div v-for="file in data.file_list" :key="file.file_id">
+            <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 + 'px' }"
+            />
           </div>
-        </div>
+        </template>
       </div>
     </div>
   </div>

src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -2,7 +2,12 @@
   <div ref="videoArea" class="video-preview" :style="[getAreaStyle(), getComponentStyle()]">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div v-if="'independent' === data.property.view_method" ref="videoAreaBox" class="main">
+    <div
+      v-if="'independent' === data.property.view_method"
+      ref="videoAreaBox"
+      class="main"
+      :style="data.file_list.length === 1 ? { display: 'flex', justifyContent: 'center' } : {}"
+    >
       <ul class="view-independent">
         <li v-for="(file, i) in data.file_list" :key="i" :style="getVideoItemStyle()">
           <VideoPlay
@@ -15,7 +20,11 @@
         </li>
       </ul>
     </div>
-    <div v-else ref="videoAreaBox">
+    <div
+      v-else
+      ref="videoAreaBox"
+      :style="data.file_list.length === 1 ? { display: 'flex', justifyContent: 'center' } : {}"
+    >
       <div class="view-list">
         <el-carousel
           ref="video_carousel"
@@ -23,7 +32,11 @@
           direction="vertical"
           :autoplay="false"
           :interval="0"
-          :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight <= 0 ? 169 : elementHeight + 'px' }"
+          :style="{
+            backgroundColor: data.file_list.length === 1 ? 'transparent' : '#d9d9d9',
+            width: elementWidth - 248 - 32 + 'px',
+            height: elementHeight <= 0 ? 169 : elementHeight + 'px',
+          }"
         >
           <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
             <VideoPlay
@@ -34,7 +47,11 @@
             />
           </el-carousel-item>
         </el-carousel>
-        <div class="container-box" :style="{ height: elementHeight <= 0 ? 169 : elementHeight + 'px' }">
+        <div
+          v-if="data.file_list.length !== 1"
+          class="container-box"
+          :style="{ height: elementHeight <= 0 ? 169 : elementHeight + 'px' }"
+        >
           <ul
             ref="container"
             class="view-list-bottom"