开发排行榜页面

pages/activity/index.js

@@ -52,6 +52,29 @@ Page({
             activityList: res
         })
     },
+    activityEvent({
+        currentTarget
+    }) {
+        let {
+            type,
+            id,
+            title,
+            explain
+        } = currentTarget.dataset.info
+        wx.navigateTo({
+            url: `/pages/ranking/index?id=${id}&type=${type}`,
+        })
+    },
+    jumpUserInfo({
+        currentTarget
+    }) {
+        if (!currentTarget.dataset.uid) {
+            return
+        }
+        wx.navigateTo({
+            url: `/pages/personal/index?uid=${currentTarget.dataset.uid}&type=user`,
+        })
+    },
     async getLocUserInfo() {
         this.storeBindings = createStoreBindings(this, {
             store,

pages/ranking copy/index.js

@@ -0,0 +1,85 @@
+import {
+    getRankingData
+} from '~/api/global'
+import event from '~/mixins/event'
+Page({
+    behaviors: [event],
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        ranking: '',
+        userList: [],
+        currentWeek: 0,
+        weekBegin: '',
+        weekEnd: '',
+        //2：邀新榜，3：热播榜，4：挑战pk榜
+        rankingType: '',
+        icon: '',
+        podiumBoxBg: '',
+        color: '',
+        explain: ''
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.setData({
+            rankingType: options.type,
+            icon: options.type == '2' ? '/static/yx.png' : options.type == '3' ? '/static/play.png' : '/static/win.png',
+            podiumBoxBg: options.type == '2' ? 'invitation' : options.type == '3' ? 'hot' : 'pk',
+            color: options.type == '2' ? '#2DCE66' : options.type == '3' ? '#FF7E6C' : '#967DFF',
+        })
+
+        wx.setNavigationBarColor({
+            frontColor: '#ffffff',
+            backgroundColor: options.type == '2' ? '#2DCE66' : options.type == '3' ? '#FF7E6C' : '#967DFF',
+        })
+        this.getRankingData(options.id)
+    },
+    async getRankingData(id) {
+        let {
+            ranking,
+            userList,
+            currentWeek,
+            weekBegin,
+            weekEnd,
+            title,
+            explain
+        } = await getRankingData(id)
+        wx.setNavigationBarTitle({
+            title
+        })
+        this.setData({
+            ranking,
+            userList,
+            currentWeek,
+            weekBegin,
+            weekEnd,
+            explain
+        })
+    },
+    jumpIndex() {
+        wx.switchTab({
+            url: '/pages/index/index',
+        })
+    },
+    jumpUserInfo({
+        currentTarget
+    }) {
+        if (!currentTarget.dataset.uid) {
+            return
+        }
+        wx.navigateTo({
+            url: `/pages/personal/index?uid=${currentTarget.dataset.uid}&type=${this.data.rankingType==4?'pk':'user'}`,
+        })
+    },
+    onShareAppMessage() {
+        return {
+            title: this.data.rankingType == 3 ? '我要上热门，就差你的一个赞，快来帮帮我吧！' : '这个小程序太赞了！孩子朗读能力蹭蹭上涨，推荐你试试！',
+            path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+            imageUrl: this.data.rankingType == 3 ? 'http://reader-wx.ai160.com/images/reader/v3/375-300-3.jpg' : 'http://reader-wx.ai160.com/images/reader/v3/375-300-2.jpg'
+        }
+    }
+})

pages/ranking copy/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "排行榜"
+}

pages/ranking copy/index.less

@@ -0,0 +1,222 @@
+.rankingBox {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .podiumBox {
+    position: relative;
+    height: 510rpx;
+    background-size: cover;
+
+    .dateBox {
+      position: relative;
+      margin-top: 56rpx;
+      font-size: 28rpx;
+      text-align: center;
+      color: white;
+
+      .dataTitle {
+        position: absolute;
+        left: 194rpx;
+      }
+
+      .interval {
+        position: absolute;
+        left: 314rpx;
+      }
+    }
+
+    .podiumContent {
+      position: absolute;
+      top: 222rpx;
+      width: 100%;
+
+      .user {
+        position: absolute;
+        width: 150rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .avatar {
+          width: 92rpx;
+          height: 92rpx;
+          border-radius: 50%;
+        }
+
+        .iconBox {
+          margin: 8rpx 0rpx 4rpx;
+          display: flex;
+          align-items: center;
+
+          .icon {
+            width: 30rpx;
+            height: 30rpx;
+          }
+
+          .num {
+            margin-left: 6rpx;
+            color: white;
+            font-size: 28rpx;
+          }
+        }
+
+        .nickName {
+          text-align: center;
+          font-size: 24rpx;
+          color: white;
+          width: 100%;
+        }
+      }
+
+      .first {
+        top: 0rpx;
+        left: 304rpx;
+      }
+
+      .second {
+        top: 53rpx;
+        left: 114rpx;
+
+        .avatar {
+          width: 84rpx;
+          height: 84rpx;
+        }
+      }
+
+      .third {
+        top: 72rpx;
+        right: 112rpx;
+
+        .avatar {
+          width: 84rpx;
+          height: 84rpx;
+        }
+      }
+    }
+  }
+
+  .podiumList {
+    flex: 1;
+    overflow: hidden;
+
+    .scrollBox {
+      height: 100%;
+      padding: 0rpx 30rpx;
+      box-sizing: border-box;
+
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 23rpx 0rpx;
+        border-bottom: 1rpx solid #ddd;
+
+        .left {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .num {
+            font-size: 37rpx;
+            width: 28rpx;
+          }
+
+          .avatar {
+            margin: 0rpx 28rpx 0rpx 44rpx;
+            width: 78rpx;
+            height: 78rpx;
+            background-color: #EBEBEB;
+            border-radius: 50%;
+          }
+
+          .nickName {
+            font-size: 34rpx;
+            width: 240rpx;
+          }
+        }
+
+        .right {
+          text-align: center;
+
+          .icon {
+            width: 30rpx;
+            height: 30rpx;
+          }
+
+          .num {
+            font-size: 32rpx;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    padding: 26rpx 60rpx 30rpx 90rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: white;
+    box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.50);
+
+    .left {
+      font-size: 26rpx;
+      font-weight: bold;
+
+      text {
+        color: #4AC4FF;
+        font-size: 38rpx;
+        margin-left: 10rpx;
+      }
+    }
+
+    .rigth {
+      padding: 12rpx 34rpx;
+      padding-left: 26rpx;
+      border-radius: 50rpx;
+      background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+      box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+      color: white;
+      font-size: 26rpx;
+
+      .share {
+        width: 26rpx;
+        height: 24rpx;
+        margin-right: 14rpx;
+      }
+    }
+  }
+}
+
+.invitation {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg')no-repeat;
+
+  .tips2 {
+    color: #2DCE66;
+  }
+}
+
+.hot {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg')no-repeat;
+
+  .tips2 {
+    color: #FF7F6C;
+  }
+}
+
+.pk {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg')no-repeat;
+
+  .tips2 {
+    color: #967DFF;
+  }
+}
+
+.iconPk {
+  width: 42rpx !important;
+}

pages/ranking copy/index.wxml

@@ -0,0 +1,67 @@
+<view class="rankingBox">
+  <view class="podiumBox {{podiumBoxBg}}">
+    <view class="dateBox">
+      <text class="dataTitle" style="color:{{color}}">第{{currentWeek}}期</text>
+      <text class="interval">{{weekBegin+'-'+weekEnd}}</text>
+    </view>
+    <view class="podiumContent">
+      <view class="user first">
+        <image src="{{userList[0].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[0].uid}}' />
+        <view class="iconBox">
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+          <view class="num">{{userList[0].count}}</view>
+        </view>
+        <view class="nickName textOver">
+          {{userList[0].nickName||userList[0].eid}}
+        </view>
+      </view>
+      <view class="user second">
+        <image src="{{userList[1].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[1].uid}}' />
+        <view class="iconBox">
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+          <view class="num">{{userList[1].count}}</view>
+        </view>
+        <view class="nickName textOver">
+          {{userList[1].nickName||userList[1].eid}}
+        </view>
+      </view>
+      <view class="user third">
+        <image src="{{userList[2].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[2].uid}}' />
+        <view class="iconBox">
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+          <view class="num">{{userList[2].count}}</view>
+        </view>
+        <view class="nickName textOver">
+          {{userList[2].nickName||userList[2].eid}}
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="podiumList">
+    <scroll-view scroll-y="true" enhanced="true" show-scrollbar="{{false}}" class="scrollBox">
+      <view class="row" wx:for="{{userList.length-3}}" wx:key="index">
+        <view class="left">
+          <view class="num">{{index+4}}</view>
+          <image src="{{userList[index+3].avatar}}" class="avatar" bindtap="jumpUserInfo"
+            data-uid='{{userList[index+3].uid}}' />
+          <view class="nickName textOver">
+            {{userList[index+3].nickName||userList[index+3].eid}}
+          </view>
+        </view>
+        <view class="right">
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+          <view class="num"> {{userList[index+3].count}}</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="footer">
+    <view class="left">我的排名<text>{{ranking?ranking:'100+'}}</text></view>
+    <button class="resetBtn rigth" open-type="share" wx:if="{{rankingType!=4}}">
+      <image src="/static/forward.png" class="share" />呼朋唤友来加热
+    </button>
+    <button class="resetBtn rigth" wx:else bindtap="jumpIndex">
+      我要冲榜
+    </button>
+  </view>
+</view>

pages/ranking copy/index.wxss

@@ -0,0 +1,184 @@
+.rankingBox {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.rankingBox .podiumBox {
+  position: relative;
+  height: 510rpx;
+  background-size: cover;
+}
+.rankingBox .podiumBox .dateBox {
+  position: relative;
+  margin-top: 56rpx;
+  font-size: 28rpx;
+  text-align: center;
+  color: white;
+}
+.rankingBox .podiumBox .dateBox .dataTitle {
+  position: absolute;
+  left: 194rpx;
+}
+.rankingBox .podiumBox .dateBox .interval {
+  position: absolute;
+  left: 314rpx;
+}
+.rankingBox .podiumBox .podiumContent {
+  position: absolute;
+  top: 222rpx;
+  width: 100%;
+}
+.rankingBox .podiumBox .podiumContent .user {
+  position: absolute;
+  width: 150rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.rankingBox .podiumBox .podiumContent .user .avatar {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+}
+.rankingBox .podiumBox .podiumContent .user .iconBox {
+  margin: 8rpx 0rpx 4rpx;
+  display: flex;
+  align-items: center;
+}
+.rankingBox .podiumBox .podiumContent .user .iconBox .icon {
+  width: 30rpx;
+  height: 30rpx;
+}
+.rankingBox .podiumBox .podiumContent .user .iconBox .num {
+  margin-left: 6rpx;
+  color: white;
+  font-size: 28rpx;
+}
+.rankingBox .podiumBox .podiumContent .user .nickName {
+  text-align: center;
+  font-size: 24rpx;
+  color: white;
+  width: 100%;
+}
+.rankingBox .podiumBox .podiumContent .first {
+  top: 0rpx;
+  left: 304rpx;
+}
+.rankingBox .podiumBox .podiumContent .second {
+  top: 53rpx;
+  left: 114rpx;
+}
+.rankingBox .podiumBox .podiumContent .second .avatar {
+  width: 84rpx;
+  height: 84rpx;
+}
+.rankingBox .podiumBox .podiumContent .third {
+  top: 72rpx;
+  right: 112rpx;
+}
+.rankingBox .podiumBox .podiumContent .third .avatar {
+  width: 84rpx;
+  height: 84rpx;
+}
+.rankingBox .podiumList {
+  flex: 1;
+  overflow: hidden;
+}
+.rankingBox .podiumList .scrollBox {
+  height: 100%;
+  padding: 0rpx 30rpx;
+  box-sizing: border-box;
+}
+.rankingBox .podiumList .scrollBox .row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 23rpx 0rpx;
+  border-bottom: 1rpx solid #ddd;
+}
+.rankingBox .podiumList .scrollBox .row .left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rankingBox .podiumList .scrollBox .row .left .num {
+  font-size: 37rpx;
+  width: 28rpx;
+}
+.rankingBox .podiumList .scrollBox .row .left .avatar {
+  margin: 0rpx 28rpx 0rpx 44rpx;
+  width: 78rpx;
+  height: 78rpx;
+  background-color: #EBEBEB;
+  border-radius: 50%;
+}
+.rankingBox .podiumList .scrollBox .row .left .nickName {
+  font-size: 34rpx;
+  width: 240rpx;
+}
+.rankingBox .podiumList .scrollBox .row .right {
+  text-align: center;
+}
+.rankingBox .podiumList .scrollBox .row .right .icon {
+  width: 30rpx;
+  height: 30rpx;
+}
+.rankingBox .podiumList .scrollBox .row .right .num {
+  font-size: 32rpx;
+  color: #666;
+}
+.rankingBox .footer {
+  width: 100%;
+  padding: 26rpx 60rpx 30rpx 90rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.5);
+}
+.rankingBox .footer .left {
+  font-size: 26rpx;
+  font-weight: bold;
+}
+.rankingBox .footer .left text {
+  color: #4AC4FF;
+  font-size: 38rpx;
+  margin-left: 10rpx;
+}
+.rankingBox .footer .rigth {
+  padding: 12rpx 34rpx;
+  padding-left: 26rpx;
+  border-radius: 50rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+  color: white;
+  font-size: 26rpx;
+}
+.rankingBox .footer .rigth .share {
+  width: 26rpx;
+  height: 24rpx;
+  margin-right: 14rpx;
+}
+.invitation {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg') no-repeat;
+}
+.invitation .tips2 {
+  color: #2DCE66;
+}
+.hot {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg') no-repeat;
+}
+.hot .tips2 {
+  color: #FF7F6C;
+}
+.pk {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg') no-repeat;
+}
+.pk .tips2 {
+  color: #967DFF;
+}
+.iconPk {
+  width: 42rpx !important;
+}

pages/ranking/index.js

@@ -10,9 +10,6 @@ Page({
     data: {
         ranking: '',
         userList: [],
-        currentWeek: 0,
-        weekBegin: '',
-        weekEnd: '',
         //2：邀新榜，3：热播榜，4：挑战pk榜
         rankingType: '',
         icon: '',
@@ -42,9 +39,6 @@ Page({
         let {
             ranking,
             userList,
-            currentWeek,
-            weekBegin,
-            weekEnd,
             title,
             explain
         } = await getRankingData(id)
@@ -54,9 +48,6 @@ Page({
         this.setData({
             ranking,
             userList,
-            currentWeek,
-            weekBegin,
-            weekEnd,
             explain
         })
     },

pages/ranking/index.less

@@ -1,222 +1,205 @@
 .rankingBox {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  .podiumBox {
-    position: relative;
-    height: 510rpx;
-    background-size: cover;
-
-    .dateBox {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  
+    .podiumBox {
       position: relative;
-      margin-top: 56rpx;
-      font-size: 28rpx;
-      text-align: center;
-      color: white;
-
-      .dataTitle {
-        position: absolute;
-        left: 194rpx;
-      }
-
-      .interval {
-        position: absolute;
-        left: 314rpx;
-      }
-    }
-
-    .podiumContent {
-      position: absolute;
-      top: 222rpx;
-      width: 100%;
-
-      .user {
+      height: 510rpx;
+      background-size: cover;
+  
+  
+      .podiumContent {
         position: absolute;
-        width: 150rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .avatar {
-          width: 92rpx;
-          height: 92rpx;
-          border-radius: 50%;
-        }
-
-        .iconBox {
-          margin: 8rpx 0rpx 4rpx;
+        top: 222rpx;
+        width: 100%;
+  
+        .user {
+          position: absolute;
+          width: 150rpx;
           display: flex;
+          flex-direction: column;
           align-items: center;
-
-          .icon {
-            width: 30rpx;
-            height: 30rpx;
+  
+          .avatar {
+            width: 92rpx;
+            height: 92rpx;
+            border-radius: 50%;
           }
-
-          .num {
-            margin-left: 6rpx;
+  
+          .iconBox {
+            margin: 8rpx 0rpx 4rpx;
+            display: flex;
+            align-items: center;
+  
+            .icon {
+              width: 30rpx;
+              height: 30rpx;
+            }
+  
+            .num {
+              margin-left: 6rpx;
+              color: white;
+              font-size: 28rpx;
+            }
+          }
+  
+          .nickName {
+            text-align: center;
+            font-size: 24rpx;
             color: white;
-            font-size: 28rpx;
+            width: 100%;
           }
         }
-
-        .nickName {
-          text-align: center;
-          font-size: 24rpx;
-          color: white;
-          width: 100%;
+  
+        .first {
+          top: 0rpx;
+          left: 304rpx;
         }
-      }
-
-      .first {
-        top: 0rpx;
-        left: 304rpx;
-      }
-
-      .second {
-        top: 53rpx;
-        left: 114rpx;
-
-        .avatar {
-          width: 84rpx;
-          height: 84rpx;
+  
+        .second {
+          top: 53rpx;
+          left: 114rpx;
+  
+          .avatar {
+            width: 84rpx;
+            height: 84rpx;
+          }
         }
-      }
-
-      .third {
-        top: 72rpx;
-        right: 112rpx;
-
-        .avatar {
-          width: 84rpx;
-          height: 84rpx;
+  
+        .third {
+          top: 72rpx;
+          right: 112rpx;
+  
+          .avatar {
+            width: 84rpx;
+            height: 84rpx;
+          }
         }
       }
     }
-  }
-
-  .podiumList {
-    flex: 1;
-    overflow: hidden;
-
-    .scrollBox {
-      height: 100%;
-      padding: 0rpx 30rpx;
-      box-sizing: border-box;
-
-      .row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 23rpx 0rpx;
-        border-bottom: 1rpx solid #ddd;
-
-        .left {
+  
+    .podiumList {
+      flex: 1;
+      overflow: hidden;
+  
+      .scrollBox {
+        height: 100%;
+        padding: 0rpx 30rpx;
+        box-sizing: border-box;
+  
+        .row {
           display: flex;
           align-items: center;
           justify-content: space-between;
-
-          .num {
-            font-size: 37rpx;
-            width: 28rpx;
-          }
-
-          .avatar {
-            margin: 0rpx 28rpx 0rpx 44rpx;
-            width: 78rpx;
-            height: 78rpx;
-            background-color: #EBEBEB;
-            border-radius: 50%;
+          padding: 23rpx 0rpx;
+          border-bottom: 1rpx solid #ddd;
+  
+          .left {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+  
+            .num {
+              font-size: 37rpx;
+              width: 28rpx;
+            }
+  
+            .avatar {
+              margin: 0rpx 28rpx 0rpx 44rpx;
+              width: 78rpx;
+              height: 78rpx;
+              background-color: #EBEBEB;
+              border-radius: 50%;
+            }
+  
+            .nickName {
+              font-size: 34rpx;
+              width: 240rpx;
+            }
           }
-
-          .nickName {
-            font-size: 34rpx;
-            width: 240rpx;
-          }
-        }
-
-        .right {
-          text-align: center;
-
-          .icon {
-            width: 30rpx;
-            height: 30rpx;
-          }
-
-          .num {
-            font-size: 32rpx;
-            color: #666;
+  
+          .right {
+            text-align: center;
+  
+            .icon {
+              width: 30rpx;
+              height: 30rpx;
+            }
+  
+            .num {
+              font-size: 32rpx;
+              color: #666;
+            }
           }
         }
       }
     }
-  }
-
-  .footer {
-    width: 100%;
-    padding: 26rpx 60rpx 30rpx 90rpx;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: white;
-    box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.50);
-
-    .left {
-      font-size: 26rpx;
-      font-weight: bold;
-
-      text {
-        color: #4AC4FF;
-        font-size: 38rpx;
-        margin-left: 10rpx;
+  
+    .footer {
+      width: 100%;
+      padding: 26rpx 60rpx 30rpx 90rpx;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: white;
+      box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.50);
+  
+      .left {
+        font-size: 26rpx;
+        font-weight: bold;
+  
+        text {
+          color: #4AC4FF;
+          font-size: 38rpx;
+          margin-left: 10rpx;
+        }
       }
-    }
-
-    .rigth {
-      padding: 12rpx 34rpx;
-      padding-left: 26rpx;
-      border-radius: 50rpx;
-      background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
-      box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
-      color: white;
-      font-size: 26rpx;
-
-      .share {
-        width: 26rpx;
-        height: 24rpx;
-        margin-right: 14rpx;
+  
+      .rigth {
+        padding: 12rpx 34rpx;
+        padding-left: 26rpx;
+        border-radius: 50rpx;
+        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+        color: white;
+        font-size: 26rpx;
+  
+        .share {
+          width: 26rpx;
+          height: 24rpx;
+          margin-right: 14rpx;
+        }
       }
     }
   }
-}
-
-.invitation {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg')no-repeat;
-
-  .tips2 {
-    color: #2DCE66;
+  
+  .invitation {
+    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg')no-repeat;
+  
+    .tips2 {
+      color: #2DCE66;
+    }
   }
-}
-
-.hot {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg')no-repeat;
-
-  .tips2 {
-    color: #FF7F6C;
+  
+  .hot {
+    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg')no-repeat;
+  
+    .tips2 {
+      color: #FF7F6C;
+    }
   }
-}
-
-.pk {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg')no-repeat;
-
-  .tips2 {
-    color: #967DFF;
+  
+  .pk {
+    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg')no-repeat;
+  
+    .tips2 {
+      color: #967DFF;
+    }
   }
-}
-
-.iconPk {
-  width: 42rpx !important;
-}
+  
+  .iconPk {
+    width: 42rpx !important;
+  }

pages/ranking/index.wxml

@@ -1,67 +1,66 @@
 <view class="rankingBox">
-  <view class="podiumBox {{podiumBoxBg}}">
-    <view class="dateBox">
-      <text class="dataTitle" style="color:{{color}}">第{{currentWeek}}期</text>
-      <text class="interval">{{weekBegin+'-'+weekEnd}}</text>
-    </view>
-    <view class="podiumContent">
-      <view class="user first">
-        <image src="{{userList[0].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[0].uid}}' />
-        <view class="iconBox">
-          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
-          <view class="num">{{userList[0].count}}</view>
-        </view>
-        <view class="nickName textOver">
-          {{userList[0].nickName||userList[0].eid}}
-        </view>
-      </view>
-      <view class="user second">
-        <image src="{{userList[1].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[1].uid}}' />
-        <view class="iconBox">
-          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
-          <view class="num">{{userList[1].count}}</view>
-        </view>
-        <view class="nickName textOver">
-          {{userList[1].nickName||userList[1].eid}}
-        </view>
-      </view>
-      <view class="user third">
-        <image src="{{userList[2].avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{userList[2].uid}}' />
-        <view class="iconBox">
-          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
-          <view class="num">{{userList[2].count}}</view>
+    <view class="podiumBox {{podiumBoxBg}}">
+        <view class="podiumContent">
+            <view class="user first">
+                <image src="{{userList[0].avatar}}" class="avatar" bindtap="jumpUserInfo"
+                    data-uid='{{userList[0].uid}}' />
+                <view class="iconBox">
+                    <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+                    <view class="num">{{userList[0].count}}</view>
+                </view>
+                <view class="nickName textOver">
+                    {{userList[0].nickName||userList[0].eid}}
+                </view>
+            </view>
+            <view class="user second">
+                <image src="{{userList[1].avatar}}" class="avatar" bindtap="jumpUserInfo"
+                    data-uid='{{userList[1].uid}}' />
+                <view class="iconBox">
+                    <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+                    <view class="num">{{userList[1].count}}</view>
+                </view>
+                <view class="nickName textOver">
+                    {{userList[1].nickName||userList[1].eid}}
+                </view>
+            </view>
+            <view class="user third">
+                <image src="{{userList[2].avatar}}" class="avatar" bindtap="jumpUserInfo"
+                    data-uid='{{userList[2].uid}}' />
+                <view class="iconBox">
+                    <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+                    <view class="num">{{userList[2].count}}</view>
+                </view>
+                <view class="nickName textOver">
+                    {{userList[2].nickName||userList[2].eid}}
+                </view>
+            </view>
         </view>
-        <view class="nickName textOver">
-          {{userList[2].nickName||userList[2].eid}}
-        </view>
-      </view>
     </view>
-  </view>
-  <view class="podiumList">
-    <scroll-view scroll-y="true" enhanced="true" show-scrollbar="{{false}}" class="scrollBox">
-      <view class="row" wx:for="{{userList.length-3}}" wx:key="index">
-        <view class="left">
-          <view class="num">{{index+4}}</view>
-          <image src="{{userList[index+3].avatar}}" class="avatar" bindtap="jumpUserInfo"
-            data-uid='{{userList[index+3].uid}}' />
-          <view class="nickName textOver">
-            {{userList[index+3].nickName||userList[index+3].eid}}
-          </view>
-        </view>
-        <view class="right">
-          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
-          <view class="num"> {{userList[index+3].count}}</view>
-        </view>
-      </view>
-    </scroll-view>
-  </view>
-  <view class="footer">
-    <view class="left">我的排名<text>{{ranking?ranking:'100+'}}</text></view>
-    <button class="resetBtn rigth" open-type="share" wx:if="{{rankingType!=4}}">
-      <image src="/static/forward.png" class="share" />呼朋唤友来加热
-    </button>
-    <button class="resetBtn rigth" wx:else bindtap="jumpIndex">
-      我要冲榜
-    </button>
-  </view>
+    <view class="podiumList">
+        <scroll-view scroll-y="true" enhanced="true" show-scrollbar="{{false}}" class="scrollBox">
+            <view class="row" wx:for="{{userList.length-3}}" wx:key="index">
+                <view class="left">
+                    <view class="num">{{index+4}}</view>
+                    <image src="{{userList[index+3].avatar}}" class="avatar" bindtap="jumpUserInfo"
+                        data-uid='{{userList[index+3].uid}}' />
+                    <view class="nickName textOver">
+                        {{userList[index+3].nickName||userList[index+3].eid}}
+                    </view>
+                </view>
+                <view class="right">
+                    <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
+                    <view class="num"> {{userList[index+3].count}}</view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+    <view class="footer">
+        <view class="left">我的排名<text>{{ranking?ranking:'100+'}}</text></view>
+        <button class="resetBtn rigth" open-type="share" wx:if="{{rankingType!=4}}">
+            <image src="/static/forward.png" class="share" />呼朋唤友来加热
+        </button>
+        <button class="resetBtn rigth" wx:else bindtap="jumpIndex">
+            我要冲榜
+        </button>
+    </view>
 </view>

pages/ranking/index.wxss

@@ -9,21 +9,6 @@
   height: 510rpx;
   background-size: cover;
 }
-.rankingBox .podiumBox .dateBox {
-  position: relative;
-  margin-top: 56rpx;
-  font-size: 28rpx;
-  text-align: center;
-  color: white;
-}
-.rankingBox .podiumBox .dateBox .dataTitle {
-  position: absolute;
-  left: 194rpx;
-}
-.rankingBox .podiumBox .dateBox .interval {
-  position: absolute;
-  left: 314rpx;
-}
 .rankingBox .podiumBox .podiumContent {
   position: absolute;
   top: 222rpx;