.page { min-height: 100vh; background: #0b1220; color: #fff; box-sizing: border-box; padding-bottom: calc(168rpx + env(safe-area-inset-bottom)); } .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(5, 11, 20, 0.9); } .nav-back { width: 64rpx; flex-shrink: 0; display: flex; align-items: center; } .nav-placeholder { width: 64rpx; flex-shrink: 0; } .nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 700; } .bottom-publish-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 20rpx 28rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); background: rgba(11, 18, 32, 0.96); border-top: 1rpx solid rgba(94, 234, 212, 0.12); } .bottom-publish-btn { height: 92rpx; border-radius: 18rpx; background: linear-gradient(135deg, #22d3ee, #14b8a6); color: #032b35; font-size: 32rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; } .bottom-publish-btn-disabled { opacity: 0.65; pointer-events: none; } .card { margin: 24rpx; padding: 28rpx; border-radius: 24rpx; background: rgba(15, 23, 42, 0.86); border: 1rpx solid rgba(148, 163, 184, 0.2); } .section-title { display: block; font-size: 26rpx; font-weight: 700; color: #e2e8f0; margin-bottom: 20rpx; letter-spacing: 2rpx; } .label { display: block; font-size: 24rpx; color: #cbd5e1; margin-bottom: 12rpx; } .input-wrap, .textarea-wrap { background: rgba(2, 6, 23, 0.75); border-radius: 16rpx; padding: 18rpx 20rpx; } .input { width: 100%; color: #fff; font-size: 28rpx; background: transparent; } .file-actions { margin-bottom: 12rpx; } .add-file-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14rpx 28rpx; border-radius: 16rpx; font-size: 26rpx; font-weight: 600; color: #22d3ee; border: 1rpx solid rgba(34, 211, 238, 0.45); background: rgba(8, 47, 73, 0.45); } .file-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16rpx; padding: 16rpx 18rpx; margin-bottom: 12rpx; border-radius: 14rpx; background: rgba(2, 6, 23, 0.55); border: 1rpx solid rgba(148, 163, 184, 0.12); } .file-main { flex: 1; min-width: 0; } .file-name { display: block; font-size: 26rpx; color: #f1f5f9; word-break: break-all; line-height: 1.45; } .file-meta { display: block; font-size: 22rpx; color: #94a3b8; margin-top: 6rpx; } .file-meta.ok { color: #5eead4; } .file-remove { flex-shrink: 0; font-size: 24rpx; color: #f97316; padding: 8rpx 12rpx; } .body-img-grid { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 12rpx; } .body-img-cell { position: relative; width: 160rpx; height: 160rpx; border-radius: 14rpx; overflow: hidden; background: rgba(2, 6, 23, 0.65); border: 1rpx solid rgba(148, 163, 184, 0.18); } .body-img-thumb { width: 100%; height: 100%; display: block; } .body-img-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 22rpx; color: #94a3b8; background: rgba(15, 23, 42, 0.72); } .body-img-remove { position: absolute; right: 6rpx; top: 4rpx; width: 44rpx; height: 44rpx; line-height: 40rpx; text-align: center; font-size: 32rpx; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 999rpx; z-index: 2; } .prompt-textarea { min-height: 200rpx; } .generate-btn { margin-top: 20rpx; height: 88rpx; border-radius: 16rpx; border: 1rpx solid rgba(34, 211, 238, 0.55); color: #a5f3fc; font-size: 30rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; background: rgba(8, 47, 73, 0.45); } .generate-btn-loading { opacity: 0.7; pointer-events: none; } .toolbar { margin-top: 12rpx; margin-bottom: 12rpx; display: flex; gap: 12rpx; } .tool-btn { padding: 10rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; color: #67e8f9; border: 1rpx solid rgba(34, 211, 238, 0.35); background: rgba(8, 47, 73, 0.45); } .textarea { width: 100%; min-height: 380rpx; color: #fff; font-size: 28rpx; line-height: 1.65; background: transparent; } .hint { display: block; margin-top: 10rpx; color: #94a3b8; font-size: 22rpx; } /* 发动态 · 配图宫格(参考朋友圈) */ .moment-card .toolbar { margin-top: 0; } .moment-textarea-wrap { margin-top: 8rpx; padding: 20rpx 22rpx; } .moment-textarea { min-height: 240rpx; width: 100%; font-size: 30rpx; line-height: 1.65; } .moment-photo-grid { display: flex; flex-wrap: wrap; gap: 16rpx; margin-top: 20rpx; } .moment-photo-cell { position: relative; width: calc((100% - 32rpx) / 3); padding-bottom: calc((100% - 32rpx) / 3); height: 0; border-radius: 12rpx; overflow: hidden; background: rgba(2, 6, 23, 0.65); border: 1rpx solid rgba(148, 163, 184, 0.15); box-sizing: border-box; } .moment-photo-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .moment-photo-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 22rpx; color: #94a3b8; background: rgba(15, 23, 42, 0.72); z-index: 1; } .moment-photo-remove { position: absolute; right: 6rpx; top: 4rpx; width: 44rpx; height: 44rpx; line-height: 40rpx; text-align: center; font-size: 32rpx; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 999rpx; z-index: 2; } .moment-photo-add { border: 2rpx dashed rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; } .moment-photo-add-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: 64rpx; font-weight: 300; color: rgba(148, 163, 184, 0.85); line-height: 1; } .moment-hint { margin-top: 16rpx; } /* 审核模式:盖住整页(含自定义导航),高于 .nav-bar 的 z-index: 10 */ .audit-mode-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(11, 18, 32, 0.94); } .audit-mode-text { font-size: 36rpx; font-weight: 600; color: rgba(255, 255, 255, 0.88); letter-spacing: 4rpx; }