/* 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; }