bug

src/project/fd/AppAnswer/component/Ranking.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="ranking">
-    <div class="list-wrapper">
-      <div class="item my" @click="linkTo">
-        <span>{{ info['积分排行'] }}</span>
-        <div class="userinfo">
-          <image :src="user.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
-          <h3>{{ user.name }}</h3>
-        </div>
-        <i>{{ info['累计获取积分'] }}</i>
-        <image class="right" src="../img/right.png" />
-      </div>
+    <div class="list-data">
       <div class="item" v-for="(item, index) in list" :key="index">
-        <span>{{ index + 1 }}</span>
-        <div class="userinfo">
-          <image :src="item.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
-          <h3>{{ item.name }}</h3>
+        <div class="flex-left">
+          <div class="item-rank">
+            <img :src="imgList[index]" alt="" v-if="index < 3">
+            <span v-else>{{index+1}}</span>
+          </div>
+          <div class="item-user">
+            <img :src="item.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{item.name}}
+          </div>
+        </div>
+        <div class="flex-right">{{item.score}}</div>
+      </div>
+    </div>
+    <AiEmpty description="暂无数据" v-if="!list.length"/>
+    <div class="list-data footer">
+      <div class="item" @click="linkTo">
+        <div class="flex-left">
+          <div class="item-rank">
+            <span>{{ info['积分排行'] }}</span>
+          </div>
+          <div class="item-user">
+            <img :src="user.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{ user.name }}
+          </div>
+        </div>
+        <div class="flex-right">
+          <span>{{ info['累计获取积分'] }}</span>
+          <image class="right" src="../img/right.png" />
         </div>
-        <i>{{ item.score }}</i>
       </div>
-      <AiEmpty v-if="!list.length && isMore"></AiEmpty>
     </div>
   </div>
 </template>
@@ -34,6 +45,18 @@
           size: 100
         },
         isMore: false,
+        barStyle: {
+          'width': '24px',
+          'height': '3px',
+          'border-radius': '2px',
+          'bottom': '0px',
+          'background-color': '#3399FF'
+        },
+        activeStyle: {
+          'font-weight' : '400',
+          'color': '#000000'
+        },
+        imgList: [require('../img/top0.png'),require('../img/top1.png'),require('../img/top2.png')],
         info: {},
         list: []
       }
@@ -100,80 +123,91 @@
 
 <style scoped lang="scss">
   .ranking {
-    padding-bottom: 20px;
-
-    .list-wrapper {
-      margin: 0 32px;
+    min-height: 100%;
+    background-color: #F3F5F9;
+    padding-bottom: 32px;
 
+    .list-data {
+      padding: 32px;
+      margin-bottom: 80px;
       .item {
+        width: 100%;
         display: flex;
-        align-items: center;
         justify-content: space-between;
-        height: 80px;
+        padding: 24px 48px 24px 32px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 32px;
         margin-bottom: 16px;
-        padding: 0 32px;
-        background: #FFFFFF;
-        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
-        border-radius: 16px;
-
-        span {
-          width: 130px;
-          font-size: 34px;
-          color: #DDDDDD;
-          font-style: oblique;
-          font-weight: 600;
-        }
-
-        &:nth-of-type(1) span {
-          color: #2D7DFF;
-        }
-
-        &:nth-of-type(2) span {
-          color: #3BBC37;
-        }
-
-        &:nth-of-type(3) span {
-          color: #FF883C;
-        }
-
-        image {
-          width: 48px;
-          height: 48px;
-        }
-
-        .userinfo {
+        .flex-left {
           display: flex;
-          align-items: center;
-          flex: 1;
-
-          h3 {
-            margin-left: 16px;
-            font-size: 28px;
-            color: #333333;
+          .item-rank {
+            width: 152px;
+            img {
+              padding-top: 12px;
+              width: 56px;
+              height: 56px;
+              vertical-align: middle;
+            }
+            span {
+              line-height: 80px;
+              font-family: SFPro-SNaNpxiboldItalic;
+              font-weight: SemiboldItalic;
+              font-size: 40px;
+              color: #DDD;
+            }
+          }
+          .item-user {
+            line-height: 80px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            font-size: 32px;
+            color: #333;
+            img {
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
+              margin-right: 16px;
+              vertical-align: middle;
+            }
           }
         }
-
-        i {
-          width: 100px;
-          font-size: 32px;
-          color: #FFB94C;
-          font-style: normal;
+        .flex-right {
+          font-family: SFPro-SNaNpxibold;
           font-weight: 600;
-          text-align: center;
+          font-size: 36px;
+          color: #FF9343;
+          line-height: 42px;
+          padding-top: 20px;
         }
       }
     }
+    .footer {
+      padding: 0;
+      margin-bottom: 0;
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
 
-    .my {
-      padding-right: 16px!important;
+      .item {
+        border-radius: 0;
+        margin-bottom: 0;
+        padding: 24px 14px 24px 32px;
 
-      i {
-        width: auto!important;
+        &:active {
+          background: #eee;
+        }
+      }
+
+      .flex-right {
+        display: flex;
+        align-items: center;
       }
 
       .right {
-        width: 64px;
-        height: 64px;
+        width: 50px;
+        height: 50px;
       }
     }
   }