.block-related-products { --controls-color: var(--color-button-background); position: relative; } .block-related-products__header { display: flex; justify-content: space-between; align-items: center; margin-block-end: 12px; } .block-related-products__title { } .block-related-product-list > li { display: flex; flex-direction: column; gap: 12px; width: 100%; } .block-related-product-list .block-product-card.block-product-card--mini { padding: 0; } @media screen and (max-width: 959px) { .block-related-product-list { max-width: calc(100vw - var(--page-padding) * 2); } } .related-products__pager { display: flex; gap: 12px; justify-content: center; align-items: center; height: 12px; } .related-products__pager--dots { inset-block-end: 20px; } .related-products__pager--dot { display: block; width: 12px; height: 12px; padding: 0; cursor: pointer; background-color: rgba(var(--controls-color)); border: 0; border-radius: 50%; transition: opacity, width, height, 0.3s; } .related-products__pager--dot.is-active { width: 12px; height: 12px; border: 1px solid rgba(var(--controls-color)); background-color: transparent; } .related-products__button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(var(--color-entry-line)); color: rgb(var(--color-text)); cursor: pointer; background-color: transparent; } .related-products__button--previous svg { transform: rotate(180deg); } /* ========================================================= COMPLETE THE SET Quick Add 最终版 PC： 默认隐藏 Hover 当前图片时显示 Mobile： 始终显示 ========================================================= */ /* --------------------------------------------------------- 图片容器 原主题本身已有 relative， 这里再次明确，确保定位稳定 --------------------------------------------------------- */ .block-related-products .block-product-card__layer-image-wrapper { position: relative !important; overflow: hidden !important; } /* ========================================================= 图片里的代理 Add to cart ========================================================= */ .block-related-products .block-product-card__layer-image-wrapper>.related-products__image-quick-add { position: absolute !important; /* * 不再使用： * left:50% + translateX * * 直接左右固定。 * * 所以无论第几个商品， * 都绝对不可能往右跑出图片。 */ left: 20px !important; right: 20px !important; top: auto !important; bottom: 20px !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; /* * 使用主题按钮颜色变量 */ color: rgb(var(--color-button-text)) !important; background: rgb(var(--color-button-background)) !important; border: 0 !important; border-radius: 0 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; z-index: 20 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } /* ========================================================= PC ========================================================= */ @media (min-width: 960px) { /* * 默认隐藏 */ .block-related-products .block-product-card__layer-image-wrapper>.related-products__image-quick-add { opacity: 0 !important; visibility: hidden !important; /* * 轻微从下往上出现 */ transform: translateY(8px) !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important; } /* * 只 Hover 当前图片， * 只显示当前商品按钮。 */ .block-related-products .block-product-card__layer-image-wrapper:hover>.related-products__image-quick-add { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; } } /* ========================================================= Mobile ========================================================= */ @media (max-width: 959px) { .block-related-products .block-product-card__layer-image-wrapper>.related-products__image-quick-add { left: 8px !important; right: 8px !important; bottom: 8px !important; height: 40px !important; min-height: 40px !important; padding: 0 8px !important; font-size: 13px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } } /* ========================================================= 隐藏 SHOPLINE 原来的按钮 原按钮不能删除： 图片按钮点击后还要触发它， 用来打开原生 Quick View。 ========================================================= */ .block-related-products .related-products__native-trigger { position: fixed !important; left: -10000px !important; top: -10000px !important; right: auto !important; bottom: auto !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* * 原来的 theme-quick-add-modal * 不再在价格/评论下面占高度 */ .block-related-products .block-product-card__info theme-quick-add-modal:has(.related-products__native-trigger) { margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; } /* * details 本身也不占高度 */ .block-related-products .block-product-card__info theme-quick-add-modal:has(.related-products__native-trigger)>details { margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; }