gaoxinqu_tangjia/src/components/question/index.vue

<template>
  <div class="question" :class="{qmobile:isMobile}">
    <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";
import browser from '@/util/browser'
export default {
  components: {
    datiing,
    prize,
  },

  data() {
    return {
      dati: false,
      datiing: true,
      isMobile: browser.mobile,
    };
  },
  created(){}
};
</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;
    }
  }
}

.qmobile {
  position: relative;
  height:calc(100% - 35px);
  .qcon {
    width: 96%;
    height: 98%;
    position: absolute;
  }
}
</style>