预览修改

src/styles/font/font.css

@@ -11,4 +11,4 @@
 @font-face {
   font-family: 'Sans-GBNPC';
   src: url('GBPinyinok-B-new.otf');
-}
+}

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

@@ -5,6 +5,7 @@
       <div class="view-area">
         <template v-if="isMore">
           <div class="picture-area">
+            <!-- 播放列表 -->
             <template v-if="'list' === data.property.view_method">
               <el-carousel
                 ref="pictureCarousel"
@@ -38,14 +39,15 @@
               </div>
             </template>
             <ul v-else class="view-independent">
-              <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
+              <li v-for="file in data.file_list" :key="file.file_id" @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">
+        <!-- 独立排放 -->
+        <template v-else-if="data.property.view_method === 'independent'">
+          <div v-for="file in data.file_list" :key="file.file_id" class="alone-pic-area">
             <el-image
               :id="file.file_id"
               :src="file.file_url"
@@ -132,9 +134,8 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      const canvasElement = document.querySelector('.canvas');
-      if (!canvasElement) {
-        const ele = this.$refs.pictureAreaBox;
+      const ele = this.$refs.pictureAreaBox;
+      if (ele) {
         const sn_position = this.data.property.sn_position;
         const viewMemo = this.isEnable(this.data.property.view_memo);
         // 序号在左和右补齐序号高度，去掉padding(8*2)
@@ -153,6 +154,7 @@ export default {
         this.isViewLeftRightBtn();
         return;
       }
+
       this.resizeObserver = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
         this.isResizing = true; // 标记为调整中