/* ======================================== 联系浮窗 Contact Popup 用法：页面 中引入此文件 ======================================== */ .contact-popup { position: fixed; right: 30px; bottom: 30px; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.35s ease; } .contact-popup.active { opacity: 1; visibility: visible; transform: translateY(0); } .contact-popup-inner { background: #fff; border: 2px solid #06B6D4; border-radius: 12px; padding: 28px 30px; width: 440px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); position: relative; } .contact-popup-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 20px; color: #999; cursor: pointer; padding: 4px; line-height: 1; } .contact-popup-close:hover { color: #333; } .contact-popup-inner h3 { font-size: 20px; color: #06B6D4; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 1px solid #e8f0fe; letter-spacing: 0.05em; } .contact-popup-body { display: flex; gap: 20px; } .contact-popup-info { flex: 1; display: flex; flex-direction: column; gap: 16px; } .contact-popup-item { display: flex; gap: 10px; align-items: flex-start; } .contact-popup-item .cp-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; } .contact-popup-item strong { display: block; font-size: 14px; color: #333; margin-bottom: 2px; } .contact-popup-item p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; } .contact-popup-qr { flex-shrink: 0; text-align: center; width: 100px; } .contact-popup-qr img { width: 100px; height: 100px; display: block; border-radius: 4px; margin-bottom: 6px; } .contact-popup-qr p { font-size: 12px; color: #999; line-height: 1.4; margin: 0; } @media (max-width: 768px) { .contact-popup { right: 0; bottom: 0; left: 0; display: flex; justify-content: center; } .contact-popup.active { padding: 16px; } .contact-popup-inner { width: 100%; max-width: 440px; padding: 20px; border-radius: 10px; } .contact-popup-body { flex-direction: column; align-items: center; } .contact-popup-inner h3 { font-size: 17px; margin-bottom: 14px; padding-bottom: 10px; } .contact-popup-item .cp-icon { font-size: 16px; } .contact-popup-item strong { font-size: 13px; } .contact-popup-item p { font-size: 12px; } .contact-popup-qr { width: 80px; } .contact-popup-qr img { width: 80px; height: 80px; } .contact-popup-qr p { font-size: 11px; } } @media (max-width: 400px) { .contact-popup-inner { padding: 16px; } .contact-popup-inner h3 { font-size: 15px; } .contact-popup-item p { font-size: 11px; } .contact-popup-qr { width: 64px; } .contact-popup-qr img { width: 64px; height: 64px; } }