154 lines
12 KiB
Plaintext
154 lines
12 KiB
Plaintext
@import './earnings-detail-styles.wxss';
|
|
|
|
/* 分销中心 - 主结构样式 */
|
|
.page { min-height: 100vh; background: #000; padding-bottom: 64rpx; }
|
|
|
|
.nav-bar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
background: rgba(0,0,0,0.92);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 32rpx; height: 88rpx;
|
|
border-bottom: 1rpx solid rgba(255,255,255,0.06);
|
|
}
|
|
.nav-left { display: flex; gap: 16rpx; align-items: center; }
|
|
.nav-back { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
|
.nav-icon { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(70%); }
|
|
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; }
|
|
.nav-right-placeholder { width: 144rpx; }
|
|
|
|
.content { padding: 24rpx; width: 100%; box-sizing: border-box; }
|
|
|
|
.expiring-banner {
|
|
display: flex; align-items: center; gap: 24rpx; padding: 24rpx;
|
|
background: rgba(255,165,0,0.1); border: 2rpx solid rgba(255,165,0,0.3);
|
|
border-radius: 24rpx; margin-bottom: 24rpx;
|
|
}
|
|
.banner-icon { width: 80rpx; height: 80rpx; background: rgba(255,165,0,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.icon-bell-warning { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(64%) sepia(89%) saturate(1363%) hue-rotate(4deg) brightness(101%) contrast(102%); }
|
|
.banner-content { flex: 1; }
|
|
.banner-title { font-size: 28rpx; font-weight: 500; color: #fff; display: block; }
|
|
.banner-desc { font-size: 24rpx; color: rgba(255,165,0,0.8); margin-top: 4rpx; display: block; }
|
|
|
|
.earnings-card {
|
|
position: relative; background: rgba(28, 28, 30, 0.8); border: 2rpx solid rgba(255,255,255,0.1);
|
|
border-radius: 32rpx; padding: 48rpx; margin-bottom: 24rpx; overflow: hidden;
|
|
width: 100%; box-sizing: border-box;
|
|
}
|
|
.earnings-main { position: relative; }
|
|
.earnings-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32rpx; }
|
|
.earnings-left { display: flex; align-items: center; gap: 16rpx; }
|
|
.wallet-icon { width: 80rpx; height: 80rpx; background: rgba(0,206,209,0.2); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; }
|
|
.icon-wallet { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
|
.earnings-info { display: flex; flex-direction: column; gap: 8rpx; }
|
|
.earnings-label { font-size: 24rpx; color: rgba(255,255,255,0.6); }
|
|
.commission-rate { font-size: 24rpx; color: #00CED1; font-weight: 500; }
|
|
.earnings-right { text-align: right; }
|
|
.earnings-value { font-size: 60rpx; font-weight: 700; color: #fff; display: block; line-height: 1; }
|
|
.pending-text { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; display: block; }
|
|
.withdraw-btn { padding: 28rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #fff; font-size: 32rpx; font-weight: 600; text-align: center; border-radius: 24rpx; }
|
|
.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); }
|
|
.wechat-tip { display: block; font-size: 24rpx; color: rgba(255,165,0,0.9); margin-top: 16rpx; text-align: center; }
|
|
.withdraw-records-link { display: block; margin-top: 16rpx; text-align: center; font-size: 26rpx; color: #00CED1; }
|
|
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
|
.stat-card { background: rgba(28, 28, 30, 0.8); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 24rpx 12rpx; text-align: center; }
|
|
.stat-value { font-size: 40rpx; font-weight: 700; color: #fff; display: block; }
|
|
.stat-value.orange { color: #FFA500; }
|
|
.stat-label { font-size: 20rpx; color: rgba(255,255,255,0.6); margin-top: 8rpx; display: block; }
|
|
|
|
.rules-card { background: rgba(0,206,209,0.05); border: 2rpx solid rgba(0,206,209,0.2); border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
|
.rules-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; }
|
|
.rules-icon { width: 64rpx; height: 64rpx; background: rgba(0,206,209,0.2); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
|
|
.icon-alert { width: 32rpx; height: 32rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
|
.rules-title { font-size: 28rpx; font-weight: 500; color: #fff; }
|
|
.rules-list { padding-left: 8rpx; }
|
|
.rule-item { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 2; display: block; margin-bottom: 4rpx; }
|
|
.rule-item .gold { color: #FFD700; font-weight: 500; }
|
|
.rule-item .brand { color: #00CED1; font-weight: 500; }
|
|
|
|
.binding-card { background: rgba(28, 28, 30, 0.8); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
|
.binding-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
|
.binding-title { display: flex; align-items: center; gap: 12rpx; }
|
|
.binding-icon-img { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
|
.title-text { font-size: 30rpx; font-weight: 600; color: #fff; }
|
|
.binding-count { font-size: 26rpx; color: rgba(255,255,255,0.5); }
|
|
.binding-tabs { display: flex; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
|
.tab-item { flex: 1; padding: 24rpx 0; text-align: center; font-size: 26rpx; color: rgba(255,255,255,0.5); position: relative; }
|
|
.tab-item.tab-active { color: #00CED1; }
|
|
.tab-item.tab-active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80rpx; height: 4rpx; background: #00CED1; border-radius: 4rpx; }
|
|
.binding-list { max-height: 640rpx; overflow-y: auto; }
|
|
.empty-state { padding: 80rpx 0; text-align: center; }
|
|
.empty-text { font-size: 26rpx; color: rgba(255,255,255,0.5); }
|
|
.binding-item { display: flex; align-items: center; padding: 24rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); gap: 24rpx; }
|
|
.binding-item:last-child { border-bottom: none; }
|
|
.user-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; color: #00CED1; flex-shrink: 0; }
|
|
.user-avatar.avatar-converted { background: rgba(76,175,80,0.2); color: #4CAF50; }
|
|
.user-avatar.avatar-expired { background: rgba(158,158,158,0.2); color: #9E9E9E; }
|
|
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
|
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.user-status { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; min-width: 100rpx; }
|
|
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; white-space: nowrap; }
|
|
.status-order, .status-time { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; }
|
|
.status-tag { font-size: 24rpx; font-weight: 600; padding: 6rpx 16rpx; border-radius: 16rpx; white-space: nowrap; }
|
|
.status-tag.tag-green { background: rgba(76,175,80,0.2); color: #4CAF50; }
|
|
.status-tag.tag-orange { background: rgba(255,165,0,0.2); color: #FFA500; }
|
|
.status-tag.tag-red { background: rgba(244,67,54,0.2); color: #F44336; }
|
|
.status-tag.tag-gray { background: rgba(158,158,158,0.2); color: #9E9E9E; }
|
|
|
|
.share-section { display: flex; flex-direction: column; gap: 12rpx; width: 100%; margin-bottom: 24rpx; }
|
|
.share-item { display: flex; align-items: center; background: rgba(28, 28, 30, 0.8); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; width: 100%; box-sizing: border-box; }
|
|
.share-item::after { border: none; }
|
|
.share-icon { width: 96rpx; height: 96rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; }
|
|
.share-icon.poster { background: rgba(103,58,183,0.2); }
|
|
.share-icon.wechat { background: rgba(7,193,96,0.2); }
|
|
.share-icon.link { background: rgba(158,158,158,0.2); }
|
|
.icon-share-btn { width: 48rpx; height: 48rpx; display: block; }
|
|
.share-info { flex: 1; text-align: left; }
|
|
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
|
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
|
.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%); }
|
|
|
|
.empty-earnings { background: rgba(28, 28, 30, 0.8); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 64rpx 40rpx; text-align: center; margin-bottom: 24rpx; }
|
|
.empty-icon-wrapper { width: 128rpx; height: 128rpx; border-radius: 50%; background: rgba(28, 28, 30, 0.8); display: flex; align-items: center; justify-content: center; margin: 0 auto 32rpx; }
|
|
.empty-gift-icon { width: 64rpx; height: 64rpx; display: block; filter: brightness(0) saturate(100%) invert(60%); }
|
|
.empty-title { font-size: 30rpx; font-weight: 500; color: #fff; display: block; margin-bottom: 16rpx; }
|
|
.empty-desc { font-size: 26rpx; color: rgba(255,255,255,0.6); display: block; line-height: 1.5; }
|
|
|
|
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 32rpx; box-sizing: border-box; }
|
|
.poster-dialog { width: 686rpx; border-radius: 24rpx; overflow: hidden; position: relative; background: transparent; }
|
|
.poster-close { position: absolute; top: 20rpx; right: 20rpx; width: 56rpx; height: 56rpx; border-radius: 28rpx; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; z-index: 5; }
|
|
.poster-card { position: relative; background: linear-gradient(135deg, #0a1628 0%, #0f2137 50%, #1a3a5c 100%); color: #fff; padding: 44rpx 40rpx 36rpx; }
|
|
.poster-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
|
|
.poster-footer { background: #fff; padding: 28rpx 28rpx 32rpx; display: flex; flex-direction: column; gap: 18rpx; }
|
|
.poster-footer-tip { font-size: 22rpx; color: rgba(0,0,0,0.55); text-align: center; }
|
|
.poster-footer-btn { height: 72rpx; border-radius: 18rpx; border: 2rpx solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(0,0,0,0.75); background: #fff; }
|
|
|
|
.poster-avatar { position: relative; width: 72rpx; height: 72rpx; flex-shrink: 0; }
|
|
.poster-avatar-img {
|
|
width: 72rpx; height: 72rpx; border-radius: 50%;
|
|
border: 3rpx solid rgba(255, 215, 0, 0.88);
|
|
box-sizing: border-box; display: block; background: #111;
|
|
}
|
|
|
|
/* 分组折叠（用于优化页面长度） */
|
|
.section-collapse-card {
|
|
background: rgba(28, 28, 30, 0.8);
|
|
border: 2rpx solid rgba(255,255,255,0.1);
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.section-collapse-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 28rpx;
|
|
border-bottom: 1rpx solid rgba(255,255,255,0.06);
|
|
}
|
|
.section-collapse-title {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|