<template>
  <div class="video-wrapper">
    <div @click="$emit('select', 'monitor1')" :style="`background-image:url(${require('@/assets/images/monitor1.jpeg')})`">
      <img src="@/assets/images/play.png"/>
    </div>
    <div @click="$emit('select', 'monitor2')" :style="`background-image:url(${require('@/assets/images/monitor2.jpeg')})`">
      <img src="@/assets/images/play.png"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoWrapper',
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>
.video-wrapper
  height 100%
  padding .3rem
  display flex
  justify-content space-between
  align-items center
  div
    width 48%
    height 80%
    background-size cover
    cursor pointer
    display flex
    align-items center
    justify-content center
    &:hover
      img
        transform scale(1.2) rotate(360deg)
    img
      width 3rem
      height @width
      transition all .5s
</style>
