65 lines
7.0 KiB
Plaintext
65 lines
7.0 KiB
Plaintext
.page { min-height: 100vh; background: #000; display: flex; flex-direction: column; }
|
|
.nav-bar { background: rgba(0,0,0,0.9); border-bottom: 2rpx solid rgba(255,255,255,0.05); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; }
|
|
.nav-inner { display: flex; align-items: center; padding: 0 24rpx; height: 88rpx; min-height: 44px; flex-shrink: 0; }
|
|
.nav-back { font-size: 32rpx; color: #00CED1; padding: 16rpx 0; }
|
|
.nav-center { flex: 1; text-align: center; padding: 0 16rpx; }
|
|
.nav-center .content-part { font-size: 20rpx; color: rgba(255,255,255,0.4); margin-bottom: 4rpx; }
|
|
.nav-center .content-chapter { font-size: 24rpx; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.nav-share { font-size: 28rpx; color: rgba(255,255,255,0.6); padding: 16rpx 0; }
|
|
.section-id { font-size: 28rpx; color: #00CED1; background: rgba(0,206,209,0.1); padding: 8rpx 24rpx; border-radius: 32rpx; margin-right: 16rpx; }
|
|
.tag-free { font-size: 22rpx; color: #00CED1; background: rgba(0,206,209,0.1); padding: 4rpx 12rpx; border-radius: 8rpx; }
|
|
.content-body.preview { opacity: 0.9; }
|
|
.paywall-card { margin: 32rpx; padding: 48rpx; border-radius: 32rpx; background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%); border: 2rpx solid rgba(0,206,209,0.2); text-align: center; }
|
|
.paywall-icon { font-size: 64rpx; display: block; margin-bottom: 32rpx; }
|
|
.paywall-card .paywall-title { font-size: 40rpx; font-weight: 600; color: #fff; margin-bottom: 16rpx; }
|
|
.paywall-card .paywall-desc { font-size: 28rpx; color: rgba(255,255,255,0.5); margin-bottom: 32rpx; }
|
|
.paywall-btn { width: 100%; padding: 28rpx 32rpx; border-radius: 24rpx; background: #2c2c2e; border: 2rpx solid rgba(255,255,255,0.1); color: #fff; font-size: 30rpx; margin-bottom: 24rpx; display: flex; justify-content: space-between; align-items: center; }
|
|
.paywall-btn.primary { background: linear-gradient(90deg, #00CED1 0%, #20B2AA 100%); color: #fff; }
|
|
.paywall-btn .price { color: #00CED1; font-weight: 600; }
|
|
.paywall-btn.primary .price { color: #fff; }
|
|
.paywall-hint { font-size: 24rpx; color: rgba(255,255,255,0.4); }
|
|
.nav-footer { padding: 32rpx; border-top: 2rpx solid rgba(255,255,255,0.1); }
|
|
.prev-next-row { display: flex; gap: 24rpx; margin-bottom: 32rpx; }
|
|
.prev-next { flex: 1; max-width: 48%; padding: 24rpx; border-radius: 24rpx; background: #1c1c1e; border: 2rpx solid rgba(255,255,255,0.05); }
|
|
.prev-next.next { background: linear-gradient(90deg, rgba(0,206,209,0.1) 0%, rgba(32,178,170,0.1) 100%); border-color: rgba(0,206,209,0.2); }
|
|
.pn-label { font-size: 20rpx; color: rgba(255,255,255,0.4); display: block; margin-bottom: 8rpx; }
|
|
.prev-next.next .pn-label { color: #00CED1; }
|
|
.pn-title { font-size: 24rpx; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
|
|
.share-tip { padding: 32rpx; border-radius: 24rpx; background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, transparent 100%); border: 2rpx solid rgba(255,215,0,0.2); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
|
|
.share-tip-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; width: 100%; margin-bottom: 8rpx; }
|
|
.share-tip-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); display: block; margin-bottom: 16rpx; }
|
|
.btn-share { padding: 16rpx 32rpx; border-radius: 16rpx; background: #FFD700; color: #000; font-size: 28rpx; font-weight: 500; }
|
|
.mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; display: flex; align-items: flex-end; justify-content: center; padding: 0; box-sizing: border-box; }
|
|
.modal { width: 100%; max-height: 80vh; background: #1c1c1e; border-radius: 32rpx 32rpx 0 0; padding: 48rpx; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); }
|
|
.share-modal .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; }
|
|
.modal-title { font-size: 36rpx; font-weight: 600; color: #fff; }
|
|
.modal-close { width: 64rpx; height: 64rpx; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 40rpx; color: rgba(255,255,255,0.5); }
|
|
.share-link-wrap { padding: 32rpx; border-radius: 24rpx; background: rgba(0,0,0,0.3); border: 2rpx solid rgba(255,255,255,0.1); margin-bottom: 32rpx; }
|
|
.share-link-label { font-size: 24rpx; color: rgba(255,255,255,0.4); display: block; margin-bottom: 16rpx; }
|
|
.share-link { font-size: 24rpx; color: #00CED1; word-break: break-all; display: block; }
|
|
.share-code { font-size: 22rpx; color: rgba(255,255,255,0.5); display: block; margin-top: 16rpx; }
|
|
.share-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rpx; }
|
|
.share-btn { display: flex; flex-direction: column; align-items: center; gap: 16rpx; padding: 24rpx; border-radius: 24rpx; background: rgba(255,255,255,0.05); }
|
|
.share-btn-icon { width: 96rpx; height: 96rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: #00CED1; }
|
|
.share-btn-icon.wechat { background: rgba(7,193,96,0.2); color: #07C160; }
|
|
.share-btn-icon.gold { background: rgba(255,215,0,0.2); color: #FFD700; }
|
|
.share-btn-label { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
|
.loading-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80rpx; }
|
|
.loading-spinner { width: 64rpx; height: 64rpx; border: 6rpx solid rgba(0,206,209,0.3); border-top-color: #00CED1; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
.loading-text { margin-top: 24rpx; font-size: 28rpx; color: rgba(255,255,255,0.5); }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.error-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80rpx; }
|
|
.error-text { font-size: 30rpx; color: rgba(255,255,255,0.6); margin-bottom: 32rpx; }
|
|
.paywall { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80rpx; }
|
|
.paywall-title { font-size: 36rpx; font-weight: 600; color: #fff; margin-bottom: 16rpx; text-align: center; }
|
|
.paywall-desc { font-size: 28rpx; color: rgba(255,255,255,0.5); margin-bottom: 48rpx; }
|
|
.btn-primary { padding: 24rpx 64rpx; border-radius: 48rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #000; font-size: 32rpx; font-weight: 600; }
|
|
.content-scroll { flex: 1; height: 0; }
|
|
.content-head { padding: 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
|
.content-part { font-size: 24rpx; color: #00CED1; display: block; margin-bottom: 8rpx; }
|
|
.content-chapter { font-size: 24rpx; color: rgba(255,255,255,0.5); display: block; margin-bottom: 8rpx; }
|
|
.content-title { font-size: 40rpx; font-weight: 700; color: #fff; display: block; }
|
|
.content-body { padding: 32rpx; font-size: 30rpx; line-height: 1.8; color: rgba(255,255,255,0.9); }
|
|
.content-body .content-text { white-space: pre-wrap; word-break: break-all; display: block; }
|
|
.content-body rich-text { display: block; white-space: pre-wrap; word-break: break-all; }
|