From 2e7cc56043e96d1f3721a511db5d4fc26b4b5c3e Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 26 Aug 2026 14:06:31 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BA=86=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E5=B0=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/frontend/resource-meta.css | 5 - assets/css/frontend/resource-meta/part-1.css | 300 ---- assets/css/frontend/resource-meta/part-2.css | 300 ---- assets/css/frontend/resource-meta/part-3.css | 300 ---- assets/css/frontend/resource-meta/part-4.css | 283 ---- assets/css/frontend/resource-meta/part-5.css | 54 - assets/css/frontend/resource-meta/part.css | 1237 +++++++++++++++++ src/Core/ScriptsPart1b.php | 8 +- .../post-visual-contract.test.cjs | 17 + 9 files changed, 1261 insertions(+), 1243 deletions(-) delete mode 100644 assets/css/frontend/resource-meta.css delete mode 100644 assets/css/frontend/resource-meta/part-1.css delete mode 100644 assets/css/frontend/resource-meta/part-2.css delete mode 100644 assets/css/frontend/resource-meta/part-3.css delete mode 100644 assets/css/frontend/resource-meta/part-4.css delete mode 100644 assets/css/frontend/resource-meta/part-5.css create mode 100644 assets/css/frontend/resource-meta/part.css diff --git a/assets/css/frontend/resource-meta.css b/assets/css/frontend/resource-meta.css deleted file mode 100644 index 3cf61c98..00000000 --- a/assets/css/frontend/resource-meta.css +++ /dev/null @@ -1,5 +0,0 @@ -@import url("resource-meta/part-1.css"); -@import url("resource-meta/part-2.css"); -@import url("resource-meta/part-3.css"); -@import url("resource-meta/part-4.css"); -@import url("resource-meta/part-5.css"); diff --git a/assets/css/frontend/resource-meta/part-1.css b/assets/css/frontend/resource-meta/part-1.css deleted file mode 100644 index 1ad9b97b..00000000 --- a/assets/css/frontend/resource-meta/part-1.css +++ /dev/null @@ -1,300 +0,0 @@ -/* ============================================================ - * 桌面端 .resource-download-box 基础样式 - * ============================================================ */ - -.resource-download-box { - padding: 20px; - background: var(--surface-page, #fff); - border: 1px solid var(--color-line, rgba(0,0,0,0.08)); - border-radius: var(--main-radius, var(--radius, 8px)); - box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); -} - -/* ============================================================ - * v2 双栏布局 — 模仿 legacy pay-box - * ============================================================ */ -.resource-download-box--v2 { - position: relative; - overflow: visible; -} - -.resource-download-box--v2::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; -} - -.resource-download-box__body { - display: grid; - grid-template-columns: 200px 1fr; - gap: 20px; - align-items: start; -} - -/* 缩略图列 */ -.resource-download-box__thumb-col { - position: relative; -} - -.resource-download-box__thumb { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; - border-radius: var(--radius); - background: var(--surface-2); -} - -.resource-download-box__pay-tag { - position: absolute; - top: 8px; - left: 8px; -} - -/* 内容列 */ -.resource-download-box__content-col { - min-width: 0; -} - -/* 价格区 */ -.resource-download-box__pricing { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - margin: 12px 0; -} - -.resource-download-box__original-price { - font-size: 13px; - color: var(--color-ink-4); - text-decoration: line-through; -} - -/* VIP 价格区 */ -.resource-download-box__vip-pricing { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-bottom: 12px; -} - -.resource-download-box__vip-badge { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 12px; - font-weight: 600; - padding: 4px 10px; - border-radius: 6px; - cursor: default; -} - -.resource-download-box__vip-badge--1 { - background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); - color: #fff; -} - -.resource-download-box__vip-badge--2 { - background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); - color: #fff; -} - -.resource-download-box__vip-badge i { - font-size: 11px; -} - -/* 服务保障 */ -.resource-download-box__guarantees { - display: flex; - gap: 16px; - flex-wrap: wrap; - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid var(--color-line-soft); -} - -.resource-download-box__guarantee { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 12px; - color: var(--color-success, #10B981); -} - -.resource-download-box__guarantee i { - font-size: 12px; -} - -/* 响应式 */ -@media (max-width: 640px) { - .resource-download-box__body { - grid-template-columns: 1fr; - } - - .resource-download-box__thumb-col { - display: none; - } - - .resource-download-box__guarantees { - gap: 12px; - } -} - -/* 头部：标题 + 价格 */ -.resource-download-box__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 14px; - padding-bottom: 12px; - border-bottom: 1px solid var(--color-line, rgba(0,0,0,0.06)); -} - -.resource-download-box__title-wrap { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - flex: 1; -} - -.resource-download-box__title { - font-size: 15px; - font-weight: 700; - margin: 0; - color: var(--color-ink); - display: flex; - align-items: center; - gap: 6px; - line-height: 1.3; -} - -.resource-download-box__title i { - color: var(--color-primary, #3B82F6); - font-size: 15px; -} - -.resource-download-box__count { - font-size: 11px; - color: var(--color-ink-4, #8A8F98); - white-space: nowrap; - flex-shrink: 0; -} - -/* 价格标签 */ -.resource-download-box__price { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 13px; - font-weight: 700; - padding: 4px 10px; - border-radius: 20px; - white-space: nowrap; - flex-shrink: 0; -} - -.resource-download-box__price:not(.is-free) { - color: var(--color-error, #EF4444); - background: #FEF2F2; -} - -.resource-download-box__price.is-free { - color: var(--color-success, #10B981); - background: #F0FDF4; -} - -/* 空状态 */ -.resource-download-box__notice--empty { - padding: 14px 16px; - background: var(--surface-2, #F4F5F7); - border-radius: 8px; - text-align: center; -} - -.resource-download-box__notice--empty p { - margin: 0; - font-size: 13px; - color: var(--color-ink-3); - display: flex; - align-items: center; - justify-content: center; - gap: 6px; -} - -/* 下载源列表 */ -.resource-download-box__list { - list-style: none; - margin: 0 0 14px; - padding: 0; - display: flex; - flex-direction: column; - gap: 10px; -} - -.resource-download-box__item { - margin: 0; -} - -/* 下载按钮 */ -.resource-download-box__btn { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; - min-height: 44px; - padding: 10px 18px; - border: none; - border-radius: 10px; - background: var(--color-primary, #3B82F6); - color: #fff; - font-size: 14px; - font-weight: 600; - cursor: pointer; - text-decoration: none; - transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; - box-shadow: 0 2px 8px rgba(59,130,246,0.25); -} - -.resource-download-box__btn:hover { - background: var(--color-primary-active, #2563EB); - box-shadow: 0 4px 14px rgba(59,130,246,0.35); - transform: translateY(-1px); -} - -.resource-download-box__btn:active { - transform: scale(0.97); - transition-duration: 0.1s; -} - -.resource-download-box__btn i { - font-size: 15px; - flex-shrink: 0; -} - -.resource-download-box__btn span { - flex-shrink: 0; -} - -/* 按钮副文案 */ -.resource-download-box__btn-sub { - display: block; - font-size: 11px; - font-weight: 400; - opacity: 0.85; - margin-top: 2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* 类型标签 */ -.resource-download-box__type-tag { - display: inline-flex; diff --git a/assets/css/frontend/resource-meta/part-2.css b/assets/css/frontend/resource-meta/part-2.css deleted file mode 100644 index f42eee80..00000000 --- a/assets/css/frontend/resource-meta/part-2.css +++ /dev/null @@ -1,300 +0,0 @@ - align-items: center; - padding: 2px 8px; - margin-left: auto; - border-radius: 10px; - font-size: 11px; - font-weight: 500; - background: rgba(255,255,255,0.2); - flex-shrink: 0; -} - -/* -- 按钮状态变体 -- */ -.resource-download-box__btn--login { - background: var(--color-primary, #3B82F6); -} - -.resource-download-box__btn--credit-low { - background: var(--color-ink-4, #8A8F98) !important; - box-shadow: none !important; - cursor: not-allowed; - opacity: 0.7; -} - -.resource-download-box__btn--credit-low:hover { - transform: none !important; -} - -.resource-download-box__btn--paid { - background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); -} - -/* 提示文字区 */ -.resource-download-box__hint { - margin: 0 0 14px; - padding: 10px 14px; - border-radius: 8px; - font-size: 12px; - line-height: 1.5; - display: flex; - align-items: flex-start; - gap: 8px; -} - -.resource-download-box__hint i { - font-size: 13px; - flex-shrink: 0; - margin-top: 1px; -} - -.resource-download-box__hint--login { - color: var(--color-primary, #3B82F6); - background: rgba(59,130,246,0.06); -} - -.resource-download-box__hint--login i { - color: var(--color-primary, #3B82F6); -} - -.resource-download-box__hint--credit { - color: #D97706; - background: #FFFBEB; -} - -.resource-download-box__hint--credit i { - color: #F59E0B; -} - -/* 验证码表单区 - bind模式隐藏 */ -.resource-download-box__captcha { - margin: 0 0 14px; - padding: 14px; - border: 1px dashed var(--color-line, rgba(0,0,0,0.12)); - border-radius: 8px; - background: var(--surface-2, #FAFAFB); -} - -/* bind 模式：容器保留但视觉隐藏（仍作为挂载点） */ -.resource-download-box__captcha--hidden { - padding: 0 !important; - border: none !important; - background: transparent !important; - margin: 0 !important; - min-height: 0; - overflow: hidden; - /* 极验bind按钮也隐藏，通过JS触发 */ -} -.resource-download-box__captcha--hidden > * { - visibility: hidden; - height: 0; - overflow: hidden; - pointer-events: none; -} - -/* 底部免责 */ -.resource-download-box__footer { - margin: 0; - padding-top: 12px; - border-top: 1px solid var(--color-line, rgba(0,0,0,0.06)); -} - -.resource-download-box__notice-text { - margin: 0; - font-size: 11px; - line-height: 1.6; - color: var(--color-ink-4, #8A8F98); - display: flex; - align-items: flex-start; - gap: 6px; -} - -.resource-download-box__notice-text i { - font-size: 12px; - flex-shrink: 0; - margin-top: 2px; - color: var(--color-ink-4, #8A8F98); -} - -/* 被拦截态（登录/积分不足）不透明 */ -.resource-download-box.is-blocked { - opacity: 1; -} - - -/* ============================================================ - * v4.3 资源侧栏下载卡片（垂直布局，适合 300px 侧栏宽度） - * ============================================================ */ - -.resource-sidebar-sticky { - display: flex; - flex-direction: column; - gap: 16px; -} - -/* 下载卡片 */ -.resource-download-card { - overflow: hidden; -} - -.resource-download-card__thumb { - width: 100%; - aspect-ratio: 16 / 10; - overflow: hidden; - border-radius: 8px 8px 0 0; -} - -.resource-download-card__thumb img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.resource-download-card__body { - padding: 16px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.resource-download-card__title { - font-size: 15px; - font-weight: 700; - margin: 0; - line-height: 1.35; - color: var(--color-ink); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.resource-download-card__desc { - font-size: 13px; - color: var(--color-ink-4); - line-height: 1.5; - margin: 0; -} - -/* 价格 */ -.resource-download-card__price { - padding: 6px 0; -} - -.resource-price { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 14px; - font-weight: 700; -} - -.resource-price--paid { - color: var(--color-error, #ef4444); -} - -.resource-price--paid i { - color: #f59e0b; -} - -.resource-price--paid strong { - font-size: 1.25rem; -} - -.resource-price--paid small { - font-size: 12px; - font-weight: 400; - color: var(--color-ink-4); -} - -.resource-price--free { - color: var(--color-success, #34a853); -} - -/* 下载按钮区 */ -.resource-download-card__actions { - padding: 4px 0; -} - -/* 已下载数 */ -.resource-download-card__sales { - font-size: 12px; - color: var(--color-ink-4); - display: flex; - align-items: center; - gap: 4px; -} - -/* 演示链接 */ -.resource-download-card__demo { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 8px; - border-radius: 6px; - background: var(--surface-3); - color: var(--color-ink-3); - font-size: 13px; - text-decoration: none; - transition: background 0.2s, color 0.2s; -} - -.resource-download-card__demo:hover { - background: var(--color-primary-soft, rgba(240, 68, 148, 0.12)); - color: var(--color-primary); - text-decoration: none; -} - -/* 资源属性卡片 */ -.resource-meta-card__title { - font-size: 13px; - font-weight: 700; - margin: 0 0 10px; - color: var(--color-ink); -} - -.resource-meta-card__list { - margin: 0; - display: flex; - flex-direction: column; - gap: 8px; -} - -.resource-meta-card__row { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 13px; -} - -.resource-meta-card__row dt { - color: var(--color-ink-4); - margin: 0; -} - -.resource-meta-card__row dd { - color: var(--color-ink); - font-weight: 500; - margin: 0; - text-align: right; -} - -/* 服务保障卡片 */ -.resource-guarantee-card__list { - display: flex; - flex-wrap: wrap; - gap: 12px; - font-size: 12px; - color: var(--color-ink-4); -} - -.resource-guarantee-card__list span { - display: inline-flex; - align-items: center; - gap: 4px; -} - -.resource-guarantee-card__list i { - color: var(--color-success, #34a853); - font-size: 13px; -} - diff --git a/assets/css/frontend/resource-meta/part-3.css b/assets/css/frontend/resource-meta/part-3.css deleted file mode 100644 index 7e123b14..00000000 --- a/assets/css/frontend/resource-meta/part-3.css +++ /dev/null @@ -1,300 +0,0 @@ -/* 移动端：侧栏变为正文下方（由 layout.css 统一处理隐藏） */ - -/* ============================================================ - * v5.0 移动端下载区域重构（992px 以下生效） - * - * 设计原则： - * - 块级卡片容器，匹配 .theme-box.box-body.radius8 风格 - * - 下载项纵向堆叠，每项独立卡片，触摸友好（min-height:48px） - * - 纯色配色，禁止渐变/紫色，使用 Font Awesome 图标包 - * ============================================================ */ - -/* ----- 移动端下载区域容器（块级卡片） ----- */ -.resource-mobile-download-bar { - display: none; /* 默认隐藏，媒体查询中启用 */ - margin: 16px 0; - background: var(--surface-page, #fff); - border: 1px solid var(--color-line, rgba(0,0,0,0.08)); - border-radius: var(--main-radius, var(--radius, 8px)); - box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); - overflow: hidden; -} - -/* ===== resource-download-box 组件移动端样式 ===== */ - -/* 组件根 */ -.resource-mobile-download-bar .resource-download-box { - padding: 0; - margin: 0; -} - -.resource-mobile-download-bar .resource-download-box.is-blocked { - opacity: 1; -} - -/* ---- 头部区：标题 + 价格 + 源数量 ---- */ -.resource-mobile-download-bar .resource-download-box__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 16px 16px 12px; - border-bottom: 1px solid var(--color-line, rgba(0,0,0,0.06)); -} - -.resource-mobile-download-bar .resource-download-box__title-wrap { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - flex: 1; -} - -.resource-mobile-download-bar .resource-download-box__title { - font-size: 15px; - font-weight: 700; - margin: 0; - color: var(--color-ink); - display: flex; - align-items: center; - gap: 6px; - line-height: 1.3; -} - -.resource-mobile-download-bar .resource-download-box__title i { - color: var(--color-primary, #3B82F6); - font-size: 15px; -} - -.resource-mobile-download-bar .resource-download-box__count { - font-size: 11px; - color: var(--color-ink-4, #8A8F98); - white-space: nowrap; - flex-shrink: 0; -} - -/* 头部价格标签 */ -.resource-mobile-download-bar .resource-download-box__price { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 13px; - font-weight: 700; - padding: 4px 10px; - border-radius: 20px; - white-space: nowrap; - flex-shrink: 0; -} - -.resource-mobile-download-bar .resource-download-box__price:not(.is-free) { - color: var(--color-error, #EF4444); - background: #FEF2F2; -} - -.resource-mobile-download-bar .resource-download-box__price.is-free { - color: var(--color-success, #10B981); - background: #F0FDF4; -} - -/* ---- 空状态提示 ---- */ -.resource-mobile-download-bar .resource-download-box__notice--empty { - margin: 16px; - padding: 14px 16px; - background: var(--surface-2, #F4F5F7); - border-radius: 8px; - text-align: center; -} - -.resource-mobile-download-bar .resource-download-box__notice--empty p { - margin: 0; - font-size: 13px; - color: var(--color-ink-3); - display: flex; - align-items: center; - justify-content: center; - gap: 6px; -} - -.resource-mobile-download-bar .resource-download-box__notice--empty i { - color: var(--color-primary, #3B82F6); -} - -/* ---- 下载源列表 ---- */ -.resource-mobile-download-bar .resource-download-box__list { - list-style: none; - margin: 0; - padding: 12px 16px 16px; - display: flex; - flex-direction: column; - gap: 10px; -} - -/* ---- 下载项（每个一行） ---- */ -.resource-mobile-download-bar .resource-download-box__item { - margin: 0; -} - -/* ---- 下载按钮（核心交互元素）---- */ -.resource-mobile-download-bar .resource-download-box__btn { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; - min-height: 50px; /* 触摸友好 */ - padding: 12px 20px; - border: none; - border-radius: 10px; - background: var(--color-primary, #3B82F6); - color: #fff; - font-size: 14px; - font-weight: 600; - cursor: pointer; - text-decoration: none; - position: relative; - overflow: hidden; - transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; - box-shadow: 0 2px 8px rgba(59,130,246,0.3); - -webkit-tap-highlight-color: transparent; -} - -.resource-mobile-download-bar .resource-download-box__btn i { - font-size: 16px; - flex-shrink: 0; -} - -.resource-mobile-download-bar .resource-download-box__btn span { - flex-shrink: 0; -} - -/* 按钮副文案（来源名称 / 余额信息）*/ -.resource-mobile-download-bar .resource-download-box__btn-sub { - display: block; - font-size: 11px; - font-weight: 400; - opacity: 0.85; - margin-top: 2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - -/* 类型标签（网盘/外链）*/ -.resource-mobile-download-bar .resource-download-box__type-tag { - display: inline-flex; - align-items: center; - padding: 2px 8px; - margin-left: auto; - border-radius: 10px; - font-size: 11px; - font-weight: 500; - background: rgba(255,255,255,0.2); - flex-shrink: 0; -} - -/* -- 按钮状态变体 -- */ - -/* 正常态 hover */ -.resource-mobile-download-bar .resource-download-box__btn:hover { - background: var(--color-primary-active, #2563EB); - box-shadow: 0 4px 14px rgba(59,130,246,0.4); - transform: translateY(-1px); -} - -/* active 按压反馈 */ -.resource-mobile-download-bar .resource-download-box__btn:active { - transform: scale(0.97); - transition-duration: 0.1s; -} - -/* 登录拦截态 */ -.resource-mobile-download-bar .resource-download-box__btn--login { - background: var(--color-primary, #3B82F6); -} - -/* 余额不足态（禁用外观）*/ -.resource-mobile-download-bar .resource-download-box__btn--credit-low { - background: var(--color-ink-4, #8A8F98); - box-shadow: none; - cursor: not-allowed; - opacity: 0.7; -} - -.resource-mobile-download-bar .resource-download-box__btn--credit-low:hover { - transform: none; - box-shadow: none; - background: var(--color-ink-4, #8A8F98); -} - -/* 付费下载态 */ -.resource-mobile-download-bar .resource-download-box__btn--paid { - background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); -} - -/* ---- 提示文字区 ---- */ -.resource-mobile-download-bar .resource-download-box__hint { - margin: 0 16px 12px; - padding: 10px 14px; - border-radius: 8px; - font-size: 12px; - line-height: 1.5; - display: flex; - align-items: flex-start; - gap: 8px; -} - -.resource-mobile-download-bar .resource-download-box__hint i { - font-size: 14px; - flex-shrink: 0; - margin-top: 1px; -} - -.resource-mobile-download-bar .resource-download-box__hint--login { - color: var(--color-primary, #3B82F6); - background: rgba(59,130,246,0.06); -} - -.resource-mobile-download-bar .resource-download-box__hint--login i { - color: var(--color-primary, #3B82F6); -} - -.resource-mobile-download-bar .resource-download-box__hint--credit { - color: #D97706; - background: #FFFBEB; -} - -.resource-mobile-download-bar .resource-download-box__hint--credit i { - color: #F59E0B; -} - -/* ---- 验证码表单区 ---- */ -.resource-mobile-download-bar .resource-download-box__captcha { - margin: 0 16px 16px; - padding: 14px; - border: 1px dashed var(--color-line, rgba(0,0,0,0.12)); - border-radius: 8px; - background: var(--surface-2, #FAFAFB); -} - -/* ---- 底部免责声明 ---- */ -.resource-mobile-download-bar .resource-download-box__footer { - margin: 0; - padding: 12px 16px; - border-top: 1px solid var(--color-line, rgba(0,0,0,0.06)); -} - -.resource-mobile-download-bar .resource-download-box__notice-text { - margin: 0; - font-size: 11px; - line-height: 1.6; - color: var(--color-ink-4, #8A8F98); - display: flex; - align-items: flex-start; - gap: 6px; -} - -.resource-mobile-download-bar .resource-download-box__notice-text i { - font-size: 12px; - flex-shrink: 0; - margin-top: 2px; diff --git a/assets/css/frontend/resource-meta/part-4.css b/assets/css/frontend/resource-meta/part-4.css deleted file mode 100644 index 8ad0805a..00000000 --- a/assets/css/frontend/resource-meta/part-4.css +++ /dev/null @@ -1,283 +0,0 @@ - color: var(--color-ink-4, #8A8F98); -} - - -/* ----- 移动端悬浮下载按钮（FAB） ----- */ -.resource-mobile-fab { - display: none; /* 默认隐藏，移动端媒体查询中启用 */ - position: fixed; - bottom: 72px; - right: 20px; - z-index: 950; - width: 56px; - height: 56px; - border-radius: 50%; - background: var(--color-primary, #3B82F6); - color: #fff; - text-decoration: none; - display: flex; /* 覆盖上面的 display:none */ - align-items: center; - justify-content: center; - font-size: 22px; - box-shadow: 0 4px 16px rgba(59,130,246,0.35), 0 2px 6px rgba(0,0,0,0.1); - opacity: 0; - transform: scale(0.8) translateY(10px); - transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; - pointer-events: none; - -webkit-tap-highlight-color: transparent; - animation: fabFadeIn 0.5s 1.5s forwards; -} - -@keyframes fabFadeIn { - to { - opacity: 1; - transform: scale(1) translateY(0); - pointer-events: auto; - } -} - -.resource-mobile-fab:hover { - transform: scale(1.08) translateY(-2px); - box-shadow: 0 6px 24px rgba(59,130,246,0.45), 0 4px 10px rgba(0,0,0,0.15); - color: #fff; -} - -.resource-mobile-fab:active { - transform: scale(0.95); - transition-duration: 0.1s; -} - -/* FAB脉冲效果（吸引注意） */ -.resource-mobile-fab::after { - content: ''; - position: absolute; - inset: -4px; - border-radius: 50%; - background: transparent; - border: 2px solid var(--color-primary, #3B82F6); - opacity: 0; - animation: fabPulse 2s 2.5s infinite; -} - -@keyframes fabPulse { - 0% { transform: scale(1); opacity: 0.6; } - 100% { transform: scale(1.4); opacity: 0; } -} - - -/* ============================================================ - * 响应式媒体查询 - * ============================================================ */ - -/* 移动端/平板（< 992px）：显示移动端下载栏和FAB */ -@media (max-width: 991px) { - .resource-mobile-download-bar { - display: block; - } - - .resource-mobile-fab { - display: flex; - bottom: calc(72px + env(safe-area-inset-bottom, 0px)); - right: calc(20px + env(safe-area-inset-right, 0px)); - } - - /* 超小屏适配（<= 380px） */ - @media (max-width: 380px) { - .resource-mobile-download-bar .resource-download-box__header { - flex-wrap: wrap; - gap: 8px; - padding: 14px 12px 10px; - } - - .resource-mobile-download-bar .resource-download-box__list { - padding: 10px 12px 14px; - gap: 8px; - } - - .resource-mobile-download-bar .resource-download-box__btn { - min-height: 46px; - padding: 10px 14px; - font-size: 13px; - } - - .resource-mobile-download-bar .resource-download-box__title { - font-size: 14px; - } - - .resource-mobile-download-bar .resource-download-box__hint, - .resource-mobile-download-bar .resource-download-box__footer, - .resource-mobile-download-bar .resource-download-box__captcha { - margin-left: 12px; - margin-right: 12px; - } - } -} - -/* 桌面端（>= 992px）：隐藏移动端元素，保持原侧栏布局 */ -@media (min-width: 992px) { - .resource-mobile-download-bar { - display: none !important; - } - - .resource-mobile-fab { - display: none !important; - } -} - -/* ============================================================ - * 云服务品牌按钮样式 - * ============================================================ */ -.resource-download-box__btn--service-baidu { - background: linear-gradient(135deg, #1578f8 0%, #0d65d9 100%); -} - -.resource-download-box__btn--service-lanzou { - background: linear-gradient(135deg, #f37526 0%, #e06318 100%); -} - -.resource-download-box__btn--service-aliyun { - background: linear-gradient(135deg, #6666ff 0%, #5050e0 100%); -} - -.resource-download-box__btn--service-weiyun { - background: linear-gradient(135deg, #4facfe 0%, #3a8fd4 100%); -} - -.resource-download-box__btn--service-onedrive { - background: linear-gradient(135deg, #0078d4 0%, #006abc 100%); -} - -.resource-download-box__btn--service-tianyi { - background: linear-gradient(135deg, #0099ff 0%, #0080e0 100%); -} - -.resource-download-box__btn--service-123pan { - background: linear-gradient(135deg, #2b7bff 0%, #1a65e0 100%); -} - -.resource-download-box__btn--service-quark { - background: linear-gradient(135deg, #6a5acd 0%, #5a4ab5 100%); -} - -.resource-download-box__btn--service-xunlei { - background: linear-gradient(135deg, #00a4ff 0%, #0090e0 100%); -} - -.resource-download-box__btn--service-mega { - background: linear-gradient(135deg, #d92323 0%, #c01a1a 100%); -} - -.resource-download-box__btn--service-github { - background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%); -} - -/* 云服务徽章 */ -.resource-download-box__service-badge { - display: inline-block; - font-size: 10px; - font-weight: 600; - padding: 2px 6px; - border-radius: 4px; - color: #fff; - margin-left: 6px; - letter-spacing: 0.02em; - line-height: 1.3; -} - -/* ============================================================ - * 渐变价格标签（模仿 legacy 渐变 pay-tag） - * ============================================================ */ -.resource-download-box__price--gradient { - background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); - color: #fff; - font-weight: 700; - padding: 5px 12px; - border-radius: 20px; - font-size: 13px; -} - -.resource-download-box__price--gradient.is-free { - background: linear-gradient(135deg, #10B981 0%, #059669 100%); -} - -/* ============================================================ - * 销量/下载量徽章 - * ============================================================ */ -.resource-download-box__sales-badge { - position: absolute; - top: -8px; - right: -8px; - background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); - color: #fff; - font-size: 11px; - font-weight: 600; - padding: 3px 8px; - border-radius: 12px; - box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); - white-space: nowrap; -} - -/* ============================================================ - * 下载框整体增强 — 模仿 legacy pay-box 视觉重量 - * ============================================================ */ -.resource-download-box { - position: relative; - overflow: visible; -} - -.resource-download-box::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; -} - -/* ============================================================ - * 付费类型徽章 — 模仿 legacy 渐变 pay-tag - * ============================================================ */ -.resource-pay-type-badge { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 11px; - font-weight: 600; - padding: 3px 8px; - border-radius: 4px; - color: #fff; - line-height: 1.3; - letter-spacing: 0.02em; -} - -.resource-pay-type-badge i { - font-size: 10px; -} - -/* 在归档卡片上的徽章位置 */ -.post-card .resource-pay-type-badge { - position: absolute; - top: 8px; - left: 8px; - z-index: 2; -} - -/* 在下载框内的徽章 */ -.resource-download-box__header .resource-pay-type-badge { - margin-left: 8px; -} - -/* ============================================================ - * 原价划线 — 模仿 legacy .original-price - * ============================================================ */ -.resource-original-price { - font-size: 13px; - color: var(--color-ink-4); - text-decoration: line-through; - margin-left: 6px; -} - -.resource-original-price::before { - content: ''; diff --git a/assets/css/frontend/resource-meta/part-5.css b/assets/css/frontend/resource-meta/part-5.css deleted file mode 100644 index ce25030c..00000000 --- a/assets/css/frontend/resource-meta/part-5.css +++ /dev/null @@ -1,54 +0,0 @@ - position: absolute; - left: -2px; - right: -2px; - top: 50%; - height: 1px; - background: var(--color-ink-4); - transform: rotate(-8deg); -} - -/* ============================================================ - * 视频播放器容器 - * ============================================================ */ -.resource-video-container { - position: relative; - width: 100%; - padding-bottom: 56.25%; - margin: 16px 0; - border-radius: var(--radius-lg); - overflow: hidden; - background: #000; -} - -.resource-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; -} - -/* ============================================================ - * 付费图库预览 - * ============================================================ */ -.resource-gallery-locked { - position: relative; - filter: blur(8px); - pointer-events: none; - user-select: none; -} - -.resource-gallery-locked::after { - content: '\f023'; - font-family:"Font Awesome 5 Free";font-weight:900; - font-weight: 900; - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 32px; - color: rgba(255, 255, 255, 0.8); - background: rgba(0, 0, 0, 0.3); -} diff --git a/assets/css/frontend/resource-meta/part.css b/assets/css/frontend/resource-meta/part.css new file mode 100644 index 00000000..fca8faeb --- /dev/null +++ b/assets/css/frontend/resource-meta/part.css @@ -0,0 +1,1237 @@ +/* ============================================================ + * 桌面端 .resource-download-box 基础样式 + * ============================================================ */ + +.resource-download-box { + padding: 20px; + background: var(--surface-page, #fff); + border: 1px solid var(--color-line, rgba(0,0,0,0.08)); + border-radius: var(--main-radius, var(--radius, 8px)); + box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); +} + +/* ============================================================ + * v2 双栏布局 — 模仿 legacy pay-box + * ============================================================ */ +.resource-download-box--v2 { + position: relative; + overflow: visible; +} + +.resource-download-box--v2::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; +} + +.resource-download-box__body { + display: grid; + grid-template-columns: 200px 1fr; + gap: 20px; + align-items: start; +} + +/* 缩略图列 */ +.resource-download-box__thumb-col { + position: relative; +} + +.resource-download-box__thumb { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; + border-radius: var(--radius); + background: var(--surface-2); +} + +.resource-download-box__pay-tag { + position: absolute; + top: 8px; + left: 8px; +} + +/* 内容列 */ +.resource-download-box__content-col { + min-width: 0; +} + +/* 价格区 */ +.resource-download-box__pricing { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + margin: 12px 0; +} + +.resource-download-box__original-price { + font-size: 13px; + color: var(--color-ink-4); + text-decoration: line-through; +} + +/* VIP 价格区 */ +.resource-download-box__vip-pricing { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.resource-download-box__vip-badge { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + font-weight: 600; + padding: 4px 10px; + border-radius: 6px; + cursor: default; +} + +.resource-download-box__vip-badge--1 { + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + color: #fff; +} + +.resource-download-box__vip-badge--2 { + background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); + color: #fff; +} + +.resource-download-box__vip-badge i { + font-size: 11px; +} + +/* 服务保障 */ +.resource-download-box__guarantees { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--color-line-soft); +} + +.resource-download-box__guarantee { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: var(--color-success, #10B981); +} + +.resource-download-box__guarantee i { + font-size: 12px; +} + +/* 响应式 */ +@media (max-width: 640px) { + .resource-download-box__body { + grid-template-columns: 1fr; + } + + .resource-download-box__thumb-col { + display: none; + } + + .resource-download-box__guarantees { + gap: 12px; + } +} + +/* 头部：标题 + 价格 */ +.resource-download-box__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 14px; + padding-bottom: 12px; + border-bottom: 1px solid var(--color-line, rgba(0,0,0,0.06)); +} + +.resource-download-box__title-wrap { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + flex: 1; +} + +.resource-download-box__title { + font-size: 15px; + font-weight: 700; + margin: 0; + color: var(--color-ink); + display: flex; + align-items: center; + gap: 6px; + line-height: 1.3; +} + +.resource-download-box__title i { + color: var(--color-primary, #3B82F6); + font-size: 15px; +} + +.resource-download-box__count { + font-size: 11px; + color: var(--color-ink-4, #8A8F98); + white-space: nowrap; + flex-shrink: 0; +} + +/* 价格标签 */ +.resource-download-box__price { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 13px; + font-weight: 700; + padding: 4px 10px; + border-radius: 20px; + white-space: nowrap; + flex-shrink: 0; +} + +.resource-download-box__price:not(.is-free) { + color: var(--color-error, #EF4444); + background: #FEF2F2; +} + +.resource-download-box__price.is-free { + color: var(--color-success, #10B981); + background: #F0FDF4; +} + +/* 空状态 */ +.resource-download-box__notice--empty { + padding: 14px 16px; + background: var(--surface-2, #F4F5F7); + border-radius: 8px; + text-align: center; +} + +.resource-download-box__notice--empty p { + margin: 0; + font-size: 13px; + color: var(--color-ink-3); + display: flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +/* 下载源列表 */ +.resource-download-box__list { + list-style: none; + margin: 0 0 14px; + padding: 0; + display: flex; + flex-direction: column; + gap: 10px; +} + +.resource-download-box__item { + margin: 0; +} + +/* 下载按钮 */ +.resource-download-box__btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + min-height: 44px; + padding: 10px 18px; + border: none; + border-radius: 10px; + background: var(--color-primary, #3B82F6); + color: #fff; + font-size: 14px; + font-weight: 600; + cursor: pointer; + text-decoration: none; + transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; + box-shadow: 0 2px 8px rgba(59,130,246,0.25); +} + +.resource-download-box__btn:hover { + background: var(--color-primary-active, #2563EB); + box-shadow: 0 4px 14px rgba(59,130,246,0.35); + transform: translateY(-1px); +} + +.resource-download-box__btn:active { + transform: scale(0.97); + transition-duration: 0.1s; +} + +.resource-download-box__btn i { + font-size: 15px; + flex-shrink: 0; +} + +.resource-download-box__btn span { + flex-shrink: 0; +} + +/* 按钮副文案 */ +.resource-download-box__btn-sub { + display: block; + font-size: 11px; + font-weight: 400; + opacity: 0.85; + margin-top: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 类型标签 */ +.resource-download-box__type-tag { + display: inline-flex; + align-items: center; + padding: 2px 8px; + margin-left: auto; + border-radius: 10px; + font-size: 11px; + font-weight: 500; + background: rgba(255,255,255,0.2); + flex-shrink: 0; +} + +/* -- 按钮状态变体 -- */ +.resource-download-box__btn--login { + background: var(--color-primary, #3B82F6); +} + +.resource-download-box__btn--credit-low { + background: var(--color-ink-4, #8A8F98) !important; + box-shadow: none !important; + cursor: not-allowed; + opacity: 0.7; +} + +.resource-download-box__btn--credit-low:hover { + transform: none !important; +} + +.resource-download-box__btn--paid { + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); +} + +/* 提示文字区 */ +.resource-download-box__hint { + margin: 0 0 14px; + padding: 10px 14px; + border-radius: 8px; + font-size: 12px; + line-height: 1.5; + display: flex; + align-items: flex-start; + gap: 8px; +} + +.resource-download-box__hint i { + font-size: 13px; + flex-shrink: 0; + margin-top: 1px; +} + +.resource-download-box__hint--login { + color: var(--color-primary, #3B82F6); + background: rgba(59,130,246,0.06); +} + +.resource-download-box__hint--login i { + color: var(--color-primary, #3B82F6); +} + +.resource-download-box__hint--credit { + color: #D97706; + background: #FFFBEB; +} + +.resource-download-box__hint--credit i { + color: #F59E0B; +} + +/* 验证码表单区 - bind模式隐藏 */ +.resource-download-box__captcha { + margin: 0 0 14px; + padding: 14px; + border: 1px dashed var(--color-line, rgba(0,0,0,0.12)); + border-radius: 8px; + background: var(--surface-2, #FAFAFB); +} + +/* bind 模式：容器保留但视觉隐藏（仍作为挂载点） */ +.resource-download-box__captcha--hidden { + padding: 0 !important; + border: none !important; + background: transparent !important; + margin: 0 !important; + min-height: 0; + overflow: hidden; + /* 极验bind按钮也隐藏，通过JS触发 */ +} +.resource-download-box__captcha--hidden > * { + visibility: hidden; + height: 0; + overflow: hidden; + pointer-events: none; +} + +/* 底部免责 */ +.resource-download-box__footer { + margin: 0; + padding-top: 12px; + border-top: 1px solid var(--color-line, rgba(0,0,0,0.06)); +} + +.resource-download-box__notice-text { + margin: 0; + font-size: 11px; + line-height: 1.6; + color: var(--color-ink-4, #8A8F98); + display: flex; + align-items: flex-start; + gap: 6px; +} + +.resource-download-box__notice-text i { + font-size: 12px; + flex-shrink: 0; + margin-top: 2px; + color: var(--color-ink-4, #8A8F98); +} + +/* 被拦截态（登录/积分不足）不透明 */ +.resource-download-box.is-blocked { + opacity: 1; +} + + +/* ============================================================ + * v4.3 资源侧栏下载卡片（垂直布局，适合 300px 侧栏宽度） + * ============================================================ */ + +.resource-sidebar-sticky { + display: flex; + flex-direction: column; + gap: 16px; +} + +/* 下载卡片 */ +.resource-download-card { + overflow: hidden; +} + +.resource-download-card__thumb { + width: 100%; + aspect-ratio: 16 / 10; + overflow: hidden; + border-radius: 8px 8px 0 0; +} + +.resource-download-card__thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.resource-download-card__body { + padding: 16px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.resource-download-card__title { + font-size: 15px; + font-weight: 700; + margin: 0; + line-height: 1.35; + color: var(--color-ink); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.resource-download-card__desc { + font-size: 13px; + color: var(--color-ink-4); + line-height: 1.5; + margin: 0; +} + +/* 价格 */ +.resource-download-card__price { + padding: 6px 0; +} + +.resource-price { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 14px; + font-weight: 700; +} + +.resource-price--paid { + color: var(--color-error, #ef4444); +} + +.resource-price--paid i { + color: #f59e0b; +} + +.resource-price--paid strong { + font-size: 1.25rem; +} + +.resource-price--paid small { + font-size: 12px; + font-weight: 400; + color: var(--color-ink-4); +} + +.resource-price--free { + color: var(--color-success, #34a853); +} + +/* 下载按钮区 */ +.resource-download-card__actions { + padding: 4px 0; +} + +/* 已下载数 */ +.resource-download-card__sales { + font-size: 12px; + color: var(--color-ink-4); + display: flex; + align-items: center; + gap: 4px; +} + +/* 演示链接 */ +.resource-download-card__demo { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px; + border-radius: 6px; + background: var(--surface-3); + color: var(--color-ink-3); + font-size: 13px; + text-decoration: none; + transition: background 0.2s, color 0.2s; +} + +.resource-download-card__demo:hover { + background: var(--color-primary-soft, rgba(240, 68, 148, 0.12)); + color: var(--color-primary); + text-decoration: none; +} + +/* 资源属性卡片 */ +.resource-meta-card__title { + font-size: 13px; + font-weight: 700; + margin: 0 0 10px; + color: var(--color-ink); +} + +.resource-meta-card__list { + margin: 0; + display: flex; + flex-direction: column; + gap: 8px; +} + +.resource-meta-card__row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; +} + +.resource-meta-card__row dt { + color: var(--color-ink-4); + margin: 0; +} + +.resource-meta-card__row dd { + color: var(--color-ink); + font-weight: 500; + margin: 0; + text-align: right; +} + +/* 服务保障卡片 */ +.resource-guarantee-card__list { + display: flex; + flex-wrap: wrap; + gap: 12px; + font-size: 12px; + color: var(--color-ink-4); +} + +.resource-guarantee-card__list span { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.resource-guarantee-card__list i { + color: var(--color-success, #34a853); + font-size: 13px; +} + +/* 移动端：侧栏变为正文下方（由 layout.css 统一处理隐藏） */ + +/* ============================================================ + * v5.0 移动端下载区域重构（992px 以下生效） + * + * 设计原则： + * - 块级卡片容器，匹配 .theme-box.box-body.radius8 风格 + * - 下载项纵向堆叠，每项独立卡片，触摸友好（min-height:48px） + * - 纯色配色，禁止渐变/紫色，使用 Font Awesome 图标包 + * ============================================================ */ + +/* ----- 移动端下载区域容器（块级卡片） ----- */ +.resource-mobile-download-bar { + display: none; /* 默认隐藏，媒体查询中启用 */ + margin: 16px 0; + background: var(--surface-page, #fff); + border: 1px solid var(--color-line, rgba(0,0,0,0.08)); + border-radius: var(--main-radius, var(--radius, 8px)); + box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); + overflow: hidden; +} + +/* ===== resource-download-box 组件移动端样式 ===== */ + +/* 组件根 */ +.resource-mobile-download-bar .resource-download-box { + padding: 0; + margin: 0; +} + +.resource-mobile-download-bar .resource-download-box.is-blocked { + opacity: 1; +} + +/* ---- 头部区：标题 + 价格 + 源数量 ---- */ +.resource-mobile-download-bar .resource-download-box__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 16px 16px 12px; + border-bottom: 1px solid var(--color-line, rgba(0,0,0,0.06)); +} + +.resource-mobile-download-bar .resource-download-box__title-wrap { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + flex: 1; +} + +.resource-mobile-download-bar .resource-download-box__title { + font-size: 15px; + font-weight: 700; + margin: 0; + color: var(--color-ink); + display: flex; + align-items: center; + gap: 6px; + line-height: 1.3; +} + +.resource-mobile-download-bar .resource-download-box__title i { + color: var(--color-primary, #3B82F6); + font-size: 15px; +} + +.resource-mobile-download-bar .resource-download-box__count { + font-size: 11px; + color: var(--color-ink-4, #8A8F98); + white-space: nowrap; + flex-shrink: 0; +} + +/* 头部价格标签 */ +.resource-mobile-download-bar .resource-download-box__price { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 13px; + font-weight: 700; + padding: 4px 10px; + border-radius: 20px; + white-space: nowrap; + flex-shrink: 0; +} + +.resource-mobile-download-bar .resource-download-box__price:not(.is-free) { + color: var(--color-error, #EF4444); + background: #FEF2F2; +} + +.resource-mobile-download-bar .resource-download-box__price.is-free { + color: var(--color-success, #10B981); + background: #F0FDF4; +} + +/* ---- 空状态提示 ---- */ +.resource-mobile-download-bar .resource-download-box__notice--empty { + margin: 16px; + padding: 14px 16px; + background: var(--surface-2, #F4F5F7); + border-radius: 8px; + text-align: center; +} + +.resource-mobile-download-bar .resource-download-box__notice--empty p { + margin: 0; + font-size: 13px; + color: var(--color-ink-3); + display: flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +.resource-mobile-download-bar .resource-download-box__notice--empty i { + color: var(--color-primary, #3B82F6); +} + +/* ---- 下载源列表 ---- */ +.resource-mobile-download-bar .resource-download-box__list { + list-style: none; + margin: 0; + padding: 12px 16px 16px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* ---- 下载项（每个一行） ---- */ +.resource-mobile-download-bar .resource-download-box__item { + margin: 0; +} + +/* ---- 下载按钮（核心交互元素）---- */ +.resource-mobile-download-bar .resource-download-box__btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + min-height: 50px; /* 触摸友好 */ + padding: 12px 20px; + border: none; + border-radius: 10px; + background: var(--color-primary, #3B82F6); + color: #fff; + font-size: 14px; + font-weight: 600; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; + box-shadow: 0 2px 8px rgba(59,130,246,0.3); + -webkit-tap-highlight-color: transparent; +} + +.resource-mobile-download-bar .resource-download-box__btn i { + font-size: 16px; + flex-shrink: 0; +} + +.resource-mobile-download-bar .resource-download-box__btn span { + flex-shrink: 0; +} + +/* 按钮副文案（来源名称 / 余额信息）*/ +.resource-mobile-download-bar .resource-download-box__btn-sub { + display: block; + font-size: 11px; + font-weight: 400; + opacity: 0.85; + margin-top: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +/* 类型标签（网盘/外链）*/ +.resource-mobile-download-bar .resource-download-box__type-tag { + display: inline-flex; + align-items: center; + padding: 2px 8px; + margin-left: auto; + border-radius: 10px; + font-size: 11px; + font-weight: 500; + background: rgba(255,255,255,0.2); + flex-shrink: 0; +} + +/* -- 按钮状态变体 -- */ + +/* 正常态 hover */ +.resource-mobile-download-bar .resource-download-box__btn:hover { + background: var(--color-primary-active, #2563EB); + box-shadow: 0 4px 14px rgba(59,130,246,0.4); + transform: translateY(-1px); +} + +/* active 按压反馈 */ +.resource-mobile-download-bar .resource-download-box__btn:active { + transform: scale(0.97); + transition-duration: 0.1s; +} + +/* 登录拦截态 */ +.resource-mobile-download-bar .resource-download-box__btn--login { + background: var(--color-primary, #3B82F6); +} + +/* 余额不足态（禁用外观）*/ +.resource-mobile-download-bar .resource-download-box__btn--credit-low { + background: var(--color-ink-4, #8A8F98); + box-shadow: none; + cursor: not-allowed; + opacity: 0.7; +} + +.resource-mobile-download-bar .resource-download-box__btn--credit-low:hover { + transform: none; + box-shadow: none; + background: var(--color-ink-4, #8A8F98); +} + +/* 付费下载态 */ +.resource-mobile-download-bar .resource-download-box__btn--paid { + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); +} + +/* ---- 提示文字区 ---- */ +.resource-mobile-download-bar .resource-download-box__hint { + margin: 0 16px 12px; + padding: 10px 14px; + border-radius: 8px; + font-size: 12px; + line-height: 1.5; + display: flex; + align-items: flex-start; + gap: 8px; +} + +.resource-mobile-download-bar .resource-download-box__hint i { + font-size: 14px; + flex-shrink: 0; + margin-top: 1px; +} + +.resource-mobile-download-bar .resource-download-box__hint--login { + color: var(--color-primary, #3B82F6); + background: rgba(59,130,246,0.06); +} + +.resource-mobile-download-bar .resource-download-box__hint--login i { + color: var(--color-primary, #3B82F6); +} + +.resource-mobile-download-bar .resource-download-box__hint--credit { + color: #D97706; + background: #FFFBEB; +} + +.resource-mobile-download-bar .resource-download-box__hint--credit i { + color: #F59E0B; +} + +/* ---- 验证码表单区 ---- */ +.resource-mobile-download-bar .resource-download-box__captcha { + margin: 0 16px 16px; + padding: 14px; + border: 1px dashed var(--color-line, rgba(0,0,0,0.12)); + border-radius: 8px; + background: var(--surface-2, #FAFAFB); +} + +/* ---- 底部免责声明 ---- */ +.resource-mobile-download-bar .resource-download-box__footer { + margin: 0; + padding: 12px 16px; + border-top: 1px solid var(--color-line, rgba(0,0,0,0.06)); +} + +.resource-mobile-download-bar .resource-download-box__notice-text { + margin: 0; + font-size: 11px; + line-height: 1.6; + color: var(--color-ink-4, #8A8F98); + display: flex; + align-items: flex-start; + gap: 6px; +} + +.resource-mobile-download-bar .resource-download-box__notice-text i { + font-size: 12px; + flex-shrink: 0; + margin-top: 2px; + color: var(--color-ink-4, #8A8F98); +} + + +/* ----- 移动端悬浮下载按钮（FAB） ----- */ +.resource-mobile-fab { + display: none; /* 默认隐藏，移动端媒体查询中启用 */ + position: fixed; + bottom: 72px; + right: 20px; + z-index: 950; + width: 56px; + height: 56px; + border-radius: 50%; + background: var(--color-primary, #3B82F6); + color: #fff; + text-decoration: none; + display: flex; /* 覆盖上面的 display:none */ + align-items: center; + justify-content: center; + font-size: 22px; + box-shadow: 0 4px 16px rgba(59,130,246,0.35), 0 2px 6px rgba(0,0,0,0.1); + opacity: 0; + transform: scale(0.8) translateY(10px); + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; + pointer-events: none; + -webkit-tap-highlight-color: transparent; + animation: fabFadeIn 0.5s 1.5s forwards; +} + +@keyframes fabFadeIn { + to { + opacity: 1; + transform: scale(1) translateY(0); + pointer-events: auto; + } +} + +.resource-mobile-fab:hover { + transform: scale(1.08) translateY(-2px); + box-shadow: 0 6px 24px rgba(59,130,246,0.45), 0 4px 10px rgba(0,0,0,0.15); + color: #fff; +} + +.resource-mobile-fab:active { + transform: scale(0.95); + transition-duration: 0.1s; +} + +/* FAB脉冲效果（吸引注意） */ +.resource-mobile-fab::after { + content: ''; + position: absolute; + inset: -4px; + border-radius: 50%; + background: transparent; + border: 2px solid var(--color-primary, #3B82F6); + opacity: 0; + animation: fabPulse 2s 2.5s infinite; +} + +@keyframes fabPulse { + 0% { transform: scale(1); opacity: 0.6; } + 100% { transform: scale(1.4); opacity: 0; } +} + + +/* ============================================================ + * 响应式媒体查询 + * ============================================================ */ + +/* 移动端/平板（< 992px）：显示移动端下载栏和FAB */ +@media (max-width: 991px) { + .resource-mobile-download-bar { + display: block; + } + + .resource-mobile-fab { + display: flex; + bottom: calc(72px + env(safe-area-inset-bottom, 0px)); + right: calc(20px + env(safe-area-inset-right, 0px)); + } + + /* 超小屏适配（<= 380px） */ + @media (max-width: 380px) { + .resource-mobile-download-bar .resource-download-box__header { + flex-wrap: wrap; + gap: 8px; + padding: 14px 12px 10px; + } + + .resource-mobile-download-bar .resource-download-box__list { + padding: 10px 12px 14px; + gap: 8px; + } + + .resource-mobile-download-bar .resource-download-box__btn { + min-height: 46px; + padding: 10px 14px; + font-size: 13px; + } + + .resource-mobile-download-bar .resource-download-box__title { + font-size: 14px; + } + + .resource-mobile-download-bar .resource-download-box__hint, + .resource-mobile-download-bar .resource-download-box__footer, + .resource-mobile-download-bar .resource-download-box__captcha { + margin-left: 12px; + margin-right: 12px; + } + } +} + +/* 桌面端（>= 992px）：隐藏移动端元素，保持原侧栏布局 */ +@media (min-width: 992px) { + .resource-mobile-download-bar { + display: none !important; + } + + .resource-mobile-fab { + display: none !important; + } +} + +/* ============================================================ + * 云服务品牌按钮样式 + * ============================================================ */ +.resource-download-box__btn--service-baidu { + background: linear-gradient(135deg, #1578f8 0%, #0d65d9 100%); +} + +.resource-download-box__btn--service-lanzou { + background: linear-gradient(135deg, #f37526 0%, #e06318 100%); +} + +.resource-download-box__btn--service-aliyun { + background: linear-gradient(135deg, #6666ff 0%, #5050e0 100%); +} + +.resource-download-box__btn--service-weiyun { + background: linear-gradient(135deg, #4facfe 0%, #3a8fd4 100%); +} + +.resource-download-box__btn--service-onedrive { + background: linear-gradient(135deg, #0078d4 0%, #006abc 100%); +} + +.resource-download-box__btn--service-tianyi { + background: linear-gradient(135deg, #0099ff 0%, #0080e0 100%); +} + +.resource-download-box__btn--service-123pan { + background: linear-gradient(135deg, #2b7bff 0%, #1a65e0 100%); +} + +.resource-download-box__btn--service-quark { + background: linear-gradient(135deg, #6a5acd 0%, #5a4ab5 100%); +} + +.resource-download-box__btn--service-xunlei { + background: linear-gradient(135deg, #00a4ff 0%, #0090e0 100%); +} + +.resource-download-box__btn--service-mega { + background: linear-gradient(135deg, #d92323 0%, #c01a1a 100%); +} + +.resource-download-box__btn--service-github { + background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%); +} + +/* 云服务徽章 */ +.resource-download-box__service-badge { + display: inline-block; + font-size: 10px; + font-weight: 600; + padding: 2px 6px; + border-radius: 4px; + color: #fff; + margin-left: 6px; + letter-spacing: 0.02em; + line-height: 1.3; +} + +/* ============================================================ + * 渐变价格标签（模仿 legacy 渐变 pay-tag） + * ============================================================ */ +.resource-download-box__price--gradient { + background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); + color: #fff; + font-weight: 700; + padding: 5px 12px; + border-radius: 20px; + font-size: 13px; +} + +.resource-download-box__price--gradient.is-free { + background: linear-gradient(135deg, #10B981 0%, #059669 100%); +} + +/* ============================================================ + * 销量/下载量徽章 + * ============================================================ */ +.resource-download-box__sales-badge { + position: absolute; + top: -8px; + right: -8px; + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); + color: #fff; + font-size: 11px; + font-weight: 600; + padding: 3px 8px; + border-radius: 12px; + box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + white-space: nowrap; +} + +/* ============================================================ + * 下载框整体增强 — 模仿 legacy pay-box 视觉重量 + * ============================================================ */ +.resource-download-box { + position: relative; + overflow: visible; +} + +.resource-download-box::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; +} + +/* ============================================================ + * 付费类型徽章 — 模仿 legacy 渐变 pay-tag + * ============================================================ */ +.resource-pay-type-badge { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 11px; + font-weight: 600; + padding: 3px 8px; + border-radius: 4px; + color: #fff; + line-height: 1.3; + letter-spacing: 0.02em; +} + +.resource-pay-type-badge i { + font-size: 10px; +} + +/* 在归档卡片上的徽章位置 */ +.post-card .resource-pay-type-badge { + position: absolute; + top: 8px; + left: 8px; + z-index: 2; +} + +/* 在下载框内的徽章 */ +.resource-download-box__header .resource-pay-type-badge { + margin-left: 8px; +} + +/* ============================================================ + * 原价划线 — 模仿 legacy .original-price + * ============================================================ */ +.resource-original-price { + font-size: 13px; + color: var(--color-ink-4); + text-decoration: line-through; + margin-left: 6px; +} + +.resource-original-price::before { + content: ''; + position: absolute; + left: -2px; + right: -2px; + top: 50%; + height: 1px; + background: var(--color-ink-4); + transform: rotate(-8deg); +} + +/* ============================================================ + * 视频播放器容器 + * ============================================================ */ +.resource-video-container { + position: relative; + width: 100%; + padding-bottom: 56.25%; + margin: 16px 0; + border-radius: var(--radius-lg); + overflow: hidden; + background: #000; +} + +.resource-video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +/* ============================================================ + * 付费图库预览 + * ============================================================ */ +.resource-gallery-locked { + position: relative; + filter: blur(8px); + pointer-events: none; + user-select: none; +} + +.resource-gallery-locked::after { + content: '\f023'; + font-family:"Font Awesome 5 Free";font-weight:900; + font-weight: 900; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + color: rgba(255, 255, 255, 0.8); + background: rgba(0, 0, 0, 0.3); +} diff --git a/src/Core/ScriptsPart1b.php b/src/Core/ScriptsPart1b.php index 1eaa36ef..862ca5c8 100644 --- a/src/Core/ScriptsPart1b.php +++ b/src/Core/ScriptsPart1b.php @@ -593,7 +593,13 @@ trait ScriptsPart1b { // 单篇资源专属样式 if ($is_single_resource) { $enqueue_module('single-post'); - $enqueue_module('resource-meta'); + $resource_meta_path = get_template_directory() . '/assets/css/frontend/resource-meta/part.css'; + wp_enqueue_style( + 'aksrt-resource-meta', + $base_uri . '/assets/css/frontend/resource-meta/part.css', + $deps, + file_exists($resource_meta_path) ? (string) filemtime($resource_meta_path) : $version + ); $enqueue_module('comments'); } diff --git a/tests/widget-system/post-visual-contract.test.cjs b/tests/widget-system/post-visual-contract.test.cjs index 9f53185e..41360444 100644 --- a/tests/widget-system/post-visual-contract.test.cjs +++ b/tests/widget-system/post-visual-contract.test.cjs @@ -493,3 +493,20 @@ test('single articles enqueue only content and settings driven assets', () => { assert.match(runtime, new RegExp(`singular_assets\\['${requirement}'\\]`)); } }); + +test('resource meta CSS uses one canonical direct stylesheet', () => { + const enqueue = read('src/Core/ScriptsPart1b.php'); + const canonical = path.join(root, 'assets/css/frontend/resource-meta/part.css'); + + assert.ok(fs.existsSync(canonical)); + assert.match(enqueue, /assets\/css\/frontend\/resource-meta\/part\.css/); + assert.doesNotMatch(enqueue, /\$enqueue_module\('resource-meta'\)/); + assert.equal(fs.existsSync(path.join(root, 'assets/css/frontend/resource-meta.css')), false); + + for (let part = 1; part <= 5; part += 1) { + assert.equal( + fs.existsSync(path.join(root, `assets/css/frontend/resource-meta/part-${part}.css`)), + false + ); + } +});