home

nova-werun/components/circle-card/index.wxml

@@ -9,24 +9,26 @@
     <!-- 图片 -->
     <!-- 4张图片 -->
     <view class="picture4" wx:if="{{images.length==4}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+        <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
     </view>
     <!-- 3张和4-9张图片 -->
 
     <block wx:if="{{ type=='detail'}}">
         <view class="picture" wx:if="{{images.length>4   || images.length==3 }}">
-            <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
         </view>
     </block>
 
     <!-- 2张图片 -->
     <view class="picture2" wx:if="{{images.length==2}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+        <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
     </view>
     <!-- 1张图片 -->
     <view class="picture3" wx:if="{{images.length==1}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
+        <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
     </view>
+        <!-- 预览组件 -->
+        <previewImg id="previewComponent" previewImgList = "{{imgList}}" previewImg = "{{currentImg}}"  />
     <!--  -->
     <view class="addbox">
         <van-icon name="location-o" size='28rpx' />

nova-werun/components/home/index.js

@@ -20,7 +20,7 @@ Component({
         bottomNavHeight: 0, // 底部导航栏高度
         contentHeight: 0, // 可用内容高度
         contentpadding: 0, //顶部padding高度
-        navheight:0,
+        navheight: 0,
         //选择
         rows: [{
                 image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/r5j1uc041211788.png',
@@ -73,6 +73,13 @@ Component({
         sharList: [],
 
         address: "",
+        //排行榜
+        todayList: [],
+        changetitle: 'today',
+        //点赞
+        isclick:false,
+        //正序
+        rank:'up'
     },
     lifetimes: {
 
@@ -91,10 +98,10 @@ Component({
 
             const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
             const contentHeight = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
-            const navheight = (statusBarHeight+customHeight) * 750 / systemInfo.windowWidth;
+            const navheight = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
-                screenHeight:(screenHeight-50-bottomNavHeight) * 750 / systemInfo.windowWidth,
+                screenHeight: (screenHeight - 50 - bottomNavHeight) * 750 / systemInfo.windowWidth,
                 customHeight,
                 bottomNavHeight,
                 contentHeight,
@@ -105,8 +112,8 @@ Component({
             this.getWeRunData()
             this.gettarget()
             // this.order()
-             this.Getlocation()
-
+            this.Getlocation()
+            this.gettoday()
         },
     },
 
@@ -212,7 +219,7 @@ Component({
                         success: (ops) => { // 使用箭头函数
                             console.log(ops);
                             // const address = ops.data.result.formatted_address;//详细地址
-                            const address = ops.data.result.addressComponent.city;//市
+                            const address = ops.data.result.addressComponent.city; //市
                             this.setData({
                                 address: address,
                             });
@@ -345,6 +352,119 @@ Component({
                     console.error("保存数据时出现错误:", error);
                 }
             }
+        },
+        //切换
+        change() {
+            // 使用数组来简化切换逻辑
+            const titles = ['today', 'weekdday', 'month'];
+            const currentIndex = titles.indexOf(this.data.changetitle); //获取index
+            const nextIndex = (currentIndex + 1) % titles.length; // 循环切换
+            this.setData({
+                changetitle: titles[nextIndex]
+            });
+            if (this.data.changetitle == 'today') {
+                this.setData({
+                    rank:'up'
+                })
+                this.gettoday()
+            }
+            if (this.data.changetitle == 'weekdday') {
+                this.setData({
+                    rank:'up'
+                })
+                console.log('weekdday');
+            }
+            if (this.data.changetitle == 'month') {
+                this.setData({
+                    rank:'up'
+                })
+                console.log('month');
+            }
+        },
+        // 获取本日排行
+        async gettoday() {
+            const currentUser = Parse.User.current();
+            let ActivityDataquery = new Parse.Query('ActivityData');
+            ActivityDataquery.equalTo('company', company);
+            ActivityDataquery.equalTo('type', "today");
+            ActivityDataquery.notEqualTo('isDeleted', true);
+
+            // 获取今天的日期
+            const today = new Date();
+            const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // 今天的开始时间
+            const todayEnd = new Date(todayStart);
+            todayEnd.setHours(23, 59, 59, 999); // 今天的结束时间
+            console.log(todayStart, todayEnd);
+            // 在查询条件中添加对 createdAt 的限制
+            ActivityDataquery.greaterThanOrEqualTo('createdAt', todayStart);
+            ActivityDataquery.lessThanOrEqualTo('createdAt', todayEnd);
+
+            // 根据 steps 字段进行降序排序
+            ActivityDataquery.descending('steps');
+            ActivityDataquery.include('user');
+
+            try {
+                let P = await ActivityDataquery.find();
+                let todayList = P.map(item => item.toJSON());
+
+                // // 初始化 myList
+                // let myList = [];
+
+                // // 找到当前用户的数据并计算排名
+                // todayList.forEach((item, index) => {
+                //     if (item.user.objectId === currentUser.id) {
+                //         myList.push({
+                //             ...item, // 包含用户数据
+                //             rank: index + 1 // 计算排名（index 从 0 开始，所以加 1）
+                //         });
+                //     }
+                // });
+
+                // 更新页面数据
+                this.setData({
+                    todayList,
+                });
+
+                console.log(this.data.todayList);
+            } catch (error) {
+                console.error('Error fetching today\'s data:', error);
+            }
+        },
+        //正序逆序
+        changeup(){
+            if(this.data.rank=='up'){
+                this.setData({
+                    rank:'down'
+                })
+                if (this.data.changetitle == 'today') {
+                    this.setData({
+                        todayList:this.data.todayList.reverse(),
+                    })
+                    console.log('逆序');
+                }
+                if (this.data.changetitle == 'weekdday') {
+                    console.log('weekdday逆序');
+                }
+                if (this.data.changetitle == 'month') {
+                    console.log('month逆序');
+                }
+            }else{
+                this.setData({
+                    rank:'up'
+                })
+                if (this.data.changetitle == 'today') {
+                    this.setData({
+                        todayList:this.data.todayList.reverse(),
+                    })
+                    console.log('顺序');
+                }
+                if (this.data.changetitle == 'weekdday') {
+                    console.log('weekdday顺序');
+                }
+                if (this.data.changetitle == 'month') {
+                    console.log('month顺序');
+                }
+            }
         }
     }
 })

nova-werun/components/home/index.less

@@ -1,7 +1,6 @@
 /* nova-werun/components/home/index.wxss */
 .all{
     width: 100vw;
-   overflow-y: scroll;
    background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
    font-family: MicrosoftYaHei;
    color: #333333;
@@ -42,183 +41,323 @@
             }
         }
     }
-    .topbox{
-        width: 686rpx;
-        height: 81rpx;
-        display: flex;
-        background-color: #4F9AF7;
-        padding-left: 20rpx;
-        padding-right: 20rpx;
-        border-radius: 15rpx;
-        padding-top: 20rpx;
-        .top-tex{
-            font-size: 26rpx;
-            height: 34rpx;
-            color: white;
-            border-left: 8rpx solid white;
-            padding-left: 10rpx;
+    .sco{
+        width: 100%;
+        padding-left: 33rpx;
+        padding-right: 33rpx;
+        overflow-y: scroll;
+        .topbox{
+            width: 686rpx;
+            height: 81rpx;
             display: flex;
-            align-items: center;
-            
-        }
-        .top-tex2{
-            width: 200rpx;
-            height: 34rpx;
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-            font-size: 26rpx;
-            .top-tex2-tex{
+            background-color: #4F9AF7;
+            padding-left: 20rpx;
+            padding-right: 20rpx;
+            border-radius: 15rpx;
+            padding-top: 20rpx;
+            .top-tex{
+                font-size: 26rpx;
                 height: 34rpx;
-                background-color: white;
+                color: white;
+                border-left: 8rpx solid white;
+                padding-left: 10rpx;
                 display: flex;
-                justify-content: center;
                 align-items: center;
-                border-radius: 10rpx;
-                padding-left: 4rpx;
-                padding-right: 4rpx;
-                margin-left: 4rpx;
-                margin-right: 4rpx;
+                
+            }
+            .top-tex2{
+                width: 200rpx;
+                height: 34rpx;
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                font-size: 26rpx;
+                .top-tex2-tex{
+                    height: 34rpx;
+                    background-color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 10rpx;
+                    padding-left: 4rpx;
+                    padding-right: 4rpx;
+                    margin-left: 4rpx;
+                    margin-right: 4rpx;
+                }
             }
         }
-    }
-    .clockinbox{
-        width: 686rpx;
-        height: 331rpx;
-        display:flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/6p04ra030721696.png);
-        background-position: center; /* 背景图片居中 */
-        background-size: cover; /* 背景图片覆盖整个元素 */
-        background-repeat: no-repeat; /* 不重复背景图片 */
-        margin-top: -16rpx;
-        .clockinbox2{
-            width: 100%;
-            display: flex;
+        .clockinbox{
+            width: 686rpx;
+            height: 331rpx;
+            display:flex;
+            flex-direction: column;
+            align-items: center;
             justify-content: center;
-            .runbox{
-                width: 217rpx;
-                height: 217rpx;
-                border-radius: 50%;
+            background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/6p04ra030721696.png);
+            background-position: center; /* 背景图片居中 */
+            background-size: cover; /* 背景图片覆盖整个元素 */
+            background-repeat: no-repeat; /* 不重复背景图片 */
+            margin-top: -16rpx;
+            .clockinbox2{
+                width: 100%;
                 display: flex;
-                align-items: center;
                 justify-content: center;
-                background-color: white;
-                .run{
-                    width: 195rpx;
-                    height: 195rpx;
+                .runbox{
+                    width: 217rpx;
+                    height: 217rpx;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
-                    flex-direction: column;
                     justify-content: center;
-                    background-color: #9BC5F9;
-                    .tody-steps{
-                        font-size: 24rpx;
-                        color: white;
-                    }
-                    .step-num{
-                        font-size: 50rpx;
-                        color: #333333;
-                    }
-                    .objective{
-                        width: 100%;
-                        height: 50rpx;
+                    background-color: white;
+                    .run{
+                        width: 195rpx;
+                        height: 195rpx;
+                        border-radius: 50%;
+                        display: flex;
                         align-items: center;
+                        flex-direction: column;
                         justify-content: center;
-                        display: flex;
-                        margin-top: 20rpx;
-                        image{
-                            width: 32rpx;
-                            height: 32rpx;
-                            margin-right: 10rpx;
+                        background-color: #9BC5F9;
+                        .tody-steps{
+                            font-size: 24rpx;
+                            color: white;
+                        }
+                        .step-num{
+                            font-size: 50rpx;
+                            color: #333333;
                         }
-                        .ob-num{
-                            font-size: 28rpx;
+                        .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;
+                            }
                         }
                     }
                 }
-            }
-            .objbox{
-                height: 217rpx;
-                display: flex;
-                justify-content: center;
-                flex-direction: column;
-                margin-left: 120rpx;
-                .obj1{
-                    height: 74rpx;
-                    border-left: 8rpx solid #0178EE;
-                    padding-left: 10rpx;
-                    .boj1-ti{
-                        font-size: 24rpx;
-                        color: #0178EE;
+                .objbox{
+                    height: 217rpx;
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                    margin-left: 120rpx;
+                    .obj1{
+                        height: 74rpx;
+                        border-left: 8rpx solid #0178EE;
+                        padding-left: 10rpx;
+                        .boj1-ti{
+                            font-size: 24rpx;
+                            color: #0178EE;
+                        }
+                        .obj1-numbox{
+                            height: 40rpx;
+                            display: flex;
+                            font-size: 36rpx;
+                            align-items: center;
+                            margin-top: 4rpx;
+                            image{
+                                width: 32rpx;
+                                height: 32rpx;
+                                margin-right: 15rpx;
+                            }
+    
+                        }
                     }
-                    .obj1-numbox{
-                        height: 40rpx;
-                        display: flex;
-                        font-size: 36rpx;
-                        align-items: center;
+                    .obj2{
+                        font-size: 14rpx;
+                        margin-left: 20rpx;
                         margin-top: 4rpx;
-                        image{
-                            width: 32rpx;
-                            height: 32rpx;
-                            margin-right: 15rpx;
-                        }
-
                     }
                 }
-                .obj2{
-                    font-size: 14rpx;
-                    margin-left: 20rpx;
-                    margin-top: 4rpx;
-                }
+            }
+            .today-check{
+                width: 142rpx;
+                height: 43rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 26rpx;
+                margin-top: 10rpx;
+                border-radius: 40rpx;
+                color: white;
+                background-color: #69A9F8;
             }
         }
-        .today-check{
-            width: 142rpx;
-            height: 43rpx;
+        .a{
+            width: 686rpx;
+            border-radius: 15rpx;
+            height: 55rpx;
+            margin-top: 24rpx;
+        }
+        .typebox{
+            width: 686rpx;
+            height: 153rpx;
             display: flex;
-            justify-content: center;
             align-items: center;
-            font-size: 26rpx;
-            margin-top: 10rpx;
-            border-radius: 40rpx;
-            color: white;
-            background-color: #69A9F8;
+            justify-content: space-around;
+            margin-top: 26rpx;
+            background-color: white;
+            border-radius: 15rpx;
+            .column{
+                height: 153rpx;
+                display: flex;
+                flex-direction: column; /* 使内容垂直排列 */
+                align-items: center; /* 水平居中对齐 */
+                justify-content: center;
+                image{
+                    width: 74rpx;
+                    height: 82rpx;
+                }
+                .item-text{
+                    font-size: 26rpx;
+                }
+            }
         }
-    }
-    .a{
-        width: 686rpx;
-        border-radius: 15rpx;
-        height: 55rpx;
-        margin-top: 24rpx;
-    }
-    .typebox{
-        width: 686rpx;
-        height: 153rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        margin-top: 26rpx;
-        background-color: white;
-        border-radius: 15rpx;
-        .column{
-            height: 153rpx;
+    
+        .rankbox{
+            width: 686rpx;
+            background-color: white;
+            min-height: 618rpx;
+            margin-top:30rpx;
             display: flex;
-            flex-direction: column; /* 使内容垂直排列 */
-            align-items: center; /* 水平居中对齐 */
-            justify-content: center;
-            image{
-                width: 74rpx;
-                height: 82rpx;
+            align-items: center;
+            flex-direction: column;
+            border-radius: 15rpx;
+            margin-bottom: 40rpx;
+            .ran-top{
+                width: 100%;
+                height: 120rpx;
+                padding-right: 16rpx;
+                padding-left: 16rpx;
+                display: flex;
+                align-items: center;
+                border-bottom: 2rpx solid #E0E0E0;
+                .top-til{
+                    height: 34rpx;
+                    font-size: 30rpx;
+                    padding-left: 14rpx;
+                    border-left: solid 8rpx #58A5FE;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .top-box{
+                    display: flex;
+                    margin-left: auto;
+                    font-size: 20rpx;
+                    justify-content: center;
+                    align-items: center;
+                    image{
+                        width: 20rpx;
+                        height: 18rpx;
+                        margin-left: 4rpx;
+                    }
+                }
             }
-            .item-text{
-                font-size: 26rpx;
+            .cardbox{
+                width: 100%;
+                height: 120rpx;
+                padding-right: 16rpx;
+                display: flex;
+                align-items: center;
+                border-bottom: 2rpx solid #E0E0E0;
+                .paiming{
+                    width: 37rpx;
+                    height: 37rpx;
+                    font-size: 24rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+                .image1{
+                    width: 37rpx;
+                    height: 37rpx;
+                    margin-left: 6rpx;
+                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/n5b6q2120548337.png);
+                    background-position: center;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 24rpx;
+                }
+                .image2{
+                    width: 37rpx;
+                    height: 37rpx;
+                    margin-left: 6rpx;
+                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/d61fa4120559975.png);
+                    background-position: center;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 24rpx;
+                }
+                .image3{
+                    width: 37rpx;
+                    height: 37rpx;
+                    margin-left: 6rpx;
+                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/2c1osg120613150.png);
+                    background-position: center;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    color: white;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 24rpx;
+                }
+                .avarter{
+                    width: 82rpx;
+                    height: 82rpx;
+                    border-radius: 50%;
+                    margin-left: 10rpx;
+                }
+                .name{
+                    font-size: 24rpx;
+                    margin-left: 20rpx;
+                    .name2{
+                        font-size: 18rpx;
+                    }
+                }
+                .num{
+                    font-size: 32rpx;
+                    color: #00B108;
+                    margin-left: auto;
+                }
+                .good{
+                    margin-left: 20rpx;
+                    font-size: 22rpx;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    .good-num{
+                        font-size: 22rpx;
+                    }
+                    image{
+                        width: 34rpx;
+                        height: 34rpx;
+                    }
+                }
             }
         }
+        
     }
-    
+
     
 }

nova-werun/components/home/index.wxml

@@ -9,57 +9,101 @@
             </view>
         </view>
     </view>
-    <!-- 顶部 -->
-    <view class="topbox">
-        <view class="top-tex">
-            健康运动 go
-        </view>
-        <view class="top-tex2">
-            积累运动
-            <view class="top-tex2-tex">225</view>
-            天
-        </view>
-    </view>
-    <view class="clockinbox">
-        <view class="clockinbox2">
-            <view class="runbox">
-                <view class="run">
-                    <view class="step-num">{{sharList[0].steps||0}}</view>
-                    <view class="tody-steps">今日步数</view>
-                </view>
+    <view class="sco" style="height: {{contentHeight}}rpx;">
+        <!-- 顶部 -->
+        <view class="topbox">
+            <view class="top-tex">
+                健康运动 go
+            </view>
+            <view class="top-tex2">
+                积累运动
+                <view class="top-tex2-tex">225</view>
+                天
             </view>
-            <!--    目标 -->
-            <view class="objbox">
-                <view class="obj1">
-                    <view class="boj1-ti">目标步数</view>
-                    <view class="obj1-numbox">
-                        <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/s519td033232206.png"></image>
-                        <view class="obj1-numbox-tex">{{target}}步</view>
+        </view>
+        <view class="clockinbox">
+            <view class="clockinbox2">
+                <view class="runbox">
+                    <view class="run">
+                        <view class="step-num">{{sharList[0].steps||0}}</view>
+                        <view class="tody-steps">今日步数</view>
                     </view>
                 </view>
+                <!--    目标 -->
+                <view class="objbox">
+                    <view class="obj1">
+                        <view class="boj1-ti">目标步数</view>
+                        <view class="obj1-numbox">
+                            <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/s519td033232206.png"></image>
+                            <view class="obj1-numbox-tex">{{target}}步</view>
+                        </view>
+                    </view>
 
-                <view class="obj1" style="margin-top: 32rpx;">
-                    <view class="boj1-ti">连续打卡</view>
-                    <view class="obj1-numbox">
-                        <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/s519td033232206.png"></image>
-                        <view class="obj1-numbox-tex">7天</view>
+                    <view class="obj1" style="margin-top: 32rpx;">
+                        <view class="boj1-ti">连续打卡</view>
+                        <view class="obj1-numbox">
+                            <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/s519td033232206.png"></image>
+                            <view class="obj1-numbox-tex">7天</view>
+                        </view>
                     </view>
+                    <view class="obj2">积累打卡7天，超过20%人</view>
                 </view>
-                <view class="obj2">积累打卡7天，超过20%人</view>
             </view>
-        </view>
-        <view class="today-check" bindtap="gourl" data-url="../../pages/home/sport/sport-home/index">今日打卡</view>
+            <view class="today-check" bindtap="gourl" data-url="../../pages/home/sport/sport-home/index">今日打卡</view>
 
 
-    </view>
+        </view>
 
-    <van-notice-bar color="#1989fa" color='#000' background="#ecf9ff" background="#fff" left-icon="volume-o" custom-class='a' text="在微信开发者工具中进行测试，确保定位和轨迹绘制的准确性。完成测试后，提交审核并发布小程序。通过以上步骤，您就可以在微信小程序中使用高德地图实现实时运动轨迹的功能。" />
-    <!-- 类型 -->
-    <view class="typebox">
-        <view class="column" wx:for="{{rows}}" wx:key="index" data-url="{{item.url}}" bindtap="gourl" data-active="{{item.active}}">
+        <van-notice-bar color="#1989fa" color='#000' background="#ecf9ff" background="#fff" left-icon="volume-o" custom-class='a' text="在微信开发者工具中进行测试，确保定位和轨迹绘制的准确性。完成测试后，提交审核并发布小程序。通过以上步骤，您就可以在微信小程序中使用高德地图实现实时运动轨迹的功能。" />
+        <!-- 类型 -->
+        <view class="typebox">
+            <view class="column" wx:for="{{rows}}" wx:key="index" data-url="{{item.url}}" bindtap="gourl" data-active="{{item.active}}">
                 <image src="{{item.image}}"></image>
                 <text class="item-text">{{item.text}}</text>
             </view>
+        </view>
+
+        <view class="rankbox">
+            <view class="ran-top">
+                <view class="top-til" wx:if="{{changetitle=='today'}}">本日排行榜</view>
+                <view class="top-til" wx:if="{{changetitle=='weekdday'}}">本周排行榜</view>
+                <view class="top-til" wx:if="{{changetitle=='month'}}">本月排行榜</view>
+                <view class="top-box" bindtap="change">
+                    切换
+                    <image style="width: 22rpx;height: 22rpx;" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/fejv43122812199.png"></image>
+                </view>
+                <view class="top-box" style="margin-left: 20rpx;" wx:if="{{rank=='up'}}" bindtap="changeup">
+                    正序
+                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/8lu1od115228414.png"></image>
+                </view>
+                <view class="top-box" style="margin-left: 20rpx;" wx:if="{{rank=='down'}}" bindtap="changeup">
+                    逆序
+                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/8lu1od115228414.png"></image>
+                </view>
+            </view>
+            <block wx:for="{{todayList}}" wx:key="index">
+                <view class="cardbox">
+                    <view class="image1" wx:if="{{index==0}}">1</view>
+                    <view class="image2" wx:if="{{index==1}}">2</view>
+                    <view class="image3" wx:if="{{index==2}}">3</view>
+                    <view class="paiming" wx:if="{{index>=3}}">{{index+1}}</view>
+                    <image class="avarter" src="{{item.user.avatar}}"></image>
+                    <view class="name">
+                    {{item.user.nickname}}
+                    <view class="name2">已打卡12天</view>
+                    </view>
+                    <view class="num">{{item.steps}}</view>
+                    <view class="good">
+                        <view class="good-num">77</view>
+                        <image wx:if="{{isclick}}" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/voks1d122210989.png"></image>
+                        <image wx:if="{{!isclick}}" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/fihr91122221320.png"></image>
+                    </view>
+                </view>
+            </block>
+
+        </view>
+
     </view>
 
+
 </view>