<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="position: absolute; top: 0px; right: 0px;"><i class="van-icon van-icon-clear" style="color: rgb(192, 192, 192);     font-size: 30px;
    position: absolute;
    top: 0rem;
    right: 0rem;"></i></div>
        <div
          style="font-size: .2rem; width: 5rem; height: 5.5rem; position: absolute; left: .55rem; overflow: scroll; color: rgb(110, 110, 110);">
          <div style="font-weight: bold;">1.什么是亲密值？</div>
          <div>亲密值是用户对店铺的热爱程度，亲密值越高，就代表你在店铺内的行为越频繁。亲密值每月更新一次。</div>
          <div style="font-weight: bold;">如何提高亲密值？</div>
          <div>对店铺进行更多浏览和分享；对商品进行更多浏览、加购、分享和购买；领取更多优惠券以及更多你在店铺内产生的行为。</div>
          <br>
          <div style="font-weight: bold;">2.什么是能量分？</div>
          <div>亲密值可以换算为能量分的基础分（非粉丝无法看到亲密值，且不能作为能量分的基础分），用户所完成的任务动作可以领取相应分数。</div>
          <div style="font-weight: bold;">如何获取能量分?</div>
          <div>完成互动工具中的指定任务即可获取相应分数。</div>
        </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(//img10.360buyimg.com/imgzone/jfs/t1/104997/3/43597/6647/65bb3ba9Fc7031def/fb63e0ccdb7554dd.jpg) no-repeat;
  background-size: 100% 100%;
  width: 5.93rem;
  height: 7.30rem;
  padding-top: 1.1rem;
  box-sizing: border-box;
      border-radius: 10px;
    overflow: hidden;
}
.basicMaskDiv{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
</style>
