<template>
  <div class="basicMaskDiv" @click="clickEmpty()" v-if="show">
    <div class="loserDiv"  @click='stopClickEmpty'>
        <div class="xBtn" @click="closeFun"></div>
        <div class="secondMsg">
            挑战成绩：
            <span>{{challengeTime}}s</span>
        </div>
        <div class="twoBtn">
            <div class="upBtn" @click="levelClick">降低难度</div>
            <div class="goBtn" @click="closeFun">自信继续</div>
        </div>
    </div>
  </div>
</template>

<script>
import { shouSuReducePopComService } from '../../../util/hdzxtcomCreate.js';
export default {
  props: [],
  components: {},
  data() {
    return {
      show: true,
      
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
  },
  methods: {
    levelClick(){
        this.submit();
      shouSuReducePopComService.create(
        this.isTemplate,
        this.initDatas,
        this.styleData,
        submit => {
          shouSuReducePopComService.close();
        }
      );
    },
     clickEmpty(){
       document.querySelector("body").removeAttribute("style");
      this.submit();
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
    closeFun(){
      document.querySelector("body").removeAttribute("style");
        this.submit();
    }
  },
};
</script>

<style lang="scss">
.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
.loserDiv{
    width: 5.88rem;
    height: 6.3rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/38680/31/18784/47549/62c5001cE441f83e9/800a0d411b61b7d0.png);
    background-size: 100%;
    position: absolute;
    left: calc(50% - 5.88rem/2);
    top: calc(50% - 6.3rem/2);
    padding-left: .44rem;
    padding-right: .44rem;
}
.xBtn{
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: .2rem;
    right: .2rem;
}
.secondMsg{
    font-size: .3rem;
    color: #8C8C8C;
    width: 100%;
    text-align: center;
    margin-top: 3.8rem;
     span{
        color: #FF6000;
     }
}
.twoBtn{
    width: 100%;
    height: .88rem;
    margin-top: .75rem;
    display: flex;
    justify-content: space-between;
    .upBtn{
        width: 2.4rem;
        height: 100%;
        background: #F2270C;
        color: white;
         font-size: .3rem;
         display: flex;
         justify-content: center;
         align-items: center;
    }
    .goBtn{
        width: 2.4rem;
        height: 100%;
        background: #FF9900;
        color: white;
         font-size: .3rem;
         display: flex;
         justify-content: center;
         align-items: center;
    }
}
</style>
