|
|
@@ -452,14 +452,14 @@ export default {
|
|
|
.error-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
|
|
|
.error-icon { font-size: calc(100rpx * var(--font-scale, 1)); margin-bottom: 24rpx; }
|
|
|
.error-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-bottom: 30rpx; }
|
|
|
-.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 36rpx; text-align: center; border: none; }
|
|
|
+.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 24rpx; text-align: center; border: none; }
|
|
|
.content-scroll { height: calc(100vh - 120rpx); }
|
|
|
.detail-cover { width: 100%; display: block; }
|
|
|
.detail-title { display: block; font-size: calc(36rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; line-height: 1.4; padding: 30rpx 30rpx 0; }
|
|
|
.detail-meta { display: flex; align-items: center; padding: 16rpx 30rpx 0; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; flex-wrap: wrap; }
|
|
|
.meta-author { color: $uni-info; }
|
|
|
.meta-sep { margin: 0 12rpx; color: $facade-border-soft; }
|
|
|
-.reading-time-badge { margin-left: auto; font-size: calc(20rpx * var(--font-scale, 1)); color: $uni-info; background: rgba(14, 165, 233, 0.08); padding: 4rpx 12rpx; border-radius: 20rpx; white-space: nowrap; }
|
|
|
+.reading-time-badge { margin-left: auto; font-size: calc(20rpx * var(--font-scale, 1)); color: $uni-info; background: rgba(14, 165, 233, 0.08); padding: 4rpx 12rpx; border-radius: 24rpx; white-space: nowrap; }
|
|
|
.reading-time-badge.completed { color: $status-success; background: rgba(16,185,129,0.1); }
|
|
|
.meta-readcount {
|
|
|
font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
@@ -469,7 +469,7 @@ export default {
|
|
|
.detail-category { display: inline-block; font-size: calc(20rpx * var(--font-scale, 1)); color: $uni-info; background: rgba(14, 165, 233, 0.1); padding: 4rpx 16rpx; border-radius: 8rpx; }
|
|
|
.detail-dimensions { padding: 16rpx 30rpx 0; display: flex; gap: 12rpx; }
|
|
|
.dim-bar-item { flex: 1; }
|
|
|
-.dim-bar { height: 8rpx; border-radius: 4rpx; }
|
|
|
+.dim-bar { height: 8rpx; border-radius: 8rpx; }
|
|
|
.dim-label { font-size: calc(18rpx * var(--font-scale, 1)); color: $facade-text-muted; text-align: center; display: block; margin-top: 4rpx; }
|
|
|
.detail-summary { padding: 20rpx 30rpx; }
|
|
|
.detail-summary-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-faint; line-height: 1.7; display: block; border-left: 4rpx solid $brand-primary; padding-left: 20rpx; }
|
|
|
@@ -477,12 +477,12 @@ export default {
|
|
|
.detail-body { padding: 0 30rpx; font-size: calc(32rpx * var(--font-scale, 1)); color: $facade-text-deep-2; line-height: 1.8; }
|
|
|
|
|
|
.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: $app-surface; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
|
|
|
-.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
|
|
|
+.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 24rpx; display: flex; align-items: center; justify-content: center; border: none; }
|
|
|
.share-btn::after { border: none; }
|
|
|
.share-btn-icon { font-size: calc(30rpx * var(--font-scale, 1)); margin-right: 8rpx; }
|
|
|
.share-btn-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $app-surface; font-weight: 600; }
|
|
|
|
|
|
-.listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
|
|
|
+.listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; }
|
|
|
.listen-btn.playing { background: rgba(14, 165, 233, 0.2); }
|
|
|
.listen-btn-icon { font-size: calc(30rpx * var(--font-scale, 1)); margin-right: 8rpx; }
|
|
|
.listen-btn-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $uni-info; font-weight: 600; }
|
|
|
@@ -501,7 +501,7 @@ export default {
|
|
|
.quiz-dot.done { background: $mat-orange-300; }
|
|
|
.q-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; line-height: 1.5; margin-bottom: 20rpx; }
|
|
|
.q-options { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
-.q-option-row { display: flex; align-items: center; padding: 16rpx 20rpx; border: 2rpx solid $facade-gray-200; border-radius: 12rpx; }
|
|
|
+.q-option-row { display: flex; align-items: center; padding: 16rpx 20rpx; border: 2rpx solid $facade-gray-200; border-radius: 16rpx; }
|
|
|
.q-option-row.selected { border-color: $brand-primary; background: $uni-primary-pale; }
|
|
|
.q-option-letter { width: 44rpx; font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-body; flex-shrink: 0; }
|
|
|
.q-option-row.selected .q-option-letter { color: $brand-primary; }
|
|
|
@@ -510,11 +510,11 @@ export default {
|
|
|
.q-option-check { width: 32rpx; height: 32rpx; border-radius: 50%; border: 3rpx solid $app-border-strong; color: transparent; font-size: calc(20rpx * var(--font-scale, 1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
.q-option-row.selected .q-option-check { border-color: $brand-primary; background: $brand-primary; color: $app-surface; }
|
|
|
.quiz-nav { display: flex; gap: 16rpx; margin-top: 28rpx; }
|
|
|
-.quiz-prev { flex: 1; padding: 20rpx; background: $app-surface; color: $brand-primary; border: 2rpx solid $brand-primary; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 12rpx; }
|
|
|
+.quiz-prev { flex: 1; padding: 20rpx; background: $app-surface; color: $brand-primary; border: 2rpx solid $brand-primary; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 16rpx; }
|
|
|
.quiz-prev::after { border: none; }
|
|
|
-.quiz-submit { flex: 1; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 12rpx; border: none; }
|
|
|
+.quiz-submit { flex: 1; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 16rpx; border: none; }
|
|
|
.quiz-submit::after { border: none; }
|
|
|
-.result-btn { width: 100%; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 12rpx; border: none; margin-top: 20rpx; }
|
|
|
+.result-btn { width: 100%; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(28rpx * var(--font-scale, 1)); border-radius: 16rpx; border: none; margin-top: 20rpx; }
|
|
|
.result-dialog { text-align: center; }
|
|
|
.result-icon { font-size: calc(80rpx * var(--font-scale, 1)); }
|
|
|
.result-text { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; margin: 16rpx 0; }
|