修改排序题的样式增加清楚所有功能，视频控件更换插件有更换清晰度的功能

package.json

@@ -30,6 +30,7 @@
         "path-to-regexp": "2.4.0",
         "seededshuffle": "^0.2.0",
         "tinymce": "^5.3.1",
+        "video.js": "^7.15.4",
         "view-design": "^4.5.0",
         "vue": "2.6.10",
         "vue-element-utils": "^0.2.1",
@@ -40,7 +41,8 @@
         "vue-slider-component": "^3.2.14",
         "vue-video-player": "^5.0.2",
         "vuedraggable": "^2.24.3",
-        "vuex": "3.1.0"
+        "vuex": "3.1.0",
+        "xgplayer": "^2.30.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "4.4.4",
@@ -80,4 +82,4 @@
         "npm": ">= 3.0.0"
     },
     "license": "MIT"
-}
+}

src/components/Adult/preview/SentenceSortQP.vue

@@ -19,7 +19,7 @@
             <div
               :class="[
                 'item',
-                JSON.stringify(SortArr[index]).indexOf(itemNode.pinyin) != -1
+                JSON.stringify(SortArr[index]).indexOf(itemNode.index) != -1
                   ? 'select'
                   : '',
               ]"
@@ -36,15 +36,15 @@
           </transition-group>
         </draggable>
       </div>
-      <div
-        class="item-right_bottom"
-        :style="{
+      <div class="item-right_bottom">
+        <!-- 
+                :style="{
           width:
             item.detail.wordsList.length * 82 +
             item.detail.wordsList.length * 2 +
             'px',
         }"
-      >
+       -->
         <!-- 
           :options="{ group: { name: 'itxst' + index, pull: false } }"
        -->
@@ -56,7 +56,11 @@
           @end="onEnd2($event, index)"
           :move="onMove"
         >
-          <transition-group>
+          <transition-group
+            :style="{
+              display: SortArr[index].length > 0 ? '-webkit-box' : 'flex',
+            }"
+          >
             <div
               class="item"
               v-for="(itemNode, indexNode) in SortArr[index]"
@@ -71,6 +75,20 @@
             </div>
           </transition-group>
         </draggable>
