开发朗读赛人气榜

pages/match/index.less

@@ -8,30 +8,35 @@
   }
 
   .modelText {
+    position: relative;
     width: 724rpx;
     margin: 40rpx auto;
     border-radius: 20rpx;
+    padding-top: 40rpx;
     background-color: white;
 
     .header {
-      position: relative;
+      position: absolute;
       text-align: center;
+      top: -26rpx;
+      left: 0rpx;
+      right: 0rpx;
 
       .bg {
-        position: absolute;
-        top: -24rpx;
-        left: 0rpx;
-        right: 0rpx;
         margin: auto;
         width: 460rpx;
-        height: 90rpx;
+        height: 80rpx;
       }
 
       .text {
-        position: relative;
+        position: absolute;
+        left: 0rpx;
+        right: 0rpx;
+        top: 14rpx;
+        margin: auto;
         z-index: 2;
-        font-size: 36rpx;
-        color: #A0A0A0;
+        font-size: 34rpx;
+        color: white;
       }
     }
 
@@ -92,5 +97,92 @@
         border-top-left-radius: 50rpx;
       }
     }
+
+    .table {
+      padding: 10rpx 32rpx;
+      box-sizing: border-box;
+
+      .titleLine {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 36rpx;
+      }
+
+      .contentBox {
+        margin-top: 20rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .firstCol {
+          width: 70rpx;
+          text-align: center;
+          font-size: 38rpx;
+
+          .rankingImg {
+            width: 52rpx;
+            height: 60rpx;
+          }
+        }
+
+        .secondCol {
+          flex: 1;
+          margin: 0rpx 20rpx 0rpx 40rpx;
+          display: flex;
+          align-items: center;
+
+          .avatar {
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+          }
+
+          .userInfo {
+            margin-left: 20rpx;
+
+            .nickName {
+              font-size: 34rpx;
+              margin-bottom: 6rpx;
+            }
+
+            .date {
+              display: flex;
+              align-items: center;
+
+              view {
+                display: flex;
+                align-items: center;
+                margin-right: 10rpx;
+              }
+
+              .icon {
+                width: 26rpx;
+                height: 23rpx;
+              }
+
+              .num {
+                margin-left: 6rpx;
+                font-size: 20rpx;
+                color: #666666;
+              }
+            }
+          }
+        }
+
+        .threeCol {
+          width: 100rpx;
+          text-align: center;
+
+          .icon {
+            width: 25rpx;
+            height: 27rpx;
+          }
+          .num{
+            font-size: 30rpx;
+          }
+        }
+      }
+    }
   }
 }

pages/match/index.wxml

@@ -1,9 +1,10 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="matchBox">
   <image src="" class="headerImg" />
   <view class="modelText">
     <view class="header">
       <image src="/static/modelBg.png" class="bg" />
-      <view class="text">一年级朗读范文素材</view>
+      <view class="text">一年级 朗读范文素材</view>
     </view>
     <view class="tips">
       选择下面范文进行朗读
@@ -22,5 +23,42 @@
       <view class="switchBtn {{currentType?'currentBtn currentBtn-l':''}}" data-type='true'>人气榜TOP100</view>
       <view class="switchBtn {{!currentType?'currentBtn currentBtn-r':''}}" data-type='false'>我的参赛作品</view>
     </view>
+    <view class="table">
+      <view class="titleLine">
+        <view class="colTitle">排名</view>
+        <view class="colTitle">名称</view>
+        <view class="colTitle">人气值</view>
+      </view>
+      <view class="contentBox" wx:for="{{10}}" wx:key="index">
+        <view class="firstCol">
+          <image src="/static/1-1.png" class="rankingImg" wx:if="{{index<3}}" />
+          <text wx:else>{{index+1}}</text>
+        </view>
+        <view class="secondCol">
+          <image src="https://p3-passport.byteimg.com/img/mosaic-legacy/3793/3131589739~100x100.awebp" class="avatar" />
+          <view class="userInfo">
+            <view class="nickName">尼赫鲁吧唧布</view>
+            <view class="date">
+              <view>
+                <image src="/static/f.png" class="icon" />
+                <view class="num">{{filters.numFilter(10)}}</view>
+              </view>
+              <view>
+                <image src="/static/p.png" class="icon" />
+                <view class="num">{{filters.numFilter(10)}}</view>
+              </view>
+              <view>
+                <image src="/static/d.png" class="icon" />
+                <view class="num">{{filters.numFilter(10130)}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="threeCol">
+          <image src="/static/hot.png" class="icon" />
+          <view class="num">{{filters.numFilter(12310)}}</view>
+        </view>
+      </view>
+    </view>
   </view>
 </view>

pages/match/index.wxss

@@ -7,29 +7,34 @@
   background-color: #5DE0C0;
 }
 .matchBox .modelText {
+  position: relative;
   width: 724rpx;
   margin: 40rpx auto;
   border-radius: 20rpx;
+  padding-top: 40rpx;
   background-color: white;
 }
 .matchBox .modelText .header {
-  position: relative;
-  text-align: center;
-}
-.matchBox .modelText .header .bg {
   position: absolute;
-  top: -24rpx;
+  text-align: center;
+  top: -26rpx;
   left: 0rpx;
   right: 0rpx;
+}
+.matchBox .modelText .header .bg {
   margin: auto;
   width: 460rpx;
-  height: 90rpx;
+  height: 80rpx;
 }
 .matchBox .modelText .header .text {
-  position: relative;
+  position: absolute;
+  left: 0rpx;
+  right: 0rpx;
+  top: 14rpx;
+  margin: auto;
   z-index: 2;
-  font-size: 36rpx;
-  color: #A0A0A0;
+  font-size: 34rpx;
+  color: white;
 }
 .matchBox .modelText .tips {
   margin: 42rpx auto;
@@ -79,3 +84,75 @@
 .matchBox .rankList .switchBtns .currentBtn-r {
   border-top-left-radius: 50rpx;
 }
+.matchBox .rankList .table {
+  padding: 10rpx 32rpx;
+  box-sizing: border-box;
+}
+.matchBox .rankList .table .titleLine {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 36rpx;
+}
+.matchBox .rankList .table .contentBox {
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.matchBox .rankList .table .contentBox .firstCol {
+  width: 70rpx;
+  text-align: center;
+  font-size: 38rpx;
+}
+.matchBox .rankList .table .contentBox .firstCol .rankingImg {
+  width: 52rpx;
+  height: 60rpx;
+}
+.matchBox .rankList .table .contentBox .secondCol {
+  flex: 1;
+  margin: 0rpx 20rpx 0rpx 40rpx;
+  display: flex;
+  align-items: center;
+}
+.matchBox .rankList .table .contentBox .secondCol .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo {
+  margin-left: 20rpx;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo .nickName {
+  font-size: 34rpx;
+  margin-bottom: 6rpx;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo .date {
+  display: flex;
+  align-items: center;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo .date view {
+  display: flex;
+  align-items: center;
+  margin-right: 10rpx;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo .date .icon {
+  width: 26rpx;
+  height: 23rpx;
+}
+.matchBox .rankList .table .contentBox .secondCol .userInfo .date .num {
+  margin-left: 6rpx;
+  font-size: 20rpx;
+  color: #666666;
+}
+.matchBox .rankList .table .contentBox .threeCol {
+  width: 100rpx;
+  text-align: center;
+}
+.matchBox .rankList .table .contentBox .threeCol .icon {
+  width: 25rpx;
+  height: 27rpx;
+}
+.matchBox .rankList .table .contentBox .threeCol .num {
+  font-size: 30rpx;
+}