组件组件，当只上传一个视频时居中显示

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

@@ -4,7 +4,7 @@
     <div ref="pictureAreaBox" class="main">
       <div class="view-area">
         <template v-if="isMore">
-          <div v-if="isMore" class="picture-area">
+          <div class="picture-area">
             <template v-if="'list' === data.property.view_method">
               <el-carousel
                 ref="pictureCarousel"

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

@@ -2,25 +2,69 @@
   <div ref="videoArea" class="video-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div ref="videoAreaBox" class="main">
-      <ul v-if="'independent' === data.property.view_method" class="view-independent">
-        <li v-for="(file, i) in data.file_list" :key="i">
-          <VideoPlay
-            view-size="small"
-            view-method="independent"
-            :file-id="file.file_id"
-            :cur-video-index="curVideoIndex"
-            @changeFile="changeFile"
-          />
-        </li>
-      </ul>
-      <div v-else class="view-list">
+      <template v-if="isMore">
+        <ul v-if="'independent' === data.property.view_method" class="view-independent">
+          <li v-for="(file, i) in data.file_list" :key="i">
+            <VideoPlay
+              view-size="small"
+              view-method="independent"
+              :file-id="file.file_id"
+              :cur-video-index="curVideoIndex"
+              @changeFile="changeFile"
+            />
+          </li>
+        </ul>
+        <div v-else class="view-list">
+          <el-carousel
+            ref="video_carousel"
+            indicator-position="none"
+            direction="vertical"
+            :autoplay="false"
+            :interval="0"
+            :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight <= 0 ? 139 : elementHeight + 'px' }"
+          >
+            <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
+              <VideoPlay
+                view-size="big"
+                :file-id="file.file_id"
+                :cur-video-index="curVideoIndex"
+                @changeFile="changeFile"
+              />
+            </el-carousel-item>
+          </el-carousel>
+          <div class="container-box" :style="{ height: elementHeight <= 0 ? 139 : elementHeight + 'px' }">
+            <ul
+              ref="container"
+              class="view-list-bottom"
+              :style="{ height: elementHeight + 'px', transform: `translateY(${translateY}px)` }"
+            >
+              <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
+                <VideoPlay
+                  view-size="small"
+                  :file-id="file.file_id"
+                  :audio-index="i"
+                  :cur-video-index="curVideoIndex"
+                />
+              </li>
+            </ul>
+            <button v-if="viewTopBottomBtn" class="arrow top" @click="scroll(1)">
+              <i class="el-icon-arrow-up"></i>
+            </button>
+            <button v-if="viewTopBottomBtn" class="arrow bottom" @click="scroll(-1)">
+              <i class="el-icon-arrow-down"></i>
+            </button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
         <el-carousel
           ref="video_carousel"
           indicator-position="none"
           direction="vertical"
           :autoplay="false"
           :interval="0"
-          :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight <= 0 ? 139 : elementHeight + 'px' }"
+          class="alone-video-area"
+          :style="{ height: elementHeight <= 0 ? 139 : elementHeight + 'px' }"
         >
           <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
             <VideoPlay
@@ -31,24 +75,7 @@
             />
           </el-carousel-item>
         </el-carousel>
-        <div class="container-box" :style="{ height: elementHeight <= 0 ? 139 : elementHeight + 'px' }">
-          <ul
-            ref="container"
-            class="view-list-bottom"
-            :style="{ height: elementHeight + 'px', transform: `translateY(${translateY}px)` }"
-          >
-            <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
-              <VideoPlay view-size="small" :file-id="file.file_id" :audio-index="i" :cur-video-index="curVideoIndex" />
-            </li>
-          </ul>
-          <button v-if="viewTopBottomBtn" class="arrow top" @click="scroll(1)">
-            <i class="el-icon-arrow-up"></i>
-          </button>
-          <button v-if="viewTopBottomBtn" class="arrow bottom" @click="scroll(-1)">
-            <i class="el-icon-arrow-down"></i>
-          </button>
-        </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -75,13 +102,17 @@ export default {
       elementID: '',
       isResizing: false,
       resizeObserver: null,
+      isMore: false,
     };
   },
   watch: {
     data: {
       handler(val) {
         this.fileLen = val.file_list.length;
-        if (this.fileLen > 0 && this.data.property.view_method === 'list') {
+        if (this.fileLen > 1) {
+          this.isMore = true;
+        }
+        if ((this.fileLen > 0 && this.data.property.view_method === 'list') || this.fileLen === 1) {
           const ele = this.$refs.videoAreaBox;
           const sn_position = this.data.property.sn_position;
           // 序号在左和右补齐序号高度，去掉padding(8*2)
@@ -133,6 +164,9 @@ export default {
           this.elementHeight = this.data.min_height;
         }
         this.fileLen = this.data.file_list.length;
+        if (this.fileLen > 1) {
+          this.isMore = true;
+        }
         this.isViewTopBottomBtn();
         return;
       }
@@ -243,6 +277,16 @@ export default {
 .video-preview {
   @include preview-base;
 
+  .alone-video-area {
+    :deep .el-carousel {
+      background-color: #d9d9d9;
+
+      &__container {
+        height: 100%;
+      }
+    }
+  }
+
   .view-independent {
     display: flex;
     flex-wrap: wrap;