<template>
  <section class="personal-grade-wrap">
    <img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
    <img src="~/assets/img/stage3/awards-icon1.png" alt="" class="awards-grade">
    <div class="personal-info">
      <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
      <div class="right">
        <p class="name">赵欢</p>
        <p class="hospital">上海复旦大学附属中山医院</p>
      </div>
    </div>
    <div class="join-num">活动总计参与人数:23432334</div>
    <div class="grade-details">
      <div class="left">
        <p class="title">您的成绩:</p>
        <div class="item">
          <div class="line"></div>
          <div class="content">
            <p class="label">累计获得勤奋分</p>
            <p class="grade">1809987</p>
            <div class="trapezoid">
              <p class="detail-bg"></p>
              <p class="detail-text">超过95%的医生</p>
            </div>
          </div>
        </div>
        <div class="item marginItem">
          <div class="line line168"></div>
          <div class="content">
            <p class="label">累计获得云鹊豆</p>
            <p class="grade">3600</p>
            <div class="detail">记得去云鹊豆中心进行兑换哦</div>
          </div>
        </div>
        <div class="item">
          <div class="line line168"></div>
          <div class="content">
            <p class="label">进每日TOP10</p>
            <p class="grade">5次</p>
            <div class="detail">拿奖拿到手发软 </div>
          </div>
        </div>
      </div>
      <div class="right">
        <p>学无止境</p>
        <p>学而不倦</p>
      </div>
    </div>
    <div class="task-details">
      <div class="task-item">
        <img src="~/assets/img/stage3/task-icon1.png" alt="">
        <p class="num">13次</p>
        <p class="name">活动打卡</p>
      </div>
      <div class="task-item">
        <img src="~/assets/img/stage3/task-icon2.png" alt="">
        <p class="num">12门</p>
        <p class="name"> 学习课程</p>
      </div>
      <div class="task-item">
        <img src="~/assets/img/stage3/task-icon3.png" alt="">
        <p class="num">500人</p>
        <p class="name">邀请好友</p>
      </div>
    </div>
    <div class="share-btn">分享我的成绩</div>
    <p class="footer-text">共同推进医防融合 齐心聚力机构发展</p>
  </section>
</template>

<script>
  export default {
    name: "personal-grade"
  }
</script>

<style scoped lang="less">
  @import '../../assets/style/awards-list/personal-grade.less';
</style>