<template>
  <div class="monitor">
      <div class="eq-top">
           <img src="/static/img/backIcon.jpg" alt="" @click="back">
           <span>返回 </span>
      </div>
      <div class="monitor-content">
          <div class="monitor-video" v-for="(item,index) in 8" :key="index" @click="popMask">
              <div class="my-video"></div>
              <p>F001-23</p>
          </div>
      </div>
      <div class="mask-bg"></div>
      <div class="big-mask">
          <p>F001-23视频监控<Icon type="md-close" class='close-btn' @click="closeMask"/></p>
          <div class="mask-container">
              <div class="video"></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  components: {

  },

  mixins: [],

  props: {

  },

  data () {
    return {

    }
  },

  computed: {

  },

  mounted () {

  },

  methods: {
    back () {
      history.go(-1)
    },

    popMask () {
      document.querySelector('body').style.overflow = 'hidden'
      document.querySelector('.mask-bg').style.display = 'block'
      document.querySelector('.big-mask').style.display = 'block'
    },
    closeMask () {
      document.querySelector('body').style.overflow = 'auto'
      document.querySelector('.mask-bg').style.display = 'none'
      document.querySelector('.big-mask').style.display = 'none'
    }
  }

}
</script>

<style scoped lang="less" >
.monitor {
   position: relative;
    .eq-top {
        margin-bottom: 20px;
        margin-left: 20px;
        >img {
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid #cacaca;
        }
        >span {
            font-size: 16px;
            color: #212830;
        }
    }
    .monitor-content {
        margin:20px;
        padding:40px;
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        .monitor-video{
            background: #F5F5F5;
            border-radius: 2px;
            width: 400px;
            height: 268px;
            text-align: center;
            padding:10px;
            display: inline-block;
            margin:0 40px 40px 0;
            .my-video{
                width: 380px;
                height: 212px;
                border-radius: 2px;
                background: rgba(0,0,0,0.30);
                cursor: pointer;
            }
            p {
                font-size: 14px;
                color: #212830;
                padding-top: 14px;
            }
        }

    }
    .mask-bg {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background:rgba(0, 0, 0, .6);
      display: none;
    }
    .big-mask {
      width: 980px;
      height: 620px;
      background: #fff;
      z-index: 999;
      position: fixed;
      top: 150px;
      left: 15%;
      display: none;
      p {
          height: 60px;
          line-height:60px;
          padding-left: 40px;
          color:#fff;
          background: #728DEE;
          .close-btn{
              float: right;
              margin-right: 15px;
              margin-top: 20px;
          }
      }
      .mask-container{
          padding:15px 40px;
          .video{
              width: 900px;
              height: 500px;
              border-radius: 2px;
              background: rgba(0,0,0,0.30);
          }
      }
    }
}
</style>
