// 遮罩层提示
// 用于微信右上角分享提示
<template>
  <div>
    <div class="showGuide" v-show="showGuide" @click="showGuide=false">
      <div class="info">{{message}}</div>
    </div>
    <div class="newShowGuide" v-show="newShowGuide" @click="newShowGuide=false">
      <div class="showImg">
        <img src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/Eijyd34FmA.png?x-oss-process=image/resize,m_pad,limit_0,w_400,h_400" alt="">
      </div>
    </div>
  </div>
  

</template>

<script>
export default {
  data() {
    return {
      showGuide: false,
      message: "请点击右上角【···】分享给好友",
      newShowGuide:false,
    };
  },
  methods: {
    open(message) {
      if(message){
        this.message = message;
        this.showGuide = true;
      }else{
        this.newShowGuide = true
      }
      
    }
  }
};
</script>

<style lang="scss" scoped>
.showGuide,.newShowGuide {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  .info {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    width: 50%;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .showImg{
    margin: 11px 0 0 26px;
    img{
      width: 281px;
      height: 188px;
    }
  }
}
</style>