<template>
  <div class="in-activity-wrap">
    <!-- 顶部的四个阶段 进度条 -->
    <ul class="top-process-bar">
      <li class="over">
        <p class="title">高血压学习</p>
        <p class="date">12月16至19日</p>
      </li>
      <li class="active">
        <p class="title">糖尿病学习</p>
        <p class="date">12月20至24日</p>
      </li>
      <li>
        <p class="title">中医科学习</p>
        <p class="date">12月24至27日</p>
      </li>
      <li>
        <p class="title">全科学习</p>
        <p class="date">12月27至30日</p>
      </li>
    </ul>

    <div class="big-bg-wrap">
      <div class="award-wrap">
        <div class="stage-rule">
          <img class="stage-text" src="../assets/img/stageTwo/stage-01-text.png" alt="">
          <img class="rule-btn" src="../assets/img/stageTwo/rule-btn.png" alt="" @click="handleRuleBtnClick">
        </div>
        <img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt="">
      </div>

      <div class="user-info-wrap">
        <img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
        <div class="basic-info">
          <div class="head-icon">
            <img src="../assets/img/stageTwo/ddd.png" alt="">
          </div>
          <div class="name-info">
            <p class="name">召唤</p>
            <p class="company">上海复旦大学附属中山医院</p>
          </div>
          <div class="detail"> 个人明细<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
        </div>

        <ul class="billboard-wrap">
          <li>
            <p class="title">个人今日勤奋分</p>
            <p class="score">0</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名-</p>
            <div class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
          </li>
          <li class="organ">
            <p class="title">机构累计勤奋分</p>
            <p class="score">0</p>
            <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">排名-</p>
            <div class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
          </li>
        </ul>
        <p class="score-tips">再获得10勤奋分即可上升到前10名获得欧姆龙温度计</p>
        <div class="bean-wrap">
          <p class="personal-total-get">累计个人获得：<span>999999云鹊豆</span></p>
          <div class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
        </div>
        <p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
      </div>

      
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      // 活动规则
      handleRuleBtnClick() {
        console.log('跳转至 活动规则页面')
      },
    },  
  }
</script>>

<style lang="less">
  @import '../assets/style/in-activity.less';
</style>