补充主题静态资源与归档模板

2026-07-03 23:15:11 +08:00
parent 1268a55dd0
commit 3247db7ed1
265 changed files with 59174 additions and 0 deletions
@@ -0,0 +1,199 @@
+/* ============================================================
+ * 7. 文章封面轮播
+ * ============================================================ */
+.single-cover-slider {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg, 8px);
+}
+
+.single-cover-slider .swiper-slide {
+    position: relative;
+    overflow: hidden;
+}
+
+.single-cover-slider__img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+    display: block;
+}
+
+.single-cover-slider__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
+    pointer-events: none;
+}
+
+.single-cover-slider__content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 24px;
+    color: #fff;
+    z-index: 2;
+}
+
+.single-cover-slider__title {
+    margin: 0 0 8px;
+    font-size: 24px;
+    font-weight: 700;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.single-cover-slider__meta {
+    display: flex;
+    gap: 16px;
+    font-size: 13px;
+    opacity: 0.9;
+}
+
+.single-cover-slider__pagination {
+    position: absolute;
+    bottom: 12px;
+    right: 16px;
+    z-index: 3;
+}
+
+.single-cover-slider__pagination .swiper-pagination-bullet {
+    background: rgba(255,255,255,0.6);
+    opacity: 1;
+}
+
+.single-cover-slider__pagination .swiper-pagination-bullet-active {
+    background: #fff;
+}
+
+.single-cover-slider__prev,
+.single-cover-slider__next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 3;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.3);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.single-cover-slider__prev:hover,
+.single-cover-slider__next:hover {
+    background: rgba(0,0,0,0.5);
+}
+
+.single-cover-slider__prev { left: 12px; }
+.single-cover-slider__next { right: 12px; }
+
+@media (max-width: 640px) {
+    .single-cover-slider__img {
+        height: 240px;
+    }
+    .single-cover-slider__title {
+        font-size: 18px;
+    }
+}
+
+/* ============================================================
+ * 8. 打赏按钮
+ * ============================================================ */
+.action-btn--reward {
+    position: relative;
+}
+
+.action-btn--reward.is-active {
+    color: var(--color-warning, #F59E0B);
+}
+
+.reward-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+}
+
+.reward-modal.is-open {
+    opacity: 1;
+    visibility: visible;
+}
+
+.reward-modal__overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+}
+
+.reward-modal__card {
+    position: relative;
+    background: var(--surface-1, #fff);
+    border-radius: var(--radius-lg, 8px);
+    padding: 32px;
+    max-width: 360px;
+    width: 90%;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
+    z-index: 1;
+}
+
+.reward-modal__title {
+    margin: 0 0 8px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--color-ink);
+}
+
+.reward-modal__desc {
+    margin: 0 0 20px;
+    font-size: 14px;
+    color: var(--color-ink-3);
+}
+
+.reward-modal__qr {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto 16px;
+    border-radius: var(--radius, 10px);
+    overflow: hidden;
+}
+
+.reward-modal__qr img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.reward-modal__close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: var(--surface-2, #F4F5F7);
+    color: var(--color-ink-3);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.reward-modal__close:hover {
+    background: var(--surface-3, #ECEEF1);
+}
+