<template>
  <section class="invite-details-wrap">
    <normal-header
      :title="title"
      :barHeight="barHeight"
      :barColor="barColor"
      :backType="1">
    </normal-header>
    <div class="main-container" :style="{ marginTop: `${44+barHeight}Px`}">
      <div class="invite-explain">
        <p class="title">邀请形式</p>
        <div class="picture-explain">
          <div class="left">
            <div class="step-num">1</div>
            <div class="dotted-line"  />
            <div class="step-num">2</div>
            <div class="dotted-line height50"  />
            <div class="step-num">3</div>
          </div>
          <div class="right">
            <div class="bubble_diailog">
              <i class="l"></i>
              <b class="l"></b>
              邀请医生好友
            </div>
            <div class="bubble_diailog marginTop16">
              <i class="l"></i>
              <b class="l"></b>
              <p class="text">输入手机号领取课程</p>
              <p class="awards">+20勤奋分 +20云鹊豆</p>
            </div>
            <div class="bubble_diailog marginTop20">
              <i class="l"></i>
              <b class="l"></b>
              <p class="text">使用手机号登录云鹊APP</p>
              <p class="awards">+80勤奋分 +80云鹊豆</p>
            </div>
          </div>
        </div>
      </div>
      <div class="gray-line"></div>
      <div class="record-details">
        <div class="tab-nav">
          <div class="item left-item">
            领取记录
            <p class="active-line"></p>
          </div>
          <div class="item right-item">
            登录记录
            <p class="active-line"></p>
          </div>
        </div>
       <!-- <div class="record-list">
          <p class="sum">共10人</p>
          <div class="record-item">
            <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="person-photo">
            <div class="person-info">
              <p class="phone">135****3456</p>
              <p class="time">2019.12.16</p>
            </div>
            <div class="awards">
              <p class="item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </p>
              <p class="item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </p>
            </div>
          </div>
        </div>-->
        <div class="no-data">
          <img src="~/assets/img/invite-details/icon-nodata.png" alt="">
         <!-- <p>提醒您的医生好友领取课程您将获得奖励哦！</p>-->
          <p class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
        </div>
        <div class="footer-btn">
          <div class="btn">去邀请</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import NormalHeader from '@/components/normal-header'
  export default {
    name: "index",
    components: {
      NormalHeader
    },
    data() {
      return {
        showPop: false,
        title: '邀请明细',
        barHeight: 0,
        barColor: '#fff',
      };
    },
    mounted() {

    },
    methods: {},
  }
</script>

<style scoped lang="less">
  @import 'index.less';
</style>