/* ==================== 按钮组件库 ==================== */ /* 引用方式：在页面 中添加 */ /* 所有按钮样式统一管理，依据 设计规范.md 第十一章 */ /* 所有按钮高度统一为 50px（圆形图标按钮除外） */ /* 最小宽度统一为 80px（确保可点击性和视觉平衡） */ button { font-family: inherit; font-size: inherit; border: none; background: none; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } /* ==================== 1. 主要按钮 .btn-primary ==================== */ /* 使用场景：首页 CTA、卡片内操作按钮等核心行动入口 */ /* 高度规范：50px（统一） 最小宽度：80px */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 80px; padding: 0 24px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: none; font-family: inherit; background-color: #111111; color: #FFFFFF; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .btn-primary:hover { background-color: #000000; color: #FFFFFF; transform: scale(1.02); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled, .btn-primary.disabled { background-color: #999999; color: #666666; cursor: not-allowed; transform: none; box-shadow: none; } /* ==================== 2. 次要按钮 .btn-secondary ==================== */ /* 使用场景：文章详情页（Insight）、二级操作入口 */ /* 高度规范：50px（统一） 最小宽度：80px */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 80px; padding: 0 20px; background: transparent; border: 1px solid #999999; color: #666666; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); text-decoration: none; text-transform: none; letter-spacing: 0; font-family: inherit; } .btn-secondary:hover { border-color: #111111; color: #111111; background: #F7F7F7; transform: translateY(-1px); } .btn-secondary:disabled, .btn-secondary.disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ==================== 3. CTA 链接按钮 .btn-cta / .cta-link ==================== */ /* 使用场景：工作流/AI Lab 等区块底部的引导性文字按钮 */ /* 高度规范：50px（统一） 最小宽度：80px */ .btn-cta, .cta-link { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 80px; padding: 0 24px; border: 1px solid #111111; font-size: 14px; font-weight: 600; color: #111111; text-decoration: none; border-radius: 12px; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); background: transparent; cursor: pointer; font-family: inherit; } .btn-cta:hover, .cta-link:hover { background: #111111; color: #F7F7F7; transform: translateY(-2px); } /* ==================== 4. 导航按钮 .nav-btn ==================== */ /* 使用场景：轮播/弹窗翻页 */ /* 高度规范：50px（统一） 最小宽度：80px */ .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); height: 50px; min-width: 80px; padding: 0 24px; background: #ffffff; color: #000000; font-size: 14px; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: none; border-radius: 12px; cursor: pointer; font-family: inherit; z-index: 10; } .nav-btn:hover { background: #111111; color: #ffffff; } .prev-btn { left: 24px; } .next-btn { right: 24px; } /* 摄影弹窗专用变体 */ .photo-modal .nav-btn { font-size: 32px; height: 50px; padding: 0 24px; background: rgba(255, 255, 255, 0.8); color: #111111; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #F4F4F4; } .photo-modal .nav-btn:hover { background: rgba(255, 255, 255, 1); } /* 导航按钮 — 纯图标版本（overlay.html 用） */ .nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; background: rgba(0, 0, 0, 0.4); color: #fff; border: none; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 10; font-family: inherit; } .nav:hover { background: rgba(0, 0, 0, 0.6); transform: translateY(-50%) scale(1.1); } .nav.prev { left: -70px; } .nav.next { right: -70px; } /* Insight 弹窗内导航 */ .insight-modal .nav-btn { font-size: 14px; height: 50px; padding: 0 24px; background: #ffffff; color: #111111; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .insight-modal .nav-btn:hover { background: #111111; color: #ffffff; } .insight-modal .prev-btn { left: 24px; } .insight-modal .next-btn { right: 24px; } /* ==================== 5. 关闭按钮 .close-btn ==================== */ /* 使用场景：全屏弹窗右上角关闭 */ .close-btn { position: fixed; top: var(--spacing-4); right: var(--spacing-5); width: 50px; height: 50px; font-size: 36px; background: rgba(255, 255, 255, 0.1); color: #111111; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 1001; font-family: inherit; } .close-btn:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } /* Insight 弹窗关闭按钮 */ .insight-close-btn { position: absolute; top: var(--spacing-4); right: var(--spacing-5); width: 50px; height: 50px; font-size: 36px; background: rgba(255, 255, 255, 0.1); color: #111111; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 1001; font-family: inherit; } .insight-close-btn:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } /* ==================== 6. 加载更多按钮 .load-more-btn ==================== */ /* 使用场景：列表页底部加载更多 */ /* 高度规范：50px（统一） 最小宽度：80px */ .load-more-btn { display: inline-flex; align-items: center; justify-content: center; margin: var(--spacing-5) auto 0; height: 50px; min-width: 80px; padding: 0 var(--spacing-5); border-radius: 12px; background: #111111; color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); text-align: center; border: none; font-family: inherit; line-height: 1; } .load-more-btn:hover { background: #000000; transform: translateY(-2px); } .load-more-btn.hidden { display: none; } /* ==================== 7. 语言切换按钮 .lang-switch ==================== */ /* 使用场景：导航栏语言切换 */ /* 高度规范：32px（移动/平板端统一） */ .lang-switch { height: 32px; padding: 0 16px; border: 1px solid #111111; font-size: 14px; font-weight: 600; color: #111111; background: transparent; border-radius: 12px; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); cursor: pointer; font-family: inherit; line-height: 1; } .lang-switch:hover { background: #111111; color: #F7F7F7; } /* ==================== 8. 弹窗关闭按钮 .modal-close ==================== */ /* 使用场景：模态弹窗右上角关闭 */ .modal-close { position: absolute; top: var(--spacing-4); right: var(--spacing-4); font-size: 48px; color: #111111; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2001; background: none; border: none; font-family: inherit; line-height: 1; } .modal-close:hover { transform: rotate(90deg); color: #666666; } /* ==================== 9. 筛选标签按钮 .filter-tag ==================== */ /* 使用场景：摄影页分类筛选 */ /* 高度规范：50px（统一） 最小宽度：80px */ .filter-tag { height: 50px; min-width: 80px; padding: 0 16px; border: 1px solid #999; font-size: 14px; font-weight: 600; color: #666666; background: transparent; border-radius: 12px; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: inherit; line-height: 1; } .filter-tag:hover { border-color: #111111; color: #111111; } .filter-tag.active { background: #111111; color: #ffffff; border-color: #111111; } /* ==================== 10. 缩略图翻页按钮 .thumbnail-page-btn ==================== */ /* 使用场景：摄影 Overlay 缩略图条翻页 */ .thumbnail-page-btn { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: inherit; flex-shrink: 0; } .thumbnail-page-btn:hover { background: rgba(255, 255, 255, 0.2); } .thumbnail-page-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* ==================== 11. Insight 详情导航按钮 .insight-nav-btn ==================== */ /* 使用场景：Insight 弹窗内翻页 */ /* 高度规范：50px（统一） 最小宽度：80px */ .insight-nav-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 80px; padding: 0 20px; background: transparent; border: 1px solid #999; color: #666666; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: inherit; line-height: 1; } .insight-nav-btn:hover { border-color: #111111; color: #111111; background: #F7F7F7; transform: translateY(-1px); } /* ==================== 12. 照片翻页按钮 .nav-arrow ==================== */ /* 使用场景：photo-detail.html 照片详情翻页 */ /* 高度规范：50px（统一） 最小宽度：80px */ .nav-arrow { height: 50px; min-width: 80px; padding: 0 24px; background: #ffffff; color: #000000; font-size: 14px; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: none; border-radius: 12px; cursor: pointer; font-family: inherit; } .nav-arrow:hover { background: #111111; color: #ffffff; } /* ==================== 响应式适配 ==================== */ @media (max-width: 767px) { .ats-hero-actions { flex-wrap: nowrap !important; white-space: nowrap; gap: 8px; } .close-btn { width: 40px; height: 40px; font-size: 28px; top: 10px; right: 10px; } .insight-close-btn { width: 40px; height: 40px; font-size: 28px; top: 10px; right: 10px; } .modal-close { font-size: 36px; top: 16px; right: 16px; } .nav { width: 40px; height: 40px; font-size: 24px; } .nav.prev { left: 10px; } .nav.next { right: 10px; } .nav-btn { padding: 10px 16px; font-size: 12px; } .photo-modal .nav-btn { font-size: 24px; padding: 10px 16px; } }