开发邀新榜

app.json

@@ -1,16 +1,16 @@
 {
   "pages": [
+    "pages/pkPage/index",
     "pages/index/index",
+    "pages/ranking/index",
     "pages/pkResult/index",
     "pages/userWorks/index",
-    "pages/ranking/index",
     "pages/works/index",
     "pages/collection/index",
     "pages/personal/index",
     "pages/childClassify/index",
     "pages/score/index",
     "pages/reading/index",
-    "pages/pkPage/index",
     "pages/my/index",
     "pages/editUser/index",
     "pages/notice/index",

pages/ranking/index.js

@@ -6,7 +6,8 @@ Page({
    */
   data: {
     //2：邀新榜，3：热播榜，4：挑战pk榜
-    rankingType: ''
+    rankingType: '',
+    mainColor:'#FF7E6C'
   },
 
   /**

pages/ranking/index.less

@@ -1,3 +1,192 @@
 .rankingBox {
-  .yxClass {}
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .podiumBox {
+    position: relative;
+    height: 362rpx;
+
+    .podiumContent {
+      width: 100%;
+      height: 100%;
+
+      .user {
+        position: absolute;
+        width: 150rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .avatar {
+          width: 90rpx;
+          height: 90rpx;
+        }
+
+        .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: 70rpx;
+        left: 312rpx;
+      }
+
+      .second {
+        top: 124rpx;
+        left: 118rpx;
+
+        .avatar {
+          width: 82rpx;
+          height: 82rpx;
+        }
+      }
+
+      .third {
+        top: 144rpx;
+        right: 102rpx;
+
+        .avatar {
+          width: 80rpx;
+          height: 80rpx;
+        }
+      }
+    }
+
+    .tips {
+      position: absolute;
+      right: 0px;
+      top: 10rpx;
+      padding: 6rpx 10rpx 6rpx 24rpx;
+      border-top-left-radius: 25rpx;
+      border-bottom-left-radius: 25rpx;
+      font-size: 26rpx;
+      color: white;
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+
+    .tips2 {
+      position: absolute;
+      right: 24rpx;
+      top: 80rpx;
+      padding: 10rpx 5rpx;
+      border-radius: 50%;
+      font-size: 26rpx;
+      background-color: white;
+      font-size: 18rpx;
+    }
+  }
+
+  .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;
+          }
+
+          .avatar {
+            margin: 0rpx 28rpx 0rpx 44rpx;
+            width: 78rpx;
+            height: 78rpx;
+            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;
+      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;
+    }
+  }
+}
+
+.invitation {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-1.jpg')no-repeat;
+  background-size: cover;
 }

pages/ranking/index.wxml

@@ -1,3 +1,57 @@
-<view class="rankingBox {{rankingType=='2'?'yxClass':''}}">
-
-</view>
+<view class="rankingBox">
+  <view class="podiumBox {{rankingType=='2'?'invitation':''}}">
+    <view class="tips">榜单说明</view>
+    <view class="tips2" style="color: {{mainColor}};">周榜</view>
+    <view class="podiumContent">
+      <view class="user first">
+        <image src="/static/tj2.png" class="avatar" />
+        <view class="iconBox">
+          <image src="/static/yx.png" class="icon" />
+          <view class="num">333</view>
+        </view>
+        <view class="nickName textOver">
+          淡定的小鱼人
+        </view>
+      </view>
+      <view class="user second">
+        <image src="/static/tj2.png" class="avatar" />
+        <view class="iconBox">
+          <image src="/static/yx.png" class="icon" />
+          <view class="num">333</view>
+        </view>
+        <view class="nickName textOver">
+          淡定的小鱼人
+        </view>
+      </view>
+      <view class="user third">
+        <image src="/static/tj2.png" class="avatar" />
+        <view class="iconBox">
+          <image src="/static/yx.png" class="icon" />
+          <view class="num">333</view>
+        </view>
+        <view class="nickName textOver">
+          淡定的小鱼人
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="podiumList">
+    <scroll-view scroll-y="true" enhanced="true" show-scrollbar="{{false}}" class="scrollBox">
+      <view class="row" wx:for="{{20}}" wx:key="index">
+        <view class="left">
+          <view class="num">4</view>
+          <image src="/static/tj2.png" class="avatar" />
+          <view class="nickName textOver">奥克斯</view>
+        </view>
+        <view class="right">
+          <image src="/static/yx.png" class="icon" />
+          <view class="num">333</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="footer">
+    <view class="left">我的排名<text>100+</text></view>
+    <view class="rigth">呼朋唤友来加热</view>
+  </view>
+</view>

pages/ranking/index.wxss

@@ -0,0 +1,162 @@
+.rankingBox {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.rankingBox .podiumBox {
+  position: relative;
+  height: 362rpx;
+}
+.rankingBox .podiumBox .podiumContent {
+  width: 100%;
+  height: 100%;
+}
+.rankingBox .podiumBox .podiumContent .user {
+  position: absolute;
+  width: 150rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.rankingBox .podiumBox .podiumContent .user .avatar {
+  width: 90rpx;
+  height: 90rpx;
+}
+.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: 70rpx;
+  left: 312rpx;
+}
+.rankingBox .podiumBox .podiumContent .second {
+  top: 124rpx;
+  left: 118rpx;
+}
+.rankingBox .podiumBox .podiumContent .second .avatar {
+  width: 82rpx;
+  height: 82rpx;
+}
+.rankingBox .podiumBox .podiumContent .third {
+  top: 144rpx;
+  right: 102rpx;
+}
+.rankingBox .podiumBox .podiumContent .third .avatar {
+  width: 80rpx;
+  height: 80rpx;
+}
+.rankingBox .podiumBox .tips {
+  position: absolute;
+  right: 0px;
+  top: 10rpx;
+  padding: 6rpx 10rpx 6rpx 24rpx;
+  border-top-left-radius: 25rpx;
+  border-bottom-left-radius: 25rpx;
+  font-size: 26rpx;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.rankingBox .podiumBox .tips2 {
+  position: absolute;
+  right: 24rpx;
+  top: 80rpx;
+  padding: 10rpx 5rpx;
+  border-radius: 50%;
+  font-size: 26rpx;
+  background-color: white;
+  font-size: 18rpx;
+}
+.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;
+}
+.rankingBox .podiumList .scrollBox .row .left .avatar {
+  margin: 0rpx 28rpx 0rpx 44rpx;
+  width: 78rpx;
+  height: 78rpx;
+  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;
+  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;
+}
+.invitation {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-1.jpg') no-repeat;
+  background-size: cover;
+}

project.config.json

@@ -0,0 +1,30 @@
+{
+  "appid": "wx8961a3e5512f307c",
+  "projectname": "%E6%9C%97%E8%AF%BB%E5%B0%8F%E5%92%96%E7%A7%80",
+  "compileType": "miniprogram",
+  "libVersion": "2.28.1",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "urlCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "compileHotReLoad": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

project.private.config.json

@@ -0,0 +1,44 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "",
+          "pathName": "pages/reading/index",
+          "query": "videoId=1610706272474934&readingType=pk",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/index/index",
+          "query": "uid=123",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/score/index",
+          "query": "detail={\"integrity\":12,\"tone\":50,\"accuracy\":8,\"fluency\":0,\"myOverall\":12,\"title\":\"秋天\"}",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/pkPage/index",
+          "query": "videoId=1615388015564598",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/ranking/index",
+          "query": "type=2",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  }
+}