<template>
  <el-dialog top="10vh" :before-close="dialogClose" class="videoDialog" title="澧水河——2020.04.25" :visible.sync="visible">
    <iframe allowfullscreen="true" allowtransparency="true" width="100%" height="100%" :src="liveUrl" frameborder="0"/>
  </el-dialog>
</template>

<script>
  import {mapGetters} from "vuex";
  import cVideo from '@/components/cVideo'

  export default {
    name: "videoDialog",
    data() {
      return {
        top: this.$root.$options.filters.filterPx(2, this.fontSize),
        height:this.$root.$options.filters.filterPx(7.31, this.fontSize)
      }
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false
        }
      },
      liveUrl:{
        type: String,
        default() {
          return ''
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components:{cVideo},
    mounted(){
    },
    methods: {
      dialogClose() {
        this.$emit('dialogClose')
      },
    }
  }
</script>

<style lang="less">
  .videoDialog {
    .el-dialog {
      background-color: inherit;
      width: 13rem;
      height: 7.547rem;
      margin: 0;
      margin-left: 5.8rem;

      .el-dialog__header {
        background-color: inherit !important;
        padding: 0.2rem !important;
        font-family: PingFangSC-Medium;
        font-size: 0.18rem;
        color: #FFFFFF;
      }

      .el-dialog__body {
        padding: 0rem;
        height: 100%;
        width: 100%;
        border: 1px #ffffff solid;
      }

      .tech-theme .banner {
        display: none;
      }

    }
  }
</style>
