fnvtk/Mycontent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Alex-larget
2026-03-20 14:47:37 +08:00
parent 7f5a75e489
commit 6df1736e1e
176 changed files with 22643 additions and 37461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1072
new-soul/miniprogram/pages/my/my.js Normal file
View File

File diff suppressed because it is too large Load Diff

6
new-soul/miniprogram/pages/my/my.json Normal file
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"enablePullDownRefresh": false,
"backgroundTextStyle": "light",
"backgroundColor": "#000000"
}

270
new-soul/miniprogram/pages/my/my.wxml Normal file
View File

@@ -0,0 +1,270 @@
<!-- 我的页 - 设计稿 1:1 还原 -->
<view class="page">
<!-- 顶部导航：左侧资料编辑 + 标题 -->
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
<view class="nav-settings" bindtap="goToProfileEdit">
<image class="nav-settings-icon" src="/assets/icons/edit-gray.svg" mode="aspectFit"/>
</view>
<text class="nav-title">我的</text>
</view>
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
<!-- 未登录：引导登录 -->
<view class="guest-block" wx:if="{{!isLoggedIn}}">
<view class="guest-avatar">
<image wx:if="{{guestAvatar}}" class="guest-avatar-img" src="{{guestAvatar}}" mode="aspectFill"/>
<text wx:else class="guest-avatar-text">{{guestNickname[0] || '游'}}</text>
</view>
<text class="guest-name">{{guestNickname}}</text>
<view class="guest-login-btn" bindtap="showLogin">点击登录</view>
</view>
<!-- 已登录：用户卡片（设计稿布局） -->
<view class="profile-card" wx:else>
<view class="profile-card-inner">
<view class="profile-top-row">
<view class="avatar-wrap" bindtap="onAvatarTap">
<view class="avatar-inner {{isVip ? 'avatar-vip' : ''}}">
<image wx:if="{{userInfo.avatar}}" class="avatar-img" src="{{userInfo.avatar}}" mode="aspectFill"/>
<text wx:else class="avatar-text">{{userInfo.nickname ? userInfo.nickname[0] : '?'}}</text>
</view>
<view class="vip-badge" wx:if="{{isVip}}">VIP</view>
<view class="vip-badge vip-badge-gray" wx:else>VIP</view>
</view>
<view class="profile-meta">
<view class="profile-name-row">
<text class="user-name" bindtap="editNickname">{{userInfo.nickname || '点击设置昵称'}}</text>
<view class="become-member-btn {{isVip ? 'become-member-vip' : ''}}" bindtap="goToVip">{{isVip ? '会员中心' : '成为会员'}}</view>
</view>
<view class="vip-tags">
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToVip">会员</text>
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToMatch">匹配</text>
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToVip">排行</text>
</view>
<text class="user-wechat" wx:if="{{userWechat}}" bindtap="copyUserId">微信号: {{userWechat}}</text>
</view>
</view>
<view class="profile-stats-row">
<view class="profile-stat" bindtap="goToChapters">
<text class="profile-stat-val">{{readCount}}</text>
<text class="profile-stat-label">已读章节</text>
</view>
<view class="profile-stat" bindtap="goToReferral">
<text class="profile-stat-val">{{referralCount}}</text>
<text class="profile-stat-label">推荐好友</text>
</view>
<view class="profile-stat" bindtap="goToReferral">
<text class="profile-stat-val">{{earnings === '-' ? '--' : earnings}}</text>
<text class="profile-stat-label">我的收益</text>
</view>
<view class="profile-stat" bindtap="handleMenuTap" data-id="wallet">
<text class="profile-stat-val">{{walletBalance > 0 ? '¥' + walletBalance : '0'}}</text>
<text class="profile-stat-label">我的余额</text>
</view>
</view>
</view>
</view>
<!-- 已登录：内容区 -->
<view class="main-content" wx:if="{{isLoggedIn}}">
<!-- 一键收款（仅在有待确认收款时显示） -->
<view class="card receive-card" wx:if="{{pendingConfirmList.length > 0}}">
<view class="receive-top">
<view class="receive-left">
<view class="receive-title-row">
<image class="card-icon-img" src="/assets/icons/wallet.svg" mode="aspectFit"/>
<text class="card-title">一键收款</text>
</view>
<text class="receive-sub">
待收款 {{pendingConfirmList.length}} 笔 · 合计 ¥{{pendingConfirmAmount}}
</text>
</view>
<view class="receive-btn {{receivingAll ? 'receive-btn-disabled' : ''}}" bindtap="handleOneClickReceive">
<text class="receive-btn-text">{{receivingAll ? '收款中...' : '立即收款'}}</text>
</view>
</view>
<view class="receive-bottom">
<text class="receive-tip">将依次调起微信收款页完成领取</text>
<text class="receive-link" bindtap="handleMenuTap" data-id="withdrawRecords">查看提现记录 ›</text>
</view>
</view>
<!-- 阅读统计 -->
<view class="card stats-card">
<view class="card-header">
<image class="card-icon-img" src="/assets/icons/eye-teal.svg" mode="aspectFit"/>
<text class="card-title">阅读统计</text>
</view>
<view class="stats-grid">
<view class="stat-box" bindtap="goToChapters">
<image class="stat-icon-img" src="/assets/icons/book-open-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{readCount}}</text>
<text class="stat-label">已读章节</text>
</view>
<view class="stat-box" bindtap="goToChapters">
<image class="stat-icon-img" src="/assets/icons/clock-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{totalReadTime}}</text>
<text class="stat-label">阅读分钟</text>
</view>
<view class="stat-box" bindtap="goToMatch">
<image class="stat-icon-img" src="/assets/icons/users-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{matchHistory}}</text>
<text class="stat-label">匹配伙伴</text>
</view>
</view>
</view>
<!-- 最近阅读 -->
<view class="card recent-card">
<view class="card-header">
<image class="card-icon-img" src="/assets/icons/book-arrow-teal.svg" mode="aspectFit"/>
<text class="card-title">最近阅读</text>
</view>
<view class="recent-list" wx:if="{{recentChapters.length > 0}}">
<view
class="recent-item"
wx:for="{{recentChapters}}"
wx:key="id"
bindtap="goToRead"
data-id="{{item.id}}"
data-mid="{{item.mid}}"
>
<view class="recent-left">
<text class="recent-index">{{index + 1}}</text>
<text class="recent-title">{{item.title}}</text>
</view>
<text class="recent-link">继续阅读</text>
</view>
</view>
<view class="recent-empty" wx:else>
<text class="recent-empty-text">暂无阅读记录</text>
<view class="recent-empty-btn" bindtap="goToChapters">去阅读 →</view>
</view>
</view>
<!-- 我的代付链接 -->
<view class="card gift-card" wx:if="{{giftList.length > 0}}">
<view class="card-header">
<image class="card-icon-img" src="/assets/icons/wallet.svg" mode="aspectFit"/>
<text class="card-title">我的代付链接</text>
</view>
<view class="gift-list">
<view class="gift-item" wx:for="{{giftList}}" wx:key="giftCode">
<view class="gift-left">
<text class="gift-title">{{item.sectionTitle}}</text>
<text class="gift-meta">¥{{item.amount}} · {{item.status === 'pending' ? '待领取' : '已领取'}} · {{item.createdAt}}</text>
</view>
<view class="gift-action" wx:if="{{item.status === 'pending'}}" bindtap="onGiftShareTap" data-code="{{item.giftCode}}" data-title="{{item.sectionTitle}}" data-section-id="{{item.sectionId}}">
<text class="gift-share-btn">分享</text>
</view>
<text class="gift-done" wx:else>已送出</text>
</view>
</view>
</view>
<!-- 我的订单 + 关于作者 + 设置 -->
<view class="card menu-card">
<view class="menu-item" bindtap="handleMenuTap" data-id="orders">
<view class="menu-left">
<view class="menu-icon-wrap icon-teal"><image class="menu-icon-img" src="/assets/icons/folder-teal.svg" mode="aspectFit"/></view>
<text class="menu-text">我的订单</text>
</view>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" bindtap="handleMenuTap" data-id="about">
<view class="menu-left">
<view class="menu-icon-wrap icon-blue"><image class="menu-icon-img" src="/assets/icons/info-blue.svg" mode="aspectFit"/></view>
<text class="menu-text">关于作者</text>
</view>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" bindtap="handleMenuTap" data-id="settings">
<view class="menu-left">
<view class="menu-icon-wrap icon-gray"><image class="menu-icon-img" src="/assets/icons/settings-gray.svg" mode="aspectFit"/></view>
<text class="menu-text">设置</text>
</view>
<text class="menu-arrow">›</text>
</view>
</view>
</view>
<!-- 登录弹窗 -->
<view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
<view class="modal-content login-modal-content" catchtap="stopPropagation">
<view class="modal-close" bindtap="closeLoginModal">✕</view>
<view class="login-icon">🔐</view>
<text class="login-title">登录 Soul创业派对</text>
<text class="login-desc">登录后可购买章节、解锁更多内容</text>
<button class="btn-wechat {{agreeProtocol ? '' : 'btn-wechat-disabled'}}" bindtap="handleWechatLogin" disabled="{{isLoggingIn || !agreeProtocol}}">
<text class="btn-wechat-icon">微</text>
<text>{{isLoggingIn ? '登录中...' : '微信快捷登录'}}</text>
</button>
<view class="login-modal-cancel" bindtap="closeLoginModal">取消</view>
<view class="login-agree-row" catchtap="toggleAgree">
<view class="agree-checkbox {{agreeProtocol ? 'agree-checked' : ''}}">{{agreeProtocol ? '✓' : ''}}</view>
<text class="agree-text">我已阅读并同意</text>
<text class="agree-link" catchtap="openUserProtocol">《用户协议》</text>
<text class="agree-text">和</text>
<text class="agree-link" catchtap="openPrivacy">《隐私政策》</text>
</view>
</view>
</view>
<!-- 手机/微信号弹窗 -->
<view class="modal-overlay contact-modal-overlay" wx:if="{{showContactModal}}" bindtap="closeContactModal">
<view class="contact-modal" catchtap="stopPropagation">
<text class="contact-modal-title">请完善联系方式</text>
<view class="contact-modal-hint">需完善手机号或微信号才能使用提现和找伙伴功能</view>
<view class="form-input-wrap">
<text class="form-label">手机号</text>
<view class="form-input-inner">
<text class="form-icon">📱</text>
<input class="form-input" type="tel" placeholder="请输入您的手机号" value="{{contactPhone}}" bindinput="onContactPhoneInput"/>
</view>
</view>
<view class="form-input-wrap">
<text class="form-label">微信号</text>
<view class="form-input-inner">
<text class="form-icon">💬</text>
<input class="form-input" type="text" placeholder="请输入您的微信号" value="{{contactWechat}}" bindinput="onContactWechatInput"/>
</view>
</view>
<view class="contact-modal-btn" bindtap="saveContactInfo" disabled="{{contactSaving}}">{{contactSaving ? '保存中...' : '保存'}}</view>
<text class="contact-modal-cancel" bindtap="closeContactModal">取消</text>
</view>
</view>
<!-- 头像弹窗：必须点击 button 才能获取微信头像（隐私规范） -->
<view class="modal-overlay" wx:if="{{showAvatarModal}}" bindtap="closeAvatarModal">
<view class="modal-content avatar-modal" catchtap="stopPropagation">
<view class="modal-close" bindtap="closeAvatarModal">✕</view>
<text class="avatar-modal-title">获取微信头像</text>
<text class="avatar-modal-desc">点击下方按钮使用你的微信头像</text>
<button class="btn-choose-avatar" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">使用微信头像</button>
<view class="avatar-modal-cancel" bindtap="closeAvatarModal">取消</view>
</view>
</view>
<!-- 修改昵称弹窗 -->
<view class="modal-overlay" wx:if="{{showNicknameModal}}" bindtap="closeNicknameModal">
<view class="modal-content nickname-modal" catchtap="stopPropagation">
<view class="modal-close" bindtap="closeNicknameModal">✕</view>
<view class="modal-header">
<text class="modal-icon">✏️</text>
<text class="modal-title">修改昵称</text>
</view>
<view class="nickname-input-wrap">
<view class="nickname-input-inner">
<input class="nickname-input" type="nickname" value="{{editingNickname}}" placeholder="点击输入昵称" placeholder-class="nickname-placeholder" bindchange="onNicknameChange" bindinput="onNicknameInput" maxlength="20"/>
</view>
<text class="input-tip">微信用户可点击自动填充昵称</text>
</view>
<view class="modal-actions">
<view class="modal-btn modal-btn-cancel" bindtap="closeNicknameModal">取消</view>
<view class="modal-btn modal-btn-confirm" bindtap="confirmNickname">确定</view>
</view>
</view>
</view>
<view class="bottom-space"></view>
</view>

