<template>
  <div v-if="show">
    <div class="activePrizeDiv" @click='clickEmpty()'>
      <div :class="getDivCss()" @click='stopClickEmpty'>
      
        <div v-if="flag ==0" class="close" @click="closeClick(2)"></div>
        <div v-if="flag ==0" class="closeButton" @click="closeClick(1)"></div>
        <div v-if="flag ==1" class="closeButton1" @click="closeClick(1)">关注并参与活动</div>
        <div v-if="flag ==0" class="shopNameDiv">
          <p>
            您已成功关注<span class="content"
              >&nbsp;&nbsp;“{{ pcontent }}”</span
            >
          </p>
        </div>
         <div v-if="flag ==1" class="shopImg">
            <img alt="" src="http://img30.360buyimg.com/popshop/jfs/t1/102991/30/17843/6809/5e8dc849E88b8548d/125f764054de391a.jpg" style="width: 3rem;">

         </div>
        <div v-if="flag ==1" class="shopNameDiv1">{{ pcontent }}
         
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    closeClick(vaule) {
      this.submit(vaule);
    },
    //点击空白处关闭弹框
    clickEmpty(){
      this.submit(2);
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
    getDivCss() {
      this.flag == 0
      if ( this.flag == 0) {
        return 'activeDiv';
      } else {
        return 'activeDiv1';
      }

    }
  },
};
</script>
<style lang="scss" scoped>
.activePrizeDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 120;
}

.activeDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 5.26rem;
  height: 5.5rem;
  margin-left: -2.63rem;
  margin-top: -2.75rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t18190/224/450332431/101584/e704abf8/5a791e53N9dc8e37c.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1026;
}
.activeDiv1 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 5.26rem;
  height: 5.5rem;
  margin-left: -2.63rem;
  margin-top: -2.75rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/87020/7/17171/43435/5e82dd38Ee8513a33/d434318c419246e5.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1026;
}
.close {
  height: 0.6rem;
  width: 0.6rem;
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
}
.closeButton {
  height: 1rem;
  width: 4.6rem;
  position: absolute;
  right: 0.3rem;
  top: 4.1rem;
}
.closeButton1 {
  height: 1rem;
  width: 4.6rem;
  position: absolute;
  right: 0.3rem;
  top: 4.1rem;
  line-height: 0.9rem;
  font-size: 0.42rem;
  background: rgb(245, 98, 100);
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
}
.shopNameDiv {
  font-size: 0.24rem;
  position: absolute;
  top: 3.4rem;
  left: 0.2rem;
  right: 0.2rem;
  text-align: center;
}
.shopNameDiv1 {
  font-size: 0.24rem;
  position: absolute;
  top: 3.4rem;
  left: 0.2rem;
  right: 0.2rem;
  text-align: center;
}
.shopImg {
  font-size: 0.24rem;
  position: absolute;
  top: 1.4rem;
  left: 0.2rem;
  right: 0.2rem;
  text-align: center;
}
.content {
  color: rgb(242, 50, 50);
}
</style>