+        <div class="fw">
+          <img
+            v-if="SortArr[index].length > 0"
+            src="../../../assets/NPC/fw.png"
+            alt=""
+            @click="removeCurrentSortArr(index)"
+          />
+          <img
+            @click="NOremove"
+            v-else
+            src="../../../assets/NPC/fw-no.png"
+            alt=""
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -94,12 +112,19 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 清空当前选中的文字
+    removeCurrentSortArr(index) {
+      this.$set(this.SortArr, index, []);
+    },
+    NOremove() {
+      this.$message.warning("当前没有可清空的数据");
+      return;
+    },
     onStart(e, index) {
       this.drag = true;
       this.dragData = JSON.parse(
         JSON.stringify(this.curQue.option[index].detail.wordsList)
       );
-      console.log(this.dragData);
     },
     //拖拽结束事件
     onEnd(e, index) {
@@ -120,10 +145,13 @@ export default {
     },
     onStart2(e, index) {
       this.drag = true;
+      this.dragData = JSON.parse(JSON.stringify(this.SortArr[index]));
     },
     //拖拽结束事件
     onEnd2(e, index) {
       this.drag = false;
+      // 不再删除
+      this.SortArr[index] = this.dragData;
       let newarr = [
         ...new Set(
           this.curQue.option[index].detail.wordsList.map((item) =>
@@ -141,12 +169,26 @@ export default {
     onMove(e) {
       // this.moveId = e.relatedContext.element.id;
     },
+    audioPlay(e) {
+      let url = e.target.src;
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        if (item.src == url) {
+          item.play();
+        } else {
+          item.pause();
+        }
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.curQue.option.forEach((item) => {
       let arr = [];
       this.SortArr.push(arr);
+      item.detail.wordsList.forEach((it, i) => {
+        it.index = it.chs + it.pinyin + i;
+      });
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -164,9 +206,9 @@ export default {
 //@import url(); 引入公共css类
 .sentenceSort {
   width: 100%;
-  background: #f7f7f7;
-  padding: 24px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  // background: #f7f7f7;
+  // background: rgba(0, 0, 0, 0.04);
+  // padding: 24px;
   box-sizing: border-box;
   border-radius: 8px;
   h2 {
@@ -177,7 +219,7 @@ export default {
     font-weight: normal;
   }
   .item-box {
-    margin: 8px 0;
+    margin: 8px 0 24px 0;
     b {
       background: #de4444;
       text-align: center;
@@ -196,12 +238,14 @@ export default {
     display: flex;
     align-items: center;
     > :nth-child(2) {
+      width: 100%;
       > :nth-child(1) {
         display: flex;
         flex-wrap: wrap;
         .item {
-          width: 82px;
-          height: 70px;
+          // width: 82px;
+          // height: 70px;
+          padding: 8px 16px;
           background: #ffffff;
           border-radius: 8px;
           text-align: center;
@@ -222,6 +266,9 @@ export default {
             font-size: 20px;
           }
         }
+        .item:hover {
+          border: 1px solid rgba(0, 0, 0, 0.65);
+        }
         .select {
           background: rgba(0, 0, 0, 0.06);
         }
@@ -229,25 +276,32 @@ export default {
     }
   }
   .item-right_bottom {
-    min-width: 200px;
-    max-width: 696px;
     background: rgba(0, 0, 0, 0.06);
-    margin-left: 35px;
     margin-top: 10px;
-    min-height: 70px;
+    min-height: 74px;
+    // max-height: 103px;
+    border-radius: 8px;
+    position: relative;
+    padding-right: 56px;
     > :nth-child(1) {
       > :nth-child(1) {
         display: flex;
-        flex-wrap: wrap;
+        // flex-wrap: wrap;
+        padding-top: 4px;
+        max-height: 103px;
+        min-height: 74px;
+        overflow-x: scroll;
+
         .item {
-          width: 82px;
-          height: 70px;
+          // width: 82px;
+          // height: 70px;
+          padding: 8px 16px;
           background: #ffffff;
           border-radius: 8px;
           text-align: center;
-          margin-right: 2px;
+          margin-left: 4px;
           color: #000000;
-          margin-bottom: 2px;
+          margin-bottom: 4px;
           p {
             margin: 0;
             line-height: 150%;
@@ -264,6 +318,23 @@ export default {
         }
       }
     }
+    .fw {
+      height: 100%;
+      width: 56px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+        top: 29px;
+        right: 24px;
+        cursor: pointer;
+      }
+    }
   }
 }
 .NPC-Big-Book-preview-green {

src/components/Adult/preview/TableView.vue

@@ -176,6 +176,7 @@ export default {
         td {
           background: #ffffff;
           border: 1px solid #e2cfc1;
+          // min-height: 64px;
           height: 64px;
           text-align: center;
           color: #000000;

src/components/Adult/preview/VideoControl.vue

@@ -1,36 +1,104 @@
 <template>
   <div class="videoView">
-    <video
+    <!-- <video
+      id="video"
       :src="curQue.video_list[0].url"
       controls
-      :poster="curQue.img_list.length>0?curQue.img_list[0].url:''"
+      :poster="curQue.img_list.length > 0 ? curQue.img_list[0].url : ''"
       controlslist="nodownload"
       disablePictureInPicture
+      @mousemove="qxdShow = true"
+      @mouseout="videoOut"
     ></video>
+    <div :class="['qxd', qxdShow ? 'qxdshow' : 'qxdhide']">清晰度</div> -->
+    <div id="videoPlayer" @mousemove="viedeoMove"></div>
   </div>
 </template>
 
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
+
+import vedioPlayer from "xgplayer";
+import "video.js/dist/video-js.css";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   props: ["curQue", "fn_data", "type"],
   data() {
     //这里存放数据
-    return {};
+    return {
+      qxdShow: true,
+      VideoStatus: "",
+      player: null,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // videoOut() {
+    //   if (this.VideoStatus == "播放") {
+    //     this.qxdShow = false;
+    //   }
+    // },
+    viedeoMove() {
+      let name = document.getElementsByClassName("name")[0];
+      if (name) {
+        let text = name.innerText || name.textContent;
+        if (!text) {
+          name.innerText
+            ? (name.innerText = "流畅")
+            : (name.textContent = "流畅");
+        }
+      }
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    let _this = this;
+    // let node = document.getElementById("video");
+    // node.addEventListener("playing", function () {
+    //   //播放中
+    //   _this.VideoStatus = "播放";
+    // });
+    // node.addEventListener("pause", function () {
+    //   //暂停开始执行的函数
+    //   _this.VideoStatus = "暂停";
+    // });
+    _this.player = new vedioPlayer({
+      id: "videoPlayer",
+      autoplay: false,
+      volume: 0.5, //视频初始音量大小
+      loop: false, //是否循环播放
+      url: _this.curQue.video_list[0].url,
+      poster:
+        _this.curQue.img_list.length > 0 ? _this.curQue.img_list[0].url : "", //视频封面
+      height: "100%",
+      width: "100%",
+    });
+    // 设置清晰度
+    _this.player.emit("resourceReady", [
+      { name: "高清", url: "https://v-cdn.zjol.com.cn/276985.mp4" },
+      { name: "标清", url: "https://v-cdn.zjol.com.cn/276984.mp4" },
+      { name: "流畅", url: _this.curQue.video_list[0].url },
+    ]);
+    setTimeout(() => {
+      let name = document.getElementsByClassName("name")[0];
+      if (name) {
+        let text = name.innerText || name.textContent;
+        if (!text) {
+          name.innerText
+            ? (name.innerText = "流畅")
+            : (name.textContent = "流畅");
+        }
+      }
+    }, 200);
+  },
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -57,6 +125,7 @@ export default {
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   border-radius: 8px;
+  position: relative;
   video {
     width: 100%;
     height: 100%;
@@ -64,5 +133,20 @@ export default {
     border-radius: 8px;
     cursor: pointer;
   }
+  .qxd {
+    bottom: 55px;
+    right: 163px;
+    position: absolute;
+    color: white;
+    z-index: 999;
+    transition: all 1s;
+    cursor: pointer;
+  }
+  .qxdshow {
+    opacity: 1;
+  }
+  .qxdhide {
+    opacity: 0;
+  }
 }
 </style>

src/components/TreeView.vue

@@ -113,6 +113,7 @@ export default {
     };
   },
   watch: {
+    // 监听预览页面翻页的变化 树组件做出相同的操作
     async currentTreeID(newval, oldval) {
       if (newval) {
         this.activeIndex = newval;