📦 我的页面

src/pages.json

@@ -74,6 +74,7 @@
       "path": "pages/user/index",
       "style": {
         "navigationBarTitleText": "个人中心",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     },

src/pages/user/index.vue

@@ -1,54 +1,62 @@
 <template>
-  <view class="main p-3" style="padding-bottom:50rpx;">
-    <view v-if="userInfo" class="user-info">
-      <image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
-      <view class="info">
-        <text class="nickname">{{ userInfo.nickname }}</text>
-        <text class="extra"><text class="label">守护编号</text><text>{{ userInfo.id }}</text><text class="label point-label">积分</text><text>{{ userInfo.totalCheckins }}</text></text>
+  <view class="home-container h-100vh d-flex flex-col bg-base page-user-index">
+    <image 
+      class="w-100 position-absolute"
+      src="/static/images/mine/Banner.png"
+      mode="widthFix"
+    />
+    <image 
+      class="position-absolute title"
+      src="/static/images/mine/Title.png"
+      mode="widthFix"
+    />
+    <view class="content h-100 d-flex flex-col wing-l">
+      <view v-if="userInfo" class="user-info">
+        <image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
+        <view class="info">
+          <text class="nickname">{{ userInfo.nickname }}</text>
+          <text class="extra"><text class="label">守护编号</text><text>{{ userInfo.id }}</text><text class="label point-label">积分</text><text>{{ userInfo.totalCheckins }}</text></text>
+        </view>
+        <text class="iconfont icon-arrow-right"></text>
       </view>
-      <text class="iconfont icon-arrow-right"></text>
-    </view>
-    <view v-else class="user-info" @click="navTo('user/login')">
-      <image :src="UserHead" mode="aspectFill" class="avatar"></image>
-      <view class="info">
-        <text class="nickname">点击登录</text>
-        <text class="extra"> 登录后您将获得更多权益</text>
-      </view>
-      <text class="iconfont icon-arrow-right"></text>
-    </view>
-    <view class="list">
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的好友</text><text class="iconfont icon-arrow-right"></text>
+      <view v-else class="user-info" @click="navTo('user/login')">
+        <image :src="UserHead" mode="aspectFill" class="avatar"></image>
+        <view class="info">
+          <text class="nickname">点击登录</text>
+          <text class="extra"> 登录后您将获得更多权益</text>
+        </view>
+        <text class="iconfont icon-arrow-right"></text>
       </view>
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/9fb29e8bdb66490034145c90f892773a.png" mode="aspectFill"></image><text class="label">邀请好友</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/1366973c061bf98594036e42c0344593.png" mode="aspectFill"></image><text class="label">积分日志</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-    </view>
-    <view class="list">
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的收藏</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/07f750b4cf4959654c40171fdae91c3a.png" mode="aspectFill"></image><text class="label">投稿</text><view class="btn">去投稿</view><text class="iconfont icon-arrow-right"></text>
-      </view>
-    </view>
-    <view class="list">
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/66d4665b1da5075e60148312469b2630.png" mode="aspectFill"></image><text class="label">我的投稿</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/acd97ca7b3f7736942495c7aec1dd65b.png" mode="aspectFill"></image><text class="label">加入我们</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-    </view>
-    <view class="list">
-      <view class="entry">
-        <image src="https://mn.wenlvti.net/uploads/20250313/d2e9010323d098aa51e268fc32f14d3d.png" mode="aspectFill"></image><text class="label">我的预约</text><text class="iconfont icon-arrow-right"></text>
-      </view>
-      <view v-if="userInfo" class="entry" @click="doLogout">
-        <image src="https://mn.wenlvti.net/uploads/20250313/cbc47d0b9cad7891e6154359952858c6.png" mode="aspectFill"></image><text class="label">退出登录</text><text class="iconfont icon-arrow-right"></text>
+      <view class="d-flex bg-base flex-col shadow-l radius-l">
+        <view class="list">
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的好友</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/9fb29e8bdb66490034145c90f892773a.png" mode="aspectFill"></image><text class="label">邀请好友</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/1366973c061bf98594036e42c0344593.png" mode="aspectFill"></image><text class="label">积分日志</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的收藏</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/07f750b4cf4959654c40171fdae91c3a.png" mode="aspectFill"></image><text class="label">投稿</text><view class="btn">去投稿</view><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/66d4665b1da5075e60148312469b2630.png" mode="aspectFill"></image><text class="label">我的投稿</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/acd97ca7b3f7736942495c7aec1dd65b.png" mode="aspectFill"></image><text class="label">加入我们</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view class="entry">
+            <image src="https://mn.wenlvti.net/uploads/20250313/d2e9010323d098aa51e268fc32f14d3d.png" mode="aspectFill"></image><text class="label">我的预约</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+          <view v-if="userInfo" class="entry" @click="doLogout">
+            <image src="https://mn.wenlvti.net/uploads/20250313/cbc47d0b9cad7891e6154359952858c6.png" mode="aspectFill"></image><text class="label">退出登录</text><text class="iconfont icon-arrow-right"></text>
+          </view>
+        </view>
       </view>
     </view>
     <tabbar :current="4"></tabbar>
@@ -56,10 +64,10 @@
 </template>
 
 <script setup lang="ts">
-import { confirm } from '@/common/utils/DialogAction';
-import { navTo } from '@/common/utils/PageAction';
 import Tabbar from '@/common/components/tabs/tabbar.vue';
 import UserHead from '@/static/images/home/UserHead.png';
+import { confirm } from '@/common/utils/DialogAction';
+import { navTo } from '@/common/utils/PageAction';
 import { useAuthStore } from '@/store/auth';
 import { computed } from 'vue';
 
@@ -77,11 +85,17 @@ function doLogout() {
 </script>
 
 <style lang="scss" scoped>
+.page-user-index {
+  > .content {
+    margin-top: 10vh;
+  }
+  > .title {
+    width: 100rpx;
+  }
+}
 .list{
-  background: #FFFFFF;
-  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(125,125,125,0.21);
-  border-radius: 20rpx;
   margin-bottom: 34rpx;
+
   .entry{
     border-bottom: 1rpx solid #dddddd;
     font-size: 28rpx;