/* ============================================================ 3 Banners in a Line 模块样式（复刻 Rotor Riot 三横幅一行板块） 用途：UEEShop 后台 → 我的应用 → 自定义代码 → 自定义代码块-3 Banners （触发=首页，位置=） 说明： 1. 所有选择器均以 .bnr3 为作用域，不影响首页其它模块 2. 容器宽度与站内其它模块一致（max-width 1492px、92% 居中） 3. 桌面三列；移动端（≤1000px）纵向堆叠、横幅占一行 ============================================================ */ .bnr3, .bnr3 * { box-sizing: border-box; margin: 0; padding: 0; } .bnr3 { width: 100%; padding: 40px 0; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; font-size: 14px; color: #333; background: #ffffff; } /* ---- 容器（与 Recommended / Others 的容器一致） ---- */ .bnr3 .bnr3-wrap { max-width: 1492px; width: 92%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } /* ---- 单张横幅 ---- */ .bnr3 .bnr3-item { position: relative; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; aspect-ratio: 21 / 10; border-radius: 8px; overflow: hidden; text-decoration: none; background-color: #F8F9FC; } .bnr3 .bnr3-item img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; -webkit-transition: all .4s; transition: all .4s; } .bnr3 .bnr3-item:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /* 深色渐变遮罩，保证文字可读 */ .bnr3 .bnr3-item:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.4) 100%); z-index: 1; pointer-events: none; } /* 左上：标题 + 副文案 */ .bnr3 .bnr3-overlay { position: absolute; left: 24px; top: 24px; right: 24px; z-index: 2; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); pointer-events: none; } .bnr3 .bnr3-title { font-size: 26px; line-height: 1.2; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; } .bnr3 .bnr3-sub { font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 85%; font-family: "OpenSans-Regular", "Open Sans", Arial, sans-serif; } /* 左下：白色胶囊按钮 */ .bnr3 .bnr3-btn { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-block; background-color: #fff; color: #000; font-size: 14px; line-height: 36px; padding: 0 20px; border-radius: 50px; font-family: "OpenSans-Bold", "Open Sans", Arial, sans-serif; -webkit-transition: all .3s; transition: all .3s; } .bnr3 .bnr3-item:hover .bnr3-btn { background-color: #D00010; color: #fff; } /* ============================================================ 移动端适配（≤1000px，与站内其它模块断点一致） ============================================================ */ @media (max-width: 1000px) { .bnr3 { padding: 30px 0; } .bnr3 .bnr3-wrap { width: 92%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } .bnr3 .bnr3-item { width: 100%; aspect-ratio: 21 / 10; } .bnr3 .bnr3-title { font-size: 20px; } .bnr3 .bnr3-sub { font-size: 13px; } .bnr3 .bnr3-overlay { left: 18px; top: 18px; right: 18px; } .bnr3 .bnr3-btn { left: 18px; bottom: 18px; font-size: 13px; line-height: 32px; padding: 0 16px; } }