“我的”样式

app.wxss

@@ -197,3 +197,23 @@ page{
 .mr-30{
   margin-right: 30rpx;
 }
+.mt-24{
+  margin-top: 24rpx;
+}
+.p10{
+  padding: 10rpx;
+}
+.mt-14{
+  margin-top: 14rpx;
+}
+.icon-26{
+  width: 26rpx;
+  height: 26rpx;
+}
+.ml-28{
+  margin-left: 28rpx;
+}
+.icon-20{
+  width: 20rpx !important;
+  height: 20rpx !important;
+}

pages/mine/mine.wxml

@@ -29,34 +29,58 @@
             <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 class="state"><image src="../../images/mine/round_g.png" class="icon-20 ml-28" mode=""/> 正常</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 class="state"><image src="../../images/mine/round_g.png" class="icon-20 ml-28" mode=""/> 正常</view>
                 </view>
                 <image src="../../images/mine/device.png" />
-            </view> <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+            </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 class="state"><image src="../../images/mine/round_g.png" class="icon-20 ml-28" mode=""/> 正常</view>
                 </view>
                 <image src="../../images/mine/device.png" />
-            </view> <view class="flex flex-sb" style="width: 312rpx;background-color: #f3f9fc;border-radius: 10rpx;">
+            </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 class="state"><image src="../../images/mine/round_g.png" class="icon-20 ml-28" mode=""/> 正常</view>
                 </view>
                 <image src="../../images/mine/device.png" />
             </view>
         </view>
     </view>
-    <view class="card">
+    <view class="card" style="width: calc(100vw - 40rpx);margin:0 auto;">
         <view class="title">
             资源管理
         </view>
+        <view class="flex flex-sb">
+            <view>
+                本月用水：<text class="num blue">12m³</text> <image class="icon-26" src="../../images/mine/blue.png"></image>
+            </view>
+            <view style="color: #bbbbbb;">
+                |
+            </view>
+            <view>
+                本月用电：<text class="num pink">28kw-h</text><image class="icon-26" src="../../images/mine/red.png"></image>
+            </view>
+        </view>
+    </view>
+    <view class="card" style="width: calc(100vw - 40rpx);margin:14rpx auto 0;">
+        <view class="title">
+            服务信息
+        </view>
+        <view class="service-c">
+            <view class="flex  p10" style="width: 180rpx;background-color: #f3f9fc;border-radius: 10rpx;" wx:for="{{7}}">
+                <image src="{{'../../images/mine/s'+(index + 1)+'.png'}}" class="icon-40" />
+                <view>空调空调</view>
+            </view>
+        </view>
     </view>
 </view>

pages/mine/mine.wxss

@@ -1,4 +1,7 @@
 /* pages/mine/mine.wxss */
+page{
+  background-color: #f5f5f5;
+}
 .navigation {
   width: 100%;
   display: flex;
@@ -6,7 +9,7 @@
   justify-content: center;
   color: #333333;
   font-size: 30rpx;
-  position: relative;
+  position: fixed;
   z-index: 100;
 }
 
@@ -20,7 +23,12 @@
   position: relative;
   top: -245rpx;
 }
-
+.title{
+  color: #000000;
+    font-size: 32rpx;
+    font-weight: 600;
+    margin-bottom: 24rpx;
+}
 .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);
@@ -46,7 +54,7 @@
   padding: 40rpx;
   box-sizing: border-box;
   width: calc(100vw - 40rpx);
-  margin: 0 auto;
+  margin: 24rpx auto 0;
   border-radius: 20rpx 20rpx 0 0;
 }
 
@@ -77,6 +85,7 @@
   position: relative;
   top: -20rpx;
   border-radius: 20rpx;
+  background-color: #ffffff;
 }
 .device image{
   width: 104rpx;
@@ -92,3 +101,23 @@
   border-radius: 12rpx;
   flex-wrap: wrap;
 }
+.service-c{
+  display: flex;
+  gap: 20rpx;
+  border-radius: 12rpx;
+  flex-wrap: wrap;
+}
+.num{
+    font-weight: 600;
+    font-size:32rpx ;
+}
+.blue{
+  color: #549cf0;
+}
+.pink{
+  color: #ff776f;
+}
+.state{
+  font-size: 24rpx;
+  color: #b5b5b5;
+}