home-ranking page

app.json

@@ -11,7 +11,8 @@
                 "pages/circle/circle-detail/index",
                 "pages/circle/my-circle/index",
                 "pages/circle/send-circle/index",
-                "pages/home/signin/index"
+                "pages/home/signin/index",
+                "pages/home/ranking/index"
             ]
         },
         {

nova-werun/components/home/index.js

@@ -27,7 +27,7 @@ Component({
             {
                 image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/v6p4fm041343296.png?imageView2/1/w/200/h/200',
                 text: '排行榜',
-                url: ''
+                url: '../../pages/home/ranking/index'
             },
             {
                 image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/mcu488041343362.png?imageView2/1/w/200/h/200',

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

@@ -0,0 +1,104 @@
+// nova-werun/pages/home/ranking/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        //屏幕高度
+        statusBarHeight: 0, // 状态栏高度
+        screenHeight: 0, // 屏幕高度
+        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+        bottomNavHeight: 0, // 底部导航栏高度
+        contentHeight: 0, // 可用内容高度
+        contentHeight2: 0,
+        contentpadding: 0, //顶部padding高度
+        //
+        changetitle:'yundong'
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        // 计算
+        const systemInfo = wx.getSystemInfoSync();
+        const statusBarHeight = systemInfo.statusBarHeight || 0;
+        const screenHeight = systemInfo.screenHeight || 0;
+        const custom = wx.getMenuButtonBoundingClientRect();
+        const customHeight = custom.height + 10 + 2 || 0;
+        const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
+
+        const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
+        const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        this.setData({
+            statusBarHeight,
+            screenHeight,
+            customHeight,
+            bottomNavHeight,
+            contentpadding,
+            contentHeight
+        });
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    },
+    change(){
+        if(this.data.changetitle=='yundong'){
+            this.setData({
+                changetitle:'zhaijia'
+            })
+        }else{
+            this.setData({
+                changetitle:'yundong'
+            })
+        }
+
+    }
+})

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

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

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

@@ -0,0 +1,154 @@
+/* nova-werun/pages/home/ranking/index.wxss */
+.all{
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow-y: scroll;
+    .textbox{
+        width: 100%;
+        height: 240rpx;
+        display: flex;
+        position: relative;
+        border-bottom: black solid 2px;
+        border-radius: 25%;
+        margin-bottom: 75rpx;
+        .textobx2{
+            width:100%;
+            display: flex;
+            height: 150rpx;
+            margin-top: 40rpx;
+            justify-content: center;
+            .text{
+                font-size: 48rpx;
+                margin-left: 40rpx;
+            }
+            .switch{
+                width: 130rpx;
+                height: 60rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 45rpx;
+                border: gray solid 1px;
+                margin-left: auto;
+                margin-right: 20rpx;
+                image{
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+                .switch-text{
+                    width: 60rpx;
+                    height: 40rpx;
+                    font-size: 30rpx;
+                }
+            }
+        }
+        .cardbox{
+            width: 86%;
+            height: 130rpx;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            justify-content: center;
+            bottom: -75rpx;
+            border: black solid 1px;
+            border-radius: 10rpx;
+            background-color: white;
+            left: 7%;
+            image{
+                width: 60rpx;
+                height: 60rpx;
+                margin-right: 10rpx;
+            }
+            .avarter{
+                width: 90rpx;
+                height: 90rpx;
+                border-radius: 50%;
+            }
+            .name{
+                width: 225rpx;
+                font-size: 30rpx;
+                margin-left: 20rpx;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .num{
+                font-size: 30rpx;
+                color: red;
+                margin-left: 20rpx;
+            }
+            .good{
+                width: 50rpx;
+                color: gray;
+                margin-left: 20rpx;
+                .good-num{
+                    font-size: 28rpx;
+                }
+            }
+        }
+
+    }
+    .rankbox{
+        width: 86%;
+        margin-top:40rpx;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        border: black solid 1px;
+        border-radius: 10rpx;
+        margin-bottom: 40rpx;
+        .cardbox{
+            width: 100%;
+            height: 130rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-bottom: gray solid 1px;
+            border-radius: 10rpx;
+            background-color: white;
+            .paiming{
+                width: 60rpx;
+                height: 60rpx;
+                margin-right: 10rpx;
+                font-size: 36rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: red;
+            }
+            image{
+                width: 60rpx;
+                height: 60rpx;
+                margin-right: 10rpx;
+            }
+            .avarter{
+                width: 90rpx;
+                height: 90rpx;
+                border-radius: 50%;
+            }
+            .name{
+                width: 225rpx;
+                font-size: 30rpx;
+                margin-left: 20rpx;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .num{
+                font-size: 30rpx;
+                color: red;
+                margin-left: 20rpx;
+            }
+            .good{
+                width: 50rpx;
+                color: gray;
+                margin-left: 20rpx;
+                .good-num{
+                    font-size: 28rpx;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+<!--nova-werun/pages/home/ranking/index.wxml-->
+<nav type="back" title="排行榜" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="textbox">
+        <view class="textobx2">
+            <view class="text" wx:if="{{changetitle=='yundong'}}" >运动排行榜</view>
+            <view class="text" wx:if="{{changetitle=='zhaijia'}}" >宅家排行榜</view>
+            <view class="switch" bindtap="change">
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241111/8ic78m043647360.png?imageView2/1/w/200/h/200"></image>
+                <view class="switch-text">切换</view>
+            </view>
+        </view>
+        <view class="cardbox">
+            <image></image>
+            <image class="avarter" src="https://file-cloud.fmode.cn//tmp/sBX4tFxdGjkk1fea2c9db35cbd67b50b01dd3bae1592.png?imageView2/1/w/200/h/200"></image>
+            <view class="name">超级无敌暴龙战士</view>
+            <view class="num">20569步</view>
+            <view class="good">
+                <view class="good-num">77</view>
+                <van-icon name="good-job-o" />
+            </view>
+        </view>
+    </view>
+    <view class="rankbox">
+        <block wx:for="{{10}}"> 
+            <view class="cardbox">
+                <image wx:if="{{item<3}}" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241111/je1q5i052857833.png?imageView2/1/w/200/h/200"></image>
+                <view class="paiming" wx:if="{{item>=3}}">{{item+1}}</view>
+                <image class="avarter" src="https://file-cloud.fmode.cn//tmp/sBX4tFxdGjkk1fea2c9db35cbd67b50b01dd3bae1592.png?imageView2/1/w/200/h/200"></image>
+                <view class="name">超级无敌暴龙战士</view>
+                <view class="num">20569步</view>
+                <view class="good">
+                    <view class="good-num">77</view>
+                    <van-icon name="good-job-o" />
+                </view>
+            </view>
+        </block>
+
+    </view>
+</view>

project.private.config.json

@@ -39,6 +39,12 @@
                     "pathName": "nova-werun/pages/home/signin/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "排行榜",
+                    "pathName": "nova-werun/pages/home/ranking/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }