/* ============================================================================ * Saifan 全站统一 footer 样式 * 暗色背景 #0c1327 + logo + 联系方式 + QR 码网格 + 备案信息 * * 使用：在 HTML 加 * ============================================================================ */ .footer-wrapper { background-color: #0c1327; color: #cdd5e6; padding: 40px 0 30px; font-size: 14px; } .footer-top-logo { text-align: center; margin-bottom: 30px; } .footer-top-logo img { height: 40px; margin-bottom: 10px; } .footer-slogan { font-size: 14px; color: #cdd5e6; margin: 0; } .footer-main { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 20px; gap: 24px; flex-wrap: wrap; } .footer-left { flex: 1; min-width: 280px; } .contact-list { list-style: none; padding: 0; margin: 0; } .contact-list li { margin-bottom: 12px; color: #cdd5e6; font-size: 14px; line-height: 1.6; } .footer-qrcode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .qrcode-item { display: flex; flex-direction: column; align-items: center; } .qrcode-item img { width: 78px; height: 78px; margin-bottom: 6px; border-radius: 6px; background: #fff; object-fit: cover; } .qrcode-item p { font-size: 12px; color: #cdd5e6; margin: 0; text-align: center; } .footer-bottom { margin-top: 32px; text-align: center; } .footer-divider { height: 1px; background-color: #2c3650; margin: 0 auto 18px; max-width: 1100px; } .footer-bottom p, .footer-bottom .copyright { font-size: 12px; color: #888; margin: 0; line-height: 1.8; } .footer-bottom a { color: #888; text-decoration: none; transition: color .2s ease; } .footer-bottom a:hover { color: #4285f4; } @media (max-width: 768px) { .footer-main { flex-direction: column; align-items: center; text-align: center; gap: 28px; } .footer-qrcode-grid { grid-template-columns: repeat(4, 1fr); max-width: 360px; } .qrcode-item img { width: 64px; height: 64px; } } @media (max-width: 480px) { .footer-qrcode-grid { grid-template-columns: repeat(2, 1fr); } }