修改视频

src/views/manage/materials/index.vue

@@ -720,8 +720,10 @@ export default {
 }
 
 video {
-  height: 500px;
+  height: 635px;
-  width: 100%;
+    width: 1103px;
+  // height: 500px;
+  // width: 100%;
 }
 
 .viewbody {

src/views/system/cropper/index.vue

@@ -130,8 +130,6 @@ import { VueCropper } from 'vue-cropper'
 import {
   uploadFilefm,
 } from "@/api/system/stationAvatar.js";
-import _ from 'lodash'
-import { faL } from '@fortawesome/free-solid-svg-icons';
 export default {
   name: 'CropperImage',
   components: {
@@ -186,11 +184,8 @@ export default {
     img: {
       deep: true, //开启深度监听
       immediate: true,//开启立即监听
-
       handler(newimg, oldimg) {
-        
         this.newfile = newimg
-        console.log(newimg, '8888888888888')
         if (this.img == null) {
           this.option.img = null;
         } else if (this.img == "") {
@@ -211,21 +206,15 @@ export default {
     },
     imgnew: {
       handler(newimg, oldimg) {
-        console.log(newimg, 'newimg')
         if (newimg) {
           this.image = process.env.VUE_APP_BASE_API + newimg;
         }
-
-
-
-        // this.types = this.type;
       }
 
     }
   },
   created() {
     this.types = this.type;
-    console.log(this.titles, 'this.titles')
     if (this.titles == '添加素材信息') {
       console.log(this.titles, 'this.titles')
       this.uploadbtn = true
@@ -233,9 +222,6 @@ export default {
       console.log(this.titles, '修改.titles')
       this.uploadbtn = false
     }
-
-
-    // this.getCropperWidth()
   },
   methods: {
     // 打开弹出层结束时的回调
@@ -363,8 +349,6 @@ export default {
             }, 1500);
 
           } else {
-
-
             let formDatanew = new FormData();
             // 裁剪之后的
             formDatanew.append('file', blob)
@@ -386,9 +370,6 @@ export default {
           this.files.name = null
           // return
           if (this.newfile && !this.files.name) {
-            console.log(this.newfile, 'this.newfile')
-            console.log(this.files, 'this.files66666')
-
             let formDatanew = new FormData();
             // 裁剪之后的
             formDatanew.append('file', blob)
@@ -405,9 +386,6 @@ export default {
                 }else{
                 this.$emit("imgUrlvido", response.imgUrl);
                 }
-
-                // this.$emit("imgUrl",  this.image);
-               
                 this.openimg = false;
               } else {
                 // setTimeout(e => {

src/views/system/trainingAvatar/index.vue

@@ -1,38 +1,95 @@
 <template>
   <div>
-    <div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
+    <div
-      <video style="width: 208px; height: 208px" v-bind:src="video.VideoPath" v-if="video.VideoPath"
+      class="user-info-head"
-        class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
+      :class="video.VideoPath ? 'wihi' : ''"
-      <i class="el-icon-plus avatar-uploader-icon" style="
+      @click="editCropper()"
-            position: absolute;
+    >
-            top: 50%;
+      <video
-            left: 50%;
+        style="width: 400px; height: 232px"
-            transform: translate(-50%, -50%);
+        v-bind:src="video.VideoPath"
-          "></i>
+        v-if="video.VideoPath"
+        title="点击上传视频"
+        class="avatar video-avatar"
+        controls="controls"
+      >
+        您的浏览器不支持视频播放
+      </video>
+      <i
+        class="el-icon-plus avatar-uploader-icon"
+        v-if="!video.VideoPath"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        "
+      ></i>
     </div>
-    <el-dialog :title="title" :visible.sync="openimg" width="950px" append-to-body @opened="modalOpened"
+    <el-dialog
-      @close="closeDialog">
+      :title="title"
+      :visible.sync="openimg"
+      width="1200px"
+      append-to-body
+      @opened="modalOpened"
+      @close="closeDialog"
+    >
       <el-row>
-        <el-col :xs="24" :md="24" :style="{ height: '350px' }">
+        <el-col :xs="24" :md="24" :style="{ height: '600px' }">
           <div class="avatar-upload-preview">
-            <video v-if="openimg" style="width: 100%; height: 100%" v-bind:src="videoForm.showVideoPath"
+            <video
-              class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
+              v-if="openimg"
+              style="width: 100%; height: 100%"
+              v-bind:src="videoForm.showVideoPath"
+              class="avatar video-avatar"
+              controls="controls"
+            >
+              您的浏览器不支持视频播放
+            </video>
           </div>
         </el-col>
       </el-row>
       <br />
-      <el-progress v-if="progressFlag" :percentage="loadProgress" style="height:30px;padding-bottom:20px"></el-progress>
+      <el-progress
-      <el-row style="padding-bottom:0px">
+        v-if="progressFlag"
+        :percentage="loadProgress"
+        style="height: 30px; padding-bottom: 20px"
+      ></el-progress>
+      <el-row style="padding-bottom: 0px">
         <el-col :lg="3" :md="2">
-          <el-upload :show-file-list="false" class="upload-demo" ref="upload" :action="uploadurl"
+          <el-upload
-            :on-preview="handlePreview" :auto-upload="false" :on-change="loadJsonFromFile" :data="filedata"
+            :show-file-list="false"
-            :headers="headers" :on-progress="uploadVideoProcess" :on-success="handleAvatarSuccess">
+            class="upload-demo"
-            <el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
+            ref="upload"
+            :action="uploadurl"
+            :on-preview="handlePreview"
+            :auto-upload="false"
+            :on-change="loadJsonFromFile"
+            :data="filedata"
+            :headers="headers"
+            :on-progress="uploadVideoProcess"
+            :on-success="handleAvatarSuccess"
+          >
+            <el-button
+              slot="trigger"
+              size="small"
+              type="primary"
+              style="float: left"
+              >选取文件</el-button
+            >
           </el-upload>
         </el-col>
         <el-col :lg="{ span: 2, offset: 18 }" :md="2">
-          <el-button v-if="uploadbtn" type="primary" size="small" @click="submitUpload">提 交</el-button>
+          <el-button
-          <el-button v-else :loading="!uploadbtn" type="primary" size="small">提交中...</el-button>
+            v-if="uploadbtn"
+            type="primary"
+            size="small"
+            @click="submitUpload"
+            >提 交</el-button
+          >
+          <el-button v-else :loading="!uploadbtn" type="primary" size="small"
+            >提交中...</el-button
+          >
         </el-col>
       </el-row>
     </el-dialog>
@@ -252,8 +309,8 @@ export default {
   top: 0%;
   left: 50%;
   transform: translate(-50%, 0%);
-  width: 300px;
+  width: 960px;
-  height: 300px;
+  height: 540px;
   border-radius: 0%;
   box-shadow: 0 0 4px #ccc;
   overflow: hidden;
@@ -267,23 +324,23 @@ export default {
   height: 100px;
 }
 
-.user-info-head:hover:after {
+// .user-info-head:hover:after {
-  content: "";
+//   content: "";
-  position: absolute;
+//   position: absolute;
-  left: 0;
+//   left: 0;
-  right: 0;
+//   right: 0;
-  top: 0;
+//   top: 0;
-  bottom: 0;
+//   bottom: 0;
-  color: #eee;
+//   color: #eee;
-  background: rgba(0, 0, 0, 0.5);
+//   background: rgba(0, 0, 0, 0.5);
-  font-size: 24px;
+//   font-size: 24px;
-  font-style: normal;
+//   font-style: normal;
-  -webkit-font-smoothing: antialiased;
+//   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+//   -moz-osx-font-smoothing: grayscale;
-  cursor: pointer;
+//   cursor: pointer;
-  line-height: 110px;
+//   line-height: 110px;
-  border-radius: 50%;
+//   border-radius: 50%;
-}
+// }
 
 .wihi {
   background-color: #fff;