/* 我的缘分页 U22 — Design Tokens */ .page { min-height:100vh; background:var(--color-primary-lighter); } /* Tab 切换栏(粘性吸附在自定义导航栏下方) */ .tabs { display:flex; background:var(--color-bg-card); border-bottom:1rpx solid var(--color-divider); position:sticky; z-index:10; } .tab { flex:1; text-align:center; padding:28rpx 0; font-size:28rpx; color:var(--color-text-tertiary); position:relative; transition:color 0.2s; } .tab.active { color:var(--color-primary-strong); font-weight:bold; } .tab.active::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:48rpx; height:4rpx; background:var(--color-primary); border-radius:2rpx; } .tab-count { display:inline-block; background:var(--color-primary-solid); color:var(--color-text-inverse); font-size:20rpx; padding:2rpx 10rpx; border-radius:20rpx; margin-left:8rpx; vertical-align:middle; } /* 列表容器 */ .list-wrap { padding:24rpx; box-sizing:border-box; } .list { display:flex; flex-direction:column; gap:16rpx; } .item { background:var(--color-bg-card); border-radius:20rpx; padding:24rpx; box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04); } /* 操作按钮 */ .btn-primary { flex-shrink:0; min-height:var(--tap-min); line-height:var(--tap-min); padding:0 28rpx; border-radius:32rpx; font-size:24rpx; background:var(--color-primary-solid); color:var(--color-text-inverse); border:none; min-width:var(--tap-min);} .btn-primary::after { border:none; } .btn-like-back { flex-shrink:0; min-height:var(--tap-min); line-height:var(--tap-min); padding:0 28rpx; border-radius:32rpx; font-size:24rpx; background:var(--color-primary-light); color:var(--color-primary-strong); border:2rpx solid var(--color-primary); min-width:var(--tap-min);} .btn-like-back::after { border:none; } .btn-like-back.disabled { opacity:0.5; } /* 等待回应状态 */ .status-waiting { flex-shrink:0; font-size:24rpx; color:var(--color-primary-strong); padding:8rpx 16rpx; background:var(--color-primary-light); border-radius:8rpx; white-space:nowrap; }