statistics page

nova-werun/pages/home/statistics/index.less

@@ -155,4 +155,184 @@
         background-color: aqua;
     }
 
+}
+.all2{
+    width: 100vw;
+    padding-top: 20rpx;
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+    .card1{
+        width: 100%;
+        height: 360rpx;
+        padding: 20rpx;
+        border: solid black 2px;
+        border-radius: 20rpx;
+        .card1-title{
+            font-size: 32rpx;
+            display: flex;
+            view{
+                font-size: 28rpx;
+                margin-right: 10rpx;
+            }
+        }
+        .card1-in{
+            margin-top: 5rpx;
+            font-size: 28rpx;
+        }
+        .card1-card{
+            width: 100%;
+            height:70rpx;
+            display: flex;
+            align-items: flex-end;
+            margin-top: 20rpx;
+            margin-bottom: 20rpx;
+            .card1card-number{
+                font-size: 60rpx;
+            }
+            .card1card-text{
+                font-size: 28rpx;
+                margin-bottom: 8rpx;
+                margin-left: 10rpx;
+            }
+        }
+        .card1-card2{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30rpx;
+            .card1-c2c{
+                font-size: 34rpx;
+                padding-left: 10rpx;
+                padding-right: 10rpx;
+                .card1-c2ctex{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+                .card1-c2cnum{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+            }
+            .card1-c2c:nth-child(2){
+                width: 300rpx;
+                border-left: solid black 2px;
+                border-right: solid black 2px;
+            }
+        }
+    }
+    .card2{
+        width: 100%;
+        height: 306rpx;
+        padding: 20rpx;
+        padding-bottom: 0rpx;
+        border: solid black 2px;
+        border-radius: 20rpx;
+        margin-top: 26rpx;
+        .card2-top{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .card2-title{
+                font-size: 32rpx;
+                display: flex;
+                view{
+                    font-size: 28rpx;
+                    margin-right: 10rpx;
+                }
+            }
+            .card2-title2{
+                font-size: 32rpx;
+                margin-right: 10rpx;
+            }
+        }
+        .card2-bottom{
+            width: 100%;
+            margin-top: 40rpx;
+            .card2-bottom1{
+                font-size: 28rpx;
+            }
+            .card2-bottom2{
+                display: flex;
+                align-items: flex-end;
+                height:70rpx;
+                margin-top: 20rpx;
+                .card2-bottom2t{
+                    font-size: 60rpx;
+                }
+                .card2-bottom2t2{
+                    font-size: 28rpx;
+                    margin-bottom: 8rpx;
+                    margin-left: 10rpx;
+                }
+            }
+            .card2-bottom3{
+                font-size: 28rpx;
+                margin-top: 8rpx;
+            }
+        }
+    }
+    .card3{
+        width: 100%;
+        height: 538rpx;
+        padding: 20rpx;
+        padding-bottom: 0rpx;
+        border: solid black 2px;
+        border-radius: 20rpx;
+        margin-top: 26rpx;
+        .card3-top{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .card3-title{
+                font-size: 32rpx;
+                display: flex;
+                view{
+                    font-size: 28rpx;
+                    margin-right: 10rpx;
+                }
+            }
+            .card3-title2{
+                font-size: 32rpx;
+                margin-right: 10rpx;
+                display: flex;
+                .card3-bu{
+                    width: 88rpx;
+                    height: 45rpx;
+                    font-size: 28rpx;
+                    border-radius: 20rpx;
+                    margin-left: 10rpx;
+                    border: solid black 2px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+            }
+        }
+        .card3-midin{
+            width: 100%;
+           display: flex;
+           margin-top: 30rpx;
+           .card3-midin2{
+            width: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            .card3-midinnum{
+                font-size: 50rpx;
+            }
+            .card3-midintex{
+                font-size: 30rpx;
+                margin-top: 10rpx;
+            }
+           }
+        }
+        .card3-bottom{
+            width: 100%;
+            height: 308rpx;
+            background-color: aqua;
+        }
+    }
 }

nova-werun/pages/home/statistics/index.wxml

@@ -49,15 +49,81 @@
         <view class="text3">本周记录</view>
     </view>
     <view class="chart">
-    
-    
+
+
     </view>
 </view>
-<view class="all" style="height: {{contentHeight}}rpx;" wx:if="{{active==1}}">
+<view class="all2" style="height: {{contentHeight}}rpx;" wx:if="{{active==1}}">
+    <view class="card1">
+        <view class="card1-title">
+            <view>|</view>
+            生涯合计
+        </view>
+        <view class="card1-in">自2024年08月17日开始，共31天，您走了</view>
+        <view class="card1-card">
+            <view class="card1card-number">620000</view>
+            <view class="card1card-text">步，相当于</view>
+        </view>
+        <view class="card1-card2">
+            <view class="card1-c2c">
+                <view class="card1-c2cnum">6666666</view>
+                <view class="card1-c2ctex">卡路里</view>
+            </view>
+            <view class="card1-c2c">
+                <view class="card1-c2cnum">15天17小时</view>
+                <view class="card1-c2ctex">时间</view>
+            </view>
+            <view class="card1-c2c">
+                <view class="card1-c2cnum">666</view>
+                <view class="card1-c2ctex">公里</view>
+            </view>
 
+        </view>
+    </view>
+    <view class="card2">
+        <view class="card2-top">
+            <view class="card2-title">
+                <view>|</view>
+                生涯合计
+            </view>
+            <view class="card2-title2">今日17777步</view>
+        </view>
+        <view class="card2-bottom">
+            <view class="card2-bottom1">今日步数已超过</view>
+            <view class="card2-bottom2">
+                <view class="card2-bottom2t">60.00</view>
+                <view class="card2-bottom2t2">%</view>
+            </view>
+            <view class="card2-bottom3">的用户，赶紧行动起来</view>
 
+        </view>
+    </view>
+    <view class="card3">
+        <view class="card3-top">
+            <view class="card3-title">
+                <view>|</view>
+                生涯合计
+            </view>
+            <view class="card3-title2">
+                <view class="card3-bu">7天</view>
+                <view class="card3-bu">30天</view>
+            </view>
+        </view>
+        <view class="card3-midin">
+            <view class="card3-midin2">
+                <view class="card3-midinnum">20000步</view>
+                <view class="card3-midintex">平均</view>
+            </view>
+            <view class="card3-midin2">
+                <view class="card3-midinnum">620000步</view>
+                <view class="card3-midintex">总计</view>
+            </view>
+        </view>
+        <view class="card3-bottom">
+        
+        </view>
+    </view>
 </view>
-
 <van-tabbar active="{{ active }}" bind:change="onChange" placeholder='true'>
     <van-tabbar-item>
         <image slot="icon" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/o1c3n1030041552.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />