个人中心静态界面0.8

pages/profile/profile.vue

@@ -1,9 +1,6 @@
 <template>
   <view class="profile-page">
-    <!-- 页面标题 -->
-    <view class="page-title">
-      <text class="title-text">个人中心</text>
-    </view>
+    <image :src="commonEnum.FIRE_BACKGROUND" class="fire-background"></image>
 
     <!-- 头部用户信息 -->
     <view class="user-header">
@@ -163,40 +160,26 @@ export default {
 
 <style lang="scss" scoped>
 .profile-page {
-  position: relative;
-  background: #f5f5f5;
-  padding-bottom: 120rpx;
+  background: #f3f5f6;
 
   .fire-background {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 750rpx;
+    height: 592rpx;
     opacity: 1;
-    z-index: 1;
-  }
-}
-
-// 页面标题
-.page-title {
-  text-align: center;
-  padding: 40rpx 0 20rpx 0;
-
-  .title-text {
-    font-size: 36rpx;
-    font-weight: bold;
-    color: #333;
+    z-index: -1;
   }
 }
 
 // 用户头部
 .user-header {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
   padding: 40rpx;
-  margin: 20rpx;
+  margin: 270rpx 20rpx 20rpx 20rpx;
   border-radius: 20rpx;
   position: relative;
+  background: #ffffff;
 
   .user-info {
     display: flex;
@@ -206,7 +189,7 @@ export default {
     .avatar {
       width: 100rpx;
       height: 100rpx;
-      background: rgba(255, 255, 255, 0.3);
+      background: #817f7f;
       border-radius: 50%;
       display: flex;
       align-items: center;
@@ -216,7 +199,7 @@ export default {
       .avatar-text {
         font-size: 40rpx;
         font-weight: bold;
-        color: #fff;
+        color: #130000;
       }
     }
 
@@ -227,17 +210,18 @@ export default {
         display: block;
         font-size: 32rpx;
         font-weight: bold;
-        color: #fff;
+        color: #3d3d3d;
         margin-bottom: 10rpx;
       }
 
       .user-id {
         font-size: 28rpx;
-        color: rgba(255, 255, 255, 0.8);
+        color: #817f7f;
       }
     }
 
     .settings-icon {
+      margin-top: 50rpx;
       width: 60rpx;
       height: 60rpx;
       background: rgba(255, 255, 255, 0.2);
@@ -257,7 +241,7 @@ export default {
     position: absolute;
     top: 40rpx;
     right: 40rpx;
-    background: rgba(255, 255, 255, 0.2);
+    background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
     padding: 20rpx 30rpx;
     border-radius: 30rpx;
     display: flex;
@@ -271,7 +255,7 @@ export default {
 
     .share-text {
       font-size: 24rpx;
-      color: #fff;
+      color: #722b03;
     }
   }
 }