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; } /* ============================================================ * 元信息卡片图标增强 * ============================================================ */ .resource-meta-box__key { display: flex; align-items: center; gap: 8px; } .resource-meta-box__key i { width: 16px; text-align: center; color: var(--color-ink-4, #8A8F98); font-size: 13px; flex-shrink: 0; } /* ============================================================ * 渐变价格标签(模仿 zibll 渐变 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; } /* ============================================================ * 下载框整体增强 — 模仿 zibll 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; } /* ============================================================ * 付费类型徽章 — 模仿 zibll 渐变 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; } /* ============================================================ * 原价划线 — 模仿 zibll .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: '';