<template>
  <div class="app-container">
    <div class="videoItem" style="top: 10%;left:3%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="videoItem" style="top: 10%;left:33%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="videoItem" style="top: 10%;left:63%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="videoItem" style="top: 55%;left:3%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="videoItem" style="top: 55%;left:33%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="videoItem" style="top: 55%;left:63%">
      <video autoplay="" muted="" loop="loop">
        <source src="@/assets/model/live/v1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div class="exit" @click="exitFun"></div>
  </div>
</template>

<script>

export default {
  name: "Liner",
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style scoped lang="less">
.app-container {
  background-image: url("~@/assets/model/live/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.videoItem {
  position: absolute;
  width: 30%;
  height: 44%;
  background-image: url("~@/assets/model/live/bg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  video {
    position: absolute;
    width: 90%;
    height: 85%;
    top: 8%;
    left: 5%;
  }
}
</style>
