昨日获奖名单静态页面

components/normal-header.vue

@@ -4,6 +4,7 @@
     <header class="header-container">
       <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
       {{title}}
+      <div class="btn-right" v-if="rightText">{{rightText}}</div>
     </header>
   </section>
 </template>
@@ -18,6 +19,12 @@
           return ''
         }
       },
+      rightText: {
+        type: String,
+        default: function () {
+          return ''
+        }
+      },
       backType: {
         type: Number,
         default: function () {
@@ -69,15 +76,29 @@
       background: #ffffff;
       color: #333333;
       font-size: 18px;
-      display: flex;
-      align-items: center;
+      /*display: flex;
+      align-items: center;*/
       line-height: 44Px;
-
+      text-align: center;
+      position: relative;
       img {
+        display: block;
         width: 25px;
         height: 25px;
-        margin-left: 15px;
-        margin-right: 111.5px;
+        position: absolute;
+        left: 13px;
+        top: 9px
+      }
+     /* .title {
+        margin: 0 auto;
+      }*/
+      .btn-right {
+        position: absolute;
+        right: 14.5px;
+        bottom: 13px;
+        font-size: 13px;
+        line-height: 14px;
+        color: #373839;
       }
     }
   }

pages/yesterday-prize/index.less

+.yesterday-prize-wrap {
+  .prize-list {
+    padding-left: 25px ;
+    .item {
+      display: flex;
+      align-items: center;
+      // padding: 21px 0;
+      .ranking-icon {
+        width: 25px;
+        height: 30px;
+      }
+      .item-right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        position: relative;
+        padding: 21px 15px 21px 20px;
+        margin-left: 5px;
+        .icon-num {
+          width: 25px;
+          color: #373839;
+          font-size: 15px;
+          font-weight: 700;
+          text-align: center;
+        }
+        .doctor-photo {
+          width: 35px;
+          height: 35px;
+          border-radius: 100%;
+        }
+        .doctor-info {
+          margin-left: 10px;
+          .name {
+            color: #333333;
+            font-size: 16px;
+            font-weight: 700;
+            width: 130px;
+            line-height: 16px;
+          }
+          .grade {
+            font-size: 13px;
+            color: #979899;
+            line-height: 13px;
+            margin-top: 8px;
+            span {
+              color: #FD6239;
+            }
+          }
+        }
+        .awards {
+          color: #373839;
+          font-weight: 700;
+          font-size: 13px;
+          margin-left: auto;
+        }
+      }
+      .item-right: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);
+      }
+    }
+
+  }
+  .footer-btn {
+    width: 100%;
+    height: 40px;
+    padding: 5px 0;
+    box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
+    position: fixed;
+    bottom: 0;
+    .btn {
+      width: 345px;
+      height: 40px;
+      margin: 0 auto;
+      line-height: 40px;
+      text-align: center;
+      background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
+      border-radius: 20px;
+      color: #FFFFFF;
+      font-weight: 700;
+      font-size: 15px;
+    }
+  }
+}
\ No newline at end of file

pages/yesterday-prize/index.vue

+<template>
+  <section class="yesterday-prize-wrap">
+    <normal-header
+      :title="title"
+      :rightText="rightText"
+      :barHeight="barHeight"
+      :barColor="barColor"
+      :backType="1">
+    </normal-header>
+    <div class="prize-list" :style="{ marginTop: `${44+barHeight}Px`}">
+      <div class="item">
+        <img src="~/assets/img/person-ranking/icon-copper.png" alt="" class="ranking-icon">
+        <div class="item-right">
+          <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
+          <div class="doctor-info">
+            <p class="name">张医生</p>
+            <p class="grade">昨日勤奋分:<span>1234</span></p>
+          </div>
+          <p class="awards">小米电视机1台</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-btn">
+      <div class="btn">今日我要拿奖</div>
+    </div>
+  </section>
+</template>
+
+<script>
+  import NormalHeader from '@/components/normal-header'
+  export default {
+    name: "index",
+    components: {
+      NormalHeader
+    },
+    data() {
+      return {
+        showPop: false,
+        title: '昨日获奖名单',
+        barHeight: 0,
+        barColor: '#fff',
+        rightText: '如何领奖'
+      };
+    },
+    mounted() {
+
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+  @import 'index.less';
+</style>
\ No newline at end of file