my page

nova-werun/components/my/index.js

@@ -11,7 +11,41 @@ Component({
      * 组件的初始数据
      */
     data: {
+        //屏幕高度
+        statusBarHeight: 0, // 状态栏高度
+        screenHeight: 0, // 屏幕高度
+        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
+        bottomNavHeight: 0, // 底部导航栏高度
+        contentHeight: 0, // 可用内容高度
+        contentpadding: 0, //顶部padding高度
+    },
+    lifetimes: {
+
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+            // 计算
+            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 - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            this.setData({
+                statusBarHeight,
+                screenHeight,
+                customHeight,
+                bottomNavHeight,
+                contentHeight,
+                contentpadding
+            });
+
+        },
     },
 
     /**
@@ -21,8 +55,8 @@ Component({
         gourl(e) {
             const url = e.currentTarget.dataset.url
             wx.navigateTo({
-                url: `${url}`// 目标页面的路径
+                url: `${url}` // 目标页面的路径
             });
         },
     }
-})
+})

nova-werun/components/my/index.less

@@ -1 +1,77 @@
-/* nova-werun/components/my/index.wxss */
+/* nova-werun/components/my/index.wxss */
+.all{
+    width: 100vw;
+    background-color: #e6e6e6;
+    .perxonalbox{
+        width: 100%;
+        height: 270rpx;
+        background-color: #87ceeb;
+        padding: 20rpx;
+        display: flex;
+        position: relative;
+        margin-bottom: 80rpx;
+        .avatar{
+            width: 130rpx;
+            height: 130rpx;
+            border-radius: 15rpx;
+            background-color: red;
+        }
+        .namebox{
+            width: 200rpx;
+            height: 130rpx;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            margin-left: 20rpx;
+            .name{
+                font-size: 34rpx;
+            }
+            .databox{
+                width: 100%;
+                height: 40rpx;
+                display: flex;
+                color: #d81e06;
+                margin-top: 10rpx;
+                align-items: center;
+                .data{
+                    font-size: 28rpx;
+                }
+                image{
+                    width: 30rpx;
+                    height: 30rpx;
+                    margin-left: 10rpx;
+                }
+            }
+        }
+        .infobox{
+            width: 90%;
+            height: 130rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: white;
+            position: absolute;
+            left: 5%;
+            bottom: -66rpx;
+            border-radius: 20rpx;
+            .info{
+                width: 120rpx;
+                height: 100rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                margin-left: 10rpx;
+                margin-right: 10rpx;
+                .info-num{
+                    font-size: 30rpx;
+                }
+                .info-tex{
+                    font-size: 28rpx;
+                    color: gray;
+                    margin-top: 10rpx;
+                }
+            }
+        }
+    }
+}

nova-werun/components/my/index.wxml

@@ -1,5 +1,25 @@
 <!--nova-werun/components/my/index.wxml-->
 <nav type="title"  background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="perxonalbox">
+        <image class="avatar" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241111/je1q5i052857833.png?imageView2/1/w/200/h/200" mode="scaleToFill"></image>
+        <view class="namebox">
+            <view class="name">微信用户</view>
+            <view class="databox">
+                <view class="data">完善资料</view>
+                <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241120/1ssc1a102512989.png?imageView2/1/w/200/h/200"></image>
+            </view>
+        </view>
+        <view class="infobox">
+            <view class="info">
+                <view class="info-num">0</view>
+                <view class="info-tex">我的动态</view>
+            </view>
+            <view class="info">
+                <view class="info-num">0</view>
+                <view class="info-tex">我的积分</view>
+            </view>
+        </view>
+    </view>
     <view bindtap="gourl" data-url="../../pages/circle/my-circle/index">我的动态</view>
 </view>

nova-werun/components/my/index.wxss

@@ -0,0 +1 @@
+.all{width:100vw;background-color:#e6e6e6}.all .perxonalbox{width:100%;height:270rpx;background-color:#87ceeb;padding:20rpx;display:flex;position:relative;margin-bottom:80rpx}.all .perxonalbox .avatar{width:130rpx;height:130rpx;border-radius:15rpx;background-color:red}.all .perxonalbox .namebox{width:200rpx;height:130rpx;display:flex;justify-content:center;flex-direction:column;margin-left:20rpx}.all .perxonalbox .namebox .name{font-size:34rpx}.all .perxonalbox .namebox .databox{width:100%;height:40rpx;display:flex;color:#d81e06;margin-top:10rpx;align-items:center}.all .perxonalbox .namebox .databox .data{font-size:28rpx}.all .perxonalbox .namebox .databox image{width:30rpx;height:30rpx;margin-left:10rpx}.all .perxonalbox .infobox{width:90%;height:130rpx;display:flex;justify-content:center;align-items:center;background-color:white;position:absolute;left:5%;bottom:-66rpx;border-radius:20rpx}.all .perxonalbox .infobox .info{width:120rpx;height:100rpx;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-left:10rpx;margin-right:10rpx}.all .perxonalbox .infobox .info .info-num{font-size:30rpx}.all .perxonalbox .infobox .info .info-tex{font-size:28rpx;color:gray;margin-top:10rpx}