/* ===== 工具类 ===== */ .ml-7 { margin-left: 13.13rpx; } .mt-9 { margin-top: 16.88rpx; } .mt-11 { margin-top: 20.63rpx; } .mt-22{ margin-top:22rpx; } .ml-5 { margin-left: 9.38rpx; } .ml-6{ margin-left:12rpx; } .ml-8{ margin-left:16rpx; } .ml-16{ margin-left:32rpx; } .mt-10{ margin-top:10rpx; } .mt-15{ margin-top:15rpx; } /* 页面容器 */ page { height: 100vh; } .page { padding: 35.63rpx 28.13rpx 0; background-image: linear-gradient(180deg, #ff8d1a -7.3%, #ffffff00 120.1%); width: 100%; overflow-y: auto; overflow-x: hidden; height: 100%; padding-top: calc(35.63rpx + constant(safe-area-inset-top)); padding-top: calc(35.63rpx + env(safe-area-inset-top)); } /* 顶部卡片 */ .section { padding: 15rpx 13.13rpx; background-color: #ffffff; border-radius: 8.33rpx; } /* 头像与昵称 */ .image { margin: 20rpx; width: 141.25rpx; height: 141.25rpx; border-radius: 50%; } .avatar-btn{ min-width:0!important; width:auto!important; background:transparent!important; border:none!important; padding:0!important; margin:0!important; } .font { font-size: 26.25rpx; font-family: SourceHanSansCN; line-height: 24.34rpx; color: #000000; } .text { line-height: 24.21rpx; } .nickname-wrap{ display:block; max-width: 250rpx; white-space: normal; word-break: break-all; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 电话与邀请码行 */ .group_2 { padding: 0 7.26rpx; } .image_3 { width: 22.5rpx; height: 22.5rpx; } .font_2 { font-size: 22.5rpx; font-family: SourceHanSansCN; line-height: 20.68rpx; color: #ff8d1a; } .text_2 { color: #808080; line-height: 1.4; } .section_2{ display:inline-flex; align-items:center; max-width:100%; padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx; background-color: #fff6de; border-radius: 31.26rpx; } .image_4 { width: 24.38rpx; height: 24.38rpx; } .text_3 { margin-right: 10.6rpx; white-space:nowrap; } .group { margin-top: 33.75rpx; width: 133.72rpx; } .image_2 { margin-left: 17.48rpx; width: 76.88rpx; height: 76.88rpx; } .text_4 { line-height: 20.72rpx; } /* 查看绩效 / 排名(等分宫格) */ .equal-division { display:flex; gap: 12rpx; } .section_3 { padding: 6.88rpx 0 13.59rpx; background-color: #ffffff; border-radius: 18.75rpx; } .equal-division-item_1 { margin-left: 8.06rpx; } .group_3 { padding: 11.76rpx 0 10.01rpx; width: 224.59rpx; } .image_5 { width: 63.99rpx; height: 63.99rpx; } .text_5 { line-height: 24.26rpx; } .equal-division-item_2 { position: static; transform:none; } .equal-division-item { padding: 11.76rpx 0 10.09rpx; width: 224.59rpx; } .text_6 { line-height: 24.28rpx; } .equal-division-item_3 { position: static; transform:none; } .group_5 { padding: 11.76rpx 0 9.99rpx; width: 224.59rpx; } /* 列表卡片(你的原有区) */ .list { padding-top: 19.38rpx; } .section_4 { padding: 31.88rpx 31.88rpx 30rpx 33.75rpx; background-color: #ffffff; border-radius: 9.47rpx; min-height:88rpx; } .image_6 { border-radius: 9.38rpx; width: 41.25rpx; height: 41.25rpx; } .image_7 { width: 30rpx; height: 30rpx; } .text_7 { line-height: 24.47rpx; } .text_8 { line-height: 23.81rpx; } /* ===== 当前金额卡片(美化后) ===== */ .wallet-card { background: #fff; border-radius: 20rpx; padding: 28rpx 24rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06); } /* 金额行 */ .wallet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; } .wallet-head-left { display: flex; align-items: baseline; } .wallet-head-label { font-size: 26rpx; color: #666; } .wallet-head-amount { margin-left: 8rpx; font-size: 38rpx; color: #ff8d1a; font-weight: 700; } /* 立即提现按钮 */ .wallet-head-right { background: linear-gradient(135deg, #ffae3d, #ff8d1a); border-radius: 999rpx; padding: 12rpx 28rpx; box-shadow: 0 4rpx 12rpx rgba(255, 141, 26, 0.3); display: flex; /* 水平+垂直居中 */ align-items: center; justify-content: center; } .wallet-withdraw-text { font-size: 26rpx; color: #fff; font-weight: 600; } /* 三统计(轻量分隔线风格) */ .wallet-stats { display: flex; justify-content: space-between; margin-top: 12rpx; border-top: 1rpx solid #f2f2f2; padding-top: 20rpx; } .wallet-stat { flex: 1 0 0; display: flex; flex-direction: column; align-items: center; } .wallet-stat:not(:last-child) { border-right: 1rpx solid #f2f2f2; } .wallet-stat-label { font-size: 24rpx; color: #888; } .wallet-stat-value { margin-top: 6rpx; font-size: 30rpx; color: #333; font-weight: 600; } /* ===== 三入口快捷区 ===== */ .shortcut-row{ margin-top: 18rpx; background:#fff; border-radius: 16rpx; padding: 18rpx 10rpx; display:flex; justify-content:space-between; } .shortcut-item{ flex:1 0 0; display:flex; flex-direction:column; align-items:center; } .shortcut-icon{ width: 72rpx; height: 72rpx; } .shortcut-text{ margin-top: 10rpx; font-size: 24rpx; color: #333; } /* ===== 接单四宫格 ===== */ .grid-row{ margin-top: 18rpx; background:#fff; border-radius: 16rpx; padding: 18rpx 8rpx 6rpx; display:flex; flex-wrap:wrap; justify-content:space-between; } .grid-item{ width: 25%; display:flex; flex-direction:column; align-items:center; margin-bottom: 18rpx; } .grid-icon{ width: 64rpx; height: 64rpx; border-radius: 12rpx; } .grid-text{ margin-top: 8rpx; font-size: 24rpx; color:#333; } /* 自适应宽的胶囊 */ .invite-pill{ display: inline-flex; /* 关键:让容器只包裹内容 */ align-items: center; max-width: 100%; /* 不超过父容器 */ padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx; background-color: #fff6de; border-radius: 31.26rpx; /* 可选,让它靠左不被两端对齐挤开 */ align-self: flex-start; } /* 文本超长时省略,不把胶囊撑爆 */ .invite-text{ max-width: 520rpx; /* 按你页面宽度调,或用 60% 等比例 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }