个人中心静态界面1.0

pages/profile/profile.vue

@@ -4,10 +4,10 @@
 
     <!-- 头部用户信息 -->
     <view class="user-header">
+      <view class="avatar">
+        <text class="avatar-text">昵</text>
+      </view>
       <view class="user-info">
-        <view class="avatar">
-          <text class="avatar-text">昵</text>
-        </view>
         <view class="share-btn">
           <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
           <text class="share-text">分享推广</text>
@@ -175,34 +175,39 @@ export default {
 
 // 用户头部
 .user-header {
-  padding: 40rpx;
+  padding: 40rpx 40rpx 40rpx 40rpx;
   margin: 270rpx 20rpx 20rpx 20rpx;
   border-radius: 20rpx;
   position: relative;
   background: #ffffff;
 
+
+  .avatar {
+    position: absolute;
+    top: -80rpx; // 头像向上偏移，一半在容器外
+    left: 40rpx;
+    width: 160rpx;
+    height: 160rpx;
+    background: #817f7f;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10; // 确保头像在最上层
+
+    .avatar-text {
+      font-size: 60rpx;
+      font-weight: bold;
+      color: #ffffff;
+    }
+  }
+
   .user-info {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end; // 分享按钮靠右对齐
     margin-bottom: 30rpx;
 
-    .avatar {
-      width: 160rpx;
-      height: 160rpx;
-      background: #817f7f;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .avatar-text {
-        font-size: 60rpx;
-        font-weight: bold;
-        color: #ffffff;
-      }
-    }
-
     .share-btn {
       background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
       padding: 20rpx 30rpx;
@@ -225,8 +230,8 @@ export default {
 
   .user-details {
     display: flex;
-    padding-left: 20rpx;
     justify-content: space-between;
+    align-items: flex-start;
 
     .user-name {
       display: block;
@@ -245,6 +250,7 @@ export default {
       background: rgba(255, 255, 255, 0.2);
       border-radius: 50%;
       display: flex;
+      padding: 10rpx;
 
       .settings-img {
         width: 40rpx;