个人勤奋榜静态页面

assets/style/awards-list/rank.less

 .personal-rank-wrap {
-
+  .rank-list {
+    padding-left: 25px;
+    .rank-item {
+      padding: 20px 15px 20px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      img.rank-icon {
+        width: 25px;
+        height: 29px;
+      }
+      .rank-num {
+        width: 25px;
+        color: #373839;
+        font-size: 15px;
+        font-weight: 700;
+        text-align: center;
+      }
+      .info {
+        display: flex;
+        align-items: center;
+        margin-left: 25px;
+        img.photo {
+          width: 35px;
+          height: 35px;
+          margin-right: 10px;
+        }
+        .details {
+          .name {
+            color: #373839;
+            font-size: 16px;
+            font-weight: 700;
+            line-height: 16px;
+          }
+          .awards {
+            color: #979899;
+            font-size: 13px;
+            line-height: 13px;
+            margin-top: 8px;
+          }
+        }
+      }
+      .score {
+        margin-left: auto;
+        .num {
+          color: #FD5A2F;
+          font-size: 13px;
+          line-height: 13px;
+        }
+        .name {
+          color: #676869;
+          font-size: 13px;
+          line-height: 13px;
+          margin-top: 5px ;
+        }
+      }
+    }
+    .rank-item:after {
+      position: absolute;
+      content: " ";
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: 1PX;
+      border-bottom: 1PX solid #F0F1F2;
+      color: #F0F1F2;
+      -webkit-transform-origin: 0 100%;
+      -ms-transform-origin: 0 100%;
+      transform-origin: 0 100%;
+      -webkit-transform: scaleY(0.5);
+      -ms-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
 }
\ No newline at end of file

nuxt.config.js

@@ -7,7 +7,7 @@ module.exports = {
     title: '云鹊奖2019',
     meta: [
       { charset: 'utf-8' },
-      // { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
       { name: 'screen-orientation', content: 'portrait' },
       { name: 'apple-mobile-web-app-capable', content: 'yes' },
       { name: 'format-detection', content: 'telephone=no' },

pages/awards-list/personal-rank.vue

 <template>
   <section class="personal-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>
   </section>
 </template>
@@ -12,6 +67,6 @@
   }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  @import "../../assets/style/awards-list/rank.less";
 </style>
\ No newline at end of file