我的页面

pages/mine/mine.js

@@ -1,4 +1,5 @@
 // pages/mine/mine.js
+const app = getApp()
 Page({
 
     /**
@@ -12,7 +13,10 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-
+        this.setData({
+            statusHeight: app.globalData.deviceInfo.statusHeight,
+            navigationHeight: app.globalData.deviceInfo.navigationHeight,
+          });
     },
 
     /**

pages/mine/mine.json

@@ -1,3 +1,6 @@
 {
-    "usingComponents": {}
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    },
+    "navigationStyle": "custom"
 }

pages/mine/mine.wxml

@@ -1,2 +1,62 @@
 <!--pages/mine/mine.wxml-->
-<text>pages/mine/mine.wxml</text>
+<view class="header">
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;line-height:{{navigationHeight}}px;text-align: center;">
+        我的
+    </view>
+</view>
+<view class="body">
+    <view class="userInfo flex flex-sb items-center">
+        <image src="../../images/zixun.png" class="avatar" mode="" />
+        <view class="name flex-1">五月的风</view>
+        <van-icon name="arrow" />
+    </view>
+    <view class="house">
+        <view class="flex flex-col">
+            <view class="apartment">
+                福林苑
+            </view>
+            <view class="house_name">
+                5-1-805 南卧
+            </view>
+        </view>
+        <image src="../../images/mine/house.png" mode="" />
+    </view>
+    <view class="device">
+        <view class="title">
+            基础设备
+        </view>
+        <view class="device-c">
+            <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+                <view class="flex flex-col">
+                    <view style="margin:20rpx 0 0 28rpx">空调</view>
+                    <view>正常</view>
+                </view>
+                <image src="../../images/mine/device.png" />
+            </view>
+            <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+                <view class="flex flex-col">
+                    <view style="margin:20rpx 0 0 28rpx">空调</view>
+                    <view>正常</view>
+                </view>
+                <image src="../../images/mine/device.png" />
+            </view> <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+                <view class="flex flex-col">
+                    <view style="margin:20rpx 0 0 28rpx">空调</view>
+                    <view>正常</view>
+                </view>
+                <image src="../../images/mine/device.png" />
+            </view> <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+                <view class="flex flex-col">
+                    <view style="margin:20rpx 0 0 28rpx">空调</view>
+                    <view>正常</view>
+                </view>
+                <image src="../../images/mine/device.png" />
+            </view>
+        </view>
+    </view>
+    <view class="card">
+        <view class="title">
+            资源管理
+        </view>
+    </view>
+</view>

pages/mine/mine.wxss

@@ -1 +1,94 @@
-/* pages/mine/mine.wxss */
+/* pages/mine/mine.wxss */
+.navigation {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+  font-size: 30rpx;
+  position: relative;
+  z-index: 100;
+}
+
+.header {
+  width: 100%;
+  background: linear-gradient(to right, #befeed 0%, #d5eefe 50%, #ebe9fb 100%);
+  height: 428rpx;
+}
+
+.body {
+  position: relative;
+  top: -245rpx;
+}
+
+.header-card {
+  background: linear-gradient(180deg, rgba(83, 185, 232, 1) 0%, rgba(85, 213, 220, 1) 56%, rgba(99, 222, 214, 1) 100%);
+  width: calc(100vw - 40rpx);
+  margin: 0 auto;
+  top: 25px;
+  color: #ffffff;
+}
+
+.userInfo {
+  padding: 0 32rpx 0 56rpx;
+}
+
+.avatar {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 46rpx;
+  margin-right: 26rpx;
+}
+
+.house {
+  position: relative;
+  background: linear-gradient(180deg, rgba(221, 242, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
+  padding: 40rpx;
+  box-sizing: border-box;
+  width: calc(100vw - 40rpx);
+  margin: 0 auto;
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+.house image {
+  position: absolute;
+  right: 40rpx;
+  width: 240rpx;
+  height: 234rpx;
+  top: -34px;
+}
+
+.apartment {
+  color: rgba(16, 16, 16, 1);
+  font-size: 40rpx;
+}
+
+.house_name {
+  color: rgba(153, 153, 153, 1);
+  font-size: 30rpx;
+}
+
+.device {
+  width: calc(100vw - 40rpx);
+  margin: 0 auto;
+  border-radius: 0 0 20rpx 20rpx;
+  padding: 30rpx 28rpx;
+  box-sizing: border-box;
+  position: relative;
+  top: -20rpx;
+  border-radius: 20rpx;
+}
+.device image{
+  width: 104rpx;
+  height: 104rpx;
+}
+.title {
+  color: rgb(64, 64, 64);
+  font-size: 32rpx;
+}
+.device-c{
+  display: flex;
+  gap: 14rpx;
+  border-radius: 12rpx;
+  flex-wrap: wrap;
+}