我的页面样式

pages/user/index.vue

@@ -3,25 +3,45 @@
     <view class="page-back"></view>
     <view class="navgator justify-center align-center">
       <view class="nav-title">
-        {{ $t("app.appName") }}
+        {{ $t("app.user") }}
       </view>
     </view>
     <view class="content-section">
       <!--顶部个人信息栏-->
-      <view class="user-info flex-row justify-start align-center">
-        <image
-          class="avatar"
-          :src="
-            userInfo?.avatar ? userInfo?.avatar : '/static/common/avata.gif'
-          "></image>
-        <view class="info flex-col align-center justify-start">
-          <view class="text flex-row">
-            <span class="span">{{ $t("user.username") }}:</span
-            >{{ userInfo?.nickname }}
+      <view class="user-info flex-col">
+        <view class="flex-row">
+          <image
+            class="avatar"
+            :src="
+              userInfo?.avatar ? userInfo?.avatar : '/static/common/avata.gif'
+            "
+          ></image>
+          <view class="info flex-col align-center justify-start">
+            <view class="text flex-row">
+              <span class="span">{{ $t("user.username") }}:</span
+              >{{ userInfo?.nickname }}
+            </view>
+            <view class="text flex-row">
+              <span class="span">{{ $t("user.phone") }}:</span
+              >{{ userInfo?.mobile }}
+            </view>
+          </view>
+        </view>
+
+        <view class="info-list flex-row w-full justify-between items-center">
+          <view class="flex-col justify-center items-center list-item">
+            <text class="info-text">6</text>
+            <text class="info-tip">待处理</text>
+          </view>
+          <view
+            class="flex-col justify-center items-center list-item mark-item"
+          >
+            <text class="info-text">6</text>
+            <text class="info-tip">关注设备</text>
           </view>
-          <view class="text flex-row">
-            <span class="span">{{ $t("user.phone") }}:</span
-            >{{ userInfo?.mobile }}
+          <view class="flex-col justify-center items-center list-item">
+            <text class="info-text">6</text>
+            <text class="info-tip">导出报表</text>
           </view>
         </view>
       </view>
@@ -29,10 +49,12 @@
       <view class="menu-list">
         <view
           class="card-cell flex-row align-center justify-between"
-          @click="navigateToChange">
+          @click="navigateToChange"
+        >
           <image
             src="/static/user/anquanzhongxin.svg"
-            mode="aspectFill"></image>
+            mode="aspectFill"
+          ></image>
           <view class="cell-con flex-row align-center justify-between">
             <view class="cell-text flex-row align-center justify-start">
               <view class="title">
@@ -63,7 +85,8 @@
 
         <view
           class="card-cell flex-row align-center justify-between"
-          @click="logout">
+          @click="logout"
+        >
           <image src="/static/user/tuichu.svg" mode="aspectFill"></image>
           <view class="cell-con flex-row align-center justify-between">
             <view class="cell-text flex-row align-center justify-start">
@@ -155,14 +178,14 @@ onMounted(async () => {
 }
 
 .page-back {
-  background-image: url("/static/common/1.png");
+  background-image: url("/static/user/bg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
-  height: 350px;
+  height: 200px;
   z-index: 0;
 }
 
@@ -180,17 +203,17 @@ onMounted(async () => {
 
 .nav-title {
   font-family: PingFang-SC, PingFang-SC;
-  font-weight: bold;
-  font-size: 16px;
+  padding-bottom: 10rpx;
+  font-size: 18px;
   color: #ffffff;
   line-height: 22px;
   text-align: right;
-  font-style: normal;
+  // font-style: normal;
 }
 
 .content-section {
   position: relative;
-  margin-top: 70px;
+  margin-top: 90px;
   width: 100%;
   height: calc(100% - 55px - 20px);
   overflow-y: auto;
@@ -198,7 +221,7 @@ onMounted(async () => {
 
 .user-info {
   width: 100%;
-  height: 80px;
+  height: 180px;
   padding: 14px 20px;
   box-sizing: border-box;
   background: #ffffff;
@@ -218,6 +241,32 @@ onMounted(async () => {
   }
 }
 
+.info-list {
+  margin-top: 50rpx;
+  border-top: 1px solid #e2e6ee;
+  padding-top: 10px;
+  padding-right: 20px;
+  padding-left: 20px;
+  .list-item {
+    text-align: center;
+  }
+  .mark-item {
+    border-left: 1px solid #e2e6ee;
+    border-right: 1px solid #e2e6ee;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  .info-text {
+    font-size: 48rpx;
+    font-weight: 500;
+    color: #0355ed;
+  }
+
+  .info-tip {
+    color: #657085;
+  }
+}
+
 .text {
   height: 19px;
   width: 100%;