修改背景、视频展示bug、答题选项图片、等

src/components/student/answer.vue

@@ -9,7 +9,8 @@
          <li><i class="iconfont icon-menufold icon20" ref="toggle" @click="slider_flag = !slider_flag"></i></li>
          <div style="display: flex;">
              <img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
-           <li style="  font-family:'youshe';color: black;font-size: 45px;  text-shadow: 8px 1px 1px #888888;">{{examData.type}}-{{examData.source}}</li>
+           <li style="  font-family:'youshe';color: white;font-size: 40px;margin-right: -15px ">{{examData.type}}-{{examData.source}}</li>
+<!--        阴影效果   text-shadow: 8px 1px 1px #888888;color: rgba(255, 255, 0, 0.8);-->
          </div>
          <li>（{{userInfo.name}}）</li>
          <li>
@@ -20,14 +21,14 @@
                 cid: this.$route.query.cid,
                  cname:this.$route.query.cname,
                   role:this.$route.query.role
-                }}" class="router1">个人统计
+                }}" class="router1" target="_blank" >个人统计
            </router-link>
          </li>
          <li>
            <router-link
              :to="{
                 path: '/videoList',
-               }" class="router1">视频
+               }" class="router1" target="_blank">视频
            </router-link>
          </li>
          <li><i class="iconfont icon-arrLeft icon20"></i></li>
@@ -120,7 +121,7 @@
             </div>
             <div v-if=" optionValue == '多选题'" >
               <el-checkbox-group v-model="checkList" @change="handleCheckboxChange" >
-                <div style="display: flex">
+<!--                <div style="display: flex">-->
                   <el-checkbox :label="1" :disabled='radioFlag'
                                :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
                     {{showAnswer.answerA}}
@@ -129,11 +130,11 @@
                     <li style="overflow: visible;display: flex">
                       <img :src="showAnswer.Aimg" alt=""
                            @click="magnifyPhoto(showAnswer.Aimg)"
-                           style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
+                           style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
                     </li>
                   </ul>
-                </div>
-                <div style="display: flex">
+<!--                </div>-->
+<!--                <div style="display: flex">-->
                   <el-checkbox :label="2" :disabled='radioFlag'
                                :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
                     {{showAnswer.answerB}}
@@ -142,11 +143,11 @@
                     <li style="overflow: visible;display: flex">
                       <img :src="showAnswer.Bimg" alt=""
                            @click="magnifyPhoto(showAnswer.Bimg)"
-                           style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
+                           style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
                     </li>
                   </ul>
-                </div>
-                <div style="display:flex;">
+<!--                </div>-->
+<!--                <div style="display:flex;">-->
                   <el-checkbox :label="3" :disabled='radioFlag'
                                :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
                     {{showAnswer.answerC}}
@@ -155,11 +156,11 @@
                     <li style="overflow: visible;display: flex">
                       <img :src="showAnswer.Cimg" alt=""
                            @click="magnifyPhoto(showAnswer.Cimg)"
-                           style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
+                           style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
                     </li>
                   </ul>
-                </div>
-                <div style="display: flex">
+<!--                </div>-->
+<!--                <div style="display: flex">-->
                   <el-checkbox :label="4" :disabled='radioFlag'
                                :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
                     {{showAnswer.answerD}}
@@ -168,10 +169,10 @@
                     <li style="overflow: visible;display: flex">
                       <img :src="showAnswer.Dimg" alt=""
                            @click="magnifyPhoto(showAnswer.Dimg)"
-                           style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
+                           style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
                     </li>
                   </ul>
-                </div>
+<!--                </div>-->
 
               </el-checkbox-group>
               <el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button>
