feat(widgets): singular post pay purchase sidebar box

Add WidgetPostPayBox (zibll posts_pay parity) with theme skins,
paid/unpaid CTAs, sales badge, and registration.
This commit is contained in:
2026-07-21 12:42:57 +08:00
parent fd1137804e
commit 6a78b553d6
3 changed files with 220 additions and 0 deletions
+38
View File
@@ -2479,3 +2479,41 @@ a.main-color > .icon-cover-card:hover,
.widget-tab-posts__skeleton .placeholder.k1 { width: 80%; }
.widget-tab-posts__skeleton .placeholder.s1 { width: 48%; }
.posts-mini-lists.aksrt-main-posts { /* zibll mini outer */ }
/* batch37-39 residual */
.aksrt-post-pay-box { position: relative; overflow: hidden; }
.aksrt-post-pay-box .pay-tag.abs-center {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
z-index: 2; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px;
}
.aksrt-post-pay-box__hero { position: relative; overflow: hidden; min-height: 120px; color: #fff; }
.aksrt-post-pay-box__blob { opacity: .55; pointer-events: none; }
.aksrt-post-pay-box__blob--a { height: 200px; left: 75%; width: 200px; top: -34%; border-radius: 100%; }
.aksrt-post-pay-box__blob--b { height: 305px; width: 337px; left: -229px; border-radius: 100%; opacity: .7; }
.aksrt-post-pay-box .box-body { position: relative; z-index: 1; }
.aksrt-post-pay-box .img-badge.hot { position: absolute; top: 8px; right: 8px; z-index: 2; }
.aksrt-post-pay-box .but.btn-block { width: 100%; justify-content: center; }
.aksrt-main-posts__skeleton .placeholder-row,
.aksrt-product-tab__skeleton .placeholder-row {
display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.aksrt-main-posts__skeleton .posts-mini.placeholder-row { flex-direction: row; align-items: center; gap: 10px; }
.aksrt-main-posts__skeleton .thumb-placeholder,
.aksrt-product-tab__skeleton .placeholder.thumb {
width: 72px; height: 54px; border-radius: 8px; background: var(--surface-2, #eee);
}
.aksrt-product-tab__skeleton .placeholder.thumb { width: 100%; height: 100px; }
.aksrt-main-posts__skeleton .placeholder.k1,
.aksrt-main-posts__skeleton .placeholder.t1,
.aksrt-main-posts__skeleton .placeholder.s1,
.aksrt-product-tab__skeleton .placeholder.k1,
.aksrt-product-tab__skeleton .placeholder.s1 {
height: 12px; border-radius: 4px; background: var(--surface-2, #eee);
}
.aksrt-main-posts__skeleton .placeholder.k1,
.aksrt-product-tab__skeleton .placeholder.k1 { width: 80%; }
.aksrt-main-posts__skeleton .placeholder.s1,
.aksrt-product-tab__skeleton .placeholder.s1 { width: 48%; }
.aksrt-main-posts[data-load-mode="ajax"].is-ajax-loading { opacity: .85; }
.widget-search-box.is-affix { position: sticky; top: 72px; }