<template>
  <div class="follow-mask" @click="_hide">
    <div class="follow" @click.stop>
      <div class="top">
        <span>{{ wechatInfo.WeChatName }}</span>
      </div>
      <div class="img-box">
        <img class="img" :src="wechatInfo.imgUrl" alt="" />
      </div>
      <div class="bottom">关注后可以收到直播最新动态哦~</div>
      <div class="close" @click="_hide"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vertical-follow-box',
  props: {
    value: {}
  },
  computed: {
    wechatInfo: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  methods: {
    _hide() {
      this.wechatInfo.isShow = false;
    }
  }
};
</script>

<style lang="less" scoped>
.follow-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  .follow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.6rem;
    padding: 0.15rem 0.3rem;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
    border-radius: 0.05rem;
    .top {
      line-height: 0.2rem;
      padding: 0 0.3rem 0.15rem;
      margin: 0 -0.3rem;
      border-bottom: 0.01rem solid #cfcfcf;
      text-align: center;
      font-size: 0.15rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #404040;
      overflow: hidden;

      span {
        color: #409eff;
      }
    }
    .img-box {
      position: relative;
      margin: 0.1rem auto;
      padding-top: 100%;
      height: 0;

      .img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .bottom {
      line-height: 0.2rem;
      text-align: center;
      color: #9d9d9d;
      font-size: 0.13rem;
    }
    .close {
      position: absolute;
      right: 0;
      top: -0.5rem;
      z-index: 100;
      width: 0.3rem;
      height: 0.3rem;
      background-image: url('./img/icon-close.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      &:before {
        position: absolute;
        top: 0.3rem;
        left: 0.14rem;
        display: block;
        width: 0;
        content: '';
        border: 0.01rem solid #fff;
        height: 0.3rem;
      }
    }
  }
}
</style>
