开发勋章榜页面

pages/medalStore/index.less

@@ -26,4 +26,48 @@
       font-size: 54rpx;
     }
   }
+
+  .body {
+    background-color: #F2F6FC;
+
+    .medalsBox {
+      width: 100%;
+      margin-bottom: 22rpx;
+      background-color: white;
+
+      .title {
+        padding: 25rpx 38rpx;
+        box-sizing: border-box;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #000;
+      }
+
+      .medalList {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .medal {
+          width: 33%;
+          margin-bottom: 30rpx;
+          text-align: center;
+
+          .medalImg {
+            width: 184rpx;
+            height: 169rpx;
+          }
+
+          .name {
+            display: inline-block;
+            text-align: center;
+            padding: 6rpx 40rpx;
+            font-size: 20rpx;
+            border-radius: 50rpx;
+            background-color: #FDD126;
+          }
+        }
+      }
+    }
+  }
 }

pages/medalStore/index.wxml

@@ -9,4 +9,15 @@
       5
     </view>
   </view>
+  <view class="body">
+    <view class="medalsBox" wx:for="{{4}}" wx:key="index">
+      <view class="title">签到勋章</view>
+      <view class="medalList">
+        <view class="medal" wx:for="{{5}}" wx:key="index">
+          <image src="/static/01.png" class="medalImg" />
+          <view class="name">首次签到</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>

pages/medalStore/index.wxss

@@ -19,3 +19,40 @@
 .medalStore .header .right {
   font-size: 54rpx;
 }
+.medalStore .body {
+  background-color: #F2F6FC;
+}
+.medalStore .body .medalsBox {
+  width: 100%;
+  margin-bottom: 22rpx;
+  background-color: white;
+}
+.medalStore .body .medalsBox .title {
+  padding: 25rpx 38rpx;
+  box-sizing: border-box;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #000;
+}
+.medalStore .body .medalsBox .medalList {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.medalStore .body .medalsBox .medalList .medal {
+  width: 33%;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+.medalStore .body .medalsBox .medalList .medal .medalImg {
+  width: 184rpx;
+  height: 169rpx;
+}
+.medalStore .body .medalsBox .medalList .medal .name {
+  display: inline-block;
+  text-align: center;
+  padding: 6rpx 40rpx;
+  font-size: 20rpx;
+  border-radius: 50rpx;
+  background-color: #FDD126;
+}