<template>
  <div class="question">
    <div
      class="qcon"
      :style="{
        backgroundImage: `url(${require('@/assets/images/question/bg.jpg')})`
      }"
    >
      <div v-if="!dati" class="qbody">
        <div class="start_page">
          <img
            class="qicon"
            :src="require('@/assets/images/question/icon.png')"
            alt=""
          />
          <div class="qbtn" @click="dati=true">
            <span>开始答题</span>
            <img :src="require('@/assets/images/question/jiantou.png')" alt="">
          </div>
        </div>
      </div>

      <div v-else class="qbody">
        <datiing @lingjiang='datiing=false' v-if="datiing"/>
        <prize v-else/>
      </div>
      <img
        class="qclose"
        :src="require('@/assets/images/question/close.png')"
        alt=""
        @click="$emit('close')"
      />
    </div>
  </div>
</template>

<script>
import datiing from './datiing'
import prize from './prize'
export default {
  components: {
    datiing,
    prize
  },

  data () {
    return {
      dati: false,
      datiing: true
    }
  }
}
</script>

<style lang="less" scoped>
.question {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
  .qcon {
    width: 930px;
    height: 550px;
    background-size: 100% auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    .qbody {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      text-align: center;
      .start_page{
        width: 100%;
        top: 48%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        .qicon {
          margin-bottom: 50px;
        }
      }
    }
    .qclose {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
  }
}
</style>
