优化代码

src/views/book/courseware/create/components/base/picture/PictureSetting.vue

@@ -30,8 +30,8 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-
 import { viewMethodList, snGenerationMethodList, checkString } from '@/views/book/courseware/data/common';
+import { getPictureProperty } from '@/views/book/courseware/data/picture';
 
 export default {
   name: 'PictureSetting',
@@ -42,13 +42,7 @@ export default {
       snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
-      property: {
-        serial_number: 1, // 序号
-        sn_type: 'number',
-        sn_position: 'top-start', // 序号位置：top-start top top-end 等
-        sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate 重新计算follow 跟随
-        view_method: viewMethodList[0].value, // 查看方式：independent 独立 list 列表icon 图标
-      },
+      property: getPictureProperty(),
     };
   },
   methods: {},

src/views/book/courseware/create/components/base/video/VideoSetting.vue

@@ -31,6 +31,7 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 import { snGenerationMethodList, viewMethodList, checkString } from '@/views/book/courseware/data/common';
+import { getVideoProperty } from '@/views/book/courseware/data/video';
 
 export default {
   name: 'VideoSetting',
@@ -41,13 +42,7 @@ export default {
       snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
-      property: {
-        serial_number: 1, // 序号
-        sn_type: 'number',
-        sn_position: 'top-start', // 序号位置：top-start top top-end 等
-        sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate 重新计算follow 跟随
-        view_method: viewMethodList[0].value, // 查看方式
-      },
+      property: getVideoProperty(),
     };
   },
   methods: {},

src/views/book/courseware/data/picture.js

@@ -5,19 +5,23 @@ import {
   serialNumberPositionList,
 } from '@/views/book/courseware/data/common';
 
+export function getPictureProperty() {
+  return {
+    serial_number: 1, // 序号
+    sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+    sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
+    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
+    view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
+  };
+}
+
 export function getPictureData() {
   return {
     type: 'picture',
     title: '图片',
     single_size: 2, // 单位MB
     total_size: 100, // 单位MB
-    property: {
-      serial_number: 1, // 序号
-      sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
-      sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-      sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow跟随
-      view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
-    },
+    property: getPictureProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
     // 内容中包含的文件列表,

src/views/book/courseware/data/video.js

@@ -5,19 +5,23 @@ import {
   serialNumberPositionList,
 } from '@/views/book/courseware/data/common';
 
+export function getVideoProperty() {
+  return {
+    serial_number: 1, // 序号
+    sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+    sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
+    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
+    view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
+  };
+}
+
 export function getVideoData() {
   return {
     type: 'video',
     title: '视频',
     single_size: 2 * 1024, // 单位MB
     total_size: 10 * 1024, // 单位MB
-    property: {
-      serial_number: 1, // 序号
-      sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
-      sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-      sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
-      view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
-    },
+    property: getVideoProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
     // 内容中包含的文件列表,

src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -98,7 +98,6 @@ export default {
   padding: 8px;
 
   > .main {
-    display: flex;
     margin: 4px auto;
 
     > span {
@@ -113,11 +112,11 @@ export default {
     .view_list {
       display: flex;
       flex-wrap: wrap;
-      gap: 32px 28px;
+      gap: 20px 2%;
       width: 100%;
 
       > li {
-        flex: 0 0 25%;
+        flex: 0 0 23%;
         min-width: 120px;
         height: 46px;
       }
@@ -126,17 +125,15 @@ export default {
     .view_independent {
       display: flex;
       flex: 1;
-      column-gap: 12px;
+      column-gap: 2%;
 
       :deep .el-carousel {
         flex: 1;
-        max-height: 500px;
         padding: 20%;
         background-color: #d9d9d9;
 
         &__container {
           height: 100px;
-          max-height: 500px;
           margin: 0 auto;
         }
 

src/views/book/courseware/preview/components/common/VideoPlay.vue

@@ -194,10 +194,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .video-play {
+  position: relative;
+
   .video-box {
-    position: relative;
     display: flex;
-    cursor: pointer;
 
     video {
       width: 100%;

src/views/book/courseware/preview/components/common/data.js

@@ -1,8 +1,8 @@
 import AudioPreview from '../audio/AudioPreview.vue';
-import DividerPreview from '../divider/Divider.vue';
-import SpacingPreview from '../spacing/Spacing.vue';
+import DividerPreview from '../divider/DividerPreview.vue';
+import SpacingPreview from '../spacing/SpacingPreview.vue';
 import PicturePreview from '../picture/PicturePreview.vue';
-import VideoPreview from '../video/Video.vue';
+import VideoPreview from '../video/VideoPreview.vue';
 
 export const previewComponentMap = {
   audio: AudioPreview,

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

@@ -1,8 +1,6 @@
 <template>
   <div class="video_area" :style="getAreaStyle()">
-    <div class="sn-position" :style="getJustifyContentStyle()">
-      {{ data.property.serial_number }}
-    </div>
+    <SerialNumberPosition :property="data.property" />
     <div class="main">
       <ul v-if="'list' === data.property.view_method" class="view_list">
         <li v-for="(file, i) in data.file_list" :key="i">
@@ -135,13 +133,8 @@ export default {
   gap: 6px;
   padding: 8px;
 
-  .sn-position {
-    grid-area: position;
-  }
-
   > .main {
     display: flex;
-    margin: 4px auto;
 
     > span {
       display: flex;
@@ -159,30 +152,22 @@ export default {
       width: 100%;
 
       > li {
-        width: 23%;
+        flex: 0 0 23%;
       }
     }
 
     .view_independent {
       display: flex;
-      column-gap: 3%;
-      width: 100%;
-      height: 100%;
+      column-gap: 2%;
 
       :deep .el-carousel {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        width: 75%;
-        background-color: #d9d9d9;
+        width: 100%;
 
         &__container {
-          width: 100%;
-          height: 100%;
-          max-height: 500px;
-          padding: 2px;
-          margin: 0 auto;
-          overflow-y: auto;
+          height: 0;
+          padding-bottom: 56.25%; /* 16:9 比例的视频 */
+          overflow: hidden;
+          background-color: #d9d9d9;
         }
 
         &__item {
@@ -195,8 +180,6 @@ export default {
         flex-direction: column;
         row-gap: 20px;
         width: 23%;
-        max-height: 500px;
-        overflow: auto;
       }
     }
   }