<template>
  <div class="convention" :style="{background:`url('${content.background}') top center no-repeat`,backgroundSize: '100% auto'}">
    <div class="c-left">
      <div class="c-title">
        <div>{{content.slogan1}}</div>
        <div>{{content.slogan2}}</div>
        <img :src="content.left" alt="">
      </div>
      <div class="c-mask">
        <div class="mask-1"></div>
        <div class="mask-2"></div>
      </div>
    </div>
    <div class="c-right">
      <img :src="content.right" alt="">
      <div class="cr-title">
        <img class="cr-bg" :src="require('@/assets/images/img_review_point.png')">
        <h1 v-html="content.title"></h1>
        <div @click="clickHandle(content.video)" class="btn"><span>大会回顾</span></div>
        <div class="cr-detail">{{content.detail}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['content'],
  methods: {
    clickHandle (item) {
      this.$emit('openVideo', item)
    }
  }
}
</script>

<style scoped>
@import url('./style.css');
</style>
