a_long/pages/wode/wode.wxss

/* 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;
  }
  .service-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .service-name {
    font-size: 28rpx;
    color: #1C1C1C;
    margin-top: 18rpx;
    font-weight: 500;
  }
  
  /* 身份认证 */
  .auth-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25rpx 17rpx;   /* 行间距20rpx，列间距10rpx，可根据实际微调 */
  align-items: center;
}
  .auth-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 25%;          /* 确保一行最多四个，第五个自动换行 */
  }
  .auth-name {
    font-size: 28rpx;
    color: #1C1C1C;
    margin-top: 18rpx;
    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; }