<template>
  <section class="person-detail-wrap">
    <normal-header
      :title="title"
      :barHeight="barHeight"
      :barColor="barColor"
      :backType="1">
    </normal-header>
    <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
      <div class="info">
        <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
        <div class="content">
          <p class="item">
            <span class="label">累计排名</span>
            <span class="value">105</span>
          </p>
          <p class="line"></p>
          <p class="item">
            <span class="label">累计勤奋分 </span>
            <span class="value">105</span>
          </p>
        </div>
      </div>
    </div>
    <div class="main-content">
      <!--<div class="get-container">
        <div class="top">
          <div class="title">累计获得奖励</div>
          <div class="how-to-get">如何领取<img src="~/assets/img/person-detail/icon-right.png" alt=""></div>
        </div>
        <div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
      </div>-->
      <div class="detail-list">
         <div class="item">
           <div class="left">
             <img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
           </div>
           <div class="right">
             <div class="r-left">
               <p class="detail-name">每日打卡</p>
               <p class="time">2019.12.15</p>
             </div>
             <div class="r-right">
               <div class="award-item">
                 <span class="num">+5</span>
                 <span class="award-name">勤奋分</span>
               </div>
               <div class="award-item">
                 <span class="num">+5</span>
                 <span class="award-name">勤奋分</span>
               </div>
             </div>
           </div>
         </div>
        <div class="item">
          <div class="left">
            <img src="~/assets/img/person-detail/icon-invite.png" alt="">
          </div>
          <div class="right">
            <div class="r-left">
              <p class="detail-name">邀请好友</p>
              <p class="time">2019.12.15</p>
            </div>
            <div class="r-right">
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <img src="~/assets/img/person-detail/icon-study.png" alt="">
          </div>
          <div class="right">
            <div class="r-left">
              <p class="detail-name">课程学习</p>
              <p class="time">2019.12.15</p>
            </div>
            <div class="r-right">
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
          </div>
          <div class="right">
            <div class="r-left">
              <p class="detail-name">每日打卡</p>
              <p class="time">2019.12.15</p>
            </div>
            <div class="r-right">
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
              <div class="award-item">
                <span class="num">+5</span>
                <span class="award-name">勤奋分</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-more">
        <span class="line"></span>
        <span class="text">到底啦</span>
        <span class="line"></span>
      </div>
    </div>
  </section>
</template>

<script>
  import NormalHeader from '@/components/normal-header'
  export default {
    name: 'person-detail',
    components: {
      NormalHeader
    },
    data() {
      return {
        showPop: false,
        title: '个人明细',
        barHeight: 0,
        barColor: '#fff',
      };
    },
    computed: {

    },
    mounted() {

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

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