264
new-soul/miniprogram/pages/my/my.wxss Normal file
View File

@@ -0,0 +1,264 @@
/**
* 我的页 - professional_profile_with_earnings_vip 1:1 还原
* 设计稿：primary #4FD1C5, vip-gold #C8A146, card-dark #1A1A1A, card-inner #252525
*/
/* 真机适配：底部留足 TabBar + 安全区，避免「我的订单」被遮挡 */
.page {
background: #121212;
padding-bottom: calc(220rpx + env(safe-area-inset-bottom, 0px));
}
/* ===== 导航栏（左侧设置 + 标题居中，右侧避让胶囊） ===== */
.nav-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(18,18,18,0.9); backdrop-filter: blur(8rpx);
display: flex; align-items: center;
min-height: 44px;
padding: 0 120rpx 0 32rpx; /* 右侧避让胶囊 */
border-bottom: 1rpx solid rgba(255,255,255,0.05);
}
.nav-settings { width: 64rpx; height: 64rpx; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
.nav-title { font-size: 40rpx; font-weight: bold; color: #4FD1C5; flex: 1; text-align: center; }
.nav-settings-icon { width: 44rpx; height: 44rpx; opacity: 0.7; }
.nav-placeholder { width: 100%; }
/* ===== 未登录 ===== */
.guest-block {
display: flex; flex-direction: column; align-items: center;
padding: 64rpx 16rpx;
}
.guest-avatar { width: 144rpx; height: 144rpx; border-radius: 50%; background: #1A1A1A; border: 4rpx solid #374151; overflow: hidden; margin-bottom: 24rpx; }
.guest-avatar-img { width: 100%; height: 100%; display: block; }
.guest-avatar-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56rpx; font-weight: bold; color: #6B7280; }
.guest-name { font-size: 36rpx; font-weight: bold; color: #E5E7EB; margin-bottom: 24rpx; }
.guest-login-btn { padding: 20rpx 48rpx; background: #4FD1C5; color: #000; font-size: 28rpx; font-weight: 600; border-radius: 24rpx; }
/* ===== 用户卡片（设计稿 1:1） ===== */
.profile-card { padding: 30rpx; }
.profile-card-inner {
background: #1A1A1A; border-radius: 24rpx; padding: 32rpx;
border: 1rpx solid rgba(75,85,99,0.5);
}
.profile-top-row { display: flex; align-items: flex-start; gap: 32rpx; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-inner {
width: 130rpx; height: 130rpx; border-radius: 50%; overflow: hidden;
background: #1C2524; border: 5rpx solid #374151;
display: flex; align-items: center; justify-content: center;
}
.avatar-vip { border-color: #C8A146; box-shadow: 0 0 24rpx rgba(200,161,70,0.4); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-text { font-size: 48rpx; font-weight: bold; color: #6B7280; }
.vip-badge {
position: absolute; bottom: -4rpx; right: -4rpx;
background: linear-gradient(135deg, #E6B84D, #D4A017); color: #000;
font-size: 18rpx; font-weight: 900; font-style: italic;
padding: 4rpx 12rpx; border-radius: 8rpx;
}
.vip-badge-gray { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }
.profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12rpx; }
.profile-name-row { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; flex-wrap: wrap; }
.user-name {
font-size: 44rpx; font-weight: bold; color: #fff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.become-member-btn {
padding: 12rpx 28rpx; border: 2rpx solid #C8A146; color: #C8A146;
font-size: 24rpx; font-weight: 500; border-radius: 40rpx; white-space: nowrap; flex-shrink: 0;
}
.become-member-vip { border-color: rgba(200,161,70,0.5); color: rgba(200,161,70,0.8); }
.vip-tags { display: flex; gap: 12rpx; flex-shrink: 0; }
.vip-tag {
font-size: 20rpx; padding: 6rpx 12rpx; border-radius: 8rpx;
border: 1rpx solid #374151; background: rgba(255,255,255,0.05); color: #9CA3AF;
}
.vip-tag-active { border-color: #C8A146; background: rgba(200,161,70,0.1); color: #C8A146; }
.user-wechat { font-size: 26rpx; color: #6B7280; }
.profile-stats-row {
display: flex; justify-content: space-around; margin-top: 32rpx;
padding-top: 24rpx; border-top: 1rpx solid #374151;
}
.profile-stat { text-align: center; }
.profile-stat-val { display: block; font-size: 36rpx; font-weight: bold; color: #4FD1C5; }
.profile-stat-label { display: block; font-size: 22rpx; color: #6B7280; margin-top: 8rpx; }
/* ===== 主内容区 ===== */
.main-content { padding: 0 0 0 0; }
/* 卡片通用 */
.card {
background: #1A1A1A; border-radius: 24rpx; padding: 32rpx;
margin-bottom: 24rpx; border: 1rpx solid rgba(75,85,99,0.5);
margin:0prx 20rpx!important;
}
.card-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 32rpx; }
.card-icon { font-size: 40rpx; }
.card-icon-img { width: 40rpx; height: 40rpx; flex-shrink: 0; }
.card-title { font-size: 32rpx; font-weight: bold; color: #fff; }
/* ===== 一键收款卡片 ===== */
.receive-card { padding: 28rpx 32rpx; }
.receive-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
.receive-left { flex: 1; min-width: 0; }
.receive-title-row { display: flex; align-items: center; gap: 16rpx; margin-bottom: 12rpx; }
.receive-sub { display: block; font-size: 24rpx; color: rgba(255,255,255,0.65); }
.receive-btn {
flex-shrink: 0;
padding: 16rpx 28rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #4FD1C5 0%, #20B2AA 100%);
}
.receive-btn-text { font-size: 26rpx; font-weight: 700; color: #000; }
.receive-btn-disabled { opacity: 0.55; }
.receive-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-top: 18rpx; }
.receive-tip { font-size: 22rpx; color: rgba(255,255,255,0.45); }
.receive-link { font-size: 24rpx; color: #4FD1C5; }
/* 分享收益 */
.earnings-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr;
text-align: center;
}
.earnings-col { padding: 16rpx 0; border-left: 1rpx solid #374151; }
.earnings-col:first-child { border-left: none; }
.earnings-val { display: block; font-size: 40rpx; font-weight: bold; }
.earnings-val.primary { color: #4FD1C5; }
.earnings-label { display: block; font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
/* 阅读统计 - 统一高度避免真机错位 */
.stats-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rpx;
align-items: stretch;
}
.stat-box {
background: #252525; border-radius: 20rpx; padding: 24rpx;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 140rpx;
}
.stat-icon { font-size: 40rpx; margin-bottom: 8rpx; color: #4FD1C5; flex-shrink: 0; }
.stat-icon-img { width: 44rpx; height: 44rpx; margin-bottom: 8rpx; flex-shrink: 0; display: block; }
.stat-num { font-size: 36rpx; font-weight: bold; color: #fff; line-height: 1.2; }
.stat-label { font-size: 20rpx; color: #6B7280; margin-top: 4rpx; line-height: 1.2; }
/* 最近阅读 */
.recent-list { display: flex; flex-direction: column; gap: 24rpx; }
.recent-item {
display: flex; align-items: center; justify-content: space-between;
padding: 24rpx; background: #252525; border-radius: 20rpx;
}
.recent-left { display: flex; align-items: center; gap: 24rpx; overflow: hidden; }
.recent-index { font-size: 28rpx; color: #6B7280; font-family: monospace; }
.recent-title { font-size: 28rpx; color: #E5E7EB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-link { font-size: 24rpx; color: #4FD1C5; font-weight: 500; flex-shrink: 0; }
.recent-empty { padding: 48rpx; text-align: center; }
.recent-empty-text { font-size: 28rpx; color: #6B7280; display: block; margin-bottom: 24rpx; }
.recent-empty-btn { font-size: 28rpx; color: #4FD1C5; }
/* 菜单 */
.menu-card { padding: 0; margin-bottom: 48rpx; overflow: hidden; }
.menu-item {
display: flex; align-items: center; justify-content: space-between;
padding: 32rpx 40rpx; border-bottom: 1rpx solid #374151;
}
.menu-item:last-child { border-bottom: none; }
.menu-left { display: flex; align-items: center; gap: 24rpx; }
.menu-icon-wrap {
width: 48rpx; height: 48rpx; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.menu-icon-wrap .menu-icon { font-size: 32rpx; }
.icon-teal { background: rgba(79,209,197,0.2); }
.icon-teal .menu-icon,
.icon-teal .menu-icon-img { color: #4FD1C5; }
.icon-teal .menu-icon-img { width: 32rpx; height: 32rpx; }
.icon-blue { background: rgba(59,130,246,0.2); }
.icon-blue .menu-icon,
.icon-blue .menu-icon-img { color: #3B82F6; }
.icon-blue .menu-icon-img { width: 32rpx; height: 32rpx; }
.icon-gray { background: rgba(156,163,175,0.15); }
.icon-gray .menu-icon-img { width: 32rpx; height: 32rpx; }
.icon-amber { background: rgba(245,158,11,0.2); }
.menu-icon-emoji { font-size: 28rpx; }
.menu-right { display: flex; align-items: center; gap: 12rpx; }
.menu-balance { font-size: 26rpx; color: #4FD1C5; font-weight: 500; }
.menu-text { font-size: 28rpx; color: #E5E7EB; font-weight: 500; }
.menu-arrow { font-size: 36rpx; color: #9CA3AF; }
/* ===== 弹窗（保留） ===== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(20rpx);
display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 48rpx;
}
.modal-content {
width: 100%; max-width: 640rpx; background: #1c1c1e;
border-radius: 32rpx; padding: 48rpx; position: relative;
}
.modal-close { position: absolute; top: 24rpx; right: 24rpx; width: 64rpx; height: 64rpx; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(255,255,255,0.6); }
.login-icon { font-size: 96rpx; text-align: center; display: block; margin-bottom: 24rpx; }
.login-title { font-size: 36rpx; font-weight: 700; color: #fff; text-align: center; display: block; margin-bottom: 16rpx; }
.login-desc { font-size: 26rpx; color: rgba(255,255,255,0.6); text-align: center; display: block; margin-bottom: 48rpx; }
.btn-wechat { width: 100%; display: flex; align-items: center; justify-content: center; gap: 16rpx; padding: 28rpx; background: #07C160; color: #fff; font-size: 28rpx; font-weight: 500; border-radius: 24rpx; margin-bottom: 24rpx; border: none; }
.btn-wechat::after { border: none; }
.btn-wechat-icon { width: 40rpx; height: 40rpx; background: rgba(255,255,255,0.2); border-radius: 8rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; }
.login-modal-cancel { margin-top: 24rpx; padding: 24rpx; font-size: 28rpx; color: rgba(255,255,255,0.5); text-align: center; }
.login-agree-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 32rpx; font-size: 22rpx; }
.agree-checkbox { width: 32rpx; height: 32rpx; border: 2rpx solid rgba(255,255,255,0.5); border-radius: 6rpx; margin-right: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 22rpx; color: #fff; flex-shrink: 0; }
.agree-checked { background: #4FD1C5; border-color: #4FD1C5; }
.agree-text { color: rgba(255,255,255,0.6); }
.agree-link { color: #4FD1C5; text-decoration: underline; padding: 0 4rpx; }
.btn-wechat-disabled { opacity: 0.6; }
/* 头像弹窗 */
.avatar-modal .avatar-modal-title { display: block; font-size: 36rpx; font-weight: bold; color: #fff; text-align: center; margin-bottom: 16rpx; }
.avatar-modal .avatar-modal-desc { display: block; font-size: 26rpx; color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 32rpx; }
.avatar-modal .btn-choose-avatar {
width: 100%; height: 88rpx; margin: 0 0 24rpx 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: #4FD1C5; color: #000; font-size: 30rpx; font-weight: 600;
border-radius: 44rpx; border: none;
}
.avatar-modal .btn-choose-avatar::after { border: none; }
.avatar-modal .avatar-modal-cancel { display: block; text-align: center; font-size: 28rpx; color: rgba(255,255,255,0.5); padding: 16rpx; }
/* 手机/微信号弹窗 */
.contact-modal-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8rpx); }
.contact-modal { width: 90%; max-width: 600rpx; background: #1A1A1A; border-radius: 48rpx; padding: 48rpx 40rpx; border: 1rpx solid rgba(255,255,255,0.1); }
.contact-modal-title { display: block; text-align: center; font-size: 40rpx; font-weight: bold; color: #fff; margin-bottom: 16rpx; }
.contact-modal-hint { display: block; font-size: 24rpx; color: #9CA3AF; text-align: center; margin-bottom: 40rpx; }
.form-input-wrap { margin-bottom: 32rpx; }
.form-label { display: block; font-size: 24rpx; color: #9CA3AF; margin-bottom: 12rpx; margin-left: 8rpx; }
.form-input-inner { display: flex; align-items: center; padding: 24rpx 32rpx; background: #262626; border-radius: 24rpx; }
.form-input-inner .form-icon { font-size: 36rpx; margin-right: 16rpx; opacity: 0.7; }
.form-input-inner .form-input { flex: 1; font-size: 28rpx; color: #fff; background: transparent; }
.contact-modal-btn { width: 100%; height: 96rpx; line-height: 96rpx; text-align: center; background: #4FD1C5; color: #000; font-size: 32rpx; font-weight: bold; border-radius: 24rpx; margin-top: 16rpx; }
.contact-modal-btn[disabled] { opacity: 0.6; }
.contact-modal-cancel { display: block; text-align: center; font-size: 28rpx; color: #9CA3AF; margin-top: 24rpx; padding: 16rpx; }
/* 昵称弹窗 */
.nickname-modal .modal-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 32rpx; }
.nickname-modal .modal-icon { font-size: 48rpx; }
.nickname-modal .modal-title { font-size: 36rpx; font-weight: bold; }
.nickname-input-wrap { margin-bottom: 32rpx; }
.nickname-input-inner {
padding: 24rpx 32rpx; background: #262626; border-radius: 20rpx;
}
.nickname-input { width: 100%; font-size: 28rpx; color: #fff; background: transparent; box-sizing: border-box; }
.nickname-placeholder { color: #9CA3AF; }
.input-tip { display: block; font-size: 22rpx; color: #9CA3AF; margin-top: 12rpx; }
.modal-actions { display: flex; gap: 24rpx; }
.modal-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 20rpx; font-size: 28rpx; }
.modal-btn-cancel { background: rgba(255,255,255,0.1); color: #fff; }
.modal-btn-confirm { background: #4FD1C5; color: #000; font-weight: 600; }
/* 代付链接卡片 */
.gift-list { display: flex; flex-direction: column; gap: 16rpx; }
.gift-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; }
.gift-left { flex: 1; min-width: 0; }
.gift-title { display: block; font-size: 28rpx; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-meta { display: block; font-size: 22rpx; color: #9CA3AF; margin-top: 6rpx; }
.gift-share-btn { display: inline-block; padding: 8rpx 28rpx; background: #4FD1C5; color: #000; font-size: 24rpx; font-weight: 600; border-radius: 20rpx; }
.gift-done { font-size: 24rpx; color: #6B7280; }
/* 底部留白：配合 page padding-bottom，避免内容被 TabBar 遮挡 */
.bottom-space { height: calc(80rpx + env(safe-area-inset-bottom, 0px)); }