sport-home page

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

@@ -13,6 +13,8 @@ Page({
         contentHeight: 0, // 可用内容高度
         contentHeight2: 0,
         contentpadding: 0, //顶部padding高度
+        //
+        active: 0,
     },
 
     /**

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

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

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

@@ -1,4 +1,51 @@
 /* nova-werun/pages/home/sport/sport-home/index.wxss */
 .all{
     width: 100vw;
+    padding-left: 40rpx;
+    padding-right: 40rpx;
+    padding-top: 20rpx;
+    .tab{
+        font-size: 40rpx;
+    }
+    .textbox{
+        width: 100%;
+        height: 80rpx;
+        border-radius: 40rpx;
+        border: solid black 1px;
+        display: flex;
+        align-items: center;
+        margin-top: 40rpx;
+        .text{
+            font-size: 30rpx;
+            margin-left: 20rpx;
+        }
+        .number{
+            font-size: 32rpx;
+            margin-left: auto;
+            margin-right: 20rpx;
+        }
+    }
+    .mapbox{
+        width: 100%;
+        height: 1100rpx;
+        border-radius: 15rpx;
+        border: solid black 1px;
+        position: relative;
+        margin-top: 30rpx;
+        margin-bottom: 40rpx;
+        .button{
+            width: 150rpx;
+            height: 150rpx;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40rpx;
+            background-color: orange;
+            color: white;
+            position: absolute;
+            left: 38%;
+            bottom: 100rpx;
+        }
+    }
 }

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

@@ -1,5 +1,28 @@
 <!--nova-werun/pages/home/sport/sport-home/index.wxml-->
 <nav type="back" title="运动" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
-
-</view>
+<!-- 走路 -->
+    <van-tabs tab-class='tab' active="{{ active }}"  color='#87ceeb' title-active-color='#87ceeb' title-inactive-color='black'>
+        <van-tab title="步行">
+            <view class="textbox">
+                <view class="text">今日积累行走</view>
+                <view class="number">7公里 ></view>
+            </view>
+            <view class="mapbox">
+                <view></view>
+                <view class="button">GO</view>
+            </view>
+        </van-tab>
+        <!-- 跑步 -->
+        <van-tab title="跑步">
+                <view class="textbox">
+                    <view class="text">今日积累跑步</view>
+                    <view class="number">10公里 ></view>
+                </view>
+                <view class="mapbox">
+                    <view></view>
+                    <view class="button">GO</view>
+                </view>
+            </van-tab>
+    </van-tabs>
+</view>

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

@@ -1 +1 @@
-.all{width:100vw}
+.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx}.all .tab{font-size:40rpx}.all .textbox{width:100%;height:80rpx;border-radius:40rpx;border:solid black 1px;display:flex;align-items:center;margin-top:40rpx}.all .textbox .text{font-size:30rpx;margin-left:20rpx}.all .textbox .number{font-size:32rpx;margin-left:auto;margin-right:20rpx}.all .mapbox{width:100%;height:1100rpx;border-radius:15rpx;border:solid black 1px;position:relative;margin-top:30rpx;margin-bottom:40rpx}.all .mapbox .button{width:150rpx;height:150rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40rpx;background-color:orange;color:white;position:absolute;left:38%;bottom:100rpx}

project.private.config.json

@@ -57,6 +57,12 @@
                     "pathName": "nova-werun/pages/home/medal/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "运动",
+                    "pathName": "nova-werun/pages/home/sport/sport-home/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }