<template>
  <section class="personal-rank-wrap rank-wrap">
    <div class="rank-list">
      <div class="rank-item">
        <img src="~/assets/img/stage3/rank-icon1.png" alt="" class="rank-icon">
        <div class="info">
          <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="" class="photo">
          <div class="details">
            <p class="name">张医生</p>
            <p class="awards">奖励: iPhone11、500云鹊豆</p>
          </div>
        </div>
        <div class="score">
          <p class="num">9872</p>
          <p class="name">勤奋分</p>
        </div>
      </div>
      <div class="rank-item">
        <img src="~/assets/img/stage3/rank-icon2.png" alt="" class="rank-icon">
        <div class="info">
          <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="" class="photo">
          <div class="details">
            <p class="name">张医生</p>
            <p class="awards">奖励: iPhone11、500云鹊豆</p>
          </div>
        </div>
        <div class="score">
          <p class="num">9872</p>
          <p class="name">勤奋分</p>
        </div>
      </div>
      <div class="rank-item">
        <img src="~/assets/img/stage3/rank-icon3.png" alt="" class="rank-icon">
        <div class="info">
          <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="" class="photo">
          <div class="details">
            <p class="name">张医生</p>
            <p class="awards">奖励: iPhone11、500云鹊豆</p>
          </div>
        </div>
        <div class="score">
          <p class="num">9872</p>
          <p class="name">勤奋分</p>
        </div>
      </div>
      <div class="rank-item">
        <div class="rank-num">4</div>
        <div class="info">
          <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="" class="photo">
          <div class="details">
            <p class="name">张医生</p>
            <p class="awards">奖励: iPhone11、500云鹊豆</p>
          </div>
        </div>
        <div class="score">
          <p class="num">9872</p>
          <p class="name">勤奋分</p>
        </div>
      </div>
      <div class="no-more">
        <span class="line"></span>
        <span class="text">到底啦</span>
        <span class="line"></span>
      </div>
    </div>
    <div class="footer">
      <div class="content">
        <div class="left">
          <p class="score">我的勤奋分<span>2000</span></p>
          <p class="rank">恭喜您上榜排名<span>第5</span></p>
        </div>
        <div class="right">分享排名</div>
      </div>
    </div>
  </section>
</template>

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

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