home

nova-werun/components/home/index.js

@@ -20,51 +20,54 @@ Component({
         bottomNavHeight: 0, // 底部导航栏高度
         contentHeight: 0, // 可用内容高度
         contentpadding: 0, //顶部padding高度
+        navheight:0,
         //选择
         rows: [{
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/3l5p1v041343137.png?imageView2/1/w/200/h/200',
+                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/r5j1uc041211788.png',
                 text: '签到打卡',
                 url: '../../pages/home/signin/index'
             },
             {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/v6p4fm041343296.png?imageView2/1/w/200/h/200',
-                text: '排行榜',
-                url: '../../pages/home/ranking/index'
+                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/n1pin1040819673.png',
+                text: '实时步行',
+                url: '../../pages/home/sport/sport-home/index',
+
             },
             {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/mcu488041343362.png?imageView2/1/w/200/h/200',
+                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/9vfr1l040831635.png',
                 text: '转发分享',
                 url: '../../pages/home/share/index'
 
             },
             {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/pqln61041343428.png?imageView2/1/w/200/h/200',
+                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/it1rna040843179.png',
                 text: '我的勋章',
                 url: '../../pages/home/medal/index'
             },
             {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/9crt85041343498.png?imageView2/1/w/200/h/200',
-                text: '步行',
-                url: '../../pages/home/sport/sport-home/index',
-
-            },
-
-            {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/71svpg041343669.png?imageView2/1/w/200/h/200',
-                text: '跑步',
-                url: '../../pages/home/sport/sport-home/index',
-                active: 1
-            },
-            {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/uk13u1041343733.png?imageView2/1/w/200/h/200',
+                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/r5193r040853498.png',
                 text: '我的统计',
                 url: '../../pages/home/statistics/index'
             },
-            {
-                image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241104/k1q4no034958681.png?imageView2/1/w/200/h/200',
-                text: '积分',
-                url: '../../pages/home/integral/index'
-            },
+            // {
+            //     image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/v6p4fm041343296.png?imageView2/1/w/200/h/200',
+            //     text: '排行榜',
+            //     url: '../../pages/home/ranking/index'
+            // },
+
+
+            // {
+            //     image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241102/71svpg041343669.png?imageView2/1/w/200/h/200',
+            //     text: '跑步',
+            //     url: '../../pages/home/sport/sport-home/index',
+            //     active: 1
+            // },
+
+            // {
+            //     image: 'https://file-cloud.fmode.cn/qpFbRRSZrO/20241104/k1q4no034958681.png?imageView2/1/w/200/h/200',
+            //     text: '积分',
+            //     url: '../../pages/home/integral/index'
+            // },
         ],
         target: 0,
         sharList: [],
@@ -88,13 +91,15 @@ 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;
             this.setData({
                 statusBarHeight,
-                screenHeight,
+                screenHeight:(screenHeight-50-bottomNavHeight) * 750 / systemInfo.windowWidth,
                 customHeight,
                 bottomNavHeight,
                 contentHeight,
-                contentpadding
+                contentpadding,
+                navheight,
             });
             console.log('123', contentpadding);
             this.getWeRunData()
@@ -206,7 +211,8 @@ Component({
                         },
                         success: (ops) => { // 使用箭头函数
                             console.log(ops);
-                            const address = ops.data.result.formatted_address;
+                            // const address = ops.data.result.formatted_address;//详细地址
+                            const address = ops.data.result.addressComponent.city;//市
                             this.setData({
                                 address: address,
                             });
@@ -285,7 +291,7 @@ Component({
             //         }
             //     });
             // });
-            const steps = 323456
+            const steps = 33456
             return steps
         },
         //更新今日步数

nova-werun/components/home/index.less

@@ -2,148 +2,223 @@
 .all{
     width: 100vw;
    overflow-y: scroll;
-    .clockinbox{
-        width: 100%;
-        height: 650rpx;
-        background-color: skyblue;
-        display:flex;
-        flex-direction: column;
-        align-items: center;
-        border-top: black solid 2px;
-        .addressbox{
+   background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
+   font-family: MicrosoftYaHei;
+   color: #333333;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   .navbox{
+    width: 100vw;
+    display: flex;
+    align-items: flex-end;
+        .nav{
             width: 100%;
-            height: 52rpx;
-            font-size: 30rpx;
             display: flex;
-            margin-top: 16rpx;
-            align-items: center;
-            .addressbox-text{
-                width: 80%;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+            justify-content: center;
+            position: relative;
+            margin-bottom: 20rpx;
+            height: 40rpx;
+            .nav-addbox{
+                position: absolute;
+                left: 32rpx;
+                top: 8rpx;
+                font-size: 28rpx;
+                height: 40rpx;
+                color: white;
+                display: flex;
+                .nav-add{
+                    margin-left: 4rpx;
+
+                }
+            }
+            .nav-title{
+                height: 36rpx;
+                font-family: MicrosoftYaHei;
+                font-size: 36rpx;
+                color: #333333;
+                line-height: 40rpx;
+                text-align: center;
             }
         }
-        .runbox{
-            width: 350rpx;
-            height: 350rpx;
-            border-radius: 50%;
-            border: solid black 5rpx;
-            margin-top: 10rpx;
+    }
+    .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;
             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{
+                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;
             justify-content: center;
-            .run{
-                width: 320rpx;
-                height: 320rpx;
+            .runbox{
+                width: 217rpx;
+                height: 217rpx;
                 border-radius: 50%;
-                border: solid black 5rpx;
                 display: flex;
                 align-items: center;
-                flex-direction: column;
-                .tody-steps{
-                    width: 100%;
-                    font-size: 28rpx;
+                justify-content: center;
+                background-color: white;
+                .run{
+                    width: 195rpx;
+                    height: 195rpx;
+                    border-radius: 50%;
                     display: flex;
-                    justify-content: center;
-                    margin-top: 50rpx;
-                    font-weight: 600;
-                }
-                .step-num{
-                    font-size: 50rpx;
-                    font-weight: 600;
-                    margin-top: 20rpx;
-                }
-                .objective{
-                    width: 100%;
-                    height: 50rpx;
                     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;
                     }
-                    .ob-num{
-                        font-size: 28rpx;
+                    .step-num{
+                        font-size: 50rpx;
+                        color: #333333;
+                    }
+                    .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;
+                        }
                     }
                 }
             }
-        }
-        .inspire{
-            width: 100%;
-            height: 40rpx;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 30rpx;
-            font-weight: 600;
-            margin-top: 30rpx;
+            .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;
+                        }
+
+                    }
+                }
+                .obj2{
+                    font-size: 14rpx;
+                    margin-left: 20rpx;
+                    margin-top: 4rpx;
+                }
+            }
         }
         .today-check{
-            width: 195rpx;
-            height: 100rpx;
+            width: 142rpx;
+            height: 43rpx;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 35rpx;
-            margin-top: 30rpx;
-            border-radius: 50rpx;
-            font-weight: 600;
-            border: black solid 2px;
+            font-size: 26rpx;
+            margin-top: 10rpx;
+            border-radius: 40rpx;
+            color: white;
+            background-color: #69A9F8;
         }
     }
-    .selectbox{
-        width: 100%;
-        height: 50%;
-        margin-top: 3%;
-        border-top: black solid 2px;
+    .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;
-        padding: 10rpx;
-        .a{
-            border: black solid 2px;
-            border-radius: 40rpx;
-            height: 60rpx;
-            
-        }
-        .typebox{
-            width: 100%;
-            height: 100%;
-            padding-left: 10rpx;
-            padding-right: 10rpx;
-            margin-bottom: 15rpx;
-            .container{
-                width: 100%;
-                height: 450rpx;
-                display: flex;
-                flex-wrap: wrap;
-                padding-top: 20rpx;
-                font-weight: 600;
-                .column{
-                    width: 25%; /* 每列占容器的25% */
-                    height: 200rpx;
-                    display: flex;
-                    flex-direction: column; /* 使内容垂直排列 */
-                    align-items: center; /* 水平居中对齐 */
-                    margin-bottom: 10px; /* 列之间的间距 */
-                    justify-content: center;
-                    margin-bottom: -10rpx;
-
-                    image{
-                        width: 100rpx;
-                        height: 100rpx;
-                    }
-                }
+        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;
             }
         }
-        
-    }
-    .activitybox{
-        width: 100%;
-        height: 300rpx;
-        background-color: aqua;
     }
     
+    
 }

nova-werun/components/home/index.wxml

@@ -1,44 +1,65 @@
 <!--nova-werun/components/home/index.wxml-->
-<nav type="title" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
-<view class="all" style="height: {{contentHeight}}rpx;">
+<view class="all" style="height: {{screenHeight}}rpx;">
+    <view class="navbox" style="height: {{navheight}}rpx;">
+        <view class="nav">
+            <view class="nav-title">首页</view>
+            <view class="nav-addbox">
+                <van-icon name="location-o" size='28rpx' color='white' />
+                <view class="nav-add">{{address}}</view>
+            </view>
+        </view>
+    </view>
     <!-- 顶部 -->
-    <view class="clockinbox">
-        <view class="addressbox">
-            <van-icon name="location-o" size='20px' />
-            <view class="addressbox-text">{{address}}</view>
+    <view class="topbox">
+        <view class="top-tex">
+            健康运动 go
         </view>
-        <view class="runbox">
-            <view class="run">
-                <view class="tody-steps">今日步数</view>
-                <view class="step-num">{{sharList[0].steps||0}}</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">目标：{{target}}</view>
-                </view>
-            </view>
+        <view class="top-tex2">
+            积累运动
+            <view class="top-tex2-tex">225</view>
+            天
         </view>
-
-        <view class="inspire">我坚持运动77天,今天跑赢50%人</view>
-
-        <view class="today-check" bindtap="gourl" data-url="../../pages/home/sport/sport-home/index">今日打卡</view>
-
     </view>
-    <!-- 底部 -->
-    <view class="selectbox">
-        <van-notice-bar color="#1989fa" color='#000' background="#ecf9ff" background="#fff" left-icon="volume-o" custom-class='a' text="在微信开发者工具中进行测试，确保定位和轨迹绘制的准确性。完成测试后，提交审核并发布小程序。通过以上步骤，您就可以在微信小程序中使用高德地图实现实时运动轨迹的功能。" />
+    <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="typebox">
-            <view class="container">
-                    <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 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>
+        <view class="today-check" bindtap="gourl" data-url="../../pages/home/sport/sport-home/index">今日打卡</view>
+
 
     </view>
-    <!-- 活动 -->
-    <view class="activitybox">
-    
+
+    <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>

nova-werun/components/my/index.wxml

@@ -2,7 +2,7 @@
 <view class="all" style="height: {{screenHeight}}rpx;">
     <view class="navbox" style="height: {{navheight}}rpx;">
         <view class="nav">
-            <view class="nav-title">步小圈</view>
+            <view class="nav-title">个人中心</view>
         </view>
     </view>
     <view class="perxonalbox">