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

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(){
  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%;
        }
      }
    }
  }