收敛我的页视觉层级

hookehuyr
Commit 84ecc06235f03a36fb4338d744d33831eb5fc893 84ecc062 1 parent 270988d6
Showing 1 changed file with 51 additions and 53 deletions
src/pages/mine/index.vue
--- a/src/pages/mine/index.vue
View file @84ecc06
+++ b/src/pages/mine/index.vue
View file @84ecc06
@@ -211,9 +211,8 @@ const handleMenuTap = ({ title }) => {
 .mine-page {
   min-height: 100vh;
   background:
-    radial-gradient(circle at top right, rgba(201, 163, 85, 0.16), transparent 26%),
+    radial-gradient(circle at top right, rgba(166, 121, 57, 0.1), transparent 32%),
-    radial-gradient(circle at 8% 22%, rgba(255, 244, 220, 0.9), transparent 22%),
+    linear-gradient(180deg, #fffaf3 0%, #f6f7fb 100%);
-    linear-gradient(180deg, #fbf8f1 0%, #f4efe5 54%, #f8f5ee 100%);
   position: relative;
   // 顶部装饰背景
@@ -223,6 +222,7 @@ const handleMenuTap = ({ title }) => {
     left: 0;
     right: 0;
     height: 304rpx;
+    background: linear-gradient(180deg, rgba(214, 184, 124, 0.18) 0%, rgba(214, 184, 124, 0.04) 72%, rgba(214, 184, 124, 0) 100%);
     border-radius: 0 0 48rpx 48rpx;
     overflow: hidden;
   }
@@ -234,8 +234,8 @@ const handleMenuTap = ({ title }) => {
     right: 0;
     bottom: 0;
     background-image:
-      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
-      radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
+      radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
   }
   .page-content {
@@ -250,10 +250,12 @@ const handleMenuTap = ({ title }) => {
     margin-top: 10rpx;
     padding: 28rpx;
     border-radius: 32rpx;
-    background: linear-gradient(135deg, rgba(122, 88, 31, 0.18), rgba(255, 255, 255, 0.18));
+    background: linear-gradient(135deg, rgba(255, 251, 246, 0.72), rgba(255, 255, 255, 0.52));
-    border: 2rpx solid rgba(255, 255, 255, 0.18);
+    border: 2rpx solid rgba(214, 184, 124, 0.08);
-    box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.24);
+    box-shadow:
-    backdrop-filter: blur(16rpx);
+      inset 0 2rpx 0 rgba(255, 255, 255, 0.22),
+      0 12rpx 36rpx rgba(15, 23, 42, 0.03);
+    backdrop-filter: blur(20rpx) saturate(118%);
     overflow: hidden;
     box-sizing: border-box;
@@ -269,7 +271,7 @@ const handleMenuTap = ({ title }) => {
     &__orb {
       position: absolute;
       border-radius: 50%;
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.04) 70%, transparent 100%);
+      background: radial-gradient(circle, rgba(214, 184, 124, 0.12) 0%, rgba(214, 184, 124, 0.02) 70%, transparent 100%);
       &--lg {
         width: 180rpx;
@@ -295,10 +297,6 @@ const handleMenuTap = ({ title }) => {
     gap: 24rpx;
     padding: 30rpx 28rpx;
     min-height: 176rpx;
-    border-radius: 28rpx;
-    background: linear-gradient(135deg, rgba(255, 252, 246, 0.9), rgba(255, 250, 240, 0.72));
-    border: 1rpx solid rgba(255, 255, 255, 0.45);
-    box-shadow: 0 18rpx 48rpx rgba(82, 58, 24, 0.08);
     box-sizing: border-box;
     &__avatar {
@@ -324,7 +322,7 @@ const handleMenuTap = ({ title }) => {
       flex-shrink: 0;
       font-size: 30rpx;
       line-height: 1;
-      color: rgba(142, 99, 37, 0.68);
+      color: rgba(125, 109, 82, 0.64);
     }
     &__name-block {
@@ -337,13 +335,13 @@ const handleMenuTap = ({ title }) => {
     &__subtext {
       font-size: 22rpx;
       line-height: 1.4;
-      color: #8f816b;
+      color: #948b7d;
     }
     &__tip {
       font-size: 22rpx;
       line-height: 1.6;
-      color: #8f816b;
+      color: #948b7d;
     }
   }
@@ -352,7 +350,7 @@ const handleMenuTap = ({ title }) => {
     height: 128rpx;
     border-radius: 50%;
     padding: 4rpx;
-    background: linear-gradient(135deg, #e8d5a8, #c9a355);
+    background: linear-gradient(135deg, #e6dcc1, #cdb991);
   }
   .avatar-btn {
@@ -385,13 +383,13 @@ const handleMenuTap = ({ title }) => {
   .nickname-text {
     font-size: 36rpx;
     font-weight: 700;
-    color: #2f2212;
+    color: #3b352d;
     line-height: 1.4;
   }
   .arrow-text {
     font-size: 28rpx;
-    color: #c4a86a;
+    color: #b9ac96;
     line-height: 1;
     &--light {
@@ -410,7 +408,7 @@ const handleMenuTap = ({ title }) => {
   .section-title-text {
     font-size: 26rpx;
     font-weight: 600;
-    color: #8c7a5e;
+    color: #847b70;
     letter-spacing: 2rpx;
     position: relative;
     padding-left: 18rpx;
@@ -423,7 +421,7 @@ const handleMenuTap = ({ title }) => {
       bottom: 8rpx;
       width: 6rpx;
       border-radius: 999rpx;
-      background: linear-gradient(180deg, #d3af6b, #a67939);
+      background: linear-gradient(180deg, #d8c7a4, #b8a489);
     }
   }
@@ -434,8 +432,8 @@ const handleMenuTap = ({ title }) => {
     gap: 18rpx;
     background: rgba(255, 255, 255, 0.98);
     border-radius: 24rpx;
-    border: 2rpx solid rgba(166, 121, 57, 0.08);
+    border: 2rpx solid rgba(166, 121, 57, 0.05);
-    box-shadow: 0 18rpx 48rpx rgba(56, 40, 19, 0.06);
+    box-shadow: 0 14rpx 36rpx rgba(15, 23, 42, 0.04);
     padding: 22rpx;
     box-sizing: border-box;
   }
@@ -448,8 +446,8 @@ const handleMenuTap = ({ title }) => {
     padding: 22rpx 20rpx;
     min-height: 0;
     border-radius: 20rpx;
-    background: linear-gradient(180deg, #fffdfa 0%, #fcf7ee 100%);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 249, 246, 0.96) 100%);
-    border: 1rpx solid rgba(166, 121, 57, 0.08);
+    border: 1rpx solid rgba(166, 121, 57, 0.05);
     box-sizing: border-box;
   }
@@ -471,7 +469,7 @@ const handleMenuTap = ({ title }) => {
   .menu-item-arrow {
     flex-shrink: 0;
     font-size: 26rpx;
-    color: #c8b38d;
+    color: #c0b8ac;
     line-height: 1;
   }
@@ -485,38 +483,38 @@ const handleMenuTap = ({ title }) => {
     box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.45);
     &.menu-icon--orders {
-      background: linear-gradient(135deg, #fef3e2, #fde8c8);
+      background: linear-gradient(135deg, #faf4ea, #f4ead7);
     }
     &.menu-icon--favorites {
-      background: linear-gradient(135deg, #fef1e8, #fde2cc);
+      background: linear-gradient(135deg, #faf1ec, #f3e4da);
     }
     &.menu-icon--history {
-      background: linear-gradient(135deg, #eef6ee, #ddefde);
+      background: linear-gradient(135deg, #f0f5f0, #e3ece3);
     }
     &.menu-icon--address {
-      background: linear-gradient(135deg, #eef2f8, #dde5f0);
+      background: linear-gradient(135deg, #eff2f6, #e4e9ef);
     }
     &.menu-icon--settings {
-      background: linear-gradient(135deg, #f0f0f0, #e4e4e4);
+      background: linear-gradient(135deg, #f3f3f3, #e9e9e9);
     }
     &.menu-icon--about {
-      background: linear-gradient(135deg, #fef3e2, #fde8c8);
+      background: linear-gradient(135deg, #faf4ea, #f4ead7);
     }
     &.menu-icon--help {
-      background: linear-gradient(135deg, #eef6ee, #ddefde);
+      background: linear-gradient(135deg, #f0f5f0, #e3ece3);
     }
   }
   .menu-item-title {
     font-size: 24rpx;
     font-weight: 600;
-    color: #342616;
+    color: #45403a;
     line-height: 1.2;
   }
   .menu-item-desc {
     font-size: 20rpx;
-    color: #978875;
+    color: #9a9184;
     line-height: 1.3;
   }
@@ -524,8 +522,8 @@ const handleMenuTap = ({ title }) => {
   .menu-list {
     background: rgba(255, 255, 255, 0.98);
     border-radius: 24rpx;
-    border: 2rpx solid rgba(166, 121, 57, 0.08);
+    border: 2rpx solid rgba(166, 121, 57, 0.05);
-    box-shadow: 0 18rpx 48rpx rgba(56, 40, 19, 0.06);
+    box-shadow: 0 14rpx 36rpx rgba(15, 23, 42, 0.04);
     overflow: hidden;
   }
@@ -535,7 +533,7 @@ const handleMenuTap = ({ title }) => {
     padding: 28rpx 32rpx;
     gap: 24rpx;
     position: relative;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 247, 0.98));
     &::after {
       content: '';
@@ -573,13 +571,13 @@ const handleMenuTap = ({ title }) => {
   .menu-list-title {
     font-size: 28rpx;
     font-weight: 500;
-    color: #342616;
+    color: #45403a;
     line-height: 1.3;
   }
   .menu-list-desc {
     font-size: 22rpx;
-    color: #978875;
+    color: #9a9184;
     line-height: 1.2;
   }
@@ -591,7 +589,7 @@ const handleMenuTap = ({ title }) => {
     &__text {
       font-size: 22rpx;
       letter-spacing: 4rpx;
-      color: rgba(143, 129, 107, 0.9);
+      color: rgba(147, 141, 131, 0.9);
     }
   }
@@ -611,15 +609,15 @@ const handleMenuTap = ({ title }) => {
     width: 100%;
     padding: 34rpx 30rpx 30rpx;
     border-radius: 28rpx;
-    background: #fffdf9;
+    background: #fffefd;
-    box-shadow: 0 24rpx 64rpx rgba(33, 24, 12, 0.18);
+    box-shadow: 0 24rpx 64rpx rgba(15, 23, 42, 0.12);
     box-sizing: border-box;
     &__title {
       display: block;
       font-size: 32rpx;
       font-weight: 600;
-      color: #2f2212;
+      color: #3b352d;
       line-height: 1.3;
     }
@@ -628,7 +626,7 @@ const handleMenuTap = ({ title }) => {
       margin-top: 12rpx;
       font-size: 24rpx;
       line-height: 1.6;
-      color: #8f816b;
+      color: #948b7d;
     }
     &__input {
@@ -636,10 +634,10 @@ const handleMenuTap = ({ title }) => {
       height: 88rpx;
       padding: 0 24rpx;
       border-radius: 18rpx;
-      background: #f8f2e9;
+      background: #f7f5f1;
-      border: 1rpx solid rgba(166, 121, 57, 0.14);
+      border: 1rpx solid rgba(166, 121, 57, 0.08);
       font-size: 28rpx;
-      color: #2f2212;
+      color: #3b352d;
       box-sizing: border-box;
     }
@@ -658,12 +656,12 @@ const handleMenuTap = ({ title }) => {
       border-radius: 18rpx;
       font-size: 28rpx;
       font-weight: 600;
-      color: #fffdf8;
+      color: #fffefd;
-      background: linear-gradient(135deg, #b98b42, #9e712d);
+      background: linear-gradient(135deg, #ac9a7d, #948269);
       &--ghost {
-        color: #8e6325;
+        color: #847b70;
-        background: #f8f2e9;
+        background: #f4f2ee;
       }
     }
   }