statistics page

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

@@ -6,7 +6,7 @@
         <van-tab title="步行">
             <view class="textbox">
                 <view class="text">今日积累行走</view>
-                <view class="number">7公里 ></view>
+                <view class="number" data-url="../../statistics/index"  bindtap="gourl">7公里 ></view>
             </view>
             <view class="mapbox">
                 <view class="map">
@@ -19,7 +19,7 @@
         <van-tab title="跑步">
             <view class="textbox">
                 <view class="text">今日积累跑步</view>
-                <view class="number">10公里 ></view>
+                <view class="number" data-url="../../statistics/index"  bindtap="gourl">10公里 ></view>
             </view>
             <view class="mapbox">
                 <view class="map">

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

@@ -13,6 +13,8 @@ Page({
             contentHeight: 0, // 可用内容高度
             contentHeight2: 0,
             contentpadding: 0, //顶部padding高度
+
+            active: 0,
     },
 
     /**
@@ -28,7 +30,7 @@ Page({
                 const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
         
                 const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
-                const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+                const contentHeight = (screenHeight -50- bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
                 this.setData({
                     statusBarHeight,
                     screenHeight,
@@ -86,5 +88,8 @@ Page({
      */
     onShareAppMessage: function () {
 
-    }
+    },
+    onChange(event) {
+        this.setData({ active: event.detail });
+      },
 })

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

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-tabbar": "@vant/weapp/tabbar/index",
+    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+  }
 }

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

@@ -1,4 +1,158 @@
 /* nova-werun/pages/home/statistics/index.wxss */
 .all{
     width: 100vw;
+    padding-top: 20rpx;
+    .number{
+        width: 100%;
+        height: 150rpx;
+        display: flex;
+        justify-content: space-between;
+        .num{
+            height: 100%;
+            width: 255rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            
+            .num-num{
+                font-size: 50rpx;
+                margin-bottom: 18rpx;
+                display: flex;
+                .numtext{
+                    font-size: 30rpx;
+                    display: flex;
+                    align-items: flex-end;
+                    margin-bottom: 8rpx;
+                    margin-left: 2rpx;
+                }
+            }
+            .num-text{
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 28rpx;
+                image{
+                    width: 40rpx;
+                    height: 40rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+    }
+    .circlebox{
+        width: 100%;
+        height: 430rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        .runbox{
+            width: 400rpx;
+            height: 400rpx;
+            border-radius: 50%;
+            border: solid black 5rpx;
+            margin-top: 10rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .run{
+                width: 370rpx;
+                height: 370rpx;
+                border-radius: 50%;
+                border: solid black 5rpx;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                .tody-steps{
+                    width: 100%;
+                    font-size: 28rpx;
+                    display: flex;
+                    justify-content: center;
+                    margin-top: 50rpx;
+                    font-weight: 600;
+                }
+                .step-num{
+                    font-size: 65rpx;
+                    font-weight: 600;
+                    margin-top: 20rpx;
+                }
+                .objective{
+                    width: 100%;
+                    height: 50rpx;
+                    align-items: center;
+                    justify-content: center;
+                    display: flex;
+                    margin-top: 20rpx;
+                    image{
+                        width: 32rpx;
+                        height: 32rpx;
+                        margin-right: 10rpx;
+                    }
+                    .ob-num{
+                        font-size: 28rpx;
+                    }
+                }
+                .achieve{
+                    color: gray;
+                    font-size: 28rpx;
+                    margin-top: 4rpx;
+                }
+            }
+        }
+        .image2{
+            position: absolute;
+            bottom: 20rpx;
+            right: 45rpx;
+            width: 50rpx;
+            height: 50rpx;
+        }
+    }
+    .sharebox{
+        width: 100%;
+        height: 70rpx;
+        display: flex;
+        justify-content: center;
+        margin-top: 20rpx;
+        .share{
+            width: 200rpx;
+            height: 60rpx;
+            font-size: 30rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 30rpx;
+            border: solid black 1px;
+        }
+    }
+    .text{
+        width: 100%;
+        height: 50rpx;
+        padding-left: 40rpx;
+        display: flex;
+        align-items: center;
+        margin-top: 30rpx;
+        .text2{
+            height: 50rpx;
+            font-size: 28rpx;
+            margin-right: 20rpx;
+            display: flex;
+            align-items: center;
+            margin-right: 14rpx;
+        }
+        .text3{
+            height: 50rpx;
+            font-size: 32rpx;
+            margin-right: 20rpx;
+            display: flex;
+            align-items: center;
+        }
+    }
+    .chart{
+        width: 100%;
+        height: 508rpx;
+        background-color: aqua;
+    }
+
 }

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

@@ -1,5 +1,73 @@
 <!--nova-werun/pages/home/statistics/index.wxml-->
-<nav type="back" title="我的统计" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
-<view class="all" style="height: {{contentHeight}}rpx;">
+<nav type="back" title="步数统计" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;" wx:if="{{active==0}}">
+    <view class="number">
+        <view class="num">
+            <view class="num-num">666</view>
+            <view class="num-text">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/f1p6rn032449318.png?imageView2/1/w/200/h/200"></image>
+                卡路里
+            </view>
+        </view>
+        <view class="num">
+            <view class="num-num">
+                56
+                <view class="numtext">分钟</view>
+            </view>
+            <view class="num-text">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/qdre1f032522516.png?imageView2/1/w/200/h/200"></image>
+                步数时间
+            </view>
+        </view>
+        <view class="num">
+            <view class="num-num">5.5</view>
+            <view class="num-text">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/i12ut1032603507.png?imageView2/1/w/200/h/200"></image>
+                公里
+            </view>
+        </view>
+    </view>
+    <view class="circlebox">
+        <view class="runbox">
+            <view class="run">
+                <view class="tody-steps">今日步数</view>
+                <view class="step-num">18000</view>
+                <view class="objective">
+                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/q12pc1114226514.png?imageView2/1/w/200/h/200" alt="" />
+                    <view class="ob-num">目标：200000</view>
+                </view>
+                <view class="achieve">93% 已完成</view>
+            </view>
+        </view>
+        <image class="image2" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/h157d1033448123.png?imageView2/1/w/200/h/200"></image>
+    </view>
+    <view class="sharebox">
+        <view class="share">分享给好友</view>
+    </view>
+    <view class="text">
+        <view class="text2">|</view>
+        <view class="text3">本周记录</view>
+    </view>
+    <view class="chart">
+    
+    
+    </view>
+</view>
+<view class="all" style="height: {{contentHeight}}rpx;" wx:if="{{active==1}}">
+
 
 </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;" />
+        <image slot="icon-active" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/g5fcr1030200091.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
+        今日步数
+    </van-tabbar-item>
+    <van-tabbar-item>
+        <image slot="icon" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/hc5guq030414553.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
+        <image slot="icon-active" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241113/v1hhkk030354434.png?imageView2/1/w/200/h/200" mode="aspectFit" style="width: 50rpx; height: 50rpx;" />
+        周期统计
+    </van-tabbar-item>
+
+</van-tabbar>

project.private.config.json

@@ -69,6 +69,12 @@
                     "pathName": "nova-werun/pages/home/sport/sport-start/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "我的统计",
+                    "pathName": "nova-werun/pages/home/statistics/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }