校对拼音，图片及视频预览优化

src/components/PinyinText.vue

@@ -8,17 +8,25 @@
         :style="{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }"
       >
         <div v-for="(text, k) in sentence" :key="k" class="pinyin-text">
-          <span v-if="pinyinPosition === 'top'" class="pinyin">{{ text.pinyin.replace(/\s+/g, '') }}</span>
-          <span class="text">{{ text.text }}</span>
+          <span v-if="pinyinPosition === 'top'" class="pinyin">
+            {{ text.pinyin.replace(/\s+/g, '') }}
+          </span>
+          <span class="text" title="点击校对拼音" @click="correctPinyin1(text.text, i, j, k)">{{ text.text }}</span>
           <span v-if="pinyinPosition === 'bottom'" class="pinyin">{{ text.pinyin.replace(/\s+/g, '') }}</span>
         </div>
       </div>
     </div>
+
+    <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
   </div>
 </template>
 <script>
+import CorrectPinyin from '@/views/book/courseware/create/components/base/common/CorrectPinyin.vue';
 export default {
   name: 'PinyinText',
+  components: {
+    CorrectPinyin,
+  },
   props: {
     paragraphList: {
       type: Array,
@@ -30,9 +38,38 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      paragraph_list: [],
+      visible: false,
+      selectContent: '',
+      paragraph_index: 0,
+      sentence_index: 0,
+      word_index: 0,
+    };
+  },
+  methods: {
+    // 校对拼音
+    correctPinyin1(text, i, j, k) {
+      if (text) {
+        this.visible = true;
+        this.selectContent = text;
+        this.paragraph_index = i;
+        this.sentence_index = j;
+        this.word_index = k;
+      }
+    },
+    // 回填校对后的拼音
+    fillTonePinyin(tonePinyin) {
+      this.$emit(
+        'fillCorrectPinyin',
+        this.selectContent,
+        tonePinyin,
+        this.paragraph_index,
+        this.sentence_index,
+        this.word_index,
+      );
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -55,6 +92,10 @@ export default {
         .pinyin {
           font-size: 12px;
         }
+
+        .text {
+          cursor: pointer;
+        }
       }
     }
   }

src/views/book/courseware/create/components/base/common/CorrectPinyin.vue

@@ -45,14 +45,17 @@ export default {
         )
         .filter((item) => item.length > 0)
         .join(' ');
-      console.log(this.tonePinyin);
     },
     dialogClose() {
       this.$emit('update:visible', false);
+      this.tonePinyin = '';
+      this.numberPinyin = '';
     },
     confirm() {
       this.$emit('update:visible', false);
-      // this.$emit('fillTonePinyin', this.tonePinyin);
+      this.$emit('fillTonePinyin', this.tonePinyin);
+      this.tonePinyin = '';
+      this.numberPinyin = '';
     },
   },
 };

src/views/book/courseware/create/components/base/describe/Describe.vue

@@ -9,12 +9,13 @@
         :is-view-pinyin="isEnable(data.property.view_pinyin)"
         @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
       />
-      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果展示</el-divider>
+      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
       <PinyinText
         v-if="isEnable(data.property.view_pinyin)"
         :id="richId + '_pinyin_text'"
         :paragraph-list="data.paragraph_list"
         :pinyin-position="data.property.pinyin_position"
+        @fillCorrectPinyin="fillCorrectPinyin"
       />
     </template>
   </ModuleBase>
