fix:走秀视频交互优化

src/router/index.js

@@ -33,7 +33,7 @@ export const constantRoutes = [
     ]
   },
 ];
-import userAuthRouter from "./modules/userAuth";
+// import userAuthRouter from "./modules/userAuth";
 import oralVideoRouter from "./modules/oralVideo";
 import catwalkVideoRouter from "./modules/catwalkVideo";
 import faceSwapVideoRouter from "./modules/faceSwapVideo";
@@ -41,7 +41,7 @@ export const asyncRoutes = [
   oralVideoRouter,
   catwalkVideoRouter,
   faceSwapVideoRouter,
-  userAuthRouter,
+  // userAuthRouter,
 ];
 
 

src/styles/layout.scss

@@ -15,5 +15,9 @@
 }
 .table-container {
   width: 100%;
+  // height: 89%;
   overflow-x: auto;
 }
+.app-container{
+  height: 100%;
+}

src/views/catwalk-video/index.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="app-container">
     <div class="table-container">
-      <el-table height="80vh" style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
+      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
         stripe border fit highlight-current-row>
         <el-table-column label="序号" type="index" width="60" align="center" />
         <el-table-column label="视频ID" min-width="100" align="center" prop="id" />
 
         <!-- <el-table-column label="视频标题" min-width="150" align="center" prop="videoTitle" /> -->
+        <el-table-column label="原视频" min-width="130" align="center" prop="videoCoverImageUrl">
+          <template slot-scope="scope">
+            <div v-if="scope.row.rawVideoUrl" class="video" @click="handlePlay(scope.row)">
+              <video :src="scope.row.rawVideoUrl" class="video-img" />
+              <i class="el-icon-video-play" />
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column label="视频封面" min-width="130" align="center" prop="videoCoverImageUrl">
           <template slot-scope="scope">
-            <div v-if="scope.row.videoCoverImageUrl" class="video" @click="handlePlay(scope.row)">
+            <div v-if="scope.row.videoUrl" class="video" @click="handlePlay(scope.row)">
               <video :src="scope.row.videoUrl" class="video-img" />
               <i class="el-icon-video-play" />
             </div>
@@ -19,7 +27,7 @@
           <template slot-scope="scope">
             <div class="video">
               <el-image  class="video-last-img video" :src="scope.row.videoEndFrameUrl"
-                :preview-src-list="[scope.row.videoEndFrameUrl]" />
+                :preview-src-list="[scope.row.videoEndFrameUrl]" :lazy="true" />
               <i class="el-icon-zoom-in" />
             </div>
           </template>
@@ -285,6 +293,7 @@ export default {
   &:hover {
     i {
       opacity: 1;
+      pointer-events: none;
     }
 
     .video-img {

src/views/face-swap-video/index.vue

@@ -24,13 +24,13 @@
     </div>
 
     <div class="table-container">
-      <el-table height="80vh" style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
+      <el-table   style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
         stripe border fit highlight-current-row>
         <el-table-column label="序号" type="index" width="60" align="center" />
         <el-table-column label="视频ID" min-width="100" align="center" prop="id" />
         <el-table-column label="视频标题" min-width="150" align="center" prop="videoTitle" />
         <el-table-column label="原图片/视频" min-width="130" align="center" prop="videoUrl">
-          <template slot-scope="scope">
+          <template slot-scope="scope" v-if="scope.row.rawVideoUrl">
             <div v-if="isVideoFormat(scope.row.rawVideoUrl)" class="video"
               @click="handlePlay(scope.row, scope.row.rawVideoUrl)">
               <video :src="scope.row.rawVideoUrl" class="video-img" />
@@ -38,7 +38,7 @@
             </div>
             <div class="video" v-else>
               <el-image  class="video-last-img video" :src="scope.row.rawVideoUrl"
-                :preview-src-list="[scope.row.rawVideoUrl]" />
+                :preview-src-list="[scope.row.rawVideoUrl]" :lazy="true"/>
               <i class="el-icon-zoom-in" />
             </div>
           </template>
@@ -53,7 +53,7 @@
             </div>
             <div class="video" v-else>
               <el-image  class="video-last-img video" :src="scope.row.videoUrl"
-                :preview-src-list="[scope.row.videoUrl]" />
+                :preview-src-list="[scope.row.videoUrl]" :lazy="true"/>
               <i class="el-icon-zoom-in" />
             </div>
           </template>
@@ -62,7 +62,7 @@
           <template slot-scope="scope">
             <div class="video">
               <el-image  class="video-last-img video" :src="scope.row.swapModelUrl"
-                :preview-src-list="[scope.row.swapModelUrl]" />
+                :preview-src-list="[scope.row.swapModelUrl]" :lazy="true"/>
               <i class="el-icon-zoom-in" />
             </div>
           </template>

src/views/oral-video/index.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="table-container">
-      <el-table height="80vh" style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id" stripe border fit
+      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id" stripe border fit
         highlight-current-row>
         <el-table-column label="序号" type="index" width="60" align="center" />
         <el-table-column label="视频ID" min-width="100" align="center" prop="id" />

vue.config.js

@@ -34,8 +34,8 @@ module.exports = {
       //   }
       // },
       "/app": {
-         target: "http://10.41.3.106:9093",
-        // target: "https://portal.gloria.com.cn",
+        // target: "http://10.41.3.106:9093",
+        target: "https://portal.gloria.com.cn",
         changeOrigin: true
       }
     }