开发挑战记录

pages/pkPage/index.less

@@ -8,6 +8,8 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        margin-top: 20rpx;
+
         .title {
             position: relative;
             padding: 0px 60rpx;
@@ -17,9 +19,9 @@
         .title::before {
             position: absolute;
             left: 30rpx;
-            top: 0px;
+            top: 4rpx;
             width: 10rpx;
-            height: 100%;
+            height: 90%;
             background-color: #4CC4FF;
             content: '';
             border-radius: 50rpx;
@@ -28,9 +30,64 @@
         .scrollBox {
             height: 100%;
             margin-top: 20rpx;
+            padding: 0rpx 26rpx 60rpx;
+            box-sizing: border-box;
             border-top-left-radius: 20rpx;
             border-top-right-radius: 20rpx;
             background-color: white;
+
+            .record {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 32rpx 0rpx;
+                border-bottom: 2rpx solid #DDDDDD;
+
+                .record-left {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .rl-avatar {
+                        .avatar {
+                            width: 64rpx;
+                            height: 64rpx;
+                            border-radius: 50%;
+                            background-color: #e4e1e1;
+                        }
+                    }
+
+                    .rl-info {
+                        margin-left: 20rpx;
+
+                        .nickName {
+                            font-size: 30rpx;
+                        }
+
+                        .time {
+                            margin-top: 6rpx;
+                            font-size: 20rpx;
+                        }
+                    }
+                }
+
+                .record-right {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .score {
+                        font-size: 34rpx;
+                        color: #30C866;
+                    }
+
+                    .play {
+                        margin: 0rpx 10rpx 0rpx 26rpx;
+                        width: 40rpx;
+                        height: 36rpx;
+                    }
+                }
+            }
         }
     }
 }

pages/pkPage/index.wxml

@@ -4,8 +4,24 @@
     <!-- 挑战记录列表 -->
     <view class="pkRecord">
         <view class="title">挑战记录</view>
-        <scroll-view scroll-y="true" class="scrollBox">
-           
+        <scroll-view scroll-y="true" class="scrollBox" enhanced="true" show-scrollbar="{{false}}">
+            <view class="record" wx:for="{{20}}" wx:key="index">
+                <view class="record-left">
+                    <view class="rl-avatar">
+                        <image src="/static/contact.png" mode="" class="avatar" />
+                    </view>
+                    <view class="rl-info">
+                        <view class="nickName">叮当猫</view>
+                        <view class="time">2023-02-12 13:13</view>
+                    </view>
+                </view>
+                <view class="record-right">
+                    <view class="score">
+                        96分
+                    </view>
+                    <image src="/static/play.png" class="play" mode="" />
+                </view>
+            </view>
         </scroll-view>
     </view>
     <Comment id="comment" />

pages/pkPage/index.wxss

@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  margin-top: 20rpx;
 }
 .pkBox .pkRecord .title {
   position: relative;
@@ -17,9 +18,9 @@
 .pkBox .pkRecord .title::before {
   position: absolute;
   left: 30rpx;
-  top: 0px;
+  top: 4rpx;
   width: 10rpx;
-  height: 100%;
+  height: 90%;
   background-color: #4CC4FF;
   content: '';
   border-radius: 50rpx;
@@ -27,7 +28,51 @@
 .pkBox .pkRecord .scrollBox {
   height: 100%;
   margin-top: 20rpx;
+  padding: 0rpx 26rpx 60rpx;
+  box-sizing: border-box;
   border-top-left-radius: 20rpx;
   border-top-right-radius: 20rpx;
   background-color: white;
 }
+.pkBox .pkRecord .scrollBox .record {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 0rpx;
+  border-bottom: 2rpx solid #DDDDDD;
+}
+.pkBox .pkRecord .scrollBox .record .record-left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pkBox .pkRecord .scrollBox .record .record-left .rl-avatar .avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background-color: #e4e1e1;
+}
+.pkBox .pkRecord .scrollBox .record .record-left .rl-info {
+  margin-left: 20rpx;
+}
+.pkBox .pkRecord .scrollBox .record .record-left .rl-info .nickName {
+  font-size: 30rpx;
+}
+.pkBox .pkRecord .scrollBox .record .record-left .rl-info .time {
+  margin-top: 6rpx;
+  font-size: 20rpx;
+}
+.pkBox .pkRecord .scrollBox .record .record-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pkBox .pkRecord .scrollBox .record .record-right .score {
+  font-size: 34rpx;
+  color: #30C866;
+}
+.pkBox .pkRecord .scrollBox .record .record-right .play {
+  margin: 0rpx 10rpx 0rpx 26rpx;
+  width: 40rpx;
+  height: 36rpx;
+}

pages/reading/index.js

@@ -12,7 +12,7 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    console.log(options);
   },
 
   /**

pages/reading/index.less

@@ -0,0 +1 @@
+/* pages/reading/index.wxss */

pages/reading/index.wxss

@@ -1 +1 @@
-/* pages/reading/index.wxss */
+/* pages/reading/index.wxss */

project.private.config.json

@@ -11,8 +11,8 @@
       "list": [
         {
           "name": "",
-          "pathName": "pages/pkPage/index",
-          "query": "videoId=1671184041796866",
+          "pathName": "pages/reading/index",
+          "query": "videoId=1671442175069193",
           "launchMode": "default",
           "scene": null
         },