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.
265 lines
6.8 KiB
Plaintext
265 lines
6.8 KiB
Plaintext
/* ── 基础 ── */
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #080f1e;
|
|
color: #f1f5f9;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
/* ── 导航栏 ── */
|
|
.nav-bar {
|
|
position: fixed; left: 0; right: 0; top: 0; z-index: 10;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 44px; padding: 0 24rpx;
|
|
background: rgba(8, 15, 30, 0.92);
|
|
border-bottom: 1rpx solid rgba(148, 163, 184, 0.12);
|
|
}
|
|
.nav-back, .nav-placeholder { width: 64rpx; }
|
|
.nav-title { font-size: 32rpx; font-weight: 700; color: #e2e8f0; }
|
|
|
|
/* ── 通用 Section ── */
|
|
.section {
|
|
margin: 24rpx 24rpx 0;
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border: 1rpx solid rgba(148, 163, 184, 0.15);
|
|
border-radius: 24rpx;
|
|
padding: 28rpx 24rpx 20rpx;
|
|
}
|
|
.section--content { min-height: 360rpx; }
|
|
|
|
.section-header {
|
|
display: flex; align-items: center; gap: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.section-icon { font-size: 34rpx; }
|
|
.section-title { font-size: 28rpx; font-weight: 600; color: #e2e8f0; }
|
|
.section-sub { font-size: 22rpx; color: #64748b; margin-left: 4rpx; }
|
|
|
|
/* ── 图片网格 ── */
|
|
.img-grid {
|
|
display: flex; flex-wrap: wrap; gap: 16rpx;
|
|
}
|
|
|
|
.img-cell {
|
|
position: relative;
|
|
width: 192rpx; height: 192rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: 1rpx solid rgba(100, 116, 139, 0.3);
|
|
}
|
|
.img-cell--error { border-color: rgba(248, 113, 113, 0.5); }
|
|
|
|
.img-thumb { width: 100%; height: 100%; }
|
|
|
|
.img-overlay {
|
|
position: absolute; inset: 0;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
background: rgba(8, 15, 30, 0.6);
|
|
}
|
|
.img-overlay--err { background: rgba(127, 29, 29, 0.65); }
|
|
.img-err-txt { font-size: 22rpx; color: #fca5a5; }
|
|
|
|
.img-spin {
|
|
width: 48rpx; height: 48rpx;
|
|
border: 4rpx solid rgba(103, 232, 249, 0.25);
|
|
border-top-color: #67e8f9;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.img-del {
|
|
position: absolute; top: 8rpx; right: 8rpx;
|
|
width: 40rpx; height: 40rpx;
|
|
border-radius: 50%;
|
|
background: rgba(8, 15, 30, 0.75);
|
|
color: #e2e8f0;
|
|
font-size: 30rpx; line-height: 38rpx;
|
|
text-align: center;
|
|
border: 1rpx solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.img-add {
|
|
width: 192rpx; height: 192rpx;
|
|
border-radius: 16rpx;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; gap: 8rpx;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
border: 2rpx dashed rgba(103, 232, 249, 0.3);
|
|
}
|
|
.img-add-icon { font-size: 52rpx; color: #67e8f9; line-height: 1; }
|
|
.img-add-label { font-size: 22rpx; color: #94a3b8; }
|
|
|
|
/* ── 描述输入框 ── */
|
|
.desc-wrap {
|
|
background: rgba(2, 8, 20, 0.6);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
border: 1rpx solid rgba(100, 116, 139, 0.2);
|
|
}
|
|
.desc-textarea {
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
color: #e2e8f0;
|
|
font-size: 28rpx;
|
|
line-height: 1.7;
|
|
}
|
|
.desc-placeholder { color: #475569; }
|
|
|
|
/* ── 字数统计 ── */
|
|
.char-count {
|
|
display: block;
|
|
text-align: right;
|
|
font-size: 22rpx;
|
|
color: #475569;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
/* ── 错误提示 ── */
|
|
.error-tip {
|
|
margin: 16rpx 24rpx 0;
|
|
padding: 16rpx 20rpx;
|
|
border-radius: 12rpx;
|
|
background: rgba(127, 29, 29, 0.35);
|
|
border: 1rpx solid rgba(248, 113, 113, 0.3);
|
|
font-size: 24rpx;
|
|
color: #fca5a5;
|
|
}
|
|
|
|
/* ── AI 生成按钮 ── */
|
|
.ai-btn-wrap { margin: 32rpx 24rpx 0; }
|
|
|
|
.ai-btn {
|
|
display: flex; align-items: center; justify-content: center; gap: 14rpx;
|
|
height: 100rpx; border-radius: 20rpx;
|
|
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #0891b2 100%);
|
|
box-shadow: 0 8rpx 32rpx rgba(124, 58, 237, 0.4);
|
|
}
|
|
.ai-btn-icon { font-size: 36rpx; color: #fff; }
|
|
.ai-btn-text { font-size: 32rpx; font-weight: 700; color: #fff; letter-spacing: 2rpx; }
|
|
|
|
/* ── AI Loading 卡片 ── */
|
|
.ai-loading-card {
|
|
display: flex; flex-direction: column;
|
|
align-items: center; padding: 56rpx 32rpx;
|
|
border-radius: 24rpx;
|
|
background: rgba(15, 23, 42, 0.95);
|
|
border: 1rpx solid rgba(124, 58, 237, 0.35);
|
|
box-shadow: 0 0 48rpx rgba(124, 58, 237, 0.15);
|
|
}
|
|
|
|
.ai-loading-stars {
|
|
display: flex; gap: 24rpx; margin-bottom: 32rpx;
|
|
}
|
|
.star {
|
|
font-size: 40rpx; color: #a78bfa;
|
|
animation: starPulse 1.4s ease-in-out infinite;
|
|
}
|
|
.star2 { animation-delay: 0.28s; }
|
|
.star3 { animation-delay: 0.56s; }
|
|
|
|
.ai-loading-title {
|
|
font-size: 34rpx; font-weight: 700;
|
|
color: #e2e8f0; margin-bottom: 12rpx;
|
|
}
|
|
.ai-loading-desc {
|
|
font-size: 24rpx; color: #64748b;
|
|
text-align: center; line-height: 1.6; margin-bottom: 40rpx;
|
|
}
|
|
|
|
.ai-loading-bar {
|
|
width: 100%; height: 6rpx;
|
|
background: rgba(100, 116, 139, 0.2);
|
|
border-radius: 999rpx;
|
|
overflow: hidden;
|
|
}
|
|
.ai-loading-bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #7c3aed, #2563eb, #0891b2);
|
|
border-radius: 999rpx;
|
|
animation: barSlide 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── 预览/编辑区域 ── */
|
|
.field-header {
|
|
display: flex; align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.field-label { font-size: 26rpx; font-weight: 600; color: #94a3b8; }
|
|
|
|
.input-wrap {
|
|
background: rgba(2, 8, 20, 0.6);
|
|
border-radius: 16rpx;
|
|
padding: 18rpx 20rpx;
|
|
border: 1rpx solid rgba(100, 116, 139, 0.2);
|
|
}
|
|
.input { width: 100%; color: #f1f5f9; font-size: 30rpx; }
|
|
|
|
.textarea-wrap {
|
|
background: rgba(2, 8, 20, 0.6);
|
|
border-radius: 16rpx;
|
|
padding: 18rpx 20rpx;
|
|
border: 1rpx solid rgba(100, 116, 139, 0.2);
|
|
}
|
|
.textarea { width: 100%; min-height: 480rpx; color: #f1f5f9; font-size: 28rpx; line-height: 1.7; }
|
|
|
|
/* ── 工具栏 ── */
|
|
.toolbar {
|
|
margin: 16rpx 24rpx 0;
|
|
display: flex; gap: 12rpx;
|
|
}
|
|
.tool-btn {
|
|
padding: 10rpx 20rpx; border-radius: 999rpx;
|
|
font-size: 22rpx; color: #67e8f9;
|
|
border: 1rpx solid rgba(34, 211, 238, 0.35);
|
|
background: rgba(8, 47, 73, 0.45);
|
|
}
|
|
|
|
/* ── 底部操作栏 ── */
|
|
.action-bar {
|
|
position: fixed; left: 0; right: 0; bottom: 0;
|
|
display: flex; gap: 16rpx; align-items: center;
|
|
padding: 16rpx 24rpx;
|
|
background: rgba(8, 15, 30, 0.95);
|
|
border-top: 1rpx solid rgba(148, 163, 184, 0.12);
|
|
}
|
|
|
|
.action-secondary {
|
|
flex: 0 0 auto;
|
|
height: 88rpx; padding: 0 36rpx;
|
|
border-radius: 16rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: rgba(30, 41, 59, 0.7);
|
|
border: 1rpx solid rgba(100, 116, 139, 0.3);
|
|
color: #94a3b8;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.action-primary {
|
|
flex: 1;
|
|
height: 88rpx; border-radius: 16rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: linear-gradient(135deg, #22d3ee, #14b8a6);
|
|
color: #032b35;
|
|
font-size: 30rpx; font-weight: 700;
|
|
}
|
|
.action-primary--loading { opacity: 0.7; }
|
|
|
|
/* ── 动画 ── */
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes starPulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.35; transform: scale(0.75); }
|
|
}
|
|
|
|
@keyframes barSlide {
|
|
0% { width: 0%; margin-left: 0; }
|
|
50% { width: 70%; margin-left: 0; }
|
|
100% { width: 0%; margin-left: 100%; }
|
|
}
|