/* ============================================================ Others 模块样式（复刻 axisflying.com "Others" 板块） 用途：UEEShop 后台 → 我的应用 → 自定义代码 → 自定义代码块-Other （触发=首页，位置=） 说明： 1. 所有选择器均以 .oth-reco 为作用域，不影响首页其它模块 2. 卡片样式与 Recommended Products 模块的 mdm-card 完全一致 （白底、1px #E5E7EB 描边、8px 圆角、名称/价格悬浮式） 3. 桌面 4 列；移动端（≤1000px）2 列 + 横幅占一行 + 独立 View All ============================================================ */ .oth-reco, .oth-reco * { box-sizing: border-box; margin: 0; padding: 0; } .oth-reco { width: 100%; padding: 40px 0; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; font-size: 14px; color: #333; background: #ffffff; } /* ---- 容器（与 Recommended 的 .mdm-wrap 一致） ---- */ .oth-reco .oth-wrap { max-width: 1492px; width: 92%; margin: 0 auto; } /* ---- 标题行 ---- */ .oth-reco .oth-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; } .oth-reco .oth-title { font-size: 48px; line-height: 1.2; color: #000; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; } /* 桌面端 View All 按钮 */ .oth-reco .oth-viewall { -ms-flex-negative: 0; flex-shrink: 0; } .oth-reco .oth-viewall a { display: inline-block; min-width: 150px; text-align: center; padding: 0 20px; font-size: 16px; border: 1px solid #D5D8DD; border-radius: 50px; line-height: 38px; color: #333; text-decoration: none; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; -webkit-transition: all .3s; transition: all .3s; } .oth-reco .oth-viewall a:hover { border-color: #000; color: #000; } /* ---- 全宽横幅 ---- */ .oth-reco .oth-banner { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .oth-reco .oth-banner img { display: block; width: 100%; height: auto; } .oth-reco .oth-banner-text { position: absolute; left: 4%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); z-index: 2; pointer-events: none; } .oth-reco .oth-banner-t1 { font-size: 44px; line-height: 1.15; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; } .oth-reco .oth-banner-t2 { font-size: 20px; line-height: 1.4; margin-top: 6px; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; } /* ---- 商品网格：桌面 4 列（与 Recommended 一致） ---- */ .oth-reco .oth-grid { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .oth-reco .oth-card { position: relative; width: calc((100% - 48px) / 4); background-color: #ffffff; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; } /* 图片区（比例同 Recommended） */ .oth-reco .oth-imgbox { position: relative; padding-top: 127.425%; overflow: hidden; } .oth-reco .oth-imgbox img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 70%; max-height: 52%; display: block; -webkit-transition: all .3s; transition: all .3s; } .oth-reco .oth-card:hover .oth-imgbox img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* 卡片上部：产品名 + 特性（悬浮于图片区上方） */ .oth-reco .oth-con { position: absolute; top: 0; left: 0; width: 100%; padding: 21px 18px; z-index: 2; } .oth-reco .oth-name { font-size: 24px; line-height: 1.2; color: #000; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oth-reco .oth-name a { color: inherit; text-decoration: none; } .oth-reco .oth-sub { font-size: 18px; color: #76767F; margin-top: 3px; margin-bottom: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; } /* 卡片下部：价格 + Buy now（悬浮于图片区底部） */ .oth-reco .oth-foot { position: absolute; bottom: 0; left: 0; width: 100%; padding: 31px 18px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oth-reco .oth-price { font-size: 18px; color: #000; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; line-height: 1.2; } .oth-reco .oth-buy { display: inline-block; height: 40px; line-height: 40px; min-width: 90px; padding: 0 15px; text-align: center; background-color: #000; color: #fff; border-radius: 50px; font-size: 18px; text-decoration: none; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; -webkit-transition: all .3s; transition: all .3s; } .oth-reco .oth-buy:hover { background-color: #D00010; color: #fff; } /* 移动端 View All（默认隐藏） */ .oth-reco .oth-mob-viewall { display: none; } /* ============================================================ 移动端适配（≤1000px，与 Recommended 断点一致） ============================================================ */ @media (max-width: 1000px) { .oth-reco { padding: 30px 0; } .oth-reco .oth-wrap { width: 100%; } .oth-reco .oth-title { width: 92%; margin: 0 auto 15px; font-size: 24px; } .oth-reco .oth-top { display: block; margin-bottom: 15px; } /* 横幅占一行（全宽） */ .oth-reco .oth-banner { width: 92%; margin: 0 auto 15px; } .oth-reco .oth-banner-t1 { font-size: 22px; } .oth-reco .oth-banner-t2 { font-size: 13px; margin-top: 4px; } /* 隐藏桌面 View All，显示移动端按钮 */ .oth-reco .oth-viewall { display: none; } .oth-reco .oth-mob-viewall { display: block; text-align: center; margin-top: 20px; } .oth-reco .oth-mob-viewall a { display: inline-block; min-width: 120px; text-align: center; padding: 0 20px; font-size: 16px; border: 1px solid #000; border-radius: 50px; line-height: 38px; color: #fff; background-color: #000; text-decoration: none; } /* 商品网格：2 列 */ .oth-reco .oth-grid { width: 92%; margin: 0 auto; gap: 15px; } .oth-reco .oth-card { width: calc((100% - 15px) / 2); } .oth-reco .oth-imgbox { padding-top: 150%; } .oth-reco .oth-con { padding: 15px; } .oth-reco .oth-foot { padding: 15px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oth-reco .oth-price { margin-bottom: 5px; font-size: 16px; } .oth-reco .oth-name { font-size: 14px; margin-bottom: 5px; } .oth-reco .oth-sub { display: none; } .oth-reco .oth-buy { height: 28px; line-height: 28px; min-width: 38px; padding: 0 10px; font-size: 16px; } }