修改视频 图片 切换

ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="video-container">
-    <!-- <div class="header">
+    <div class="header">
       <div class="left">
         <div class="radio">
-          <span>图像</span>
-          <span class="active">视频</span>
+          <span @click="active = 'img'" :class="{ active: active === 'img' }">图像</span>
+          <span @click="active = 'video'" :class="{ active: active === 'video' }">视频</span>
         </div>
       </div>
       <div class="right">
-        <div class="btn">2X</div>
-        <div class="btn">全屏</div>
+        <!-- <div class="btn">2X</div>
+        <div class="btn">全屏</div> -->
       </div>
-    </div> -->
-    <Video class="video-stream" :pileNum="pileNum" :camId="camId" :url="url" />
+    </div>
+    <Transition name="fade" mode="out-in">
+      <Video v-if="active === 'video'" class="video-stream" :pileNum="pileNum" :camId="camId" :url="url" />
+      <img v-else src="./view.png" />
+    </Transition>
   </div>
 </template>
 
@@ -37,6 +40,11 @@ export default {
       type: String,
       default: null
     }
+  },
+  data() {
+    return {
+      active: "video"
+    }
   }
 }
 </script>
@@ -46,6 +54,18 @@ export default {
   position: relative;
   background-color: #000;
   height: 240px;
+  display: flex;
+  justify-content: center;
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.24s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 
   .header {
     position: absolute;
@@ -54,7 +74,7 @@ export default {
     width: 100%;
     z-index: 999;
     display: flex;
-    padding: 3px 6px;
+    padding: 6px;
     justify-content: space-between;
 
     .left,
@@ -113,10 +133,14 @@ export default {
     }
   }
 
+
+  .video-stream,
+  img {
+    height: 100%;
+  }
+
   .video-stream {
     width: 100%;
-    height: 100%;
-    // height: 240px;
   }
 }
 </style>