<template>
  <div class="share_friend_model" @click="closeModal">
    <img class="arrow" src="../assets/img_arrow.png" alt="">
    <div class="share_content">
      <div class="share_tip tip1">点击右上角三个点选项</div>
      <div class="tip_img">
        <img src="../assets/ic_fri.png" alt="">
      </div>
      <div class="img_title">分享朋友圈</div>
      <div class="share_tip tip2">分享到朋友圈即为打卡成功</div>
      <div class="share_tip tip3">还可邀请更多好友一起学习！</div>
    </div>
  </div>
</template>


<style scoped>
  .share_friend_model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid transparent;
    z-index: 100;
    text-align: center;
  }

  .arrow {
    position: absolute;
    width: 1.5rem;
    height: 1.11rem;
    top: 0.1rem;
    right: 0.3rem;
    animation: arrowMove 1s infinite;
  }

  .share_tip{
    font-size: .36rem;
    color: #ffffff;
  }

  .tip1{
    margin: 1.8rem 0 .8rem;
  }

  .tip2{
    margin-bottom: .2rem;
  }

  .img_title{
    font-size: .30rem;
    color: #ffffff;
    margin: .2rem 0 .8rem;
  }

  .tip_img{
    margin: 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .2rem;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tip_img img{
    width: 1.07rem;
    height: 1.07rem;
  }

  @keyframes arrowMove {
    0% {
      top: 0.1rem;
      right: 0.3rem;
    }
    50% {
      top: 0.3rem;
      right: 0.5rem;
    }
    0% {
      top: 0.1rem;
      right: 0.3rem;
    }
  }
</style>

<script>
  export default {
    name: "shareFriendModel",
    data() {
      return {};
    },
    methods: {
      // 关闭弹窗
      closeModal() {
        this.$emit("close", true);
      }
    }
  }
</script>
