Hooke / jls-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
84ecc062 1 parent 270988d6

收敛我的页视觉层级

Inline Side-by-side
Showing 1 changed file with 51 additions and 53 deletions
......@@ -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 8% 22%, rgba(255, 244, 220, 0.9), transparent 22%),
linear-gradient(180deg, #fbf8f1 0%, #f4efe5 54%, #f8f5ee 100%);
radial-gradient(circle at top right, rgba(166, 121, 57, 0.1), transparent 32%),
linear-gradient(180deg, #fffaf3 0%, #f6f7fb 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 80% 60%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
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.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));
border: 2rpx solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.24);
backdrop-filter: blur(16rpx);
background: linear-gradient(135deg, rgba(255, 251, 246, 0.72), rgba(255, 255, 255, 0.52));
border: 2rpx solid rgba(214, 184, 124, 0.08);
box-shadow:
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);
box-shadow: 0 18rpx 48rpx rgba(56, 40, 19, 0.06);
border: 2rpx solid rgba(166, 121, 57, 0.05);
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%);
border: 1rpx solid rgba(166, 121, 57, 0.08);
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.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);
box-shadow: 0 18rpx 48rpx rgba(56, 40, 19, 0.06);
border: 2rpx solid rgba(166, 121, 57, 0.05);
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;
box-shadow: 0 24rpx 64rpx rgba(33, 24, 12, 0.18);
background: #fffefd;
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;
border: 1rpx solid rgba(166, 121, 57, 0.14);
background: #f7f5f1;
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;
background: linear-gradient(135deg, #b98b42, #9e712d);
color: #fffefd;
background: linear-gradient(135deg, #ac9a7d, #948269);
&--ghost {
color: #8e6325;
background: #f8f2e9;
color: #847b70;
background: #f4f2ee;
}
}
}
......