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; }