@@ -43,8 +44,11 @@ export default {
   watch: {
     'data.property': {
       handler(val) {
-        if (isEnable(val.view_pinyin)) {
-          let text = this.data.content.replace(/<[^>]+>/g, '');
+        let text = this.data.content.replace(/<[^>]+>/g, '');
+        if (isEnable(val.view_pinyin) && text) {
+          this.data.paragraph_list_parameter.text = text;
+          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+            val.is_first_sentence_first_hz_pinyin_first_char_upper_case;
           this.crateParsedTextInfoPinyin(text);
         }
       },
@@ -61,12 +65,30 @@ export default {
     },
     // 获取拼音解析文本
     crateParsedTextInfoPinyin(text) {
-      CrateParsedTextInfo_Pinyin({ text }).then((res) => {
+      if (text === '') {
+        this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
+        return;
+      }
+      this.data.paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '');
+      this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+        this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+      CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
         if (res.parsed_text) {
           this.data.paragraph_list = res.parsed_text.paragraph_list;
         }
       });
     },
+    // 填充校对后的拼音
+    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
+      this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
+        paragraph_index: `${i}`,
+        sentence_index: `${j}`,
+        word_index: `${k}`,
+        word: selectContent,
+        pinyin: tonePinyin,
+      });
+      this.data.paragraph_list[i][j][k].pinyin = tonePinyin;
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/base/describe/DescribeSetting.vue

@@ -36,37 +36,38 @@
           :key="value"
           v-model="property.pinyin_position"
           :label="value"
+          :disabled="!isEnable(property.view_pinyin)"
         >
           {{ label }}
         </el-radio>
       </el-form-item>
       <el-form-item label="">
-        <el-checkbox v-model="property.sentence_case">句首大写</el-checkbox>
-      </el-form-item>
-      <el-form-item label="">
-        <el-button type="primary">校对拼音</el-button>
+        <el-checkbox
+          v-model="property.is_first_sentence_first_hz_pinyin_first_char_upper_case"
+          :disabled="!isEnable(property.view_pinyin)"
+          >句首大写</el-checkbox
+        >
       </el-form-item>
     </el-form>
-    <!--  @fillTonePinyin="fillTonePinyin" -->
-    <CorrectPinyin :visible.sync="visible" :select-content="selectContent" />
   </div>
 </template>
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { viewMethodList, pinyinPositionList, snGenerationMethodList } from '@/views/book/courseware/data/common';
+import {
+  isEnable,
+  viewMethodList,
+  pinyinPositionList,
+  snGenerationMethodList,
+} from '@/views/book/courseware/data/common';
 import { getDescribeProperty } from '@/views/book/courseware/data/describe';
-import tinymce from 'tinymce/tinymce';
-import CorrectPinyin from '../common/CorrectPinyin.vue';
 
 export default {
   name: 'DescribeSetting',
-  components: {
-    CorrectPinyin,
-  },
   mixins: [SettingMixin],
   data() {
     return {
+      isEnable,
       viewMethodList,
       pinyinPositionList,
       snGenerationMethodList,
@@ -77,40 +78,7 @@ export default {
       content: '',
     };
   },
-  methods: {
-    // 校对拼音
-    correctPinyin() {
-      let editor = tinymce.editors[this.param.richId];
-      let content = editor.selection.getContent();
-      if (content) {
-        this.visible = true;
-        this.selectContent = content;
-      }
-    },
-    // 回填校对后的拼音
-    // fillTonePinyin(tonePinyin) {
-    //   let richId = this.param.richId;
-    //   let editor = tinymce.editors[richId];
-    //   editor.selection.setContent(`${this.selectContent}(${tonePinyin})`);
-    //   this.searchText(editor, `${this.selectContent}(${tonePinyin})`);
-    //   debugger;
-    //   let pinyinText = document.getElementById(`${richId}_pinyin_text`);
-    //   const targetElements = pinyinText.querySelectorAll('.text');
-    //   let viewText = '';
-    //   targetElements.forEach((element) => {
-    //     viewText += element.innerText;
-    //   });
-    //   console.log(viewText);
-    // },
-    // searchText(editor, textToFind) {
-    //   const content = editor
-    //     .getContent()
-    //     .replace(/<[^>]+>/g, '')
-    //     .replace(/\n/g, '');
-    //   let index = content.indexOf(textToFind);
-    //   console.log(index);
-    // },
-  },
+  methods: {},
 };
 </script>
 

src/views/book/courseware/create/components/base/label/Label.vue

@@ -90,7 +90,7 @@ export default {
     // 显示新增标签
     showInput() {
       this.inputVisible = true;
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },

src/views/book/courseware/create/components/base/stem/Stem.vue

@@ -9,11 +9,13 @@
         :is-view-pinyin="isEnable(data.property.view_pinyin)"
         @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
       />
-      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果展示</el-divider>
+      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
       <PinyinText
         v-if="isEnable(data.property.view_pinyin)"
+        :id="richId + '_pinyin_text'"
         :paragraph-list="data.paragraph_list"
         :pinyin-position="data.property.pinyin_position"
+        @fillCorrectPinyin="fillCorrectPinyin"
       />
     </template>
   </ModuleBase>
@@ -35,13 +37,18 @@ export default {
     return {
       isEnable,
       data: getStemData(),
+      selectContent: '',
+      richId: '',
     };
   },
   watch: {
     'data.property': {
       handler(val) {
-        if (isEnable(val.view_pinyin)) {
-          let text = this.data.content.replace(/<[^>]+>/g, '');
+        let text = this.data.content.replace(/<[^>]+>/g, '');
+        if (isEnable(val.view_pinyin) && text) {
+          this.data.paragraph_list_parameter.text = text;
+          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+            val.is_first_sentence_first_hz_pinyin_first_char_upper_case;
           this.crateParsedTextInfoPinyin(text);
         }
       },
@@ -51,18 +58,37 @@ export default {
   },
   methods: {
     showSetting() {
+      this.richId = this.$refs.rich.id;
       this.$emit('showSetting', this.data.property, this.data.type, this.id, {
-        richId: this.$refs.rich.id,
+        richId: this.richId,
       });
     },
     // 获取拼音解析文本
     crateParsedTextInfoPinyin(text) {
-      CrateParsedTextInfo_Pinyin({ text }).then((res) => {
+      if (text === '') {
+        this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
+        return;
+      }
+      this.data.paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '');
+      this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
+        this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+      CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
         if (res.parsed_text) {
           this.data.paragraph_list = res.parsed_text.paragraph_list;
         }
       });
     },
+    // 填充校对后的拼音
+    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
+      this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
+        paragraph_index: `${i}`,
+        sentence_index: `${j}`,
+        word_index: `${k}`,
+        word: selectContent,
+        pinyin: tonePinyin,
+      });
+      this.data.paragraph_list[i][j][k].pinyin = tonePinyin;
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/base/stem/StemSetting.vue

@@ -36,15 +36,17 @@
           :key="value"
           v-model="property.pinyin_position"
           :label="value"
+          :disabled="!isEnable(property.view_pinyin)"
         >
           {{ label }}
         </el-radio>
       </el-form-item>
       <el-form-item label="">
-        <el-checkbox v-model="property.sentence_case">句首大写</el-checkbox>
-      </el-form-item>
-      <el-form-item label="">
-        <el-button type="primary">校对拼音</el-button>
+        <el-checkbox
+          v-model="property.is_first_sentence_first_hz_pinyin_first_char_upper_case"
+          :disabled="!isEnable(property.view_pinyin)"
+          >句首大写</el-checkbox
+        >
       </el-form-item>
     </el-form>
   </div>
@@ -52,7 +54,12 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { viewMethodList, pinyinPositionList, snGenerationMethodList } from '@/views/book/courseware/data/common';
+import {
+  isEnable,
+  viewMethodList,
+  pinyinPositionList,
+  snGenerationMethodList,
+} from '@/views/book/courseware/data/common';
 import { getStemProperty } from '@/views/book/courseware/data/stem';
 
 export default {
@@ -60,6 +67,7 @@ export default {
   mixins: [SettingMixin],
   data() {
     return {
+      isEnable,
       viewMethodList,
       pinyinPositionList,
       snGenerationMethodList,

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

@@ -27,6 +27,8 @@ export function getAudioData() {
     title: '音频',
     single_size: 100, // 单位MB
     total_size: 1024, // 单位MB
+    min_width: '530',
+    min_height: '150',
     property: getAudioProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']

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

@@ -4,7 +4,6 @@ import {
   serialNumberPositionList,
   pinyinPositionList,
 } from '@/views/book/courseware/data/common';
-import tinymce from 'tinymce/tinymce';
 
 export function getDescribeProperty() {
   return {
@@ -17,7 +16,7 @@ export function getDescribeProperty() {
     sn_background_color: '#ea3232', // 序号背景色
     view_pinyin: 'true', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom
-    sentence_case: 'true', // 句首大写
+    is_first_sentence_first_hz_pinyin_first_char_upper_case: 'false', // 句首大写
   };
 }
 
@@ -27,6 +26,11 @@ export function getDescribeData() {
     title: '描述',
     content: '',
     paragraph_list: [],
+    paragraph_list_parameter: {
+      text: '',
+      is_first_sentence_first_hz_pinyin_first_char_upper_case: 'false',
+      pinyin_proofread_word_list: [],
+    },
     property: getDescribeProperty(),
   };
 }

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

@@ -16,7 +16,7 @@ export function getStemProperty() {
     sn_background_color: '#ea3232', // 序号背景色
     view_pinyin: 'true', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom
-    sentence_case: 'true', // 句首大写
+    is_first_sentence_first_hz_pinyin_first_char_upper_case: 'false', // 句首大写
   };
 }
 
@@ -26,6 +26,11 @@ export function getStemData() {
     title: '题干',
     content: '',
     paragraph_list: [],
+    paragraph_list_parameter: {
+      text: '',
+      is_first_sentence_first_hz_pinyin_first_char_upper_case: 'false',
+      pinyin_proofread_word_list: [],
+    },
     property: getStemProperty(),
   };
 }

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

@@ -21,6 +21,8 @@ export function getVideoData() {
     title: '视频',
     single_size: 2 * 1024, // 单位MB
     total_size: 10 * 1024, // 单位MB
+    min_width: '528',
+    min_height: '139',
     property: getVideoProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']

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

@@ -195,13 +195,19 @@ export default {
 <style lang="scss" scoped>
 .video-play {
   position: relative;
+  width: 100%;
+  height: 100%;
 
   .video-box {
     display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
 
     video {
-      width: 100%;
-      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
     }
 
     .svg-icon {

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

@@ -18,7 +18,7 @@
           </el-carousel>
           <div class="container-box">
             <button v-if="viewLeftRightBtn" class="arrow left" @click="scroll(-1)">
-              <SvgIcon icon-class="pre" />
+              <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)">
@@ -26,7 +26,7 @@
               </li>
             </ul>
             <button v-if="viewLeftRightBtn" class="arrow right" @click="scroll(1)">
-              <SvgIcon icon-class="next" />
+              <i class="el-icon-arrow-right"></i>
             </button>
           </div>
         </template>
@@ -62,7 +62,6 @@ export default {
       handler(val) {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0) {
-          // this.initResizeObserver();
           const ele = this.$refs.pictureArea;
           this.elementWidth = ele.clientWidth;
           this.elementHeight = ele.clientHeight;
@@ -72,12 +71,12 @@ export default {
       deep: true,
     },
     elementWidth(newWidth, oldWidth) {
-      console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
+      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
       this.elementWidth = newWidth;
       this.isViewLeftRightBtn();
     },
     elementHeight(newHeight, oldHeight) {
-      console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
+      // console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
       this.elementHeight = newHeight;
     },
   },
@@ -100,7 +99,6 @@ export default {
       } else {
         this.viewLeftRightBtn = false;
       }
-      this.$forceUpdate();
     },
     handleIndicatorClick(index) {
       // 获取 Carousel 实例
@@ -176,7 +174,7 @@ export default {
         }
 
         .arrow:hover {
-          background-color: rgba(0, 0, 0, 20%);
+          background-color: rgba(0, 0, 0, 30%);
         }
 
         .right {

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

@@ -1,8 +1,8 @@
 <template>
   <div class="video_area" :style="getAreaStyle()">
     <SerialNumberPosition :property="data.property" />
-    <div class="main">
-      <ul v-if="'list' === data.property.view_method" class="view_list">
+    <div ref="videoArea" class="main">
+      <ul v-if="'list' === data.property.view_method" class="view-list">
         <li v-for="(file, i) in data.file_list" :key="i">
           <VideoPlay
             view-size="small"
@@ -13,13 +13,14 @@
           />
         </li>
       </ul>
-      <div v-if="'independent' === data.property.view_method" class="view_independent">
+      <div v-if="'independent' === data.property.view_method" class="view-independent">
         <el-carousel
           ref="video_carousel"
           indicator-position="none"
           direction="vertical"
           :autoplay="false"
           :interval="0"
+          :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight + 'px' }"
         >
           <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
             <VideoPlay
@@ -30,11 +31,23 @@
             />
           </el-carousel-item>
         </el-carousel>
-        <ul class="view_independent_list">
-          <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>
+        <div class="container-box">
+          <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>
     </div>
   </div>
@@ -53,8 +66,39 @@ export default {
     return {
       data: getVideoData(),
       curVideoIndex: 0,
+      elementWidth: 0,
+      elementHeight: 0,
+      viewTopBottomBtn: false,
+      fileLen: 0,
+      translateY: 0,
     };
   },
+  watch: {
+    data: {
+      handler(val) {
+        this.fileLen = val.file_list.length;
+        if (this.fileLen > 0) {
+          const ele = this.$refs.videoArea;
+          this.elementWidth = ele.clientWidth;
+          this.elementHeight = ele.clientHeight;
+          window.addEventListener('resize', this.handleResize);
+        }
+      },
+      deep: true,
+    },
+    elementWidth(newWidth, oldWidth) {
+      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
+      this.elementWidth = newWidth;
+    },
+    elementHeight(newHeight, oldHeight) {
+      // console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
+      this.elementHeight = newHeight;
+      this.isViewTopBottomBtn();
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+  },
   methods: {
     handleAudioClick(index) {
       // 获取 Carousel 实例
@@ -81,27 +125,40 @@ export default {
         this.curVideoIndex = this.data.file_id_list.length - 1;
       }
     },
-
-    /**
-     * 得到序号外部样式
-     */
-    getAreaStyle() {
-      const position = this.data.property.sn_position;
-      let grid = '';
-
-      if (position.includes('right')) {
-        grid = `"main position" / 1fr auto`;
-      } else if (position.includes('left')) {
-        grid = `"position main" / auto 1fr`;
-      } else if (position.includes('top')) {
-        grid = `"position" auto "main" 1fr`;
-      } else if (position.includes('bottom')) {
-        grid = `"main" 1fr "position" auto`;
+    handleResize() {
+      const width = this.$refs.videoArea.clientWidth;
+      if (width !== this.elementWidth) {
+        this.elementWidth = width;
+      }
+    },
+    // 是否显示上下箭头
+    isViewTopBottomBtn() {
+      // 计算右侧列表图片高度
+      let listHeight = this.fileLen * this.data.min_height + 20 * (this.fileLen - 1);
+      if (listHeight > this.elementHeight) {
+        this.viewTopBottomBtn = true;
+      } else {
+        this.viewTopBottomBtn = false;
+      }
+    },
+    // 滚动图片列表
+    scroll(direction) {
+      const minHeight = Number(this.data.min_height);
+      const step = minHeight + 20; // 每次滚动的距离
+      let _down = (minHeight + 20) * (this.fileLen - 1);
+      // 计算滚动后的 translateY 值
+      let newY = this.translateY + step * direction;
+      // 检查是否超出上下边界
+      if (newY > 0) {
+        // 滚动到第一张图片时不再向上滚动
+        this.translateY = 0;
+      } else if (newY < -_down) {
+        // 滚动到最后一张图片时不再向下滚动
+        this.translateY = -_down;
+      } else {
+        // 在边界内时执行滚动
+        this.translateY = newY;
       }
-
-      return {
-        grid,
-      };
     },
   },
 };
@@ -125,41 +182,66 @@ export default {
     grid-area: main;
     width: 100%;
 
-    .view_list {
+    .view-list {
       display: flex;
       flex-wrap: wrap;
-      gap: 20px 2%;
+      gap: 20px;
       width: 100%;
 
       > li {
-        flex: 0 0 23%;
+        width: 248px;
+        height: 139px;
       }
     }
 
-    .view_independent {
+    .view-independent {
       display: flex;
-      column-gap: 2%;
+      column-gap: 32px;
 
       :deep .el-carousel {
-        width: 100%;
+        background-color: #d9d9d9;
 
         &__container {
-          height: 0;
-          padding-bottom: 56.25%; /* 16:9 比例的视频 */
-          overflow: hidden;
-          background-color: #d9d9d9;
+          height: 100%;
+        }
+      }
+
+      .container-box {
+        position: relative;
+        overflow: hidden;
+
+        .arrow {
+          position: absolute;
+          z-index: 10;
+          width: 100%;
+          height: 40px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 10%);
+          border-radius: 0;
         }
 
-        &__item {
-          transition: none !important;
+        .arrow:hover {
+          background-color: rgba(0, 0, 0, 30%);
         }
-      }
 
-      .view_independent_list {
-        display: flex;
-        flex-direction: column;
-        row-gap: 20px;
-        width: 23%;
+        .top {
+          top: 0;
+        }
+
+        .bottom {
+          bottom: 0;
+        }
+
+        .view-list-bottom {
+          display: flex;
+          flex-direction: column;
+          row-gap: 20px;
+
+          > li {
+            width: 248px;
+            height: calc(248px * 9 / 16);
+          }
+        }
       }
     }
   }