个人中心静态界面0.9

pages/profile/profile.vue

@@ -8,23 +8,23 @@
         <view class="avatar">
           <text class="avatar-text">昵</text>
         </view>
-        <view class="user-details">
+        <view class="share-btn">
-          <text class="user-name">昵称</text>
+          <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
-          <text class="user-id">123****8912</text>
+          <text class="share-text">分享推广</text>
         </view>
+      </view>
+      <view class="user-details">
+        <text class="user-name">昵称</text>
+        <text class="user-id">123****8912</text>
         <view class="settings-icon">
           <image :src="commonEnum.SET" class="settings-img" mode="aspectFit"></image>
         </view>
       </view>
-      <view class="share-btn">
-        <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
-        <text class="share-text">分享推广</text>
-      </view>
     </view>
 
     <!-- 财务摘要 -->
     <view class="financial-summary">
-      <image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="aspectFill"></image>
+      <image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="width"></image>
       <view class="main-amount">
         <text class="amount-number">18079.29</text>
         <text class="amount-label">可提现(元)</text>
@@ -184,51 +184,67 @@ export default {
   .user-info {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 30rpx;
 
     .avatar {
-      width: 100rpx;
+      width: 160rpx;
-      height: 100rpx;
+      height: 160rpx;
       background: #817f7f;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 30rpx;
 
       .avatar-text {
-        font-size: 40rpx;
+        font-size: 60rpx;
         font-weight: bold;
-        color: #130000;
+        color: #ffffff;
       }
     }
 
-    .user-details {
+    .share-btn {
-      flex: 1;
+      background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
+      padding: 20rpx 30rpx;
+      border-radius: 30rpx;
+      display: flex;
+      align-items: center;
 
-      .user-name {
+      .share-img {
-        display: block;
+        width: 32rpx;
-        font-size: 32rpx;
+        height: 32rpx;
-        font-weight: bold;
+        margin-right: 10rpx;
-        color: #3d3d3d;
-        margin-bottom: 10rpx;
       }
 
-      .user-id {
+      .share-text {
-        font-size: 28rpx;
+        font-size: 24rpx;
-        color: #817f7f;
+        color: #722b03;
       }
     }
+  }
+
+  .user-details {
+    display: flex;
+    padding-left: 20rpx;
+    justify-content: space-between;
+
+    .user-name {
+      display: block;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #3d3d3d;
+      margin-bottom: 10rpx;
+    }
+
+    .user-id {
+      font-size: 28rpx;
+      color: #817f7f;
+    }
 
     .settings-icon {
-      margin-top: 50rpx;
-      width: 60rpx;
-      height: 60rpx;
       background: rgba(255, 255, 255, 0.2);
       border-radius: 50%;
       display: flex;
-      align-items: center;
-      justify-content: center;
 
       .settings-img {
         width: 40rpx;
@@ -236,28 +252,6 @@ export default {
       }
     }
   }
-
-  .share-btn {
-    position: absolute;
-    top: 40rpx;
-    right: 40rpx;
-    background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
-    padding: 20rpx 30rpx;
-    border-radius: 30rpx;
-    display: flex;
-    align-items: center;
-
-    .share-img {
-      width: 32rpx;
-      height: 32rpx;
-      margin-right: 10rpx;
-    }
-
-    .share-text {
-      font-size: 24rpx;
-      color: #722b03;
-    }
-  }
 }
 
 // 财务摘要
@@ -268,6 +262,7 @@ export default {
   color: #fff;
   position: relative;
   overflow: hidden;
+  border: 1px red solid;
 
   .coin-background {
     position: absolute;