<template>
  <section class="awards-list-wrap">
    <div class="top-container">
      <img src="~/assets/img/stage3/rule-btn.png" alt="">
    </div>
    <!--已登录及个人未参加-->
    <div class="person-details">
      <div class="info">
        <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
        <div class="right">
          <div class="name">赵欢</div>
          <div class="hospital">上海复旦大学附属中山医院</div>
        </div>
      </div>
      <div class="self-grade">
        <div class="left">
          <p class="title">个人勤奋榜</p>
          <p class="rank">第10000名</p>
          <p class="score">个人勤奋分 50000</p>
        </div>
        <div class="right">
          <p class="title">机构星火榜</p>
          <p class="rank">第9名</p>
          <p class="score">机构勤奋分 50000</p>
        </div>
      </div>
      <div class="my-grade">我的成绩</div>
      <div class="bottom">
        <p class="text">参与人数 28788348</p>
        <p class="line"></p>
        <p class="text">参与机构数 28788348</p>
      </div>
    </div>
    <!--未登录-->
    <!--<div class="person-details not-login">
      <div class="description">登录查看个人和机构排名</div>
      <div class="my-grade">立即登录</div>
      <div class="bottom">
        <p class="text">参与人数 28788348</p>
        <p class="line"></p>
        <p class="text">参与机构数 28788348</p>
      </div>
    </div>-->
    <!--个人机构均未参加-->
    <!--<div class="person-details not-join">
      <div class="description">您和您的机构未参加本次活动</div>
      <div class="bottom">
        <p class="text">参与人数 28788348</p>
        <p class="line"></p>
        <p class="text">参与机构数 28788348</p>
      </div>
    </div>-->
    <div class="main-container">
      <img class="top-img" src="~/assets/img/stage3/hospital-icon.png" alt="">
      <div class="award-container hospital-awards">
        <div class="item">
          <div class="top">
            <div class="title">云鹊星火奖</div>
            <div class="operation">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/hospital-rank1.png" alt="">
            <div class="details">
              <p class="name">上海复旦大学附属中山医院</p>
              <p class="grade">机构勤奋分 20039</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div class="title">云鹊萌芽奖</div>
            <div class="operation">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/hospital-rank2.png" alt="">
            <div class="details">
              <p class="name">上海复旦大学附属中山医院</p>
              <p class="grade">机构勤奋分 20039</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div class="title">云鹊奋进奖</div>
            <div class="operation">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/hospital-rank3.png" alt="">
            <div class="details">
              <p class="name">上海复旦大学附属中山医院</p>
              <p class="grade">机构勤奋分 20039</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div class="title">云鹊超越奖</div>
            <div class="operation">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/hospital-rank4.png" alt="">
            <div class="details">
              <p class="name">上海复旦大学附属中山医院上海复旦大学附属中山医院</p>
              <p class="grade">机构勤奋分 20039</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container">
      <img class="top-img" src="~/assets/img/stage3/person-icon.png" alt="">
      <div class="award-container person-awards">
        <div class="item">
          <div class="top">
            <div class="title">云鹊勤奋之星</div>
            <div class="operation">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
          </div>
          <div class="content">
            <img src="~/assets/img/stage3/person-rank.png" alt="">
            <div class="details">
              <p class="name">王医生</p>
              <p class="grade">个人累计勤奋分 20039</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pica-icon">
      <img src="~/assets/img/stage3/pica-icon.png" alt="">
    </div>
  </section>
</template>

<script>
  export default {
    name: "index"
  }
</script>

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