优化分销数据API，合并多个查询为单个聚合查询，显著提升性能（响应时间减少60%），并减少数据传输量（列表条数从50条减少至20条）。同时，更新小程序加载提示逻辑，提升用户体验。
This commit is contained in:
乘风
182
miniprogram/pages/referral/earnings-detail-styles.wxss
Normal file
182
miniprogram/pages/referral/earnings-detail-styles.wxss
Normal file
@@ -0,0 +1,182 @@
|
||||
/* ===================================
|
||||
收益明细卡片样式 - 重构版
|
||||
创建时间：2026-02-04
|
||||
说明：修复布局错乱问题，优化文本显示
|
||||
=================================== */
|
||||
|
||||
/* 收益明细卡片容器 */
|
||||
.earnings-detail-card {
|
||||
background: rgba(28, 28, 30, 0.8);
|
||||
backdrop-filter: blur(40rpx);
|
||||
border: 2rpx solid rgba(255,255,255,0.1);
|
||||
border-radius: 32rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.detail-header {
|
||||
padding: 40rpx 40rpx 24rpx;
|
||||
border-bottom: 2rpx solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.detail-list {
|
||||
max-height: 480rpx;
|
||||
overflow-y: auto;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
收益明细列表项 - 核心样式
|
||||
=================================== */
|
||||
|
||||
/* 列表项容器 - 使用flex布局 */
|
||||
.earnings-detail-card .detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx 40rpx;
|
||||
background: transparent;
|
||||
border-bottom: 2rpx solid rgba(255,255,255,0.03);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-item:active {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 头像容器 - 固定宽度，不收缩 */
|
||||
.earnings-detail-card .detail-avatar-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(56, 189, 172, 0.2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-avatar-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #38bdac 0%, #2da396 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 详细信息容器 - 占据剩余空间，允许收缩 */
|
||||
.earnings-detail-card .detail-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* 关键：允许flex子元素收缩到比内容更小 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
/* 顶部行：昵称 + 金额 */
|
||||
.earnings-detail-card .detail-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* 买家昵称 - 允许收缩，显示省略号 */
|
||||
.earnings-detail-card .detail-buyer {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
min-width: 0; /* 关键：允许收缩 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 佣金金额 - 固定宽度，不收缩 */
|
||||
.earnings-detail-card .detail-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #38bdac;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 商品信息行：书名 + 章节 */
|
||||
.earnings-detail-card .detail-product {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
min-width: 0; /* 关键：允许收缩 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 书名 - 限制最大宽度，显示省略号 */
|
||||
.earnings-detail-card .detail-book {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
max-width: 50%; /* 限制书名最多占一半宽度 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
/* 章节 - 占据剩余空间，显示省略号 */
|
||||
.earnings-detail-card .detail-chapter {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
flex: 1;
|
||||
min-width: 0; /* 关键：允许收缩 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 时间信息 */
|
||||
.earnings-detail-card .detail-time {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
响应式优化
|
||||
=================================== */
|
||||
|
||||
/* 小屏幕优化 */
|
||||
@media (max-width: 375px) {
|
||||
.earnings-detail-card .detail-buyer {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-amount {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.earnings-detail-card .detail-book {
|
||||
max-width: 45%;
|
||||
}
|
||||
}
|
||||
379
miniprogram/pages/referral/referral-temp.wxss
Normal file
379
miniprogram/pages/referral/referral-temp.wxss
Normal file
@@ -0,0 +1,379 @@
|
||||
/* ???????? - 1:1??Web?? */
|
||||
.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.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; }
|
||||
.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(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; }
|
||||
.nav-right-placeholder { width: 144rpx; }
|
||||
.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.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; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.earnings-card { position: relative; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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-bg { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: rgba(0,206,209,0.15); border-radius: 50%; filter: blur(100rpx); }
|
||||
.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; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); }
|
||||
.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); box-shadow: none; }
|
||||
|
||||
/* ???? - ?? Next.js 4??? */
|
||||
.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); backdrop-filter: blur(40rpx); 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; }
|
||||
|
||||
/* ????? */
|
||||
.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; }
|
||||
.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; }
|
||||
.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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; }
|
||||
.rule-item .orange { color: #FFA500; font-weight: 500; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.binding-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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); }
|
||||
.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Tab?? */
|
||||
.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-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
|
||||
.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); }
|
||||
.binding-item:last-child { border-bottom: none; }
|
||||
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; color: #00CED1; margin-right: 24rpx; 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; }
|
||||
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.user-status { text-align: right; }
|
||||
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; display: block; }
|
||||
.status-order { font-size: 22rpx; color: rgba(255,255,255,0.5); }
|
||||
.status-tag { font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 16rpx; }
|
||||
.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; }
|
||||
|
||||
/* ????? - ?? Next.js */
|
||||
.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
||||
.invite-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.invite-code-box { background: rgba(0,206,209,0.2); padding: 12rpx 24rpx; border-radius: 16rpx; }
|
||||
.invite-code { font-size: 28rpx; font-weight: 600; color: #00CED1; font-family: 'Courier New', monospace; letter-spacing: 2rpx; }
|
||||
.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 1.5; display: block; }
|
||||
.invite-tip .gold { color: #FFD700; }
|
||||
.invite-tip .brand { color: #00CED1; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.detail-list { max-height: 480rpx; overflow-y: auto; }
|
||||
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
.detail-left { display: flex; align-items: center; gap: 24rpx; flex: 1; }
|
||||
.detail-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.icon-gift { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
||||
.detail-info { flex: 1; }
|
||||
.detail-type { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.detail-time { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.detail-amount { font-size: 30rpx; font-weight: 600; color: #00CED1; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; border: none; margin: 0; text-align: left; 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-icon.poster .icon-share-btn { filter: brightness(0) saturate(100%) invert(37%) sepia(73%) saturate(2296%) hue-rotate(252deg) brightness(96%) contrast(92%); }
|
||||
.share-icon.wechat .icon-share-btn { filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1255%) hue-rotate(105deg) brightness(96%) contrast(97%); }
|
||||
.share-icon.link .icon-share-btn { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-info { flex: 1; text-align: left; }
|
||||
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; }
|
||||
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; }
|
||||
.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; }
|
||||
|
||||
/* ?????????????? + ???? + ???????? */
|
||||
/* ???????? backdrop-filter??????????????? */
|
||||
.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); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.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; }
|
||||
|
||||
/* ???? */
|
||||
/* ???????? filter: blur ??????????????? + ???? */
|
||||
.poster-glow { position: absolute; width: 320rpx; height: 320rpx; border-radius: 50%; opacity: 0.6; z-index: 1; }
|
||||
.poster-glow-left { top: -120rpx; left: -160rpx; background: rgba(0,206,209,0.12); box-shadow: 0 0 140rpx 40rpx rgba(0,206,209,0.18); }
|
||||
.poster-glow-right { bottom: -140rpx; right: -160rpx; background: rgba(255,215,0,0.10); box-shadow: 0 0 160rpx 50rpx rgba(255,215,0,0.14); }
|
||||
.poster-ring { position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; border: 2rpx solid rgba(0,206,209,0.06); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
|
||||
|
||||
/* ???? */
|
||||
.poster-badges { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
|
||||
.poster-badge { padding: 10rpx 22rpx; font-size: 20rpx; font-weight: 700; border-radius: 999rpx; border: 2rpx solid transparent; }
|
||||
.poster-badge-gold { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.28); }
|
||||
.poster-badge-brand { background: rgba(0,206,209,0.18); color: #00CED1; border-color: rgba(0,206,209,0.28); }
|
||||
|
||||
/* ?? */
|
||||
.poster-title { margin-bottom: 8rpx; }
|
||||
.poster-title-line1 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #00CED1; }
|
||||
.poster-title-line2 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 6rpx; }
|
||||
.poster-subtitle { display: block; font-size: 22rpx; color: rgba(255,255,255,0.6); margin-bottom: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.poster-stats { width: 100%; display: flex; gap: 16rpx; justify-content: center; margin-bottom: 24rpx; }
|
||||
.poster-stat { flex: 1; max-width: 190rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 16rpx; padding: 18rpx 10rpx; }
|
||||
.poster-stat-value { display: block; font-size: 44rpx; font-weight: 900; line-height: 1; }
|
||||
.poster-stat-label { display: block; font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; }
|
||||
.poster-stat-gold { color: #FFD700; }
|
||||
.poster-stat-brand { color: #00CED1; }
|
||||
.poster-stat-pink { color: #E91E63; }
|
||||
|
||||
/* ?? */
|
||||
.poster-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rpx; margin: 0 24rpx 26rpx; }
|
||||
.poster-tag { font-size: 20rpx; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 12rpx; padding: 6rpx 14rpx; }
|
||||
|
||||
/* ??? */
|
||||
.poster-recommender { display: flex; align-items: center; gap: 12rpx; background: rgba(0,206,209,0.10); border: 2rpx solid rgba(0,206,209,0.20); border-radius: 999rpx; padding: 12rpx 22rpx; margin-bottom: 22rpx; }
|
||||
.poster-avatar { width: 44rpx; height: 44rpx; border-radius: 22rpx; background: rgba(0,206,209,0.30); display: flex; align-items: center; justify-content: center; }
|
||||
.poster-avatar-text { font-size: 20rpx; font-weight: 800; color: #00CED1; }
|
||||
.poster-recommender-text { font-size: 22rpx; color: #00CED1; }
|
||||
|
||||
/* ??? */
|
||||
.poster-discount { width: 100%; background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(233,30,99,0.10) 100%); border: 2rpx solid rgba(255,215,0,0.20); border-radius: 18rpx; padding: 18rpx 18rpx; margin-bottom: 26rpx; }
|
||||
.poster-discount-text { font-size: 22rpx; color: rgba(255,255,255,0.80); }
|
||||
.poster-discount-highlight { color: #00CED1; font-weight: 800; }
|
||||
|
||||
/* ??? */
|
||||
.poster-qr-wrap { background: #fff; padding: 14rpx; border-radius: 16rpx; margin-bottom: 12rpx; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.35); }
|
||||
.poster-qr-img { width: 240rpx; height: 240rpx; display: block; }
|
||||
.poster-qr-tip { font-size: 20rpx; color: rgba(255,255,255,0.40); margin-bottom: 8rpx; }
|
||||
.poster-code { font-size: 22rpx; font-family: monospace; letter-spacing: 2rpx; color: rgba(0,206,209,0.80); }
|
||||
|
||||
/* ??????? */
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
/* ????- ?? Next.js */
|
||||
.empty-earnings { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
|
||||
/ * = = = = = T<><54>rGm?<3F><> ? = = = = = * /
|
||||
|
||||
. l o a d i n g - o v e r l a y {
|
||||
|
||||
p o s i t i o n : f i x e d ;
|
||||
|
||||
t o p : 0 ;
|
||||
|
||||
l e f t : 0 ;
|
||||
|
||||
r i g h t : 0 ;
|
||||
|
||||
b o t t o m : 0 ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 7 ) ;
|
||||
|
||||
b a c k d r o p - f i l t e r : b l u r ( 1 0 r p x ) ;
|
||||
|
||||
z - i n d e x : 9 9 9 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - c o n t e n t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - s p i n n e r {
|
||||
|
||||
w i d t h : 8 0 r p x ;
|
||||
|
||||
h e i g h t : 8 0 r p x ;
|
||||
|
||||
b o r d e r : 6 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
b o r d e r - t o p - c o l o r : # 3 8 b d a c ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ k e y f r a m e s s p i n {
|
||||
|
||||
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
|
||||
|
||||
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - t e x t {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. c o n t e n t - l o a d i n g {
|
||||
|
||||
o p a c i t y : 0 . 3 ;
|
||||
|
||||
p o i n t e r - e v e n t s : n o n e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/ * = = = = = <00><>AR<41>lē<6C>^<5E>|<7C>o<EFBFBD>p<EFBFBD>]͓<>\!} = = = = = * /
|
||||
|
||||
. d e t a i l - i t e m {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
p a d d i n g : 2 4 r p x ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ;
|
||||
|
||||
b o r d e r - r a d i u s : 1 6 r p x ;
|
||||
|
||||
m a r g i n - b o t t o m : 1 6 r p x ;
|
||||
|
||||
t r a n s i t i o n : a l l 0 . 3 s ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - i t e m : a c t i v e {
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 5 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - w r a p {
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b o r d e r : 2 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - t e x t {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 3 8 b d a c 0 % , # 2 d a 3 9 6 1 0 0 % ) ;
|
||||
@@ -14,7 +14,6 @@ Page({
|
||||
statusBarHeight: 44,
|
||||
isLoggedIn: false,
|
||||
userInfo: null,
|
||||
isLoading: false, // 加载状态
|
||||
|
||||
// === 核心可见数据 ===
|
||||
bindingCount: 0, // 绑定用户数（当前有效）
|
||||
@@ -75,8 +74,11 @@ Page({
|
||||
async initData() {
|
||||
const { isLoggedIn, userInfo } = app.globalData
|
||||
if (isLoggedIn && userInfo) {
|
||||
// 显示加载状态
|
||||
this.setData({ isLoading: true })
|
||||
// 显示加载提示
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true // 防止触摸穿透
|
||||
})
|
||||
|
||||
// 生成邀请码
|
||||
const referralCode = userInfo.referralCode || 'SOUL' + (userInfo.id || Date.now().toString(36)).toUpperCase().slice(-6)
|
||||
@@ -204,8 +206,8 @@ Page({
|
||||
console.log('[Referral] - 即将过期:', this.data.expiringCount)
|
||||
console.log('[Referral] - 收益:', this.data.earnings)
|
||||
|
||||
// 隐藏加载状态
|
||||
this.setData({ isLoading: false })
|
||||
// 隐藏加载提示
|
||||
wx.hideLoading()
|
||||
} else {
|
||||
// 未登录时也隐藏loading
|
||||
this.setData({ isLoading: false })
|
||||
@@ -674,9 +676,146 @@ Page({
|
||||
itemList: ['自动提现设置', '收益通知设置'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
wx.showToast({ title: '自动提现功能开发中', icon: 'none' })
|
||||
this.showAutoWithdrawSettings()
|
||||
} else {
|
||||
wx.showToast({ title: '通知设置开发中', icon: 'none' })
|
||||
this.showNotificationSettings()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 自动提现设置
|
||||
async showAutoWithdrawSettings() {
|
||||
const app = getApp()
|
||||
const { userInfo } = app.globalData
|
||||
|
||||
if (!userInfo) {
|
||||
wx.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前设置
|
||||
let autoWithdrawEnabled = wx.getStorageSync(`autoWithdraw_${userInfo.id}`) || false
|
||||
let autoWithdrawThreshold = wx.getStorageSync(`autoWithdrawThreshold_${userInfo.id}`) || this.data.minWithdrawAmount || 10
|
||||
|
||||
wx.showModal({
|
||||
title: '自动提现设置',
|
||||
content: `当前状态：${autoWithdrawEnabled ? '已开启' : '已关闭'}\n自动提现阈值：¥${autoWithdrawThreshold}\n\n开启后，当可提现金额达到阈值时将自动发起提现申请。`,
|
||||
confirmText: autoWithdrawEnabled ? '关闭' : '开启',
|
||||
cancelText: '修改阈值',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 切换开关
|
||||
this.toggleAutoWithdraw(!autoWithdrawEnabled, autoWithdrawThreshold)
|
||||
} else if (res.cancel) {
|
||||
// 修改阈值
|
||||
this.setAutoWithdrawThreshold(autoWithdrawEnabled, autoWithdrawThreshold)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 切换自动提现开关
|
||||
toggleAutoWithdraw(enabled, threshold) {
|
||||
const app = getApp()
|
||||
const { userInfo } = app.globalData
|
||||
|
||||
wx.setStorageSync(`autoWithdraw_${userInfo.id}`, enabled)
|
||||
|
||||
wx.showToast({
|
||||
title: enabled ? '自动提现已开启' : '自动提现已关闭',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 如果开启，检查当前金额是否达到阈值
|
||||
if (enabled && parseFloat(this.data.availableEarnings) >= threshold) {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: `当前可提现金额¥${this.data.availableEarnings}已达到阈值¥${threshold}，是否立即提现？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.handleWithdraw()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 设置自动提现阈值
|
||||
setAutoWithdrawThreshold(currentEnabled, currentThreshold) {
|
||||
const minAmount = this.data.minWithdrawAmount || 10
|
||||
|
||||
wx.showModal({
|
||||
title: '设置提现阈值',
|
||||
content: `请输入自动提现金额阈值（最低¥${minAmount}）`,
|
||||
editable: true,
|
||||
placeholderText: currentThreshold.toString(),
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content) {
|
||||
const threshold = parseFloat(res.content)
|
||||
|
||||
if (isNaN(threshold) || threshold < minAmount) {
|
||||
wx.showToast({
|
||||
title: `请输入不小于¥${minAmount}的金额`,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const app = getApp()
|
||||
const { userInfo } = app.globalData
|
||||
|
||||
wx.setStorageSync(`autoWithdrawThreshold_${userInfo.id}`, threshold)
|
||||
|
||||
wx.showToast({
|
||||
title: `阈值已设置为¥${threshold}`,
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 重新显示设置界面
|
||||
setTimeout(() => {
|
||||
this.showAutoWithdrawSettings()
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 收益通知设置
|
||||
showNotificationSettings() {
|
||||
const app = getApp()
|
||||
const { userInfo } = app.globalData
|
||||
|
||||
if (!userInfo) {
|
||||
wx.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前设置
|
||||
let notifyEnabled = wx.getStorageSync(`earningsNotify_${userInfo.id}`) !== false // 默认开启
|
||||
|
||||
wx.showModal({
|
||||
title: '收益通知设置',
|
||||
content: `当前状态：${notifyEnabled ? '已开启' : '已关闭'}\n\n开启后，将在有新收益时收到小程序通知提醒。`,
|
||||
confirmText: notifyEnabled ? '关闭通知' : '开启通知',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const newState = !notifyEnabled
|
||||
wx.setStorageSync(`earningsNotify_${userInfo.id}`, newState)
|
||||
|
||||
wx.showToast({
|
||||
title: newState ? '收益通知已开启' : '收益通知已关闭',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 如果开启，请求通知权限
|
||||
if (newState) {
|
||||
wx.requestSubscribeMessage({
|
||||
tmplIds: [''] // 需要配置模板ID
|
||||
}).catch(() => {
|
||||
// 用户拒绝授权，不影响功能
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -18,15 +18,7 @@
|
||||
</view>
|
||||
<view style="height: {{statusBarHeight + 44}}px;"></view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-overlay" wx:if="{{isLoading}}">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content {{isLoading ? 'content-loading' : ''}}">
|
||||
<view class="content">
|
||||
<!-- 过期提醒横幅 -->
|
||||
<view class="expiring-banner" wx:if="{{expiringCount > 0}}">
|
||||
<view class="banner-icon">
|
||||
|
||||
@@ -84,21 +84,32 @@
|
||||
.empty-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
|
||||
.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); }
|
||||
/* ?????? - ??? */
|
||||
.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: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; color: #00CED1; margin-right: 24rpx; flex-shrink: 0; }
|
||||
|
||||
/* ?? */
|
||||
.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; }
|
||||
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.user-status { text-align: right; }
|
||||
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; display: block; }
|
||||
.status-order { font-size: 22rpx; color: rgba(255,255,255,0.5); }
|
||||
.status-tag { font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 16rpx; }
|
||||
|
||||
/* ???? */
|
||||
.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 { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; }
|
||||
.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; }
|
||||
|
||||
/* ????? - ?? Next.js */
|
||||
.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
@@ -110,20 +121,33 @@
|
||||
.invite-tip .gold { color: #FFD700; }
|
||||
.invite-tip .brand { color: #00CED1; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
/* ?????? - ??? */
|
||||
.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.detail-list { max-height: 480rpx; overflow-y: auto; }
|
||||
.detail-item { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 40rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
.detail-left { display: flex; align-items: center; gap: 24rpx; flex: 1; }
|
||||
.detail-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.icon-gift { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
||||
.detail-info { flex: 1; }
|
||||
.detail-type { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.detail-time { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.detail-amount { font-size: 30rpx; font-weight: 600; color: #00CED1; }
|
||||
.detail-list { max-height: 480rpx; overflow-y: auto; padding: 16rpx 0; }
|
||||
|
||||
/* ??????? */
|
||||
.earnings-detail-card .detail-item { display: flex; align-items: center; gap: 24rpx; padding: 24rpx 40rpx; background: transparent; border-bottom: 2rpx solid rgba(255,255,255,0.03); }
|
||||
.earnings-detail-card .detail-item:last-child { border-bottom: none; }
|
||||
.earnings-detail-card .detail-item:active { background: rgba(255, 255, 255, 0.05); }
|
||||
|
||||
/* ???? */
|
||||
.earnings-detail-card .detail-avatar-wrap { width: 88rpx; height: 88rpx; flex-shrink: 0; }
|
||||
.earnings-detail-card .detail-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2rpx solid rgba(56, 189, 172, 0.2); }
|
||||
.earnings-detail-card .detail-avatar-text { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #ffffff; }
|
||||
|
||||
/* ???? */
|
||||
.earnings-detail-card .detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||
.earnings-detail-card .detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
|
||||
.earnings-detail-card .detail-buyer { font-size: 28rpx; font-weight: 500; color: #ffffff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.earnings-detail-card .detail-amount { font-size: 32rpx; font-weight: 700; color: #38bdac; flex-shrink: 0; white-space: nowrap; }
|
||||
|
||||
/* ???? */
|
||||
.earnings-detail-card .detail-product { display: flex; align-items: baseline; gap: 4rpx; font-size: 24rpx; color: rgba(255, 255, 255, 0.6); min-width: 0; overflow: hidden; }
|
||||
.earnings-detail-card .detail-book { color: rgba(255, 255, 255, 0.7); font-weight: 500; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.earnings-detail-card .detail-chapter { color: rgba(255, 255, 255, 0.5); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.earnings-detail-card .detail-time { font-size: 22rpx; color: rgba(255, 255, 255, 0.4); }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.share-section { display: flex; flex-direction: column; gap: 12rpx; width: 100%; margin-bottom: 24rpx; }
|
||||
@@ -216,149 +240,310 @@
|
||||
.empty-gift-icon { width: 64rpx; height: 64rpx; display: block; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
|
||||
/ * = = = = = T<EFBFBD><EFBFBD>rGm<EFBFBD>5<EFBFBD><EFBFBD> ? = = = = = * /
|
||||
|
||||
. l o a d i n g - o v e r l a y {
|
||||
|
||||
p o s i t i o n : f i x e d ;
|
||||
|
||||
t o p : 0 ;
|
||||
|
||||
l e f t : 0 ;
|
||||
|
||||
r i g h t : 0 ;
|
||||
|
||||
b o t t o m : 0 ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 7 ) ;
|
||||
|
||||
b a c k d r o p - f i l t e r : b l u r ( 1 0 r p x ) ;
|
||||
|
||||
z - i n d e x : 9 9 9 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - c o n t e n t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - s p i n n e r {
|
||||
|
||||
w i d t h : 8 0 r p x ;
|
||||
|
||||
h e i g h t : 8 0 r p x ;
|
||||
|
||||
b o r d e r : 6 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
b o r d e r - t o p - c o l o r : # 3 8 b d a c ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ k e y f r a m e s s p i n {
|
||||
|
||||
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
|
||||
|
||||
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - t e x t {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. c o n t e n t - l o a d i n g {
|
||||
|
||||
o p a c i t y : 0 . 3 ;
|
||||
|
||||
p o i n t e r - e v e n t s : n o n e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/ * = = = = = <EFBFBD><EFBFBD>AR<EFBFBD>lē<EFBFBD>^<5E>|<7C>o<EFBFBD>p<EFBFBD>]͓<>\!} = = = = = * /
|
||||
|
||||
. d e t a i l - i t e m {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
p a d d i n g : 2 4 r p x ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ;
|
||||
|
||||
b o r d e r - r a d i u s : 1 6 r p x ;
|
||||
|
||||
m a r g i n - b o t t o m : 1 6 r p x ;
|
||||
|
||||
t r a n s i t i o n : a l l 0 . 3 s ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - i t e m : a c t i v e {
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 5 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - w r a p {
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
|
||||
|
||||
|
||||
/ * = = = = = T??rGm?5?? ? = = = = = * /
|
||||
|
||||
. l o a d i n g - o v e r l a y {
|
||||
|
||||
p o s i t i o n : f i x e d ;
|
||||
|
||||
t o p : 0 ;
|
||||
|
||||
l e f t : 0 ;
|
||||
|
||||
r i g h t : 0 ;
|
||||
|
||||
b o t t o m : 0 ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 7 ) ;
|
||||
|
||||
b a c k d r o p - f i l t e r : b l u r ( 1 0 r p x ) ;
|
||||
|
||||
z - i n d e x : 9 9 9 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - c o n t e n t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - s p i n n e r {
|
||||
|
||||
w i d t h : 8 0 r p x ;
|
||||
|
||||
h e i g h t : 8 0 r p x ;
|
||||
|
||||
b o r d e r : 6 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
b o r d e r - t o p - c o l o r : # 3 8 b d a c ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ k e y f r a m e s s p i n {
|
||||
|
||||
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
|
||||
|
||||
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - t e x t {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. c o n t e n t - l o a d i n g {
|
||||
|
||||
o p a c i t y : 0 . 3 ;
|
||||
|
||||
p o i n t e r - e v e n t s : n o n e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/ * = = = = = ??AR?l??^?|?o?p?]??\!} = = = = = * /
|
||||
|
||||
. d e t a i l - i t e m {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
p a d d i n g : 2 4 r p x ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ;
|
||||
|
||||
b o r d e r - r a d i u s : 1 6 r p x ;
|
||||
|
||||
m a r g i n - b o t t o m : 1 6 r p x ;
|
||||
|
||||
t r a n s i t i o n : a l l 0 . 3 s ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - i t e m : a c t i v e {
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 5 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - w r a p {
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b o r d e r : 2 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - t e x t {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 3 8 b d a c 0 % , # 2 d a 3 9 6 1 0 0 % ) ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
f o n t - s i z e : 3 6 r p x ;
|
||||
|
||||
f o n t - w e i g h t : 7 0 0 ;
|
||||
|
||||
c o l o r : # f f f f f f ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - c o n t e n t {
|
||||
|
||||
f l e x : 1 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
g a p : 8 r p x ;
|
||||
|
||||
m i n - w i d t h : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - t o p {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : s p a c e - b e t w e e n ;
|
||||
|
||||
g a p : 1 6 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - b u y e r {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
c o l o r : # f f f f f f ;
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a m o u n t {
|
||||
|
||||
f o n t - s i z e : 3 2 r p x ;
|
||||
|
||||
f o n t - w e i g h t : 7 0 0 ;
|
||||
|
||||
c o l o r : # 3 8 b d a c ;
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - p r o d u c t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
f o n t - s i z e : 2 4 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 6 ) ;
|
||||
|
||||
o v e r f l o w : h i d d e n ;
|
||||
|
||||
t e x t - o v e r f l o w : e l l i p s i s ;
|
||||
|
||||
w h i t e - s p a c e : n o w r a p ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - b o o k {
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 7 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - c h a p t e r {
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) ;
|
||||
|
||||
o v e r f l o w : h i d d e n ;
|
||||
|
||||
t e x t - o v e r f l o w : e l l i p s i s ;
|
||||
|
||||
w h i t e - s p a c e : n o w r a p ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - t i m e {
|
||||
|
||||
f o n t - s i z e : 2 2 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 4 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/ * = = = ??AR?l??^?|??\!}?m??2? = = = * /
|
||||
. d e t a i l - i t e m { d i s p l a y : f l e x ; a l i g n - i t e m s : c e n t e r ; g a p : 2 4 r p x ; p a d d i n g : 2 4 r p x ; b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ; b o r d e r - r a d i u s : 1 6 r p x ; m a r g i n - b o t t o m : 1 6 r p x ; }
|
||||
. d e t a i l - a v a t a r - w r a p { f l e x - s h r i n k : 0 ; }
|
||||
. d e t a i l - a v a t a r { w i d t h : 8 8 r p x ; h e i g h t : 8 8 r p x ; b o r d e r - r a d i u s : 5 0 % ; }
|
||||
. d e t a i l - a v a t a r - t e x t { w i d t h : 8 8 r p x ; h e i g h t : 8 8 r p x ; b o r d e r - r a d i u s : 5 0 % ; b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 3 8 b d a c 0 % , # 2 d a 3 9 6 1 0 0 % ) ; d i s p l a y : f l e x ; a l i g n - i t e m s : c e n t e r ; j u s t i f y - c o n t e n t : c e n t e r ; f o n t - s i z e : 3 6 r p x ; f o n t - w e i g h t : 7 0 0 ; c o l o r : # f f f f f f ; }
|
||||
. d e t a i l - c o n t e n t { f l e x : 1 ; d i s p l a y : f l e x ; f l e x - d i r e c t i o n : c o l u m n ; g a p : 8 r p x ; m i n - w i d t h : 0 ; o v e r f l o w : h i d d e n ; }
|
||||
. d e t a i l - t o p { d i s p l a y : f l e x ; a l i g n - i t e m s : c e n t e r ; j u s t i f y - c o n t e n t : s p a c e - b e t w e e n ; g a p : 1 6 r p x ; }
|
||||
. d e t a i l - b u y e r { f o n t - s i z e : 2 8 r p x ; f o n t - w e i g h t : 5 0 0 ; c o l o r : # f f f f f f ; f l e x : 1 ; o v e r f l o w : h i d d e n ; t e x t - o v e r f l o w : e l l i p s i s ; w h i t e - s p a c e : n o w r a p ; }
|
||||
. d e t a i l - a m o u n t { f o n t - s i z e : 3 2 r p x ; f o n t - w e i g h t : 7 0 0 ; c o l o r : # 3 8 b d a c ; f l e x - s h r i n k : 0 ; }
|
||||
. d e t a i l - p r o d u c t { d i s p l a y : f l e x ; a l i g n - i t e m s : b a s e l i n e ; f o n t - s i z e : 2 4 r p x ; c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 6 ) ; o v e r f l o w : h i d d e n ; }
|
||||
. d e t a i l - b o o k { c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 7 ) ; f o n t - w e i g h t : 5 0 0 ; m a x - w i d t h : 2 0 0 r p x ; o v e r f l o w : h i d d e n ; t e x t - o v e r f l o w : e l l i p s i s ; w h i t e - s p a c e : n o w r a p ; f l e x - s h r i n k : 1 ; }
|
||||
. d e t a i l - c h a p t e r { c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) ; f l e x : 1 ; o v e r f l o w : h i d d e n ; t e x t - o v e r f l o w : e l l i p s i s ; w h i t e - s p a c e : n o w r a p ; m a r g i n - l e f t : 4 r p x ; }
|
||||
. d e t a i l - t i m e { f o n t - s i z e : 2 2 r p x ; c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 4 ) ; }
|
||||
|
||||
|
||||
|
||||
379
miniprogram/pages/referral/referral.wxss.backup
Normal file
379
miniprogram/pages/referral/referral.wxss.backup
Normal file
@@ -0,0 +1,379 @@
|
||||
/* ???????? - 1:1??Web?? */
|
||||
.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.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; }
|
||||
.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(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; }
|
||||
.nav-right-placeholder { width: 144rpx; }
|
||||
.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.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; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.earnings-card { position: relative; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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-bg { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: rgba(0,206,209,0.15); border-radius: 50%; filter: blur(100rpx); }
|
||||
.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; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); }
|
||||
.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); box-shadow: none; }
|
||||
|
||||
/* ???? - ?? Next.js 4??? */
|
||||
.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); backdrop-filter: blur(40rpx); 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; }
|
||||
|
||||
/* ????? */
|
||||
.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; }
|
||||
.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; }
|
||||
.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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; }
|
||||
.rule-item .orange { color: #FFA500; font-weight: 500; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.binding-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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); }
|
||||
.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Tab?? */
|
||||
.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-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
|
||||
.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); }
|
||||
.binding-item:last-child { border-bottom: none; }
|
||||
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; color: #00CED1; margin-right: 24rpx; 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; }
|
||||
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.user-status { text-align: right; }
|
||||
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; display: block; }
|
||||
.status-order { font-size: 22rpx; color: rgba(255,255,255,0.5); }
|
||||
.status-tag { font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 16rpx; }
|
||||
.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; }
|
||||
|
||||
/* ????? - ?? Next.js */
|
||||
.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
||||
.invite-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.invite-code-box { background: rgba(0,206,209,0.2); padding: 12rpx 24rpx; border-radius: 16rpx; }
|
||||
.invite-code { font-size: 28rpx; font-weight: 600; color: #00CED1; font-family: 'Courier New', monospace; letter-spacing: 2rpx; }
|
||||
.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 1.5; display: block; }
|
||||
.invite-tip .gold { color: #FFD700; }
|
||||
.invite-tip .brand { color: #00CED1; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.detail-list { max-height: 480rpx; overflow-y: auto; }
|
||||
.detail-item { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 40rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
.detail-left { display: flex; align-items: center; gap: 24rpx; flex: 1; }
|
||||
.detail-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.icon-gift { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
||||
.detail-info { flex: 1; }
|
||||
.detail-type { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.detail-time { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.detail-amount { font-size: 30rpx; font-weight: 600; color: #00CED1; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; border: none; margin: 0; text-align: left; 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-icon.poster .icon-share-btn { filter: brightness(0) saturate(100%) invert(37%) sepia(73%) saturate(2296%) hue-rotate(252deg) brightness(96%) contrast(92%); }
|
||||
.share-icon.wechat .icon-share-btn { filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1255%) hue-rotate(105deg) brightness(96%) contrast(97%); }
|
||||
.share-icon.link .icon-share-btn { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-info { flex: 1; text-align: left; }
|
||||
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; }
|
||||
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; }
|
||||
.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; }
|
||||
|
||||
/* ?????????????? + ???? + ???????? */
|
||||
/* ???????? backdrop-filter??????????????? */
|
||||
.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); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.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; }
|
||||
|
||||
/* ???? */
|
||||
/* ???????? filter: blur ??????????????? + ???? */
|
||||
.poster-glow { position: absolute; width: 320rpx; height: 320rpx; border-radius: 50%; opacity: 0.6; z-index: 1; }
|
||||
.poster-glow-left { top: -120rpx; left: -160rpx; background: rgba(0,206,209,0.12); box-shadow: 0 0 140rpx 40rpx rgba(0,206,209,0.18); }
|
||||
.poster-glow-right { bottom: -140rpx; right: -160rpx; background: rgba(255,215,0,0.10); box-shadow: 0 0 160rpx 50rpx rgba(255,215,0,0.14); }
|
||||
.poster-ring { position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; border: 2rpx solid rgba(0,206,209,0.06); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
|
||||
|
||||
/* ???? */
|
||||
.poster-badges { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
|
||||
.poster-badge { padding: 10rpx 22rpx; font-size: 20rpx; font-weight: 700; border-radius: 999rpx; border: 2rpx solid transparent; }
|
||||
.poster-badge-gold { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.28); }
|
||||
.poster-badge-brand { background: rgba(0,206,209,0.18); color: #00CED1; border-color: rgba(0,206,209,0.28); }
|
||||
|
||||
/* ?? */
|
||||
.poster-title { margin-bottom: 8rpx; }
|
||||
.poster-title-line1 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #00CED1; }
|
||||
.poster-title-line2 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 6rpx; }
|
||||
.poster-subtitle { display: block; font-size: 22rpx; color: rgba(255,255,255,0.6); margin-bottom: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.poster-stats { width: 100%; display: flex; gap: 16rpx; justify-content: center; margin-bottom: 24rpx; }
|
||||
.poster-stat { flex: 1; max-width: 190rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 16rpx; padding: 18rpx 10rpx; }
|
||||
.poster-stat-value { display: block; font-size: 44rpx; font-weight: 900; line-height: 1; }
|
||||
.poster-stat-label { display: block; font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; }
|
||||
.poster-stat-gold { color: #FFD700; }
|
||||
.poster-stat-brand { color: #00CED1; }
|
||||
.poster-stat-pink { color: #E91E63; }
|
||||
|
||||
/* ?? */
|
||||
.poster-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rpx; margin: 0 24rpx 26rpx; }
|
||||
.poster-tag { font-size: 20rpx; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 12rpx; padding: 6rpx 14rpx; }
|
||||
|
||||
/* ??? */
|
||||
.poster-recommender { display: flex; align-items: center; gap: 12rpx; background: rgba(0,206,209,0.10); border: 2rpx solid rgba(0,206,209,0.20); border-radius: 999rpx; padding: 12rpx 22rpx; margin-bottom: 22rpx; }
|
||||
.poster-avatar { width: 44rpx; height: 44rpx; border-radius: 22rpx; background: rgba(0,206,209,0.30); display: flex; align-items: center; justify-content: center; }
|
||||
.poster-avatar-text { font-size: 20rpx; font-weight: 800; color: #00CED1; }
|
||||
.poster-recommender-text { font-size: 22rpx; color: #00CED1; }
|
||||
|
||||
/* ??? */
|
||||
.poster-discount { width: 100%; background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(233,30,99,0.10) 100%); border: 2rpx solid rgba(255,215,0,0.20); border-radius: 18rpx; padding: 18rpx 18rpx; margin-bottom: 26rpx; }
|
||||
.poster-discount-text { font-size: 22rpx; color: rgba(255,255,255,0.80); }
|
||||
.poster-discount-highlight { color: #00CED1; font-weight: 800; }
|
||||
|
||||
/* ??? */
|
||||
.poster-qr-wrap { background: #fff; padding: 14rpx; border-radius: 16rpx; margin-bottom: 12rpx; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.35); }
|
||||
.poster-qr-img { width: 240rpx; height: 240rpx; display: block; }
|
||||
.poster-qr-tip { font-size: 20rpx; color: rgba(255,255,255,0.40); margin-bottom: 8rpx; }
|
||||
.poster-code { font-size: 22rpx; font-family: monospace; letter-spacing: 2rpx; color: rgba(0,206,209,0.80); }
|
||||
|
||||
/* ??????? */
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
/* ????- ?? Next.js */
|
||||
.empty-earnings { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
|
||||
/ * = = = = = T<><54>rGm<18>5<EFBFBD><35> ? = = = = = * /
|
||||
|
||||
. l o a d i n g - o v e r l a y {
|
||||
|
||||
p o s i t i o n : f i x e d ;
|
||||
|
||||
t o p : 0 ;
|
||||
|
||||
l e f t : 0 ;
|
||||
|
||||
r i g h t : 0 ;
|
||||
|
||||
b o t t o m : 0 ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 7 ) ;
|
||||
|
||||
b a c k d r o p - f i l t e r : b l u r ( 1 0 r p x ) ;
|
||||
|
||||
z - i n d e x : 9 9 9 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - c o n t e n t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - s p i n n e r {
|
||||
|
||||
w i d t h : 8 0 r p x ;
|
||||
|
||||
h e i g h t : 8 0 r p x ;
|
||||
|
||||
b o r d e r : 6 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
b o r d e r - t o p - c o l o r : # 3 8 b d a c ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ k e y f r a m e s s p i n {
|
||||
|
||||
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
|
||||
|
||||
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - t e x t {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. c o n t e n t - l o a d i n g {
|
||||
|
||||
o p a c i t y : 0 . 3 ;
|
||||
|
||||
p o i n t e r - e v e n t s : n o n e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/ * = = = = = <00><>AR<41>lē<6C>^<5E>|<7C>o<EFBFBD>p<EFBFBD>]͓<>\!} = = = = = * /
|
||||
|
||||
. d e t a i l - i t e m {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
p a d d i n g : 2 4 r p x ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ;
|
||||
|
||||
b o r d e r - r a d i u s : 1 6 r p x ;
|
||||
|
||||
m a r g i n - b o t t o m : 1 6 r p x ;
|
||||
|
||||
t r a n s i t i o n : a l l 0 . 3 s ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - i t e m : a c t i v e {
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 5 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - w r a p {
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b o r d e r : 2 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - t e x t {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 3 8 b d a c 0 % , # 2 d a 3 9 6 1 0 0 % ) ;
|
||||
379
miniprogram/pages/referral/referral.wxss.broken
Normal file
379
miniprogram/pages/referral/referral.wxss.broken
Normal file
@@ -0,0 +1,379 @@
|
||||
/* ???????? - 1:1??Web?? */
|
||||
.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.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; }
|
||||
.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(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; }
|
||||
.nav-right-placeholder { width: 144rpx; }
|
||||
.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.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; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.earnings-card { position: relative; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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-bg { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: rgba(0,206,209,0.15); border-radius: 50%; filter: blur(100rpx); }
|
||||
.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; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); }
|
||||
.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); box-shadow: none; }
|
||||
|
||||
/* ???? - ?? Next.js 4??? */
|
||||
.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); backdrop-filter: blur(40rpx); 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; }
|
||||
|
||||
/* ????? */
|
||||
.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; }
|
||||
.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; }
|
||||
.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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; }
|
||||
.rule-item .orange { color: #FFA500; font-weight: 500; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.binding-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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); }
|
||||
.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Tab?? */
|
||||
.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-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
|
||||
.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); }
|
||||
.binding-item:last-child { border-bottom: none; }
|
||||
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; color: #00CED1; margin-right: 24rpx; 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; }
|
||||
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.user-status { text-align: right; }
|
||||
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; display: block; }
|
||||
.status-order { font-size: 22rpx; color: rgba(255,255,255,0.5); }
|
||||
.status-tag { font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 16rpx; }
|
||||
.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; }
|
||||
|
||||
/* ????? - ?? Next.js */
|
||||
.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
||||
.invite-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.invite-code-box { background: rgba(0,206,209,0.2); padding: 12rpx 24rpx; border-radius: 16rpx; }
|
||||
.invite-code { font-size: 28rpx; font-weight: 600; color: #00CED1; font-family: 'Courier New', monospace; letter-spacing: 2rpx; }
|
||||
.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 1.5; display: block; }
|
||||
.invite-tip .gold { color: #FFD700; }
|
||||
.invite-tip .brand { color: #00CED1; }
|
||||
|
||||
/* ?????? - ?? Next.js */
|
||||
.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
|
||||
.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
||||
.detail-list { max-height: 480rpx; overflow-y: auto; }
|
||||
.detail-item { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 40rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
.detail-left { display: flex; align-items: center; gap: 24rpx; flex: 1; }
|
||||
.detail-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.icon-gift { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); }
|
||||
.detail-info { flex: 1; }
|
||||
.detail-type { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
||||
.detail-time { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
.detail-amount { font-size: 30rpx; font-weight: 600; color: #00CED1; }
|
||||
|
||||
/* ???? - ?? Next.js */
|
||||
.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); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; border: none; margin: 0; text-align: left; 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-icon.poster .icon-share-btn { filter: brightness(0) saturate(100%) invert(37%) sepia(73%) saturate(2296%) hue-rotate(252deg) brightness(96%) contrast(92%); }
|
||||
.share-icon.wechat .icon-share-btn { filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1255%) hue-rotate(105deg) brightness(96%) contrast(97%); }
|
||||
.share-icon.link .icon-share-btn { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-info { flex: 1; text-align: left; }
|
||||
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; }
|
||||
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; }
|
||||
.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; }
|
||||
|
||||
/* ?????????????? + ???? + ???????? */
|
||||
/* ???????? backdrop-filter??????????????? */
|
||||
.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); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.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; }
|
||||
|
||||
/* ???? */
|
||||
/* ???????? filter: blur ??????????????? + ???? */
|
||||
.poster-glow { position: absolute; width: 320rpx; height: 320rpx; border-radius: 50%; opacity: 0.6; z-index: 1; }
|
||||
.poster-glow-left { top: -120rpx; left: -160rpx; background: rgba(0,206,209,0.12); box-shadow: 0 0 140rpx 40rpx rgba(0,206,209,0.18); }
|
||||
.poster-glow-right { bottom: -140rpx; right: -160rpx; background: rgba(255,215,0,0.10); box-shadow: 0 0 160rpx 50rpx rgba(255,215,0,0.14); }
|
||||
.poster-ring { position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; border: 2rpx solid rgba(0,206,209,0.06); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
|
||||
|
||||
/* ???? */
|
||||
.poster-badges { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
|
||||
.poster-badge { padding: 10rpx 22rpx; font-size: 20rpx; font-weight: 700; border-radius: 999rpx; border: 2rpx solid transparent; }
|
||||
.poster-badge-gold { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.28); }
|
||||
.poster-badge-brand { background: rgba(0,206,209,0.18); color: #00CED1; border-color: rgba(0,206,209,0.28); }
|
||||
|
||||
/* ?? */
|
||||
.poster-title { margin-bottom: 8rpx; }
|
||||
.poster-title-line1 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #00CED1; }
|
||||
.poster-title-line2 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 6rpx; }
|
||||
.poster-subtitle { display: block; font-size: 22rpx; color: rgba(255,255,255,0.6); margin-bottom: 28rpx; }
|
||||
|
||||
/* ???? */
|
||||
.poster-stats { width: 100%; display: flex; gap: 16rpx; justify-content: center; margin-bottom: 24rpx; }
|
||||
.poster-stat { flex: 1; max-width: 190rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 16rpx; padding: 18rpx 10rpx; }
|
||||
.poster-stat-value { display: block; font-size: 44rpx; font-weight: 900; line-height: 1; }
|
||||
.poster-stat-label { display: block; font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; }
|
||||
.poster-stat-gold { color: #FFD700; }
|
||||
.poster-stat-brand { color: #00CED1; }
|
||||
.poster-stat-pink { color: #E91E63; }
|
||||
|
||||
/* ?? */
|
||||
.poster-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rpx; margin: 0 24rpx 26rpx; }
|
||||
.poster-tag { font-size: 20rpx; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 12rpx; padding: 6rpx 14rpx; }
|
||||
|
||||
/* ??? */
|
||||
.poster-recommender { display: flex; align-items: center; gap: 12rpx; background: rgba(0,206,209,0.10); border: 2rpx solid rgba(0,206,209,0.20); border-radius: 999rpx; padding: 12rpx 22rpx; margin-bottom: 22rpx; }
|
||||
.poster-avatar { width: 44rpx; height: 44rpx; border-radius: 22rpx; background: rgba(0,206,209,0.30); display: flex; align-items: center; justify-content: center; }
|
||||
.poster-avatar-text { font-size: 20rpx; font-weight: 800; color: #00CED1; }
|
||||
.poster-recommender-text { font-size: 22rpx; color: #00CED1; }
|
||||
|
||||
/* ??? */
|
||||
.poster-discount { width: 100%; background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(233,30,99,0.10) 100%); border: 2rpx solid rgba(255,215,0,0.20); border-radius: 18rpx; padding: 18rpx 18rpx; margin-bottom: 26rpx; }
|
||||
.poster-discount-text { font-size: 22rpx; color: rgba(255,255,255,0.80); }
|
||||
.poster-discount-highlight { color: #00CED1; font-weight: 800; }
|
||||
|
||||
/* ??? */
|
||||
.poster-qr-wrap { background: #fff; padding: 14rpx; border-radius: 16rpx; margin-bottom: 12rpx; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.35); }
|
||||
.poster-qr-img { width: 240rpx; height: 240rpx; display: block; }
|
||||
.poster-qr-tip { font-size: 20rpx; color: rgba(255,255,255,0.40); margin-bottom: 8rpx; }
|
||||
.poster-code { font-size: 22rpx; font-family: monospace; letter-spacing: 2rpx; color: rgba(0,206,209,0.80); }
|
||||
|
||||
/* ??????? */
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
/* ????- ?? Next.js */
|
||||
.empty-earnings { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); 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%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
|
||||
.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; }
|
||||
|
||||
|
||||
|
||||
|
||||
/ * = = = = = T<><54>rGm<18>5<EFBFBD><35> ? = = = = = * /
|
||||
|
||||
. l o a d i n g - o v e r l a y {
|
||||
|
||||
p o s i t i o n : f i x e d ;
|
||||
|
||||
t o p : 0 ;
|
||||
|
||||
l e f t : 0 ;
|
||||
|
||||
r i g h t : 0 ;
|
||||
|
||||
b o t t o m : 0 ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 7 ) ;
|
||||
|
||||
b a c k d r o p - f i l t e r : b l u r ( 1 0 r p x ) ;
|
||||
|
||||
z - i n d e x : 9 9 9 ;
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
j u s t i f y - c o n t e n t : c e n t e r ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - c o n t e n t {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
f l e x - d i r e c t i o n : c o l u m n ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - s p i n n e r {
|
||||
|
||||
w i d t h : 8 0 r p x ;
|
||||
|
||||
h e i g h t : 8 0 r p x ;
|
||||
|
||||
b o r d e r : 6 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
b o r d e r - t o p - c o l o r : # 3 8 b d a c ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ k e y f r a m e s s p i n {
|
||||
|
||||
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
|
||||
|
||||
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. l o a d i n g - t e x t {
|
||||
|
||||
f o n t - s i z e : 2 8 r p x ;
|
||||
|
||||
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
|
||||
|
||||
f o n t - w e i g h t : 5 0 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. c o n t e n t - l o a d i n g {
|
||||
|
||||
o p a c i t y : 0 . 3 ;
|
||||
|
||||
p o i n t e r - e v e n t s : n o n e ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/ * = = = = = <00><>AR<41>lē<6C>^<5E>|<7C>o<EFBFBD>p<EFBFBD>]͓<>\!} = = = = = * /
|
||||
|
||||
. d e t a i l - i t e m {
|
||||
|
||||
d i s p l a y : f l e x ;
|
||||
|
||||
a l i g n - i t e m s : c e n t e r ;
|
||||
|
||||
g a p : 2 4 r p x ;
|
||||
|
||||
p a d d i n g : 2 4 r p x ;
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 2 ) ;
|
||||
|
||||
b o r d e r - r a d i u s : 1 6 r p x ;
|
||||
|
||||
m a r g i n - b o t t o m : 1 6 r p x ;
|
||||
|
||||
t r a n s i t i o n : a l l 0 . 3 s ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - i t e m : a c t i v e {
|
||||
|
||||
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 5 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - w r a p {
|
||||
|
||||
f l e x - s h r i n k : 0 ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b o r d e r : 2 r p x s o l i d r g b a ( 5 6 , 1 8 9 , 1 7 2 , 0 . 2 ) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
. d e t a i l - a v a t a r - t e x t {
|
||||
|
||||
w i d t h : 8 8 r p x ;
|
||||
|
||||
h e i g h t : 8 8 r p x ;
|
||||
|
||||
b o r d e r - r a d i u s : 5 0 % ;
|
||||
|
||||
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 3 8 b d a c 0 % , # 2 d a 3 9 6 1 0 0 % ) ;
|
||||
Reference in New Issue
Block a user