Files
Wechat/pages/wode/wode.wxss

254 lines
5.3 KiB
Plaintext

/* pages/gerenzhongxin/gerenzhongxin.wxss — 最终完美版(毛玻璃强化+图标左右贴边) */
/* 全局 */
page {
background: #F7F3ED;
height: 100vh;
overflow: hidden;
}
.page-root {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.bg-layer {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: radial-gradient(ellipse at 30% 20%, rgba(201,169,98,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(201,169,98,0.05) 0%, transparent 50%);
z-index: 0;
pointer-events: none;
}
.main-scroll {
position: relative;
z-index: 2;
flex: 1;
width: 100%;
overflow-y: auto;
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}
.main-content {
padding: 60rpx 40rpx 0;
}
/* 图标基础 */
.icon-dark {
filter: brightness(0) saturate(100%) opacity(0.65);
}
.icon-color {
filter: none;
}
.icon-size {
width: 52rpx;
height: 52rpx;
}
/* 图标独立淡金背景 */
.icon-bg {
background: rgba(201,169,98,0.08);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 18rpx;
}
/* 头部(头像完美正圆) */
.hero {
position: relative;
margin-bottom: 100rpx;
}
.settings-icon {
position: absolute;
top: 0; right: 0;
width: 60rpx; height: 60rpx;
display: flex; align-items: center; justify-content: center;
}
.user-block {
display: flex; align-items: center;
}
.avatar-outside {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: rgba(201,169,98,0.06);
padding: 10rpx;
margin-right: 35rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
border: none;
}
.nickname {
font-size: 44rpx; font-weight: 700; color: #1A1A1A;
display: block;
}
.uid {
font-size: 28rpx; color: #7A7A7A;
margin-top: 12rpx;
display: block;
}
.login-btn {
margin-top: 45rpx;
width: 100%; height: 92rpx;
background: linear-gradient(135deg, #C9A962, #D4B56A);
color: white; font-size: 34rpx; font-weight: 600;
border-radius: 46rpx;
border: none;
}
/* 分区间距 */
.section {
margin-top: 110rpx;
}
.section-close {
margin-top: 80rpx;
}
.title-line {
margin-bottom: 40rpx;
padding: 18rpx 28rpx;
line-height: 1.2;
}
.gradient-bg {
background: linear-gradient(to right, rgba(201,169,98,0.01), rgba(201,169,98,0.10));
}
.title-text {
font-size: 38rpx;
font-weight: 700;
color: #1A1A1A;
letter-spacing: 2rpx;
}
/* 毛玻璃订单容器(强化玻璃质感,淡灰半透,无白边) */
.frosted-box {
background: rgba(235, 235, 240, 0.45); /* 淡灰玻璃底 */
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 36rpx;
padding: 45rpx 0; /* 去掉左右内边距,让图标真正贴边 */
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05), inset 0 1rpx 0 rgba(255,255,255,0.7);
border: none;
}
/* 订单行 - 图标完全左右贴边,间距最大化 */
.order-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5rpx; /* 极微的内边距,防止图片被裁剪,但视觉上仍贴边 */
}
.order-unit {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1; /* 等分剩余空间 */
margin: 0; /* 无额外间距 */
}
.order-name {
font-size: 28rpx;
color: #1C1C1C;
margin-top: 18rpx;
font-weight: 500;
}
.badge {
position: absolute;
top: -10rpx;
right: 12rpx;
background: #C5615E;
color: #fff;
font-size: 22rpx;
min-width: 38rpx;
height: 38rpx;
border-radius: 19rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8rpx;
font-weight: 600;
}
/* 更多服务 / 身份认证 */
.service-row {
display: flex;
gap: 80rpx;
justify-content: flex-start;
}
.auth-service-row {
gap: 100rpx;
}
.service-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 120rpx;
}
.service-name {
font-size: 26rpx;
color: #1C1C1C;
margin-top: 14rpx;
font-weight: 500;
}
.icon-bg-sm {
padding: 14rpx;
border-radius: 20rpx;
}
.icon-size-sm {
width: 44rpx;
height: 44rpx;
}
.auth-tag {
font-size: 20rpx;
color: #aaa;
margin-top: 6rpx;
}
.auth-tag-done {
color: #C9A962;
font-weight: 500;
}
/* 清除缓存 */
.clear-row {
display: flex;
align-items: center;
padding: 22rpx 0;
}
.clear-word {
flex: 1;
font-size: 30rpx;
color: #1C1C1C;
margin-left: 18rpx;
font-weight: 500;
}
.arrow-right {
width: 36rpx;
height: 36rpx;
opacity: 0.45;
margin-left: 15rpx;
}
/* 底部 */
.footer {
margin-top: 130rpx;
padding-bottom: 20rpx;
text-align: center;
font-size: 26rpx;
color: #aaa;
}
.divider { margin: 0 15rpx; }
.coop { color: #C9A962; font-weight: 500; }