朔黄事件标签弹窗调试；视频检索页筛选区字号颜色统一

hanbaoshan

2021-02-26 7e0e0b4445d3c03cc42005246fa879a4dc8e7e6d

 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(){
    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,7 +65,7 @@

<style lang="scss">
.event-video-content {
  padding: 14px;
  padding: 10px 14px;
  .video-player{
    background: #fff;
    margin-bottom: 14px;
@@ -55,6 +84,7 @@
      justify-content: space-between;
      .total{
        .num{
          padding: 0 2px;
          color: #0096fa;
        }
      }
@@ -63,7 +93,7 @@
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px 10px;
      max-height: 300px;
      height: 300px;
      overflow-y: auto;
      // &:after{
      //   content: "";
@@ -71,12 +101,18 @@
      // }
      .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%;
        }
      }
    }
  }