/** * Safari 13.x 兼容性补丁 * ===================== * Safari 13.1.2 (WebKit 605) 的已知 CSS 兼容性问题: * 1. flexbox 中的 gap 属性不支持 (Safari 14.1+ 才支持) * 2. aspect-ratio 不支持 (Safari 15+ 才支持) * 3. width: fit-content 需要 -webkit- 前缀 * 4. backdrop-filter 需要 -webkit- 前缀 * * 注意: grid 中的 gap 在 Safari 12+ 就已支持，不需要修复 * * 修复策略: * 通过 JS 检测浏览器是否支持 flex gap，如果不支持， * 给 添加 class="no-flex-gap"，下面的样式仅在此时生效。 */ /* ============================================================ FLEXBOX GAP 兼容修复 (仅在 .no-flex-gap 时生效) ============================================================ */ /* --- common.css 修复 --- */ /* .toast-container: flex-direction: column, gap: 10px */ .no-flex-gap .toast-container > * { margin-bottom: 10px; } .no-flex-gap .toast-container > *:last-child { margin-bottom: 0; } /* .header-right: flex-direction: row, gap: 10px */ .no-flex-gap .header-right > * { margin-left: 10px; } .no-flex-gap .header-right > *:first-child { margin-left: 0; } /* .footer-contact: flex-direction: column, gap: 12px */ .no-flex-gap .footer-contact > * { margin-bottom: 12px; } .no-flex-gap .footer-contact > *:last-child { margin-bottom: 0; } /* .footer-contact .address: flex-direction: row, gap: 6px */ .no-flex-gap .footer-contact .address > * { margin-right: 6px; } .no-flex-gap .footer-contact .address > *:last-child { margin-right: 0; } /* .footer-contact .contact-details: flex-direction: column, gap: 6px */ .no-flex-gap .footer-contact .contact-details > * { margin-bottom: 6px; } .no-flex-gap .footer-contact .contact-details > *:last-child { margin-bottom: 0; } /* .distributor-trigger: flex-direction: row, gap: 6px */ .no-flex-gap .distributor-trigger > * { margin-right: 6px; } .no-flex-gap .distributor-trigger > *:last-child { margin-right: 0; } /* .distributor-menu a: flex-direction: row, gap: 12px */ .no-flex-gap .distributor-menu a > * { margin-right: 12px; } .no-flex-gap .distributor-menu a > *:last-child { margin-right: 0; } /* .menu-item-content: flex-direction: column, gap: 4px */ .no-flex-gap .menu-item-content > * { margin-bottom: 4px; } .no-flex-gap .menu-item-content > *:last-child { margin-bottom: 0; } /* .user-info: flex-direction: column, gap: 2px */ .no-flex-gap .user-info > * { margin-bottom: 2px; } .no-flex-gap .user-info > *:last-child { margin-bottom: 0; } /* .agent-badge: inline-flex, gap: 4px */ .no-flex-gap .agent-badge > * { margin-right: 4px; } .no-flex-gap .agent-badge > *:last-child { margin-right: 0; } /* .mobile-nav-panel a / .mobile-nav-item: flex-direction: row, gap: 8px */ .no-flex-gap .mobile-nav-panel a > *, .no-flex-gap .mobile-nav-panel .mobile-nav-item > * { margin-right: 8px; } .no-flex-gap .mobile-nav-panel a > *:last-child, .no-flex-gap .mobile-nav-panel .mobile-nav-item > *:last-child { margin-right: 0; } /* .no-record-btn-empty: inline-flex, gap: 5px */ .no-flex-gap .no-record-btn-empty > * { margin-right: 5px; } .no-flex-gap .no-record-btn-empty > *:last-child { margin-right: 0; } /* .pagination: flex, gap: 5px */ .no-flex-gap .pagination > * { margin-right: 5px; } .no-flex-gap .pagination > *:last-child { margin-right: 0; } /* .address-list: flex-direction: column, gap: 15px */ .no-flex-gap .address-list > * { margin-bottom: 15px; } .no-flex-gap .address-list > *:last-child { margin-bottom: 0; } /* .copy-link: flex-direction: row, gap: 10px */ .no-flex-gap .copy-link > * { margin-right: 10px; } .no-flex-gap .copy-link > *:last-child { margin-right: 0; } /* --- index.css 修复 --- */ /* .product-tags: flex-wrap: wrap, gap: 8px */ .no-flex-gap .product-tags > * { margin-right: 8px; margin-bottom: 8px; } /* .category-grid: flex-direction: row, gap: 12px */ .no-flex-gap .category-grid > * { margin-right: 12px; } .no-flex-gap .category-grid > *:last-child { margin-right: 0; } /* .product-table .action-buttons: flex, gap: 8px */ .no-flex-gap .product-table .action-buttons > * { margin-right: 8px; } .no-flex-gap .product-table .action-buttons > *:last-child { margin-right: 0; } /* .action-buttons: flex, gap: 6px */ .no-flex-gap .action-buttons > * { margin-right: 6px; } .no-flex-gap .action-buttons > *:last-child { margin-right: 0; } /* .news-read-more: flex, gap: 4px */ .no-flex-gap .news-read-more > * { margin-right: 4px; } .no-flex-gap .news-read-more > *:last-child { margin-right: 0; } /* --- product-detail.css 修复 --- */ /* .product-images: flex-direction: row, gap: 15px */ .no-flex-gap .product-images > * { margin-right: 15px; } .no-flex-gap .product-images > *:last-child { margin-right: 0; } /* .product-thumbnails-vertical: flex-direction: column, gap: 10px */ .no-flex-gap .product-thumbnails-vertical > * { margin-bottom: 10px; } .no-flex-gap .product-thumbnails-vertical > *:last-child { margin-bottom: 0; } /* .product-thumbnails: flex-direction: row, gap: 10px */ .no-flex-gap .product-thumbnails > * { margin-right: 10px; } .no-flex-gap .product-thumbnails > *:last-child { margin-right: 0; } /* .price-member: flex-direction: row, gap: 8px */ .no-flex-gap .price-member > * { margin-right: 8px; } .no-flex-gap .price-member > *:last-child { margin-right: 0; } /* .member-tag: inline-flex, gap: 4px */ .no-flex-gap .member-tag > * { margin-right: 4px; } .no-flex-gap .member-tag > *:last-child { margin-right: 0; } /* .payment-icons: flex-direction: row, gap: 15px */ .no-flex-gap .payment-icons > * { margin-right: 15px; } .no-flex-gap .payment-icons > *:last-child { margin-right: 0; } /* .payment-icon: flex-direction: column, gap: 5px */ .no-flex-gap .payment-icon > * { margin-bottom: 5px; } .no-flex-gap .payment-icon > *:last-child { margin-bottom: 0; } /* .specs-list: flex-wrap: wrap, gap: 10px */ .no-flex-gap .specs-list > * { margin-right: 10px; margin-bottom: 10px; } /* .warehouse-options: flex-direction: row, gap: 10px */ .no-flex-gap .warehouse-options > * { margin-right: 10px; } .no-flex-gap .warehouse-options > *:last-child { margin-right: 0; } /* .product-actions: flex-direction: row, gap: 15px */ .no-flex-gap .product-actions > * { margin-right: 15px; } .no-flex-gap .product-actions > *:last-child { margin-right: 0; } /* .product-images-detail: flex-direction: column, gap: 20px */ .no-flex-gap .product-images-detail > * { margin-bottom: 20px; } .no-flex-gap .product-images-detail > *:last-child { margin-bottom: 0; } /* .reviews-summary: flex-direction: row, gap: 40px */ .no-flex-gap .reviews-summary > * { margin-right: 40px; } .no-flex-gap .reviews-summary > *:last-child { margin-right: 0; } /* .rating-stars: flex-direction: row, gap: 2px */ .no-flex-gap .rating-stars > * { margin-right: 2px; } .no-flex-gap .rating-stars > *:last-child { margin-right: 0; } /* .review-stars: flex-direction: row, gap: 3px */ .no-flex-gap .review-stars > *, .no-flex-gap .review-content .review-stars > * { margin-right: 3px; } .no-flex-gap .review-stars > *:last-child, .no-flex-gap .review-content .review-stars > *:last-child { margin-right: 0; } /* .review-images: flex-wrap: wrap, gap: 10px */ .no-flex-gap .review-images > * { margin-right: 10px; margin-bottom: 10px; } /* .legend-container: flex-direction: row, gap: 20px */ .no-flex-gap .legend-container > * { margin-right: 20px; } .no-flex-gap .legend-container > *:last-child { margin-right: 0; } /* --- product-detail-custom.css 修复 --- */ /* .spec-section .spec-images: flex-wrap: wrap, gap: 8px */ .no-flex-gap .spec-section .spec-images > * { margin-right: 8px; margin-bottom: 8px; } /* --- search.css 修复 --- */ /* .search-layout: flex-direction: row, gap: 20px */ .no-flex-gap .search-layout > * { margin-right: 20px; } .no-flex-gap .search-layout > *:last-child { margin-right: 0; } /* .chat-messages: flex-direction: column, gap: 10px */ .no-flex-gap .chat-messages > * { margin-bottom: 10px; } .no-flex-gap .chat-messages > *:last-child { margin-bottom: 0; } /* .chat-message: flex-direction: row, gap: 8px */ .no-flex-gap .chat-message > * { margin-right: 8px; } .no-flex-gap .chat-message > *:last-child { margin-right: 0; } /* .pagination-container: flex, gap: 15px */ .no-flex-gap .pagination-container > * { margin-right: 15px; } .no-flex-gap .pagination-container > *:last-child { margin-right: 0; } /* .pagination-info: flex-direction: row, gap: 20px */ .no-flex-gap .pagination-info > * { margin-right: 20px; } .no-flex-gap .pagination-info > *:last-child { margin-right: 0; } /* .pagination-numbers: flex-direction: row, gap: 5px */ .no-flex-gap .pagination-numbers > * { margin-right: 5px; } .no-flex-gap .pagination-numbers > *:last-child { margin-right: 0; } /* --- user-center.css 修复 --- */ /* .user-center-container: flex-direction: row, gap: 30px */ .no-flex-gap .user-center-container > * { margin-right: 30px; } .no-flex-gap .user-center-container > *:last-child { margin-right: 0; } /* --- shipping-address.css 修复 --- */ /* .address-actions: flex-direction: row, gap: 10px */ .no-flex-gap .address-actions > * { margin-right: 10px; } .no-flex-gap .address-actions > *:last-child { margin-right: 0; } /* .address-form-actions: flex-direction: row, gap: 10px */ .no-flex-gap .address-form-actions > * { margin-right: 10px; } .no-flex-gap .address-form-actions > *:last-child { margin-right: 0; } /* .region-select: flex-direction: row, gap: 10px */ .no-flex-gap .address-region .region-select > * { margin-right: 10px; } .no-flex-gap .address-region .region-select > *:last-child { margin-right: 0; } /* --- recharge.css 修复 --- */ /* .verification-code-group: flex, gap: 10px */ .no-flex-gap .verification-code-group > * { margin-right: 10px; } .no-flex-gap .verification-code-group > *:last-child { margin-right: 0; } /* --- sales-details.css 修复 --- */ /* .data-type-tabs: flex-direction: row, gap: 10px */ .no-flex-gap .data-type-tabs > * { margin-right: 10px; } .no-flex-gap .data-type-tabs > *:last-child { margin-right: 0; } /* --- cart.css 修复 --- */ /* .cart-items-container various flex containers */ .no-flex-gap .quantity-actions > * { margin-right: 10px; } .no-flex-gap .quantity-actions > *:last-child { margin-right: 0; } /* --- order-confirm.css / order-modal.css 修复 --- */ .no-flex-gap .order-actions > * { margin-right: 10px; } .no-flex-gap .order-actions > *:last-child { margin-right: 0; } /* --- my-orders.css 修复 --- */ .no-flex-gap .order-filter-tabs > * { margin-right: 10px; } .no-flex-gap .order-filter-tabs > *:last-child { margin-right: 0; } /* --- my-wallet.css 修复 --- */ .no-flex-gap .wallet-actions > * { margin-right: 10px; } .no-flex-gap .wallet-actions > *:last-child { margin-right: 0; } /* ============================================================ ASPECT-RATIO 兼容修复 (Safari 15 以下不支持) 使用 padding-bottom hack 模拟 1:1 比例 ============================================================ */ @supports not (aspect-ratio: 1/1) { /* product-detail-custom.css: .spec-image-item img */ .spec-section .spec-images .spec-image-item { position: relative; overflow: hidden; height: 0; padding-bottom: 100%; } .spec-section .spec-images .spec-image-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* product-detail-custom.css: .video-container img */ .video-container { position: relative; overflow: hidden; height: 0; padding-bottom: 100%; } .video-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-container .video-play-button { position: absolute; z-index: 2; } } /* ============================================================ FIT-CONTENT 兼容修复 (Safari 13.x 需要 -webkit- 前缀) ============================================================ */ .thumbnails-container { width: -webkit-fit-content; width: fit-content; } .product-thumbnails-vertical { width: -webkit-fit-content; width: fit-content; } .quantity-control { width: -webkit-fit-content; width: fit-content; } .collection-status { width: -webkit-fit-content; width: fit-content; } .invoice-status { width: -webkit-fit-content; width: fit-content; } .invoice-type-tag { width: -webkit-fit-content; width: fit-content; } /* ============================================================ BACKDROP-FILTER 兼容修复 确保所有 backdrop-filter 都有 -webkit- 前缀 Safari 13.x 仅支持 -webkit-backdrop-filter ============================================================ */ /* common.css */ .loading-overlay { -webkit-backdrop-filter: blur(5px); } .address-selector-modal { -webkit-backdrop-filter: blur(4px); } .payment-qrcode-modal { -webkit-backdrop-filter: blur(4px); } /* product-detail.css */ .cart-overlay { -webkit-backdrop-filter: blur(2px); } .cart-modal-overlay { -webkit-backdrop-filter: blur(2px); } /* order-modal.css */ .order-modal-overlay, .contract-modal-overlay, .address-modal-overlay, .payment-modal-overlay, .confirm-modal-overlay { -webkit-backdrop-filter: blur(4px); } /* order-confirm.css */ .order-confirm-overlay, .confirm-overlay { -webkit-backdrop-filter: blur(5px); } /* cart.css */ .cart-page-overlay { -webkit-backdrop-filter: blur(5px); } /* 通用模态框遮罩 */ [class*="-modal"][class*="overlay"], [class*="-modal"].active, .modal-overlay { -webkit-backdrop-filter: blur(4px); } /* ============================================================ 额外的 FLEXBOX GAP 修复 (追加) ============================================================ */ /* --- cart.css 修复 --- */ /* .cart-footer: flex, gap: 15px */ .no-flex-gap .cart-footer > * { margin-right: 15px; } .no-flex-gap .cart-footer > *:last-child { margin-right: 0; } /* .cart-footer-left: flex-wrap, gap: 10px */ .no-flex-gap .cart-footer-left > * { margin-right: 10px; margin-bottom: 10px; } /* cart product-tags: flex-wrap, gap: 8px (重复但保证覆盖) */ .no-flex-gap .cart-page .product-tags > * { margin-right: 8px; margin-bottom: 8px; } /* --- order-detail.css 修复 --- */ /* .order-steps: flex, gap: 20px */ .no-flex-gap .order-steps > * { margin-right: 20px; } .no-flex-gap .order-steps > *:last-child { margin-right: 0; } /* .detail-spec-row: flex-wrap, gap: 8px */ .no-flex-gap .detail-spec-row > * { margin-right: 8px; margin-bottom: 8px; } /* .order-info-tag: inline-flex, gap: 4px */ .no-flex-gap .order-info-tag > * { margin-right: 4px; } .no-flex-gap .order-info-tag > *:last-child { margin-right: 0; } /* --- order-confirm.css 修复 --- */ /* .product-label-options: flex, gap: 20px */ .no-flex-gap .product-label-options > * { margin-right: 20px; } .no-flex-gap .product-label-options > *:last-child { margin-right: 0; } /* .payment-term.active: flex, gap: 20px */ .no-flex-gap .payment-term.active > * { margin-right: 20px; } .no-flex-gap .payment-term.active > *:last-child { margin-right: 0; } /* .confirm-actions: flex, gap: 15px */ .no-flex-gap .confirm-actions > * { margin-right: 15px; } .no-flex-gap .confirm-actions > *:last-child { margin-right: 0; } /* --- my-orders.css 修复 --- */ /* .order-center-container: flex, gap: 25px */ .no-flex-gap .order-center-container > * { margin-right: 25px; } .no-flex-gap .order-center-container > *:last-child { margin-right: 0; } /* .order-tabs: flex, gap: 12px */ .no-flex-gap .order-tabs > * { margin-right: 12px; } .no-flex-gap .order-tabs > *:last-child { margin-right: 0; } /* .order-tab: flex, gap: 5px */ .no-flex-gap .order-tab > * { margin-right: 5px; } .no-flex-gap .order-tab > *:last-child { margin-right: 0; } /* .order-list: flex-direction: column, gap: 20px */ .no-flex-gap .order-list > * { margin-bottom: 20px; } .no-flex-gap .order-list > *:last-child { margin-bottom: 0; } /* .order-header-info: flex, gap: 15px */ .no-flex-gap .order-header-info > * { margin-right: 15px; } .no-flex-gap .order-header-info > *:last-child { margin-right: 0; } /* .order-actions: flex, gap: 10px */ .no-flex-gap .order-actions > * { margin-right: 10px; } .no-flex-gap .order-actions > *:last-child { margin-right: 0; } /* .order-title-left: flex, gap: 4-6px */ .no-flex-gap .order-title-left > * { margin-right: 6px; } .no-flex-gap .order-title-left > *:last-child { margin-right: 0; } /* .goods-info-row: flex-direction: column, gap: 2px */ .no-flex-gap .goods-info-row > * { margin-bottom: 2px; } .no-flex-gap .goods-info-row > *:last-child { margin-bottom: 0; } /* .table-actions: flex-wrap, gap: 4px */ .no-flex-gap .table-actions > * { margin-right: 4px; margin-bottom: 4px; } /* .order-spec-tags: flex-wrap, gap: 8px */ .no-flex-gap .order-spec-tags > * { margin-right: 8px; margin-bottom: 8px; } /* --- my-wallet.css 修复 --- */ /* .balance-actions: flex, gap: 15px */ .no-flex-gap .balance-actions > * { margin-right: 15px; } .no-flex-gap .balance-actions > *:last-child { margin-right: 0; } /* .filter-options: flex, gap: 15px */ .no-flex-gap .filter-options > * { margin-right: 15px; } .no-flex-gap .filter-options > *:last-child { margin-right: 0; } /* .wallet-actions (别名): flex, gap: 10px */ .no-flex-gap .wallet-action-btn > * { margin-right: 5px; } .no-flex-gap .wallet-action-btn > *:last-child { margin-right: 0; } /* --- modal.css 修复 --- */ /* .modal-footer: flex, gap: 10px */ .no-flex-gap .modal-footer > * { margin-right: 10px; } .no-flex-gap .modal-footer > *:last-child { margin-right: 0; } /* .modal-body form/content: flex-direction: column, gap: 12px */ .no-flex-gap .form-group-list > * { margin-bottom: 12px; } .no-flex-gap .form-group-list > *:last-child { margin-bottom: 0; } /* --- member-center.css 修复 --- */ /* .member-level-info: flex, gap: 15px */ .no-flex-gap .member-level-info > * { margin-right: 15px; } .no-flex-gap .member-level-info > *:last-child { margin-right: 0; } /* --- product-center.css 修复 --- */ /* .filter-tags / .filter-options (flex-wrap): gap: 10px */ .no-flex-gap .filter-tags > *, .no-flex-gap .filter-values > *, .no-flex-gap .category-options > * { margin-right: 10px; margin-bottom: 10px; } /* --- my-collection.css 修复 --- */ /* .collection-header-left: flex, gap: 15px */ .no-flex-gap .collection-header-left > * { margin-right: 15px; } .no-flex-gap .collection-header-left > *:last-child { margin-right: 0; } /* .collection-tags: flex-wrap, gap: 6px */ .no-flex-gap .collection-tags > * { margin-right: 6px; margin-bottom: 6px; } /* .collection-price-info: flex-direction: column, gap: 5px */ .no-flex-gap .collection-price-info > * { margin-bottom: 5px; } .no-flex-gap .collection-price-info > *:last-child { margin-bottom: 0; } /* --- agent-dashboard.css 修复 --- */ /* .stat-card: flex, gap: 12px */ .no-flex-gap .stat-card > * { margin-right: 12px; } .no-flex-gap .stat-card > *:last-child { margin-right: 0; } /* .section-header: flex, gap: 20px */ .no-flex-gap .section-header > * { margin-right: 20px; } .no-flex-gap .section-header > *:last-child { margin-right: 0; } /* .section-actions: flex, gap: 12px */ .no-flex-gap .section-actions > * { margin-right: 12px; } .no-flex-gap .section-actions > *:last-child { margin-right: 0; } /* .filter-group: flex, gap: 8px */ .no-flex-gap .filter-group > * { margin-right: 8px; } .no-flex-gap .filter-group > *:last-child { margin-right: 0; } /* .search-group: flex, gap: 8px */ .no-flex-gap .search-group > * { margin-right: 8px; } .no-flex-gap .search-group > *:last-child { margin-right: 0; } /* .export-btn, .status-tag with gap: 4-6px */ .no-flex-gap .export-btn > *, .no-flex-gap .status-btn > * { margin-right: 6px; } .no-flex-gap .export-btn > *:last-child, .no-flex-gap .status-btn > *:last-child { margin-right: 0; } /* .empty-state: flex-direction: column, gap: 8px */ .no-flex-gap .empty-state > * { margin-bottom: 8px; } .no-flex-gap .empty-state > *:last-child { margin-bottom: 0; } /* .detail-list: flex-direction: column, gap: 12px */ .no-flex-gap .detail-list > * { margin-bottom: 12px; } .no-flex-gap .detail-list > *:last-child { margin-bottom: 0; } /* .detail-item: flex, gap: 12px */ .no-flex-gap .detail-item > * { margin-right: 12px; } .no-flex-gap .detail-item > *:last-child { margin-right: 0; } /* --- invoice-records.css / invoice-apply.css 修复 --- */ /* .invoice-actions: flex, gap: 10px */ .no-flex-gap .invoice-actions > * { margin-right: 10px; } .no-flex-gap .invoice-actions > *:last-child { margin-right: 0; } /* --- upload-certificate.css 修复 --- */ /* .upload-tips: flex, gap: 5px */ .no-flex-gap .upload-tips > * { margin-right: 5px; } .no-flex-gap .upload-tips > *:last-child { margin-right: 0; } /* --- certification-center.css 修复 --- */ .no-flex-gap .cert-actions > * { margin-right: 10px; } .no-flex-gap .cert-actions > *:last-child { margin-right: 0; } /* --- my-team.css 修复 --- */ .no-flex-gap .team-header > * { margin-right: 15px; } .no-flex-gap .team-header > *:last-child { margin-right: 0; } .no-flex-gap .team-actions > * { margin-right: 10px; } .no-flex-gap .team-actions > *:last-child { margin-right: 0; } /* --- browse-history.css 修复 --- */ .no-flex-gap .history-actions > * { margin-right: 10px; } .no-flex-gap .history-actions > *:last-child { margin-right: 0; } /* --- messages.css 修复 --- */ .no-flex-gap .message-actions > * { margin-right: 10px; } .no-flex-gap .message-actions > *:last-child { margin-right: 0; } /* --- feedback.css 修复 --- */ .no-flex-gap .feedback-form-actions > * { margin-right: 10px; } .no-flex-gap .feedback-form-actions > *:last-child { margin-right: 0; } /* --- 通用 flex 容器补丁 --- 对于任何上面未覆盖到的 flex 容器使用 gap 的情况， 以下通配规则提供基础兼容支持 */ .no-flex-gap [style*="gap"] > * { margin-right: 8px; margin-bottom: 8px; } /* --- chat.css 修复 --- */ /* 聊天模式切换: flex-wrap, gap: 10px */ .no-flex-gap .chat-mode-switch > * { margin-right: 10px; margin-bottom: 10px; } /* 聊天消息内容: flex-direction: column, gap: 4px */ .no-flex-gap .chat-msg-content > * { margin-bottom: 4px; } .no-flex-gap .chat-msg-content > *:last-child { margin-bottom: 0; } /* action-buttons (chat): flex, gap: 4-5px */ .no-flex-gap .chat-container .action-buttons > *, .no-flex-gap .quote-table .action-buttons > * { margin-right: 5px; } .no-flex-gap .chat-container .action-buttons > *:last-child, .no-flex-gap .quote-table .action-buttons > *:last-child { margin-right: 0; } /* 发送按钮区域: inline-flex, gap: 5px */ .no-flex-gap .chat-send-btn > * { margin-right: 5px; } .no-flex-gap .chat-send-btn > *:last-child { margin-right: 0; } /* 聊天标签: flex-wrap, gap: 8px */ .no-flex-gap .chat-tags > * { margin-right: 8px; margin-bottom: 8px; } /* 聊天消息操作区 gap: 8px */ .no-flex-gap .chat-actions > * { margin-right: 8px; } .no-flex-gap .chat-actions > *:last-child { margin-right: 0; } /* --- product-detail.css 修复 --- */ /* .product-images: flex-direction: row, gap: 15px */ .no-flex-gap .product-images > * { margin-right: 15px; } .no-flex-gap .product-images > *:last-child { margin-right: 0; } /* .product-thumbnails-vertical: flex-direction: column, gap: 10px */ .no-flex-gap .product-thumbnails-vertical > * { margin-bottom: 10px; } .no-flex-gap .product-thumbnails-vertical > *:last-child { margin-bottom: 0; } /* .product-actions: flex, gap: 15px */ .no-flex-gap .product-actions > * { margin-right: 15px; } .no-flex-gap .product-actions > *:last-child { margin-right: 0; } /* .specs-list: flex-wrap, gap: 10px */ .no-flex-gap .specs-list > * { margin-right: 10px; margin-bottom: 10px; } /* .warehouse-options: flex, gap: 10px */ .no-flex-gap .warehouse-options > * { margin-right: 10px; } .no-flex-gap .warehouse-options > *:last-child { margin-right: 0; } /* .product-tags: flex-wrap, gap: 10px */ .no-flex-gap .product-tags > * { margin-right: 10px; margin-bottom: 10px; } /* .payment-icons: flex, gap: 15px */ .no-flex-gap .payment-icons > * { margin-right: 15px; } .no-flex-gap .payment-icons > *:last-child { margin-right: 0; } /* .rating-stars: flex, gap: 2px */ .no-flex-gap .rating-stars > * { margin-right: 2px; } .no-flex-gap .rating-stars > *:last-child { margin-right: 0; } /* .review-images: flex-wrap, gap: 10px */ .no-flex-gap .review-images > * { margin-right: 10px; margin-bottom: 10px; } /* .reviews-summary: flex, gap: 40px */ .no-flex-gap .reviews-summary > * { margin-right: 40px; } .no-flex-gap .reviews-summary > *:last-child { margin-right: 0; } /* .product-images-detail: flex-direction: column, gap: 20px */ .no-flex-gap .product-images-detail > * { margin-bottom: 20px; } .no-flex-gap .product-images-detail > *:last-child { margin-bottom: 0; } /* .legend-container: flex, gap: 20px */ .no-flex-gap .legend-container > * { margin-right: 20px; } .no-flex-gap .legend-container > *:last-child { margin-right: 0; } /* --- custom-order.css 修复 --- */ /* .category-options: flex, gap: 12px */ .no-flex-gap .category-options > * { margin-right: 12px; margin-bottom: 12px; } .no-flex-gap .category-options > *:last-child { margin-right: 0; } /* .category-header: flex, gap: 20px */ .no-flex-gap .category-header > * { margin-right: 20px; } .no-flex-gap .category-header > *:last-child { margin-right: 0; } /* .category-info-wrapper: flex, gap: 20px */ .no-flex-gap .category-info-wrapper > * { margin-right: 20px; } .no-flex-gap .category-info-wrapper > *:last-child { margin-right: 0; } /* .radio-group: flex, gap: 20px */ .no-flex-gap .radio-group > * { margin-right: 20px; } .no-flex-gap .radio-group > *:last-child { margin-right: 0; } /* .remark-upload-wrapper: flex, gap: 30px */ .no-flex-gap .remark-upload-wrapper > * { margin-right: 30px; } .no-flex-gap .remark-upload-wrapper > *:last-child { margin-right: 0; } /* .preview-area: flex-wrap, gap: 20px */ .no-flex-gap .preview-area > * { margin-right: 20px; margin-bottom: 20px; } /* .floating-record-btn: flex, gap: 8px */ .no-flex-gap .floating-record-btn > * { margin-right: 8px; } .no-flex-gap .floating-record-btn > *:last-child { margin-right: 0; } /* --- member-center.css 修复 --- */ /* .member-level-info: flex, gap: 15px */ .no-flex-gap .member-level-info > * { margin-right: 15px; } .no-flex-gap .member-level-info > *:last-child { margin-right: 0; } /* .guide-steps (mobile): flex-direction: column, gap: 30px */ @media (max-width: 768px) { .no-flex-gap .guide-steps > * { margin-bottom: 30px; } .no-flex-gap .guide-steps > *:last-child { margin-bottom: 0; } } /* --- member 页面通用 flex gap 修复 --- */ /* 通用: order-list, order-info, order-actions 等纵向 flex gap */ .no-flex-gap .order-list > * { margin-bottom: 20px; } .no-flex-gap .order-list > *:last-child { margin-bottom: 0; } .no-flex-gap .order-info > * { margin-right: 15px; } .no-flex-gap .order-info > *:last-child { margin-right: 0; } .no-flex-gap .order-actions > * { margin-right: 10px; } .no-flex-gap .order-actions > *:last-child { margin-right: 0; } /* order-search, search-btn */ .no-flex-gap .order-search > * { margin-right: 12px; } .no-flex-gap .order-search > *:last-child { margin-right: 0; } /* balance-actions, filter-options */ .no-flex-gap .balance-actions > * { margin-right: 15px; } .no-flex-gap .balance-actions > *:last-child { margin-right: 0; } .no-flex-gap .filter-options > * { margin-right: 15px; margin-bottom: 15px; } .no-flex-gap .filter-group > * { margin-right: 8px; } .no-flex-gap .filter-group > *:last-child { margin-right: 0; } /* team-overview, team-stats */ .no-flex-gap .team-overview > * { margin-right: 20px; } .no-flex-gap .team-overview > *:last-child { margin-right: 0; } .no-flex-gap .team-stats > * { margin-right: 20px; } .no-flex-gap .team-stats > *:last-child { margin-right: 0; } /* address-actions */ .no-flex-gap .address-actions > * { margin-right: 10px; } .no-flex-gap .address-actions > *:last-child { margin-right: 0; } /* sidebar-actions (messages) */ .no-flex-gap .sidebar-actions > * { margin-bottom: 10px; } .no-flex-gap .sidebar-actions > *:last-child { margin-bottom: 0; } .no-flex-gap .message-actions > * { margin-right: 15px; } .no-flex-gap .message-actions > *:last-child { margin-right: 0; } /* toolbar-left, toolbar-right (collection, browse-history) */ .no-flex-gap .toolbar-left > *, .no-flex-gap .toolbar-right > * { margin-right: 15px; } .no-flex-gap .toolbar-left > *:last-child, .no-flex-gap .toolbar-right > *:last-child { margin-right: 0; } /* item-actions, item-tags */ .no-flex-gap .item-actions > * { margin-right: 10px; } .no-flex-gap .item-actions > *:last-child { margin-right: 0; } .no-flex-gap .item-tags > * { margin-right: 6px; margin-bottom: 6px; } /* modal-footer */ .no-flex-gap .modal-footer > * { margin-right: 10px; } .no-flex-gap .modal-footer > *:last-child { margin-right: 0; } /* verification-code-group (settings) */ .no-flex-gap .verification-code-group > * { margin-right: 10px; } .no-flex-gap .verification-code-group > *:last-child { margin-right: 0; } /* order-status-container (order-detail) */ .no-flex-gap .order-status-container > * { margin-right: 20px; } .no-flex-gap .order-status-container > *:last-child { margin-right: 0; } /* share-platforms (my-team) */ .no-flex-gap .share-platforms > * { margin-right: 15px; } .no-flex-gap .share-platforms > *:last-child { margin-right: 0; } /* section-actions, section-header (my-team) */ .no-flex-gap .section-actions > * { margin-right: 15px; } .no-flex-gap .section-actions > *:last-child { margin-right: 0; } .no-flex-gap .section-header > * { margin-right: 15px; } .no-flex-gap .section-header > *:last-child { margin-right: 0; } /* date-filter (browse-history) */ .no-flex-gap .date-filter > * { margin-right: 8px; } .no-flex-gap .date-filter > *:last-child { margin-right: 0; } /* order-center-container */ .no-flex-gap .order-center-container > * { margin-bottom: 25px; } .no-flex-gap .order-center-container > *:last-child { margin-bottom: 0; } /* payment-options, cancel-reason-list */ .no-flex-gap .payment-options > * { margin-bottom: 15px; } .no-flex-gap .payment-options > *:last-child { } .no-flex-gap .cancel-reason-list > * { margin-bottom: 10px; } .no-flex-gap .cancel-reason-list > *:last-child { margin-bottom: 0; } /* receiver-info (shipping-address) */ .no-flex-gap .receiver-info > * { margin-right: 10px; } .no-flex-gap .receiver-info > *:last-child { margin-right: 0; } /* confirm-dialog-footer */ .no-flex-gap .confirm-dialog-footer > * { margin-right: 15px; } .no-flex-gap .confirm-dialog-footer > *:last-child { margin-right: 0; } /* rating-group, form-actions (messages feedback) */ .no-flex-gap .rating-group > * { margin-right: 15px; } .no-flex-gap .rating-group > *:last-child { margin-right: 0; } .no-flex-gap .form-actions > * { margin-right: 10px; } .no-flex-gap .form-actions > *:last-child { margin-right: 0; } /* modal-actions */ .no-flex-gap .modal-actions > * { margin-right: 16px; } .no-flex-gap .modal-actions > *:last-child { margin-right: 0; } /* --- chat.css 修复 --- */ /* .file-preview-list: flex-wrap, gap: 10px */ .no-flex-gap .file-preview-list > * { margin-right: 10px; margin-bottom: 10px; } /* .warehouse-action: flex-direction: column, gap: 4px */ .no-flex-gap .chat-bubble .warehouse-action > * { margin-bottom: 4px; } .no-flex-gap .chat-bubble .warehouse-action > *:last-child { margin-bottom: 0; } /* .action-buttons (chat): flex, gap: 4px */ .no-flex-gap .chat-bubble .action-buttons > * { margin-right: 4px; } .no-flex-gap .chat-bubble .action-buttons > *:last-child { margin-right: 0; } /* .continue-shopping-btn: inline-flex, gap: 5px */ .no-flex-gap .chat-bubble .continue-shopping-btn > * { margin-right: 5px; } .no-flex-gap .chat-bubble .continue-shopping-btn > *:last-child { margin-right: 0; } /* .chat-bubble .tip: flex, gap: 8px */ .no-flex-gap .chat-bubble .tip > * { margin-right: 8px; } .no-flex-gap .chat-bubble .tip > *:last-child { margin-right: 0; } /* .payment-options (chat): flex-wrap, gap: 8px */ .no-flex-gap .ai-order-preview .payment-options > * { margin-right: 8px; margin-bottom: 8px; } /* .chat-mode-switch (mobile): flex-direction: column, gap: 10px */ @media (max-width: 576px) { .no-flex-gap .chat-mode-switch > * { margin-bottom: 10px; } .no-flex-gap .chat-mode-switch > *:last-child { margin-bottom: 0; } } /* .quote-table .action-buttons: flex, gap: 5px */ .no-flex-gap .quote-table .action-buttons > * { margin-right: 5px; } .no-flex-gap .quote-table .action-buttons > *:last-child { margin-right: 0; } /* --- search.css 修复 --- */ /* .search-layout: flex, gap: 20px */ .no-flex-gap .search-layout > * { margin-right: 20px; } .no-flex-gap .search-layout > *:last-child { margin-right: 0; } @media (max-width: 992px) { .no-flex-gap .search-layout > * { margin-right: 0; margin-bottom: 20px; } .no-flex-gap .search-layout > *:last-child { margin-bottom: 0; } } /* .chat-header-left: flex, gap: 8px */ .no-flex-gap .chat-header-left > * { margin-right: 8px; } .no-flex-gap .chat-header-left > *:last-child { margin-right: 0; } /* .chat-messages (search): flex-direction: column, gap: 10px */ .no-flex-gap .search-main .chat-messages > * { margin-bottom: 10px; } .no-flex-gap .search-main .chat-messages > *:last-child { margin-bottom: 0; } /* .chat-message: flex, gap: 8px */ .no-flex-gap .search-main .chat-message > * { margin-right: 8px; } .no-flex-gap .search-main .chat-message > *:last-child { margin-right: 0; } /* .chat-input-bar: flex, gap: 8px */ .no-flex-gap .chat-input-bar > * { margin-right: 8px; } .no-flex-gap .chat-input-bar > *:last-child { margin-right: 0; } /* .typing-dots: flex, gap: 4px */ .no-flex-gap .typing-dots > * { margin-right: 4px; } .no-flex-gap .typing-dots > *:last-child { margin-right: 0; } /* .pagination-container: flex-wrap, gap: 15px */ .no-flex-gap .pagination-container > * { margin-right: 15px; margin-bottom: 15px; } /* .pagination-info: flex, gap: 20px */ .no-flex-gap .pagination-info > * { margin-right: 20px; } .no-flex-gap .pagination-info > *:last-child { margin-right: 0; } /* .pagination-controls: flex, gap: 8px */ .no-flex-gap .pagination-controls > * { margin-right: 8px; } .no-flex-gap .pagination-controls > *:last-child { margin-right: 0; } /* .pagination-numbers: flex, gap: 5px */ .no-flex-gap .pagination-numbers > * { margin-right: 5px; } .no-flex-gap .pagination-numbers > *:last-child { margin-right: 0; } /* .pagination-jump: flex, gap: 8px */ .no-flex-gap .pagination-jump > * { margin-right: 8px; } .no-flex-gap .pagination-jump > *:last-child { margin-right: 0; } /* .floating-record-btn (search): flex, gap: 10px */ .no-flex-gap .search-main .floating-record-btn > * { margin-right: 10px; } .no-flex-gap .search-main .floating-record-btn > *:last-child { margin-right: 0; } /* --- Element Plus ElMessage 组件 Safari 13 修复 --- */ /* ElMessage 在 Safari 13 中因 flex gap 不支持导致文字竖排/宽度异常 */ .el-message { display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-flex-direction: row !important; flex-direction: row !important; -webkit-align-items: center !important; align-items: center !important; white-space: nowrap !important; padding: 10px 20px !important; overflow: visible !important; width: auto !important; min-width: auto !important; max-width: none !important; } .el-message .el-message__icon { margin-right: 10px !important; flex-shrink: 0 !important; } .el-message .el-message__content { white-space: nowrap !important; flex-shrink: 0 !important; overflow: visible !important; } .no-flex-gap .el-message > * { margin-right: 8px; } .no-flex-gap .el-message > *:last-child { margin-right: 0; } /* --- search/product-detail 页面 .warehouse-action flex gap 修复 --- */ .no-flex-gap .warehouse-action > * { margin-bottom: 8px; } .no-flex-gap .warehouse-action > *:last-child { margin-bottom: 0; } /* --- 其他遗漏页面 flex gap 修复 --- */ /* custom-history.css */ .no-flex-gap .custom-history-list > * { margin-bottom: 30px; } .no-flex-gap .custom-history-list > *:last-child { margin-bottom: 0; } .no-flex-gap .record-header > * { margin-right: 12px; } .no-flex-gap .record-header > *:last-child { margin-right: 0; } .no-flex-gap .record-meta > * { margin-right: 8px; } .no-flex-gap .record-meta > *:last-child { margin-right: 0; } .no-flex-gap .record-body > * { margin-bottom: 10px; } .no-flex-gap .record-body > *:last-child { margin-bottom: 0; } .no-flex-gap .record-footer > * { margin-right: 15px; } .no-flex-gap .record-footer > *:last-child { margin-right: 0; } .no-flex-gap .record-info > * { margin-right: 15px; } .no-flex-gap .record-info > *:last-child { margin-right: 0; } .no-flex-gap .info-item > * { margin-bottom: 5px; } .no-flex-gap .info-item > *:last-child { margin-bottom: 0; } .no-flex-gap .status-text > * { margin-right: 5px; } .no-flex-gap .status-text > *:last-child { margin-right: 0; } /* user-center.css */ .no-flex-gap .user-center-container > * { margin-right: 30px; } .no-flex-gap .user-center-container > *:last-child { margin-right: 0; } .no-flex-gap .quick-actions > * { margin-right: 15px; margin-bottom: 15px; } /* upload-certificate.css */ .no-flex-gap .upload-status > * { margin-right: 5px; } .no-flex-gap .upload-status > *:last-child { margin-right: 0; } /* sales-details.css */ .no-flex-gap .summary-header > * { margin-right: 20px; } .no-flex-gap .summary-header > *:last-child { margin-right: 0; } .no-flex-gap .data-type-tabs > * { margin-right: 10px; } .no-flex-gap .data-type-tabs > *:last-child { margin-right: 0; } .no-flex-gap .stat-content > * { margin-right: 15px; } .no-flex-gap .stat-content > *:last-child { margin-right: 0; } .no-flex-gap .date-filter-group > * { margin-right: 10px; } .no-flex-gap .date-filter-group > *:last-child { margin-right: 0; } /* register-success.css */ .no-flex-gap .action-buttons > * { margin-right: 20px; } .no-flex-gap .action-buttons > *:last-child { margin-right: 0; } @media (max-width: 480px) { .no-flex-gap .action-buttons > * { margin-right: 0; margin-bottom: 10px; } .no-flex-gap .action-buttons > *:last-child { margin-bottom: 0; } } /* product-review.css */ .no-flex-gap .upload-preview > * { margin-right: 20px; margin-bottom: 20px; } .no-flex-gap .rating-options > * { margin-right: 10px; margin-bottom: 10px; } .no-flex-gap .category-ratings > * { margin-right: 15px; margin-bottom: 15px; } .no-flex-gap .submit-section > * { margin-right: 20px; } .no-flex-gap .submit-section > *:last-child { margin-right: 0; } /* shipping-address.css - 追加遗漏 */ .no-flex-gap .region-select > * { margin-right: 10px; } .no-flex-gap .region-select > *:last-child { margin-right: 0; } .no-flex-gap .address-modal-footer > * { margin-right: 10px; } .no-flex-gap .address-modal-footer > *:last-child { margin-right: 0; } .no-flex-gap .add-address-btn > * { margin-right: 5px; } .no-flex-gap .add-address-btn > *:last-child { margin-right: 0; } .no-flex-gap .add-address-btn-empty > * { margin-right: 5px; } .no-flex-gap .add-address-btn-empty > *:last-child { margin-right: 0; } .no-flex-gap .add-address-btn-bottom > * { margin-right: 8px; } .no-flex-gap .add-address-btn-bottom > *:last-child { margin-right: 0; } .no-flex-gap .address-action-btn > * { margin-right: 5px; } .no-flex-gap .address-action-btn > *:last-child { margin-right: 0; } /* --- download.css 修复 --- */ /* .page-title: flex, gap: 12px */ .no-flex-gap .page-title > * { margin-right: 12px; } .no-flex-gap .page-title > *:last-child { margin-right: 0; } /* .category-tabs: flex, gap: 20px */ .no-flex-gap .category-tabs > * { margin-right: 20px; margin-bottom: 10px; } /* .category-tab (内部): flex, gap: 8px */ .no-flex-gap .category-tab > * { margin-right: 8px; } .no-flex-gap .category-tab > *:last-child { margin-right: 0; } /* .download-list: flex-direction: column, gap: 20px */ .no-flex-gap .download-list > * { margin-bottom: 20px; } .no-flex-gap .download-list > *:last-child { margin-bottom: 0; } /* .download-item: flex, gap: 20px */ .no-flex-gap .download-item > * { margin-right: 20px; } .no-flex-gap .download-item > *:last-child { margin-right: 0; } /* .item-meta: flex-wrap, gap: 20px */ .no-flex-gap .item-meta > * { margin-right: 20px; margin-bottom: 5px; } /* .meta-item: flex, gap: 5px */ .no-flex-gap .meta-item > * { margin-right: 5px; } .no-flex-gap .meta-item > *:last-child { margin-right: 0; } /* .download-btn: flex, gap: 6px */ .no-flex-gap .download-btn > * { margin-right: 6px; } .no-flex-gap .download-btn > *:last-child { margin-right: 0; } /* .video-meta: flex-wrap, gap: 15px */ .no-flex-gap .video-meta > * { margin-right: 15px; margin-bottom: 5px; } /* ============================================================ ELEMENT PLUS EL-CASCADER Safari 兼容修复 解决 Safari 中级联选择器面板拉伸过长的问题 ============================================================ */ /* 修复 Safari 中表单项内容区域高度异常 */ .el-form-item__content:has(.el-cascader), .el-form-item__content:has(.el-select), .el-form-item__content:has(.el-input) { min-height: 40px; height: auto; } /* Safari 不支持 :has()，使用通用规则 */ .el-form--label-top .el-form-item__content { min-height: 40px; } /* 修复 label-right 布局下输入框高度被拉伸 */ .el-form-item--label-right .el-form-item__content { height: 30px; } /* 针对级联选择器的输入框高度 */ .el-cascader .el-input, .el-cascader .el-input__wrapper { height: 40px; } .el-cascader .el-input__inner { height: 38px; }