机构排行榜静态页面

assets/style/awards-list/rank.less

-.personal-rank-wrap {
+.rank-wrap {
   .rank-list {
     padding-left: 25px;
     .rank-item {
@@ -48,12 +48,14 @@
           color: #FD5A2F;
           font-size: 13px;
           line-height: 13px;
+          text-align: right;
         }
         .name {
           color: #676869;
           font-size: 13px;
           line-height: 13px;
           margin-top: 5px ;
+          text-align: right;
         }
       }
     }
@@ -73,5 +75,69 @@
       -ms-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
+    .no-more {
+      height: 62px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line {
+        display: inline-block;
+        width: 84px;
+        height: 1px;
+        background:#F7F7F7;
+      }
+      .text {
+        color: #BEC2CC;
+        font-size: 13px;
+        margin: 0 8px;
+      }
+    }
+  }
+  .footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    .content {
+      height: 50px;
+      background: #fff;
+      box-shadow: 0px -0.5px 0px 0px #EDEDED;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .left {
+        margin-left: 15px;
+        .score {
+          color: #373839;
+          font-size: 12px;
+          font-weight: 700;
+          line-height: 12px;
+          span {
+            color: #FD6037;
+          }
+        }
+        .rank {
+          color: #979899;
+          font-size: 12px;
+          font-weight: 700;
+          line-height: 12px;
+          margin-top: 5px;
+          span {
+            color: #FD6037;
+          }
+        }
+      }
+      .right {
+        width: 90px;
+        height: 40px;
+        background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
+        border-radius: 20px;
+        color: #FFFFFF;
+        font-size: 15px;
+        font-weight: 700;
+        text-align: center;
+        line-height: 40px;
+        margin-right: 15px;
+      }
+    }
   }
 }
\ No newline at end of file

pages/awards-list/hospital-grades.vue

+<template>
+  <section class="hospital-grade-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">
+          <div class="details">
+            <p class="name">高新区卫生院</p>
+            <p class="awards">奖励: 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">
+          <div class="details">
+            <p class="name">高新区卫生院</p>
+            <p class="awards">奖励: 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">
+          <div class="details">
+            <p class="name">高新区卫生院</p>
+            <p class="awards">奖励: 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">
+          <div class="details">
+            <p class="name">高新区卫生院</p>
+            <p class="awards">奖励: 500云鹊豆</p>
+          </div>
+        </div>
+        <div class="score">
+          <p class="num">9872</p>
+          <p class="name">勤奋分</p>
+        </div>
+      </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: "hospital-grades"
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../assets/style/awards-list/rank.less";
+</style>
\ No newline at end of file

pages/awards-list/personal-rank.vue

 <template>
-  <section class="personal-rank-wrap">
+  <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">
@@ -57,6 +57,20 @@
           <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>