<template>
  <div class="basicMaskDiv" v-if="show">
    <div class="van-popup-fans van-popup-fans-center" style="z-index: 2005;">
      <div class="followShopFans">
        <div style="font-size: 0.4rem;color: #fff;margin-top: 0.15rem;">粉丝魅力值</div>
        <div style="font-size: .4rem;color:#542228;text-align: center;margin-top:.5rem;">感谢您对本店铺的关注和喜爱<br>您已成为本店铺的</div>
        <div class="fans-level" style="margin-top: .3rem;">宠爱粉</div>
        <div style="font-size: .4rem;color:#542228;margin-top:.1rem;">奖励您<span
          style="font-size: .7rem;color:#ffd176">15</span>魅力值
        </div>
        <div class="click-btn" style="margin-top:.2rem;" @click="closeClick">收下魅力</div>
        <div
          style="display: flex;justify-content: center;align-items: center;color:#ff7878;font-size: .2rem;margin-top:.1rem;">
          <van-icon name="question-o" size=".2rem;"></van-icon>
          <div>活动免责说明，最终解释权归京东所有</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: [],
  components: {
  },
  data() {
    return {
      orderShopList:[],
      shopId:""
    };
  },
  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);
}

.followShopFans {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/86735/28/13565/6112/5e5b2e9dE15d007ee/a472ffbf6b5eb969.png) no-repeat;
  background-size: 100%;
  width: 5.9rem;
  height: 6.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fans-level {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/100968/5/6222/18502/5df2076bE21e73cc8/4c15cbfbd9a485d8.png) no-repeat;
  background-size: 100%;
  width: 2.49rem;
  height: .92rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .4rem;
  color: #ffe9c0;
}
.click-btn {
  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;
}
.van-icon {
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 vant-icon;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.basicMaskDiv{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
</style>
