83a420f1b9
- Added checks for audit mode in VIP navigation and member detail pages, preventing access and displaying appropriate messages. - Updated UI elements to conditionally render based on audit mode, enhancing user experience by hiding VIP-related options when in audit mode. - Introduced loading indicators on the VIP page to manage user expectations during content validation. - Enhanced error handling for image uploads in the article editor, ensuring a smoother content creation process. This update aims to improve the overall user experience by enforcing access restrictions and providing clear feedback in audit mode.
85 lines
5.8 KiB
Plaintext
85 lines
5.8 KiB
Plaintext
.page { background: #000; min-height: 100vh; color: #fff; }
|
||
.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 24rpx; background: rgba(0,0,0,0.9); }
|
||
.nav-back { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
|
||
.back-icon { font-size: 44rpx; color: #fff; }
|
||
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; }
|
||
.nav-placeholder-r { width: 60rpx; }
|
||
|
||
/* 审核校验前占位，避免露出价格与支付按钮 */
|
||
.vip-gate-loading {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
min-height: 45vh; padding: 48rpx;
|
||
}
|
||
.vip-gate-dot {
|
||
width: 48rpx; height: 48rpx; border-radius: 50%;
|
||
border: 4rpx solid rgba(255, 255, 255, 0.15);
|
||
border-top-color: #FFD700;
|
||
animation: vip-gate-spin 0.75s linear infinite;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.vip-gate-txt { font-size: 26rpx; color: rgba(255, 255, 255, 0.45); }
|
||
@keyframes vip-gate-spin { to { transform: rotate(360deg); } }
|
||
|
||
.vip-hero { margin: 24rpx; padding: 48rpx 32rpx; border-radius: 24rpx; background: linear-gradient(135deg, rgba(0,206,209,0.08), rgba(255,215,0,0.06)); border: 1rpx solid rgba(0,206,209,0.2); }
|
||
.vip-hero-active { border-color: rgba(255,215,0,0.4); background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(0,206,209,0.08)); }
|
||
.vip-hero-tag { display: inline-block; background: rgba(0,206,209,0.15); color: #00CED1; font-size: 22rpx; padding: 6rpx 16rpx; border-radius: 16rpx; margin-bottom: 20rpx; }
|
||
.vip-hero-title { display: block; font-size: 44rpx; font-weight: bold; color: #fff; }
|
||
.gold { color: #FFD700; }
|
||
.vip-hero-sub { display: block; font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 12rpx; }
|
||
|
||
/* 双列权益 - 按 premium_membership_landing_v1 */
|
||
.rights-grid { display: flex; gap: 24rpx; margin: 24rpx; }
|
||
.rights-col { flex: 1; min-width: 0; }
|
||
.rights-col-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 16rpx; padding-left: 8rpx; }
|
||
.rights-dot { width: 8rpx; height: 24rpx; border-radius: 4rpx; }
|
||
.rights-dot-teal { background: #4FD1C5; }
|
||
.rights-dot-gold { background: #FFBD2E; }
|
||
.rights-col-title { font-size: 24rpx; font-weight: bold; color: #4FD1C5; letter-spacing: 2rpx; }
|
||
.rights-col-title-gold { color: #FFBD2E; }
|
||
.benefit-card { display: flex; flex-direction: column; gap: 16rpx; padding: 24rpx; margin-bottom: 16rpx; background: #141414; border: 1rpx solid rgba(255,255,255,0.05); border-radius: 24rpx; }
|
||
.benefit-card-tap { transition: opacity 0.15s; }
|
||
.benefit-card-hover { opacity: 0.88; background: #1a1a1a; }
|
||
.benefit-icon { font-size: 36rpx; color: #4FD1C5; }
|
||
.benefit-icon-gold { color: #FFBD2E; }
|
||
.benefit-info { display: flex; flex-direction: column; }
|
||
.benefit-title { font-size: 26rpx; font-weight: bold; color: #fff; }
|
||
.benefit-desc { font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; line-height: 1.4; }
|
||
|
||
/* 底部固定购买按钮 - 宽度拉满屏幕（用 view 替代 button 避让默认 margin） */
|
||
.buy-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 24rpx 20rpx; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.95); border-top: 1rpx solid rgba(255,255,255,0.05); z-index: 50; box-sizing: border-box; }
|
||
.buy-btn-fixed {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(135deg, #FFD700, #FFB000); color: #000;
|
||
font-size: 32rpx; font-weight: bold; border-radius: 48rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(255,188,46,0.2);
|
||
}
|
||
.buy-btn-disabled { opacity: 0.6; pointer-events: none; }
|
||
.bottom-spacer { height: 180rpx; }
|
||
|
||
.profile-card { margin: 24rpx; padding: 32rpx; background: rgba(255,255,255,0.04); border: 1rpx solid rgba(255,255,255,0.08); border-radius: 20rpx; }
|
||
.profile-title { font-size: 30rpx; font-weight: 600; color: rgba(255,255,255,0.9); display: block; margin-bottom: 24rpx; }
|
||
.avatar-row { display: flex; align-items: center; margin-bottom: 24rpx; }
|
||
.avatar-label { font-size: 26rpx; color: rgba(255,255,255,0.6); width: 140rpx; flex-shrink: 0; }
|
||
.avatar-slot { width: 128rpx; height: 128rpx; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2rpx dashed rgba(255,255,255,0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||
.avatar-slot .avatar-img { width: 100%; height: 100%; }
|
||
.avatar-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
|
||
.avatar-add { font-size: 48rpx; line-height: 1; }
|
||
.avatar-hint { font-size: 20rpx; margin-top: 8rpx; }
|
||
.form-group { margin-bottom: 24rpx; }
|
||
.form-label { font-size: 26rpx; color: rgba(255,255,255,0.6); display: block; margin-bottom: 10rpx; }
|
||
.form-input { box-sizing: border-box; width: 100%; min-height: 76rpx; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; padding: 16rpx 24rpx; }
|
||
.form-input input { width: 100%; font-size: 28rpx; color: #fff; line-height: 1.5; background: transparent; }
|
||
.form-placeholder { color: rgba(255,255,255,0.35); }
|
||
.save-btn-wrap { margin-top: 32rpx; width: 100%; display: flex; justify-content: center; }
|
||
.save-btn { display: block; margin: 0; padding: 0; width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; background: linear-gradient(135deg, #00CED1, #20B2AA); color: #000; font-size: 32rpx; font-weight: 600; border-radius: 44rpx; border: none; box-sizing: border-box; }
|
||
.save-btn::after { border: none; margin: 0; padding: 0; }
|
||
|
||
.author-section { margin: 32rpx 24rpx; padding: 24rpx; border-top: 1rpx solid rgba(255,255,255,0.08); }
|
||
.author-row { display: flex; justify-content: space-between; padding: 8rpx 0; }
|
||
.author-label { font-size: 24rpx; color: rgba(255,255,255,0.4); }
|
||
.author-name { font-size: 24rpx; color: rgba(255,255,255,0.7); }
|
||
|
||
.bottom-space { height: 120rpx; }
|