<template>
  <div class="basicMaskDiv" @click="closeClick" v-if="show">
    <div class="van-popup-fans van-popup-fans-center" style="z-index: 2012;">
      <div class="explain-container-fans">
        <div style="font-size: .36rem;color:#542228;text-align: center;margin-top:1.6rem;">很遗憾您与福袋擦肩而过</div>
        <div style="font-size: .36rem;color:#542228;text-align: center;margin-top:.1rem;">请继续集魅力吧</div>
        <div class="click-btn-fans" style="margin-top:1.5rem;" @click="closeClick">遗憾错过</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: [],
  components: {},
  data() {
    return {
      show: true,
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
  },
  methods: {
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>

<style lang="scss">
.van-popup-fans {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  transition: transform .3s, -webkit-transform .3s;
  background-color: transparent;
}

.van-popup-fans-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.explain-container-fans {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/108156/17/7333/8461/5e5b2cd2E01c96ccc/d267ffca40dfd651.png) no-repeat;
  background-size: 100%;
  width: 5.93rem;
  height: 6.55rem;
  padding-top: 1.1rem;
  box-sizing: border-box;
}

.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
.click-btn-fans{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/103986/38/13427/2982/5e5b2e12Ecea19599/98a3ad78d0471429.png") no-repeat;
  background-size: 100%;
  width:5.03rem;
  height:1.06rem;
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .36rem;
  color:#9A0000;
}
</style>
