邀请人ID
{{ userId }}
邀请人
{{ userInfo.nickname }}
邀请说明
1
点击分享按钮，选择要邀请的好友
2
好友点击分享卡片将直接打开小程序登录页
3
好友登录后自动绑定邀请关系
温馨提示
微信小程序的可复制链接需要通过微信官方API生成，如需此功能请联系后端开发配置。当前推荐使用分享按钮邀请好友。
on-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
}
}
.rewards-list {
.reward-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.reward-icon {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.reward-info {
flex: 1;
.reward-title {
font-size: 28rpx;
color: #333;
margin-bottom: 6rpx;
}
.reward-desc {
font-size: 24rpx;
color: #999;
}
}
.reward-value {
font-size: 28rpx;
font-weight: bold;
color: #4C49E9;
}
}
}
.share-list {
display: flex;
justify-content: space-around;
.share-item {
display: flex;
flex-direction: column;
align-items: center;
.share-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
.iconfont {
font-size: 48rpx;
}
}
.wechat-icon {
background: linear-gradient(135deg, #07c160 0%, #10b981 100%);
color: #fff;
}
.moments-icon {
background: linear-gradient(135deg, #e6d5b8 0%, #d4a373 100%);
color: #fff;
}
.qq-icon {
background: linear-gradient(135deg, #1677ff 0%, #096dd9 100%);
color: #fff;
}
.link-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.share-name {
font-size: 24rpx;
color: #666;
}
}
}
.invited-section {
.invited-count {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;
.count-num {
font-size: 56rpx;
font-weight: bold;
color: #4C49E9;
}
.count-desc {
font-size: 26rpx;
color: #999;
margin-top: 8rpx;
}
}
.invited-list {
padding-top: 20rpx;
.invited-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.info {
flex: 1;
.name {
font-size: 28rpx;
color: #333;
margin-bottom: 6rpx;
}
.time {
font-size: 24rpx;
color: #999;
}
}
.status {
font-size: 22rpx;
color: #999;
padding: 6rpx 16rpx;
border-radius: 20rpx;
background: #f5f5f5;
&.active {
color: #4C49E9;
background: rgba(76, 73, 233, 0.1);
}
}
}
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;
.empty-icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
margin-bottom: 24rpx;
}
.empty-btn {
padding: 16rpx 48rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 28rpx;
border-radius: 30rpx;
}
}
}
.bottom-btn {
position: fixed;
left: 30rpx;
right: 30rpx;
bottom: 30rpx;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 32rpx;
font-weight: bold;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
}