From 7e0e0b4445d3c03cc42005246fa879a4dc8e7e6d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 26 二月 2021 14:40:49 +0800
Subject: [PATCH] 朔黄事件标签弹窗调试；视频检索页筛选区字号颜色统一

---
 src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue |   80 +++++++++++++++++++++++++++++-----------
 1 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
index 0834011..b1a7e23 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="event-video-content">
     <div class="video-player">
-      <video src></video>
+      <video :src="curVideo.ClipPath" controls></video>
     </div>
     <div class="more-videos">
       <div class="top">
         <div class="title">鏇村瑙嗛</div>
-        <div class="total">鍏�<span class="num">{{total}}</span>鏉�</div>
+        <div class="total">
+          鍏�
+          <span class="num">{{eventVideoArr.length}}</span>
+          鏉�
+        </div>
       </div>
       <div class="gallery">
-        <div class="video-item" v-for="item in 11" :key="item">
-          <img src alt />
-          <div class="time"></div>
+        <div
+          class="video-item"
+          :class="{'act':item.ID == curVideo.ID}"
+          v-for="item in eventVideoArr"
+          :key="item.ID"
+          @click="checkVideo(item)"
+        >
+          <img :src="item.Cover" alt />
+          <div class="time">{{item.EventTime}}</div>
         </div>
       </div>
     </div>
@@ -21,14 +31,33 @@
 <script>
 export default {
   props: {
-    eventDetail: {
-      type: Object,
-      default: {}
-    },
+    eventVideoArr: {
+      type: Array,
+      default: () => { return [] }
+    }
   },
-  data(){
+  data () {
     return {
       curVideo: {},
+    }
+  },
+  watch: {
+    eventVideoArr (n, o) {
+      if (n.length) {
+        this.curVideo = n[0]
+      }
+    }
+  },
+  mounted () {
+    //this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+    //this.curVideo = this.eventVideoArr[0];
+    this.$nextTick(() => {
+      this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+    })
+  },
+  methods: {
+    checkVideo (data) {
+      this.curVideo = data;
     }
   }
 }
@@ -36,47 +65,54 @@
 
 <style lang="scss">
 .event-video-content {
-  padding: 14px;
-  .video-player{
+  padding: 10px 14px;
+  .video-player {
     background: #fff;
     margin-bottom: 14px;
-    video{
+    video {
       margin: 20px auto;
       width: 576px;
       height: 324px;
       background: aquamarine;
     }
   }
-  .more-videos{
+  .more-videos {
     background: #fff;
-    .top{
+    .top {
       padding: 10px 20px;
       display: flex;
       justify-content: space-between;
-      .total{
-        .num{
+      .total {
+        .num {
+          padding: 0 2px;
           color: #0096fa;
         }
       }
     }
-    .gallery{
+    .gallery {
       display: flex;
       flex-wrap: wrap;
       padding: 0 20px 10px;
-      max-height: 300px;
+      height: 300px;
       overflow-y: auto;
       // &:after{
       //   content: "";
       //   flex: auto;
       // }
-      .video-item{
+      .video-item {
         width: 200px;
-        height: 112.5px;
+        //height: 112.5px;
         margin: 10px 40px;
-        background: rgb(200, 223, 251);
+        //background: rgb(200, 223, 251);
         padding: 10px;
         border: 1px solid #eee;
         border-radius: 3px;
+        &.act {
+          border-color: #0096fa;
+        }
+        img {
+          width: 100%;
+        }
       }
     }
   }

--
Gitblit v1.8.0