/** * 卡尼奶主题 — 付费内容样式（付费盒 / 已购盒 / 购买弹窗 / 下载按钮） * pay-box 体系样式自包含，局部 CSS 变量兜底，不依赖全局样式 */ /* ==================== 0. 局部变量 ==================== */ #posts-pay, .knn-post-pay-dialog, .article-content .hidden-box { --main-bg-color: #fff; --main-shadow: rgba(0, 0, 0, 0.05); --main-radius: 8px; --mini-radius: 6px; --main-color: #333; --main-border-color: #e8e8e8; --muted-border-color: #f2f3f7; --muted-color: #74787d; --muted-2-color: #8c8c8c; --body-bg-color: #f7f8f9; --focus-color: #ff7f6a; --focus-color-opacity05: rgba(255, 127, 106, 0.05); --focus-color-opacity1: rgba(255, 127, 106, 0.1); --cover-height-scale: 70%; } /* 深色模式：付费盒体系自包含变量整体切换为深色（对齐主题 body.dark-mode 调色板） */ body.dark-mode #posts-pay, body.dark-mode .knn-post-pay-dialog, body.dark-mode .article-content .hidden-box { --main-bg-color: #272727; --main-shadow: rgba(0, 0, 0, 0.4); --main-color: #d0d0d0; --main-border-color: #3a3a3a; --muted-border-color: #363636; --muted-color: #9a9a9a; --muted-2-color: #8c8c8c; --body-bg-color: #1f1f1f; } /* ==================== 1. 局部工具类 ==================== */ /* 防正文排版规则（.content-style a/p）污染付费盒内元素 */ #posts-pay a { font-size: inherit; color: inherit; } #posts-pay p { margin: 0 0 10px; } .article-content .hidden-box a { font-size: inherit; } /* SVG 兜底尺寸 */ #posts-pay svg, .knn-post-pay-dialog svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } #posts-pay .flex, .knn-post-pay-dialog .flex { display: flex; } #posts-pay .xx, .knn-post-pay-dialog .xx { flex-direction: column; } #posts-pay .ac, .knn-post-pay-dialog .ac { align-items: center; } #posts-pay .ab, .knn-post-pay-dialog .ab { align-items: baseline; } #posts-pay .jc, .knn-post-pay-dialog .jc { justify-content: center; align-items: center; } #posts-pay .jsb, .knn-post-pay-dialog .jsb { justify-content: space-between; } #posts-pay .flex.hh, .knn-post-pay-dialog .flex.hh { flex-wrap: wrap; } #posts-pay .flex0, .knn-post-pay-dialog .flex0 { flex-shrink: 0; } #posts-pay .flex1 { flex: 1; min-width: 0; } #posts-pay .flex-auto, .knn-post-pay-dialog .flex-auto { flex: auto; } #posts-pay .flex .flex-auto-h { flex: auto; overflow: hidden; } #posts-pay .relative, .knn-post-pay-dialog .relative { position: relative; } #posts-pay .text-right { text-align: right; } #posts-pay .text-left { text-align: left; } #posts-pay .text-center, .knn-post-pay-dialog .text-center { text-align: center; } #posts-pay .text-ellipsis, .knn-post-pay-dialog .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #posts-pay .pointer, .knn-post-pay-dialog .pointer { cursor: pointer; } #posts-pay .inline-block, .knn-post-pay-dialog .inline-block { display: inline-block; } #posts-pay .font-bold, .knn-post-pay-dialog .font-bold { font-weight: bold; } #posts-pay .mr3, .knn-post-pay-dialog .mr3 { margin-right: 3px; } #posts-pay .mr6, .knn-post-pay-dialog .mr6 { margin-right: 6px; } #posts-pay .mr10, .knn-post-pay-dialog .mr10 { margin-right: 10px; } #posts-pay .mr20 { margin-right: 20px; } #posts-pay .ml3, .knn-post-pay-dialog .ml3 { margin-left: 3px; } #posts-pay .ml6, .knn-post-pay-dialog .ml6 { margin-left: 6px; } #posts-pay .ml10, .knn-post-pay-dialog .ml10 { margin-left: 10px; } #posts-pay .mt6, .knn-post-pay-dialog .mt6 { margin-top: 6px; } #posts-pay .mt10, .knn-post-pay-dialog .mt10 { margin-top: 10px; } #posts-pay .mb6, .knn-post-pay-dialog .mb6 { margin-bottom: 6px; } #posts-pay .mb10, .knn-post-pay-dialog .mb10 { margin-bottom: 10px; } #posts-pay .em09, .knn-post-pay-dialog .em09 { font-size: 0.9em; } #posts-pay .em12, .knn-post-pay-dialog .em12 { font-size: 1.2em; } #posts-pay .em14, .knn-post-pay-dialog .em14 { font-size: 1.4em; } #posts-pay .em2x, .knn-post-pay-dialog .em2x { font-size: 2em; } #posts-pay .em3x, .knn-post-pay-dialog .em3x { font-size: 3em; } #posts-pay .px12, .knn-post-pay-dialog .px12 { font-size: 12px; } #posts-pay .line-16, .knn-post-pay-dialog .line-16 { line-height: 1.6; } #posts-pay .padding-6, .knn-post-pay-dialog .padding-6 { padding: 6px; } #posts-pay .padding-10, .knn-post-pay-dialog .padding-10 { padding: 10px; } #posts-pay .padding-h6, .knn-post-pay-dialog .padding-h6 { padding-top: 6px; padding-bottom: 6px; } #posts-pay .padding-h10, .knn-post-pay-dialog .padding-h10 { padding-top: 10px; padding-bottom: 10px; } #posts-pay .padding-w10, .knn-post-pay-dialog .padding-w10 { padding-left: 10px; padding-right: 10px; } #posts-pay .padding-lg, #posts-pay .but.padding-lg, .knn-post-pay-dialog .but.padding-lg { padding: 0.5em 2em; } #posts-pay .c-red, .knn-post-pay-dialog .c-red { --this-color: #ff5473; --this-bg: rgba(255, 84, 115, 0.1); color: var(--this-color); } #posts-pay .c-blue, .knn-post-pay-dialog .c-blue { color: #2196f3; } #posts-pay .c-blue-2, .knn-post-pay-dialog .c-blue-2 { color: #4869f0; } #posts-pay .c-green, .knn-post-pay-dialog .c-green { color: #1aad19; } #posts-pay .c-yellow, .knn-post-pay-dialog .c-yellow { color: #e6a23c; } #posts-pay .muted-2-color, .knn-post-pay-dialog .muted-2-color { color: var(--muted-2-color); } #posts-pay .muted-box, .knn-post-pay-dialog .muted-box { background-color: var(--this-bg, var(--muted-border-color)); border-radius: var(--main-radius); padding: 15px; } #posts-pay .btn-block, .knn-post-pay-dialog .btn-block { display: block; width: 100%; text-align: center; } #posts-pay .visible-xs-block { display: none; } /* 绝对定位工具类 */ #posts-pay .abs-left, #posts-pay .abs-right, #posts-pay .abs-center, .knn-post-pay-dialog .abs-right { position: absolute; top: 50%; right: 0.7em; transform: translateY(-50%); z-index: 1; } #posts-pay .abs-center { left: 0; width: 100%; } #posts-pay .abs-center.left-bottom { top: auto; transform: unset; bottom: 0; } /* ==================== 2. 按钮与徽章 ==================== */ #posts-pay .but, #posts-pay .badg, .knn-post-pay-dialog .but, .knn-post-pay-dialog .badg { border-radius: 4px; display: inline-block; transition: 0.15s; border: 1px solid var(--this-border); vertical-align: middle; padding: 0.3em 0.6em; text-align: center; font-weight: normal; background: var(--this-bg); color: var(--this-color); --this-bg: rgba(136, 136, 136, 0.1); --this-border: transparent; --this-color: #888; line-height: 1.44; text-decoration: none; cursor: pointer; } #posts-pay .but:hover, .knn-post-pay-dialog .but:hover { opacity: 0.8; } #posts-pay .but.radius, .knn-post-pay-dialog .but.radius { border-radius: 50px; padding: 0.3em 1em; } #posts-pay .but.badg-sm, #posts-pay .badg.badg-sm, .knn-post-pay-dialog .badg.badg-sm { font-size: 0.8em; padding: 0 0.2em; vertical-align: 0.1em; } #posts-pay .badg.hollow { background: transparent; border-color: currentColor; } #posts-pay .badg.c-red.hollow { color: #ff5473; } #posts-pay .badg.c-yellow, .knn-post-pay-dialog .badg.c-yellow { --this-color: #e6a23c; --this-bg: rgba(230, 162, 60, 0.1); } .knn-post-pay-dialog .but.c-blue { --this-color: #2196f3; --this-bg: rgba(33, 150, 243, 0.1); } /* 按钮内图标间距 */ #posts-pay .but .icon, #posts-pay .but > .fa:not(.fa-angle-right), .knn-post-pay-dialog .but .icon, .knn-post-pay-dialog .but > .fa:not(.fa-angle-right) { margin-right: 0.25em; } /* badge 元素（促销标签等） */ #posts-pay badge, .knn-post-pay-dialog badge { font-size: 0.8em; line-height: 1.2; padding: 0.1em 0.4em; min-width: 0.8em; min-height: 0.8em; display: inline-block; vertical-align: 0.1em; border-radius: 50px; background: var(--this-bg); color: var(--this-color); top: 5px; --this-color: #fff; text-align: center; --this-bg: #fe3459; z-index: 1; } #posts-pay badge:not(.point):empty, .knn-post-pay-dialog badge:not(.point):empty { display: none; } #posts-pay badge.px12, .knn-post-pay-dialog badge.px12 { font-size: 12px; } /* 渐变配色（对齐 jb-* 体系） */ #posts-pay .jb-red, .knn-post-pay-dialog .jb-red, #posts-pay .order-type-9 .pay-tag, .knn-post-pay-dialog .order-type-9 .pay-tag, #posts-pay.order-type-9 .pay-tag { --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); --this-color: #fff; } #posts-pay .jb-pink, .knn-post-pay-dialog .order-type-2 .pay-tag, #posts-pay.order-type-2 .pay-tag { --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%); --this-color: #fff; } #posts-pay .jb-yellow, .knn-post-pay-dialog .jb-yellow { --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%); --this-color: #fff; } #posts-pay .jb-blue, .knn-post-pay-dialog .jb-blue { --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); --this-color: #fff; } #posts-pay .jb-green, .knn-post-pay-dialog .jb-green { --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); --this-color: #fff; } #posts-pay .jb-purple, .knn-post-pay-dialog .jb-purple { --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%); --this-color: #fff; } #posts-pay .jb-vip1, .knn-post-pay-dialog .jb-vip1 { --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); --this-color: #866127; } #posts-pay .jb-vip2, .knn-post-pay-dialog .jb-vip2 { --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%); --this-color: #ddd; } #posts-pay .jb-red, #posts-pay .jb-pink, #posts-pay .jb-yellow, #posts-pay .jb-blue, #posts-pay .jb-green, #posts-pay .jb-purple, #posts-pay .jb-vip1, #posts-pay .jb-vip2, .knn-post-pay-dialog .jb-red, .knn-post-pay-dialog .jb-yellow, .knn-post-pay-dialog .jb-blue, .knn-post-pay-dialog .jb-green, .knn-post-pay-dialog .jb-vip1, .knn-post-pay-dialog .jb-vip2 { background: var(--this-bg); color: var(--this-color); } /* 按钮组均分 */ #posts-pay .but-average { display: flex; border-radius: 4px; overflow: hidden; } #posts-pay .but-average.inline { display: inline-flex; } #posts-pay .but-average > .but { margin: 0 !important; border-radius: 0; flex: auto; } /* ==================== 3. 付费盒主体 ==================== */ #posts-pay.knn-widget { clear: both; background-color: var(--main-bg-color); padding: 15px; box-shadow: 0 0 10px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } #posts-pay.pay-box { font-size: 14px; position: relative; overflow: hidden; line-height: 1.4; margin-top: 20px; } #posts-pay .pay-title { font-weight: 700; line-height: 1.42857143; margin: 0; } /* 类型角标（左上角） */ #posts-pay .pay-tag { --this-color: #fff; --this-bg: linear-gradient(135deg, #ff74cd 10%, #ec7d0b 100%); background: var(--this-bg); color: var(--this-color); } #posts-pay.pay-box .pay-tag { font-size: 13px; padding: 3px 10px; right: auto; width: auto; top: 10px; border-radius: var(--main-radius) 0 var(--main-radius) 0; line-height: 1.4; z-index: 1; } /* 已售角标（右上角） */ #posts-pay .img-badge { position: absolute; top: 0.6em; right: 0; border-radius: 50px 0 0 50px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); z-index: 1; padding: 0.25em 0.6em; background: var(--this-bg); color: var(--this-color); } /* 左侧图片 */ #posts-pay .pay-thumb { width: 40%; } #posts-pay .graphic { text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); --main-color: #fff; color: #fff; position: relative; overflow: hidden; box-shadow: 0 0 10px var(--main-shadow); padding: 0; padding-bottom: var(--cover-height-scale, 70%); border-radius: var(--main-radius); } #posts-pay .graphic > .fit-cover, #posts-pay .graphic > img { position: absolute; width: 100%; height: 100%; object-fit: cover; } /* 价格模块 */ #posts-pay .pay-mark { font-size: 12px; margin-right: 3px; } #posts-pay .original-price, .knn-post-pay-dialog .original-price { padding-left: 1px; padding-right: 2px; position: relative; font-size: 14px; display: inline-flex; align-items: baseline; color: var(--muted-2-color); } #posts-pay .original-price::before, .knn-post-pay-dialog .original-price::before { content: ''; position: absolute; width: 100%; height: 1px; background: var(--this-color, rgba(255, 52, 59, 0.8)); top: 50%; left: 0; transform: rotate(8deg); } #posts-pay .price-box b { font-weight: 700; } /* 会员价按钮：图标 + 名称 + 价格用 flex 强制同一行居中对齐 */ #posts-pay .vip-price { border: none; font-size: 12px; padding: 4px 12px; display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; } #posts-pay .vip-price:hover { color: inherit; background: rgba(0, 0, 0, 0.05); } #posts-pay .vip-price-text { display: inline-flex; align-items: center; } #posts-pay .vip-price-name { display: inline-block; } #posts-pay .but.jb-vip1 { background: var(--this-bg); color: var(--this-color); } #posts-pay .but.jb-vip2 { background: var(--this-bg); color: var(--this-color); } /* 会员价按钮组：一行放不下时横向滑动 + 左右箭头（复用「开通会员」弹窗交互） */ #posts-pay .vip-price-buts-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; } #posts-pay .vip-price-buts { display: flex; flex-wrap: nowrap; max-width: 100%; border-radius: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #posts-pay .vip-price-buts::-webkit-scrollbar { display: none; } #posts-pay .vip-price-buts.is-scrollable { cursor: grab; user-select: none; } #posts-pay .vip-price-buts.dragging { cursor: grabbing; scroll-behavior: auto; } #posts-pay .vip-price-buts > .but { margin: 0 !important; border-radius: 0; flex: 0 0 auto; white-space: nowrap; } #posts-pay .vip-price-buts img { -webkit-user-drag: none; user-select: none; } #posts-pay .vip-price-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 10px; line-height: 22px; text-align: center; cursor: pointer; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out; } #posts-pay .vip-price-nav:hover { background: rgba(0, 0, 0, 0.55); } #posts-pay .vip-price-nav.prev { left: 2px; } #posts-pay .vip-price-nav.next { right: 2px; } /* 仅当可滚动（JS 加 .show）且鼠标悬停会员区域时才显示左右箭头 */ #posts-pay .vip-price-buts-wrap:hover .vip-price-nav.show { opacity: 1; visibility: visible; pointer-events: auto; } #posts-pay .vip-price-buts-wrap:hover .vip-price-nav.show[disabled] { opacity: 0.25; cursor: default; } /* 等级图标尺寸约束 */ #posts-pay .img-icon, .knn-post-pay-dialog .img-icon { height: 1.1em; max-width: 6em; vertical-align: -0.15em; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-block; } #posts-pay .img-icon img, .knn-post-pay-dialog .img-icon img { height: 100%; } /* 弹窗信息卡「会员价」标签内的等级图标：默认 -0.15em 基线对齐会使图标高于文字顶端，此处改为垂直居中与文字同行 */ #posts-pay .muted-box .img-icon, .knn-post-pay-dialog .muted-box .img-icon { vertical-align: middle; } /* 立即购买按钮 */ #posts-pay .cashier-link { padding: 0.5em 3em; } /* 商品属性 / 更多介绍 / 购后内容 */ #posts-pay .pay-attr, #posts-pay .pay-extra-hide, #posts-pay .pay-details { font-size: 13px; background: var(--muted-border-color); display: block; padding: 6px 10px; line-height: 1.4; color: var(--muted-color); border-radius: 4px; } #posts-pay .pay-details { margin-top: 10px; padding: 10px; } #posts-pay .pay-attr { margin-top: 10px; } #posts-pay .pay-attr .attr-value { font-weight: 500; } /* ==================== 4. 已购盒 ==================== */ #posts-pay.paid-box { padding: 0 !important; border-radius: var(--main-radius); } #posts-pay .box-body { padding: 15px; } #posts-pay .paid-info { border-left: 1px dashed rgba(255, 255, 255, 0.51); padding-left: 20px; } #posts-pay .paid-info a { color: inherit; } #posts-pay .jb-green.flex.ac { border-radius: var(--main-radius) var(--main-radius) 0 0; } /* 会员免费条 */ #posts-pay .payvip-icon { background: linear-gradient(300deg, #4c4d51, #2a2a31 15%, #85858a 40%, #393a3c 60%, #393838 80%, #5e5f62); color: #ddd; } #posts-pay .vipbg-v1 { background: linear-gradient(60deg, #f0bf81 0, #fdefd6 30%, #f2deb9 40%, #fdc277 80%, #f9e1b7 100%); color: #8c5728; } #posts-pay .vipbg-v1 .c-red { color: #8c5728; } /* 隐藏内容盒（payshow / 下载区共用） */ .article-content .hidden-box, #posts-pay .hidden-box { padding: 10px; margin: 20px 0; border: 1px dashed var(--focus-color); border-radius: var(--main-radius); position: relative; } .article-content .hidden-box .hidden-text, #posts-pay .hidden-box .hidden-text { color: var(--focus-color); padding: 10px; text-align: center; display: block; } .article-content .hidden-box.show, #posts-pay .hidden-box.show { padding-top: 35px; } .article-content .hidden-box.show .hidden-text, #posts-pay .hidden-box.show .hidden-text { padding: 3px 10px; font-size: 13px; top: 0; border-radius: 0 0 8px 0; line-height: 1.4; z-index: 1; left: 0; position: absolute; border-bottom: 1px dashed var(--focus-color); border-right: 1px dashed var(--focus-color); } .article-content .hidden-box .hidden-text a { text-decoration: none; color: #2196f3; } /* 下载按钮组 */ #posts-pay .but-download .but { padding: 8px 20px; } #posts-pay .knn-copy-key { cursor: pointer; text-decoration: none; } /* ==================== 5. 购买弹窗 ==================== */ .knn-post-pay-dialog { position: fixed; inset: 0; z-index: 9999; font-size: 14px; line-height: 1.4; } .knn-post-pay-dialog .knn-post-pay-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .knn-post-pay-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; max-width: calc(100vw - 30px); max-height: calc(100vh - 60px); overflow-y: auto; background: var(--main-bg-color); border-radius: var(--main-radius); padding: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); animation: knnPostPayIn 0.24s ease; } @keyframes knnPostPayIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } /* 支付方式 radio（hollow-radio 体系） */ .knn-post-pay-dialog .hollow-radio { padding: 10px; border: 1px solid var(--main-border-color); border-radius: var(--mini-radius); text-align: center; transition: border-color 0.2s, background 0.2s; } .knn-post-pay-dialog .hollow-radio.active { border-color: var(--focus-color); background: var(--focus-color-opacity05); } .knn-post-pay-dialog .payment-method-radio { padding: 5px; } .knn-post-pay-dialog .payment-method-radio > * { margin: 3px; } .knn-post-pay-dialog .payment-method-radio img { height: 35px; } .knn-post-pay-dialog .payment-method-radio + .payment-method-radio { margin-left: 10px; } /* 优惠码输入盒 */ .knn-post-pay-dialog .form-control.coupon-input { width: 100%; height: 38px; padding: 6px 112px 6px 12px; border: 1px solid transparent; border-radius: var(--mini-radius); background: var(--body-bg-color); color: var(--main-color); font-size: 13px; box-sizing: border-box; outline: none; box-shadow: none; transition: border-color ease-in-out 0.15s, background ease-in-out 0.15s; } .knn-post-pay-dialog .form-control.coupon-input:focus { border-color: #2196f3; background: var(--main-bg-color); } .knn-post-pay-dialog .coupon-input + .abs-right, .knn-post-pay-dialog .coupon-input-box .abs-right { right: 2px; } .knn-post-pay-dialog .coupon-submit { white-space: nowrap; } .knn-post-pay-dialog .coupon-submit:disabled { opacity: 0.6; cursor: not-allowed; } .knn-post-pay-dialog .coupon-data-box { font-size: 12px; } .knn-post-pay-dialog .coupon-data-box .coupon-msg { margin-top: 6px; } .knn-post-pay-dialog .coupon-data-box .coupon-msg.success { color: #1aad19; } .knn-post-pay-dialog .coupon-data-box .coupon-msg.error { color: #ff3434; } /* 立即支付按钮 */ .knn-post-pay-dialog .but.initiate-pay { padding: 0.6em 1em; border: 0; } .knn-post-pay-dialog .actual-price-number { font-weight: 700; } /* 授权插件同款订单购买弹窗 */ .knn-post-order-modal { width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: hidden; padding: 0; background: #fff; color: #303133; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .knn-post-order-modal .pay-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ebeef5; } .knn-post-order-modal .pay-header-t { font-size: 16px; font-weight: 700; color: #303133; } .knn-post-order-modal .pay-close { width: 28px; height: 28px; border: none; border-radius: 4px; padding: 0; background: transparent; color: #909399; font-size: 18px; line-height: 28px; text-align: center; cursor: pointer; } .knn-post-order-modal .pay-close:hover { color: #409eff; background: #f5f7fa; } .knn-post-order-modal .pay-body { padding: 20px; max-height: calc(100vh - 164px); overflow-y: auto; box-sizing: border-box; } .knn-post-order-modal .pay-order { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #ebeef5; border-radius: 8px; background: #fafafa; } .knn-post-order-modal .pay-order-main { min-width: 0; } .knn-post-order-modal .pay-order-name { overflow: hidden; color: #303133; font-size: 15px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .knn-post-order-modal .pay-order-sub { margin-top: 3px; overflow: hidden; color: #909399; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .knn-post-order-modal .pay-order-price { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto; color: #f56c6c; font-size: 22px; font-weight: 700; line-height: 1; white-space: nowrap; } .knn-post-order-modal .pay-order-price.c-yellow { color: #e6a23c; } .knn-post-order-modal .pay-order-original { color: #c0c4cc; font-size: 13px; font-weight: 400; } .knn-post-order-modal .pay-label { margin: 14px 0 8px; color: #606266; font-size: 13px; font-weight: 600; } .knn-post-order-modal .pay-promo-row { display: flex; gap: 10px; } .knn-post-order-modal .knn-pay-input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 6px; outline: none; background: #fff; color: #303133; font-size: 14px; box-sizing: border-box; } .knn-post-order-modal .knn-pay-input:focus { border-color: #409eff; } .knn-post-order-modal .knn-pay-promo-btn { height: 38px; padding: 0 18px; border: none; border-radius: 6px; background: #409eff; color: #fff; font-size: 14px; line-height: 38px; white-space: nowrap; cursor: pointer; } .knn-post-order-modal .knn-pay-promo-btn:hover { background: #66b1ff; } .knn-post-order-modal .knn-pay-promo-btn:disabled { background: #a0cfff; cursor: not-allowed; } .knn-post-order-modal .pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .knn-post-order-modal .pay-methods-points { grid-template-columns: 1fr; } .knn-post-order-modal .pay-method { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 38px; padding: 5px 6px; border: 1px solid #dcdfe6; border-radius: 8px; background: #fff; color: #303133; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .knn-post-order-modal .pay-method:hover { border-color: #409eff; } .knn-post-order-modal .pay-method.active { border-color: #409eff; background: #ecf5ff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12); } .knn-post-order-modal .payment-method-radio + .payment-method-radio { margin-left: 0; } .knn-post-order-modal .payment-method-radio > * { margin: 0; } .knn-post-order-modal .pm-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; } .knn-post-order-modal .pm-balance { background: linear-gradient(135deg, #e6a23c, #f7ba2a); } .knn-post-order-modal .pm-wechat { background: #07c160; } .knn-post-order-modal .pm-alipay { background: #1677ff; } .knn-post-order-modal .pm-card { background: #9254de; } .knn-post-order-modal .pm-points { background: #e6a23c; } .knn-post-order-modal .pm-other { background: #409eff; } .knn-post-order-modal .pm-main { flex: 0 1 auto; min-width: 0; } .knn-post-order-modal .pm-name { overflow: hidden; color: #303133; font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .knn-post-order-modal .pm-desc { display: none; margin-top: 1px; overflow: hidden; color: #909399; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .knn-post-order-modal .pm-balance-num { color: #e6a23c; font-weight: 700; } .knn-post-order-modal .pm-right { display: none; flex: 0 0 auto; color: #909399; font-size: 12px; white-space: nowrap; } .knn-post-order-modal .pay-balance-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px 14px; border: 1px solid #ebeef5; border-radius: 8px; background: #fafafa; color: #606266; font-size: 13px; } .knn-post-order-modal .pay-balance-info b { color: #e6a23c; font-size: 15px; } .knn-post-order-modal .pay-footer { padding: 14px 20px 20px; border-top: 1px solid #ebeef5; } .knn-post-order-modal .pay-submit { display: block; width: 100%; height: 42px; padding: 0 26px; border: none; border-radius: 6px; background: #409eff; color: #fff; font-size: 14px; font-weight: 700; line-height: 42px; text-align: center; cursor: pointer; transition: background 0.2s, transform 0.2s; box-sizing: border-box; } .knn-post-order-modal .pay-submit:hover { background: #66b1ff; color: #fff; } .knn-post-order-modal .pay-submit:active { transform: scale(0.98); } .knn-post-order-modal .pay-submit:disabled, .knn-post-order-modal .pay-submit.knn-btn-loading { background: #a0cfff; cursor: not-allowed; } body.dark-mode .knn-post-order-modal, .dark-theme .knn-post-order-modal { background: #272727; color: #d0d0d0; } body.dark-mode .knn-post-order-modal .pay-header, body.dark-mode .knn-post-order-modal .pay-footer, .dark-theme .knn-post-order-modal .pay-header, .dark-theme .knn-post-order-modal .pay-footer { border-color: #3a3a3a; } body.dark-mode .knn-post-order-modal .pay-header-t, body.dark-mode .knn-post-order-modal .pay-order-name, body.dark-mode .knn-post-order-modal .pm-name, .dark-theme .knn-post-order-modal .pay-header-t, .dark-theme .knn-post-order-modal .pay-order-name, .dark-theme .knn-post-order-modal .pm-name { color: #d0d0d0; } body.dark-mode .knn-post-order-modal .pay-order, body.dark-mode .knn-post-order-modal .pay-method, body.dark-mode .knn-post-order-modal .pay-balance-info, body.dark-mode .knn-post-order-modal .knn-pay-input, .dark-theme .knn-post-order-modal .pay-order, .dark-theme .knn-post-order-modal .pay-method, .dark-theme .knn-post-order-modal .pay-balance-info, .dark-theme .knn-post-order-modal .knn-pay-input { border-color: #3a3a3a; background: #303030; color: #d0d0d0; } body.dark-mode .knn-post-order-modal .pay-method.active, body.dark-mode .knn-post-order-modal .pay-method:hover, .dark-theme .knn-post-order-modal .pay-method.active, .dark-theme .knn-post-order-modal .pay-method:hover { border-color: #409eff; background: rgba(64, 158, 255, 0.12); } /* ==================== 6. 移动端 ==================== */ @media (max-width: 767px) { #posts-pay .visible-xs-block { display: block; } } @media (max-width: 640px) { #posts-pay .hide-sm { display: none !important; } #posts-pay.pay-box { padding: 10px; } #posts-pay .pay-title { margin-top: 18px; } #posts-pay.pay-box .price-box { text-align: center; align-items: center; justify-content: center; margin: 6px; } #posts-pay .pay-flexbox { flex-wrap: wrap; } #posts-pay .but-group > .but { width: 50%; } #posts-pay .vip-price-buts-wrap { width: 100%; } #posts-pay .vip-price-buts-wrap { display: block; } #posts-pay .cashier-link, #posts-pay .signin-loader, .knn-post-pay-dialog .initiate-pay { width: 100%; /* 主题无全局 border-box 重置，width:100% 需显式声明，否则 padding 叠加后按钮超宽被 overflow:hidden 裁切造成歪斜 */ box-sizing: border-box; display: block; } .knn-post-pay-modal { width: calc(100vw - 20px); max-width: none; } .knn-post-order-modal .pay-body { padding: 16px; } .knn-post-order-modal .pay-header { padding: 15px 18px; } .knn-post-order-modal .pay-footer { padding: 12px 16px 16px; } .knn-post-order-modal .pay-order { align-items: flex-start; padding: 13px 14px; } .knn-post-order-modal .pay-order-price { font-size: 20px; } .knn-post-order-modal .pay-methods { gap: 8px; } .knn-post-order-modal .pay-method { gap: 4px; min-height: 36px; padding: 5px 4px; } .knn-post-order-modal .pm-icon { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; } .knn-post-order-modal .pm-name { font-size: 12px; } .knn-post-order-modal .pay-promo-row { gap: 8px; } .knn-post-order-modal .knn-pay-promo-btn { padding: 0 12px; font-size: 13px; } } /* ==================== 7. 付费购买侧边栏小工具（竖版 .knn-pay-widget） ==================== */ /* 复用付费盒体系变量与工具类，作用域独立于 #posts-pay，避免与正文付费盒重复 ID； 购买弹窗与会员价滚动交互复用正文付费盒渲染的那一份（见 core/pay/post-pay-widget.php） */ .knn-pay-widget { --main-bg-color: #fff; --main-shadow: rgba(0, 0, 0, 0.05); --main-radius: 8px; --main-color: #333; --muted-border-color: #f2f3f7; --muted-color: #74787d; --muted-2-color: #8c8c8c; font-size: 14px; line-height: 1.4; } body.dark-mode .knn-pay-widget { --main-bg-color: #272727; --main-shadow: rgba(0, 0, 0, 0.4); --main-color: #d0d0d0; --muted-border-color: #363636; --muted-color: #9a9a9a; --muted-2-color: #8c8c8c; } /* 卡片外壳 */ .knn-pay-widget.knn-widget { background-color: var(--main-bg-color); box-shadow: 0 0 10px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; color: var(--main-color); } .knn-pay-widget.pay-box { position: relative; overflow: hidden; padding: 0; } .knn-pay-widget .box-body { padding: 15px; } /* 布局工具类 */ .knn-pay-widget .flex { display: flex; } .knn-pay-widget .jsb { justify-content: space-between; } .knn-pay-widget .relative { position: relative; z-index: 1; } .knn-pay-widget .absolute { position: absolute; z-index: 0; } .knn-pay-widget .text-center { text-align: center; } .knn-pay-widget .text-left { text-align: left; } .knn-pay-widget .inline-block { display: inline-block; } .knn-pay-widget .font-bold { font-weight: bold; } .knn-pay-widget .mt6 { margin-top: 6px; } .knn-pay-widget .mt10 { margin-top: 10px; } .knn-pay-widget .mb6 { margin-bottom: 6px; } .knn-pay-widget .mb10 { margin-bottom: 10px; } .knn-pay-widget .mr3 { margin-right: 3px; } .knn-pay-widget .mr6 { margin-right: 6px; } .knn-pay-widget .ml3 { margin-left: 3px; } .knn-pay-widget .ml10 { margin-left: 10px; } .knn-pay-widget .em09 { font-size: 0.9em; } .knn-pay-widget .em12 { font-size: 1.2em; } .knn-pay-widget .em14 { font-size: 1.4em; } .knn-pay-widget .em3x { font-size: 3em; } .knn-pay-widget .px12 { font-size: 12px; } .knn-pay-widget .padding-h10 { padding-top: 10px; padding-bottom: 10px; } /* 颜色 */ .knn-pay-widget .c-red { color: #ff5473; } .knn-pay-widget .c-green { color: #1aad19; } .knn-pay-widget .c-yellow { color: #e6a23c; } .knn-pay-widget .muted-2-color { color: var(--muted-2-color); } /* SVG / 链接兜底 */ .knn-pay-widget svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .knn-pay-widget a { font-size: inherit; } /* 渐变配色（对齐 jb-* 体系） */ .knn-pay-widget .jb-red { --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); --this-color: #fff; } .knn-pay-widget .jb-yellow { --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%); --this-color: #fff; } .knn-pay-widget .jb-blue { --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); --this-color: #fff; } .knn-pay-widget .jb-green { --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); --this-color: #fff; } .knn-pay-widget .jb-purple { --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%); --this-color: #fff; } .knn-pay-widget .jb-vip1 { --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); --this-color: #866127; } .knn-pay-widget .jb-vip2 { --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%); --this-color: #ddd; } .knn-pay-widget .jb-red, .knn-pay-widget .jb-yellow, .knn-pay-widget .jb-blue, .knn-pay-widget .jb-green, .knn-pay-widget .jb-purple, .knn-pay-widget .jb-vip1, .knn-pay-widget .jb-vip2 { background: var(--this-bg); color: var(--this-color); } /* 彩色头部（大号价格 / 已购状态） */ .knn-pay-widget .relative-h { position: relative; overflow: hidden; padding: 34px 15px 22px; text-align: center; background: var(--this-bg); color: var(--this-color); } .knn-pay-widget .relative-h .absolute.radius { border-radius: 100%; } .knn-pay-widget .paid-icon { margin: 0 0 6px; font-size: 2.6em; line-height: 1; } /* 类型角标（左上角丝带） */ .knn-pay-widget .abs-center { position: absolute; left: 0; width: 100%; top: 8px; text-align: center; z-index: 3; } .knn-pay-widget .pay-tag { top: 0; left: 0; right: auto; width: auto; transform: none; display: inline-block; font-size: 13px; line-height: 1.4; padding: 3px 10px; border-radius: var(--main-radius) 0 var(--main-radius) 0; background: var(--this-bg); color: var(--this-color); --this-bg: linear-gradient(135deg, #ff74cd 10%, #ec7d0b 100%); --this-color: #fff; } .knn-pay-widget .pay-tag > i { margin-right: 3px; } .knn-pay-widget.order-type-2 .pay-tag { --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%); } /* 已售角标（右上角） */ .knn-pay-widget .img-badge { position: absolute; top: 0.6em; right: 0; border-radius: 50px 0 0 50px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); z-index: 3; padding: 0.25em 0.6em; background: var(--this-bg); color: var(--this-color); font-size: 12px; } /* badge 元素（促销标签等） */ .knn-pay-widget badge { font-size: 0.8em; line-height: 1.2; padding: 0.1em 0.4em; display: inline-block; vertical-align: 0.1em; border-radius: 50px; background: var(--this-bg, #fe3459); color: var(--this-color, #fff); z-index: 1; } .knn-pay-widget badge:empty { display: none; } .knn-pay-widget badge.px12 { font-size: 12px; } /* 价格模块 */ .knn-pay-widget .price-box b { font-weight: 700; } .knn-pay-widget .pay-mark { font-size: 12px; margin-right: 3px; } .knn-pay-widget .original-price { padding-left: 1px; padding-right: 2px; position: relative; font-size: 14px; display: inline-flex; align-items: baseline; color: rgba(255, 255, 255, 0.75); } .knn-pay-widget .original-price::before { content: ''; position: absolute; width: 100%; height: 1px; background: currentColor; top: 50%; left: 0; transform: rotate(8deg); } /* 按钮与徽章 */ .knn-pay-widget .but, .knn-pay-widget .badg { border-radius: 4px; display: inline-block; transition: 0.15s; border: 1px solid var(--this-border, transparent); vertical-align: middle; padding: 0.3em 0.6em; text-align: center; font-weight: normal; background: var(--this-bg, rgba(136, 136, 136, 0.1)); color: var(--this-color, #888); line-height: 1.44; text-decoration: none; cursor: pointer; } .knn-pay-widget .but:hover { opacity: 0.8; } .knn-pay-widget .but.padding-lg, .knn-pay-widget .padding-lg { padding: 0.5em 2em; } .knn-pay-widget .btn-block { display: block; width: 100%; box-sizing: border-box; text-align: center; } .knn-pay-widget .but.radius { border-radius: 50px; padding: 0.3em 1em; } .knn-pay-widget .badg.c-yellow { --this-color: #e6a23c; --this-bg: rgba(230, 162, 60, 0.1); } .knn-pay-widget .but > .fa, .knn-pay-widget .but > i { margin-right: 0.25em; } .knn-pay-widget .cashier-link { padding: 0.5em 3em; } /* 侧栏窄：立即购买 / 登录购买 / 开通会员 主按钮强制整行块级，自补 box-sizing 防溢出。 注意排除 .vip-price 会员小按钮，避免破坏横向滑动布局 */ .knn-pay-widget .cashier-link, .knn-pay-widget .but.padding-lg:not(.vip-price) { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 0.6em 1em; } .knn-pay-widget .cashier-link { border-radius: var(--main-radius); } /* 会员价按钮组（复用「开通会员」交互，与 #posts-pay 一致） */ .knn-pay-widget .vip-price { border: none; font-size: 12px; padding: 4px 12px; display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; } .knn-pay-widget .vip-price:hover { color: inherit; background: rgba(0, 0, 0, 0.05); } .knn-pay-widget .vip-price-text { display: inline-flex; align-items: center; } .knn-pay-widget .vip-price-name { display: inline-block; } .knn-pay-widget .vip-price-buts img { -webkit-user-drag: none; user-select: none; } .knn-pay-widget .but.jb-vip1, .knn-pay-widget .but.jb-vip2 { background: var(--this-bg); color: var(--this-color); } .knn-pay-widget .vip-price-buts-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; } .knn-pay-widget .vip-price-buts { display: flex; flex-wrap: nowrap; max-width: 100%; border-radius: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .knn-pay-widget .vip-price-buts::-webkit-scrollbar { display: none; } .knn-pay-widget .vip-price-buts.is-scrollable { cursor: grab; user-select: none; } .knn-pay-widget .vip-price-buts.dragging { cursor: grabbing; scroll-behavior: auto; } .knn-pay-widget .vip-price-buts > .but { margin: 0 !important; border-radius: 0; flex: 0 0 auto; white-space: nowrap; } .knn-pay-widget .vip-price-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 10px; line-height: 22px; text-align: center; cursor: pointer; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out; } .knn-pay-widget .vip-price-nav:hover { background: rgba(0, 0, 0, 0.55); } .knn-pay-widget .vip-price-nav.prev { left: 2px; } .knn-pay-widget .vip-price-nav.next { right: 2px; } .knn-pay-widget .vip-price-buts-wrap:hover .vip-price-nav.show { opacity: 1; visibility: visible; pointer-events: auto; } .knn-pay-widget .vip-price-buts-wrap:hover .vip-price-nav.show[disabled] { opacity: 0.25; cursor: default; } /* 等级图标 */ .knn-pay-widget .img-icon { height: 1.1em; max-width: 6em; vertical-align: -0.15em; display: inline-block; } .knn-pay-widget .img-icon img { height: 100%; } /* 商品属性 / 更多介绍 */ .knn-pay-widget .pay-attr, .knn-pay-widget .pay-details { font-size: 13px; background: var(--muted-border-color); display: block; padding: 10px; line-height: 1.4; color: var(--muted-color); border-radius: 4px; margin-top: 10px; } .knn-pay-widget .pay-attr .attr-value { font-weight: 500; }