@@ -337,9 +338,13 @@ export default {
             this.optionValue = "多选题"
             this.showAnswer ={
               answerA:reduceAnswer.answerA,
+              Aimg:reduceAnswer.aimg,
               answerB:reduceAnswer.answerB,
+              Bimg:reduceAnswer.bimg,
               answerC:reduceAnswer.answerC,
+              Cimg:reduceAnswer.cimg,
               answerD:reduceAnswer.answerD,
+              Dimg:reduceAnswer.dimg,
             }
           }else if (!reduceAnswer.oneOrMore) {
             reduceAnswer.oneOrMore = '3'
@@ -583,9 +588,9 @@ export default {
 <style lang="less">
   .jinhuiClass{
     height: 80px;
-    margin-right: 5px;
     margin-top: -15px;
-    margin-bottom: -15px
+    margin-bottom: -15px;
+    margin-left: -15px;
   }
   @font-face {
     font-family: "youshe";
@@ -1019,14 +1024,18 @@ export default {
   border: 1px solid #FF90AA;
 }
 #answer .top {
-  background-color: rgb(39, 118, 223);
+  /*background-color: rgb(39, 118, 223);*/
+  /*background-color: #dc4b4b;*/
+  background: url('../../assets/img/title2.jpg') left/ cover no-repeat;
+  background-size: 100%;
   position: fixed;
   width: 100%;
 }
 #answer .item {
   display: flex;
-  padding: 20px;
-  font-size: 26px;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  font-size: 23px;
   letter-spacing: 1px;
 }
 #answer .top .item li:nth-child(1) {
@@ -1039,6 +1048,7 @@ export default {
   font-weight: bold;
   display: flex;
   align-items: center;
+  color: white;
 }
 //个人统计
   #answer .top .item li:nth-child(4) {
@@ -1077,9 +1087,10 @@ export default {
   text-align: left;
 }
 .router1 {
-  color: black;
+  color: white;
   font-weight: bold;
-  border: 2px solid black;
+  margin-right: 5px;
+  border: 2px solid white;
   border-radius: 10px;
 }
 //背景
@@ -1089,8 +1100,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: url('../../assets/img/beijing111.jpg')center top / cover no-repeat;
-  background-color: #b6bccdd1 !important;
+  background: url('../../assets/img/beij2.jpg')center top / cover no-repeat;
   background-size: 100% 100%;
   max-height: 100%; /* 设置固定高度，根据需要调整 */
   overflow: auto; /* 添加滚动条 */

src/components/student/index.vue

@@ -119,7 +119,8 @@ export default {
 }
 .list a {
   text-decoration: none;
-  color: #fff;
+  color: black;
+  font-weight: bold;
 }
 li {
   list-style: none;
@@ -181,7 +182,7 @@ li {
   width: 100%;
   overflow-y: auto;
   height: 100%;
-  background: url('../../assets/img/dtbj.png')center top / cover no-repeat;
+  background: url('../../assets/img/beij2.jpg')center top / cover no-repeat;
   background-color: #b6bccdd1 !important;
 }
 .final {

src/components/student/scoreDwTjTable.vue

@@ -188,7 +188,8 @@ export default {
   margin: 0 auto;
   .title {
     margin: 20px;
-    color: #fff;
+    color: black;
+    font-weight: bold;
   }
   .content-el {
     background-color: #fff;

src/components/student/scoreTable.vue

@@ -119,7 +119,8 @@ export default {
   margin: 0 auto;
   .title {
     margin: 20px;
-    color: #fff;
+    color: black;
+    font-weight: bold;
   }
   .content-el {
     background-color: #fff;

src/components/student/scoreTjTable.vue

@@ -90,7 +90,8 @@ export default {
   margin: 0 auto;
   .title {
     margin: 20px;
-    color: #fff;
+    color: black;
+    font-weight: bold;
   }
   .content-el {
     background-color: #fff;

src/components/teacher/addVideo.vue

@@ -44,6 +44,10 @@
                 accept="video/*"
                 :on-change="handlePhotoChange"
                 :limit="1"
+                element-loading-text="正在上传"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(0, 0, 0, 0.8)"
+                v-loading.fullscreen.lock="fullscreenLoading"
               ref="uploadRef"
                 :show-file-list="false">
                 <el-button slot="trigger" type="primary" style="margin-left: 10px;" title="只能上传视频文件">上传视频</el-button>
@@ -64,15 +68,18 @@
               <video controls width="100%">
                 <source :src=o.video type="video/mp4">
               </video>
-              <div style="padding: 14px;">
-                <span>{{o.videoName}}</span>
-                <el-button class="searchListButton" type="success" style="margin-left: 10px" @click="open(o)">
+              <div style="padding: 14px; display: flex; align-items: center;">
+                <span class="searchListSpan" v-bind:title="o.videoName" style="flex: 1;">{{o.videoName}}</span>
+                <div style="display: flex;">
+                  <el-button class="searchListButton" type="success" style="margin-left: 10px;" @click="open(o)">
                     编辑
                   </el-button>
-                <el-button class="searchListButton" type="success" style="margin-left: 10px" @click="deleteVideo(o.videoId)">
+                  <el-button class="searchListButton" type="success" style="margin-left: 10px;" @click="deleteVideo(o.videoId)">
                     删除
                   </el-button>
                 </div>
+              </div>
+
             </el-card>
           </el-col>
         </el-row>
@@ -88,6 +95,7 @@
     name: "addVideo",
     data() {
       return {
+        fullscreenLoading:false,
         searchForm: {
           videoNmae: '',
           uploadTime: [],
@@ -171,16 +179,11 @@
 
       //提交
       submitForm() {
+        this.fullscreenLoading = true
         console.log(this.video)
         if (!this.video) {
           return;
-          console.log(111111111111111)
-        }
-        const isLt10M = this.video.size / 1024 / 1024 < 10;
-        if (!isLt10M) {
-          this.$message.error('上传视频文件不能超过10MB！');
         }
-        console.log(isLt10M);
         let date = new Date()
 
         let params = new FormData();
@@ -196,6 +199,7 @@
           if (res.data.code == 200) {
             this.fileList = []
             this.video = ''
+            this.fullscreenLoading = false
             this.$message.success('添加成功');
             this.videoList();
             // 重置上传组件
@@ -232,7 +236,7 @@
         }).then(res => {
           if (res.data.code == 200) {
             this.videoLists = res.data.data
-            this.$message.success('模糊查询成功');
+            this.$message.success('查询成功');
           }
         })
       }
@@ -245,6 +249,13 @@
 </script>
 
 <style lang="scss" scoped>
+  .searchListSpan{
+    display: flex;
+    align-items: center;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 隐藏溢出部分 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
   .el-col-6 {
     display: flex;
   }

src/components/videoList/packages/vue-mini-player/src/PlayBtn.vue

@@ -63,8 +63,52 @@ export default {
   methods: {
     handleClick() {
       this.$emit('update:isPlaying', !this.isPlaying);
+      if (!this.isPlaying) {
+        //点击播放自动全屏
+        console.log("进来了")
+        const baseControlsEl = this.$parent.$container;
+        console.log(baseControlsEl)
+        this.reqFullScreen(baseControlsEl);
       }
+
+    },
+    reqFullScreen(element) {
+      console.log('进入全屏');
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullScreen) {
+        element.webkitRequestFullScreen();
+      } else if (element.webkitEnterFullscreen) {
+        element.webkitEnterFullscreen();
+      } else if (this.$video.webkitEnterFullscreen) {
+        this.$video.webkitEnterFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      } else {
+        console.log('进入全屏失败');
+      }
+    },
+  },
+/*  mounted() {
+    const controlsElement = document.querySelectorAll('.qun-base-controls');
+    console.log(controlsElement)
+
+    if (controlsElement) {
+      controlsElement.forEach(e=>{
+        e.style.display = 'none';
+      })
+    }
+    const controlsElement1 = document.querySelectorAll('._play-btn');
+    console.log(controlsElement1)
+    if (controlsElement1) {
+      controlsElement1.forEach(e=>{
+        e.style.display = 'none';
+
+      })
     }
+  }*/
 };
 </script>
 

src/components/videoList/packages/vue-mini-player/src/VuePlayer.vue

@@ -78,7 +78,7 @@ export default {
       clearModeTimer: null,
       isStart: true,
       isPlaying: false,
-      isClearMode: false
+      isClearMode: true //默认是否展示播放和进度条
     };
   },
   watch: {
@@ -166,7 +166,7 @@ export default {
         this.isClearMode = true;
         this.clearModeTimer = null
         this.$emit('clearMode');
-      }, 3000);
+      }, 2000);
     },
     pauseAllVideo() {
       if (this.mutex) {
@@ -222,7 +222,8 @@ export default {
 </script>
 <style lang="scss" scoped>
   .vm-player {
-    width: 100%;
+    margin: 5px;
+    /*width: 100%;*/
     height: 100%;
     min-height: 10em;
     position: relative;

src/components/videoList/packages/vue-mini-player/src/controls/Fullscreen.vue

@@ -55,6 +55,31 @@ export default {
       const fullEle =
         document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement;
       this.$emit('update:isFullscreen', !!fullEle);
+      if (this.isFullscreen) {
+        // 退出全屏停止播放视频
+        const videoElements = document.querySelectorAll("._video-ref")
+        console.log(videoElements)
+        for (let i = 0; i < videoElements.length; i++) {
+          videoElements[i].pause();
+        }
+        const controlsElement = document.querySelectorAll('.qun-base-controls');
+        console.log(controlsElement)
+
+        if (controlsElement) {
+          controlsElement.forEach(e => {
+            e.style.display = 'none';
+          })
+        }
+        const controlsElement1 = document.querySelectorAll('._play-btn');
+        console.log(controlsElement1)
+        if (controlsElement1) {
+          controlsElement1.forEach(e => {
+            e.style.display = 'none';
+
+          })
+        }
+      }
+
     },
     reqFullScreen(element) {
       if (element.requestFullscreen) {
@@ -86,6 +111,8 @@ export default {
       } else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
       }
+
+
     },
     docfullscreenchange() {
       this.setFullscreenState();

src/components/videoList/videoList.vue

@@ -4,14 +4,55 @@
       <ul class="item">
         <div style="display: flex;">
           <img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
-          <li style="  font-family:'youshe';color: black;font-size: 45px;  text-shadow: 8px 1px 1px #888888;">计算机计算机-{source}}</li>
+          <li style="  font-family:'youshe';color:white;font-size: 45px;">刑侦百科-线上视频学习</li>
         </div>
       </ul>
     </div>
     <div>
+      <div class="tabs">
+        <el-form ref="searchForm" :model="searchForm">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="文件名称 :" style="display: flex;font-weight: bold">
+                <el-input v-model="searchForm.videoNmae" clearable placeholder="请输入文件名称检索"></el-input>
+              </el-form-item>
+            </el-col>
+        <!--    <el-col :span="9">
+              <el-form-item label="创建时间">
+                <el-date-picker
+                  v-model="searchForm.uploadTime"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>-->
+            <el-col :span="6">
+              <el-button
+                class="toEmptyButton"
+                @click="toEmpty">
+                <span class="skyp icon-sousuo"></span>
+                清空
+              </el-button>
+              <el-button
+                class="searchListButton"
+                @click="searchList()"
+              >
+                <span class="skyp icon-sousuo"></span>
+                查询
+              </el-button>
+      <!--        <el-button class="searchListButton" type="success" style="margin-left: 10px">
+                当前视频总数{{this.videoLists.length}}
+              </el-button>-->
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
       <section class="main" v-for="(o, index) in videoLists" :key="o.videoId">
         <div class="videoBox">
-          <p class="videoTitle">{{o.videoName}}</p>
+          <p class="videoTitle" v-bind:title="o.videoName" style="flex: 1;">{{o.videoName}}</p>
           <QunVideo :url=o.video />
         </div>
       </section>
@@ -31,7 +72,10 @@
     data() {
       return {
         videoLists: [],//视频列表
-
+        searchForm: {
+          videoNmae: '',
+          uploadTime: [],
+        },
       };
     },
     methods: {
@@ -49,9 +93,62 @@
             this.videoLists = res.data.data
           }
         })
+      },
+      //删除
+      deleteVideo(videoId){
+        let params = new FormData();
+        params.append("id",videoId)
+        this.$axios({
+          url: '/api/deleteVideo',
+          method: 'post',
+          data: params
+        }).then(res => {
+          if (res.data.code == 200) {
+            this.$message.success('删除成功');
+            this.videoList()
+          }
+        })
+      },
+      //清空
+      toEmpty() {
+        this.searchForm = {
+          videoNmae: '',
+          uploadTime: [],
         }
+        this.videoList()
+      },
+      //添加照片
+      handlePhotoChange(file) {
+        console.log("添加照片")
+        this.video = file.raw
+        this.videoName = file.name
+        this.fileList.push(file.raw);
+        this.submitForm();
 
       },
+      //模糊查询
+      searchList() {
+        console.log(this.searchForm.uploadTime)
+        let params = new FormData();
+        params.append("name",this.searchForm.videoNmae)
+        if (this.searchForm.uploadTime[0]){
+          params.append("startTime",this.searchForm.uploadTime[0])
+        }
+        if (this.searchForm.uploadTime[1]){
+          params.append("endTime",this.searchForm.uploadTime[1])
+        }
+        this.$axios({
+          url: '/api/selectVideoByNameOrTime',
+          method: 'post',
+          data: params
+        }).then(res => {
+          if (res.data.code == 200) {
+            this.videoLists = res.data.data
+            this.$message.success('模糊查询成功');
+          }
+        })
+      }
+    },
     created() {
       this.videoList()
     }
@@ -59,6 +156,27 @@
 </script>
 
 <style lang="scss" scoped>
+  .el-col-6{
+    width: auto;
+    margin-right: 20px;
+  }
+  .el-form-item{
+    font-size: 18px!important;
+    margin-bottom: 0px;
+  }
+  /*清空和查询*/
+  .toEmptyButton,.searchListButton{
+    font-weight: bold;
+    font-size: 18px;
+  }
+  .tabs{
+    margin-top: 15px;
+    margin-left: 15px;
+  }
+  @font-face {
+    font-family: "youshe";
+    src: url("../../assets/fonts/YouSheBiaoTiHei-2.ttf");
+  }
   .jinhuiClass{
     height: 80px;
     margin-right: 5px;
@@ -66,7 +184,7 @@
     margin-bottom: -15px
   }
   .top{
-    background-color: rgb(39, 118, 223);
+    background: url('../../assets/img/title2.jpg') left/ cover no-repeat;
   }
   .item {
     display: flex;
@@ -88,7 +206,7 @@
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     height: 100%;
-    background: url("../../assets/img/beijing111.jpg") no-repeat;
+    background: url('../../assets/img/beij2.jpg') left/ cover no-repeat;
     background-size: 100% 100%;
     max-height: 100%; /* 设置固定高度，根据需要调整 */
     overflow: auto; /* 添加滚动条 */
@@ -121,6 +239,12 @@
         margin-right:15px;
         margin-top: 15px;
         .videoTitle {
+          width: 200px;
+          display: flex;
+          align-items: center;
+          white-space: nowrap; /* 不换行 */
+          overflow: hidden; /* 隐藏溢出部分 */
+          text-overflow: ellipsis; /* 显示省略号 */
           color: #fff;
           font-weight: 600;
           line-height: 30px;