<template>
  <div class="follow-box">
    <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: 'pc-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-box {
  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: 260px;
    padding: 15px 30px;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
    border-radius: 5px;
    .top {
      line-height: 20px;
      padding: 0 30px 15px;
      margin: 0 -30px;
      border-bottom: 1px solid #cfcfcf;
      text-align: center;
      font-size: 15px;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #404040;
      overflow: hidden;
      span {
        color: var(--main-color);
      }
    }
    .img-box {
      position: relative;
      margin: 10px auto;
      padding-top: 100%;
      height: 0;
      .img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .bottom {
      line-height: 20px;
      text-align: center;
      color: #9d9d9d;
      font-size: 13px;
    }
    .close {
      position: absolute;
      right: 0;
      top: -50px;
      z-index: 100;
      width: 30px;
      height: 30px;
      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: 30px;
        left: 14px;
        display: block;
        width: 0;
        content: '';
        border: 1px solid #fff;
        height: 30px;
      }
    }
  }
}
</style>
