my page

nova-tourism/components/my/index.js

@@ -11,7 +11,31 @@ Component({
      * 组件的初始数据
      */
     data: {
+        statusBarHeight: 0,
+        screenHeight: 0,
+        customHeight: 0,
+        bottomNavHeight: 0,
+        contentHeight: 0,
+    },
+    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 contentHeight = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            this.setData({
+                statusBarHeight,
+                screenHeight,
+                customHeight,
+                bottomNavHeight,
+                contentHeight
+            });
+        },
     },
 
     /**

nova-tourism/components/my/index.less

@@ -0,0 +1,171 @@
+/* nova-tourism/components/my/index.wxss */
+.all {
+    width: 100vw;
+    height: 100vh; /* 如果你希望高度为视口高度，可以设置为 100vh */
+    background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/r9kdh9015313785.png);
+    background-position: center; /* 背景图片居中 */
+    background-size: cover; /* 背景图片覆盖整个元素 */
+    background-repeat: no-repeat; /* 不重复背景图片 */
+    padding-left: 20rpx;
+    padding-right: 20rpx;
+    .infobox{
+        width: 100%;
+        display: flex;
+        height: auto;
+        padding-top: 20rpx;
+        image{
+            width: 150rpx;
+            height: 150rpx;
+            border-radius: 15rpx;
+        }
+        .info{
+            width: auto;
+            height: 100rpx;
+            margin-left: 40rpx;
+            .name{
+                font-size: 34rpx;
+                font-weight: 600;
+                margin-bottom: 10rpx;
+            }
+            .uid{
+                font-size: 30rpx;
+            }
+            .labelbox{
+                height: 40rpx;
+                display: flex;
+                margin-top: 10rpx;
+                .label{
+                    width: 90rpx;
+                    height: 40rpx;
+                    font-size: 24rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background-color: #39362D;
+                    color: white;
+                    margin-left: 10rpx;
+                    border-radius: 15rpx;
+                }
+                .label:nth-child(1){
+                    margin-left: 0rpx;
+                }
+            }
+        }
+    }
+    .tatlebox{
+        width: 100%;
+        height: 260rpx;
+        margin-top: 40rpx;
+        background-color: #B2CEB9;
+        border-radius: 15rpx;
+        display: flex;
+        justify-content: space-around;
+        padding-left: 45rpx;
+        padding-right: 45rpx;
+        .tatle{
+            width: 100rpx;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            image{
+                width: 100rpx;
+                height: 100rpx;
+                background-color: aqua;
+            }
+            .text{
+                font-size: 28rpx;
+                margin-top: 30rpx;
+            }
+        }
+    }
+    .myorderbox{
+        width: 100%;
+        background-color: white;
+        margin-top: 34rpx;
+        padding-left: 30rpx;
+        padding-right: 30rpx;
+        padding-top: 10rpx;
+        border-radius: 15rpx;
+        .my-name{
+            font-size: 30rpx;
+        }
+        .or-box{
+            width: 100%;
+            height: 200rpx;
+            background-color: white;
+            display: flex;
+            justify-content: space-around;
+            .myorder{
+                height: 200rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                image{
+                    width: 80rpx;
+                    height: 80rpx;
+                    background-color: aqua;
+                }
+                .or-tex{
+                    font-size: 28rpx;
+                    margin-top: 30rpx;
+                }
+            }
+        }
+
+    }
+    .tuiguangbox{
+        width: 100%;
+        height: 160rpx;
+        background-color: white;
+        border-radius: 15rpx;
+        display: flex;
+        align-items: center;
+        padding-left: 30rpx;
+        padding-right: 30rpx;
+        margin-top: 30rpx;
+        .tuibox{
+            height: 120rpx;
+            width: 400rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .tui-title{
+                font-size: 32rpx;
+                margin-bottom: 10rpx;
+            }
+            .tuiguang-tex{
+                font-size: 28rpx;
+                color: #737373;
+            }
+        }
+        image{
+            width: 120rpx;
+            height: 120rpx;
+            background-color: aqua;
+            margin-left: auto;
+            margin-right: 40rpx;
+        }
+    }
+    .leavebox{
+        width: 100%;
+        height: 100rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: white;
+        border-radius: 15rpx;
+        margin-top: 30rpx;
+        image{
+            width: 50rpx;
+            height: 50rpx;
+            background-color: aqua;
+        }
+        .leave-tex{
+            font-size: 34rpx;
+            margin-left: 10rpx;
+        }
+    }
+}

nova-tourism/components/my/index.wxml

@@ -1,2 +1,61 @@
 <!--nova-tourism/components/my/index.wxml-->
-<text>我的</text>
+<nav type="title" background-color="#ffffff" frontColor="#000000" title="望仙谷" />
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="infobox">
+        <image src="https://file-cloud.fmode.cn//tmp/qE8I1dp1Z0O0ae3b6ab1226c9225aaa630c9529cba65.jpeg?imageView2/1/w/200/h/200"></image>
+        <view class="info">
+            <view class="name">超级无敌暴龙</view>
+            <view class="uid">UID:123456789</view>
+            <view class="labelbox">
+                <block wx:for="{{2}}">
+                    <view class="label">名宿主</view>
+                    <view class="label">达人</view>
+                </block>
+            </view>
+        </view>
+    </view>
+    <view class="tatlebox">
+        <view class="tatle">
+            <image src=""></image>
+            <view class="text">卡卷包</view>
+        </view>
+        <view class="tatle">
+            <image src=""></image>
+            <view class="text">钱包</view>
+        </view>
+    </view>
+    <view class="myorderbox">
+        <view class="my-name">我的订单</view>
+        <view class="or-box">
+            <view class="myorder">
+                <image></image>
+                <view class="or-tex">处理中</view>
+            </view>
+            <view class="myorder">
+                <image></image>
+                <view class="or-tex">进行中</view>
+            </view>
+            <view class="myorder">
+                <image></image>
+                <view class="or-tex">已完成</view>
+            </view>
+            <view class="myorder">
+                <image></image>
+                <view class="or-tex">退款/售后</view>
+            </view>
+        </view>
+
+
+    </view>
+    <view class="tuiguangbox">
+        <view class="tuibox">
+            <view class="tui-title">推广中心</view>
+            <view class="tuiguang-tex">成为推广达人，获取佣金返利</view>
+        </view>
+        <image></image>
+    </view>
+    <view class="leavebox">
+        <image></image>
+        <view class="leave-tex">退出登录</view>
+    </view>
+</view>