/* * Bootstrap 3 → 5 兼容垫片 * * 为什么需要它： * 旧站的 header / footer 是 Bootstrap 3 标记，而 OC 4.1 的商品/分类/结账/账户页是 * Bootstrap 5 标记。两套框架的 CSS 同时加载会互相覆盖（.container/.row/.col-* 同名不同实现）， * 这正是上一轮首页排版崩掉的原因。 * * 所以只在【首页】整套换成 BS3（首页正文 1292 行全是 BS3 标记，非换不可）， * 其余页面保持 BS5，靠这个文件把 header/footer 用到的少数 BS3 独有类补回来。 * 补的是 BS5 里【不存在】的类 —— 绝不重定义 .container/.row/.col-*，那会打架。 * * 首页也会加载本文件：BS3 已经原生提供这些类，此处规则与 BS3 等价，重复无害。 */ /* ── 内容宽度 ─────────────────────────────────────────────────── 旧站 .container 是 Bootstrap 3 的 1170px；BS5 到 xxl 会放到 1320px， 页脚会比旧站宽一截。钉死 1170，两种模式下与旧站一致。 */ .container { max-width: 1170px; } /* ── 浮动（BS5 叫 float-start/float-end）─────────────────────────── */ .pull-left { float: left !important; } .pull-right { float: right !important; } /* ── 响应式显隐（BS5 叫 d-none / d-*-block，断点也不同）───────────── */ @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } /* ── 栅格偏移（BS5 叫 offset-md-*）───────────────────────────────── */ .col-xs-offset-3 { margin-left: 25%; } @media (min-width: 768px) { .col-sm-offset-3 { margin-left: 25%; } } @media (min-width: 992px) { .col-md-offset-6 { margin-left: 50%; } } /* ── 图片与块（BS5 叫 img-fluid / mx-auto d-block）──────────────── */ .img-responsive { display: block; max-width: 100%; height: auto; } .center-block { display: block; margin-left: auto; margin-right: auto; } /* ── 行内列表（BS5 需要 .list-inline-item，旧标记没有）──────────── */ .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } /* ── .well（BS5 已移除，移动端菜单用它）─────────────────────────── */ .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; } /* ── 下拉箭头（BS5 用伪元素，旧标记用 ）─────── */ .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; } .dropdown-menu-right { right: 0; left: auto; } /* ── Glyphicons（BS3 自带字体，BS5 完全移除）───────────────────── 只补 header/footer 实际用到的 5 个图标，字体文件随扩展一起部署。 */ @font-face { font-family: 'Glyphicons Halflings'; src: url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'); font-display: swap; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; } .glyphicon-search:before { content: "\e003"; } .glyphicon-heart-empty:before { content: "\e143"; } .glyphicon-shopping-cart:before { content: "\e116"; } .glyphicon-list:before { content: "\e056"; } .glyphicon-map-marker:before { content: "\e062"; } .glyphicon-arrow-right:before { content: "\e092"; } /* 知识库面包屑 */ /* ── 折叠（BS3 的 .collapse 默认 display:none，BS5 相同，无需补）── 但 BS5 的 .collapse:not(.show) 才隐藏 —— 旧标记不带 .show，行为一致。 */ /* ── xs 栅格（BS5 的最小断点叫 .col-*，没有 -xs- 这一档）────────── ⚠️ 必须锁在 <768px 里。BS3 的 .col-xs-* 是无条件规则，靠【文件内的先后顺序】 被后面的 .col-sm-*/.col-md-* 覆盖；本文件在 bootstrap.min.css 之后加载， 不加媒体查询就会反过来压住 .col-md-3，首页 logo 列会从 25% 变成 50%、 把右侧图标挤到下一行。只补 <768px 这一段，正是 BS5 缺的那一段。 */ @media (max-width: 767px) { .col-xs-3 { position: relative; float: left; width: 25%; padding-right: 15px; padding-left: 15px; } .col-xs-6 { position: relative; float: left; width: 50%; padding-right: 15px; padding-left: 15px; } .col-xs-12 { position: relative; float: left; width: 100%; padding-right: 15px; padding-left: 15px; } } /* ── 旧站正文里的 BS3 浮动栅格（信息页内容存在数据库里，改不动）──── download_app 的三张图用 col-xs-12 col-lg-4，父元素 .app_info 不是 .row。 BS3 里这些列是 float 所以并排；BS5 里是 flex 子项，父元素不是 flex 就竖排。 给这几个已知的旧版块单独恢复浮动，不动 BS5 自己的栅格。 */ .app_info::after { content: ""; display: table; clear: both; } .app_info > [class*="col-"] { float: left; } /* ── 知识库（newsblog）补齐 ───────────────────────────────────── 旧模板把这几处写成内联的绝对定位（left:630px / left:450px）， 窗口一窄就跑出容器。改成类，行为一致但不会溢出。 */ .kb-search { position: relative; text-align: right; margin: 20px 0; padding-right: 90px; } .kb-search .select_input { max-width: 100%; padding-left: 8px; } .kb-search .button_input { right: 0; top: 0; cursor: pointer; } .body-kb ul { list-style: none; padding-left: 0; } /* 原为三栏绝对定位（标题 / 简介 left:450px / 浏览数贴右）—— .cn 的内容区 宽度不足 450px，三者会互相覆盖。改为：标题与浏览数同一行（数右对齐）， 简介另起一行。旧站本来不显示简介，这里保留但不让它压住任何东西。 */ .list_li { position: relative; padding-right: 110px; } .list_li > a { display: inline-block; max-width: 100%; vertical-align: top; } .list_li .list_viewed { position: absolute; right: 0; top: 0; white-space: nowrap; color: #999; font-size: 13px; } .list_li .list_desc { position: static; display: block; margin: 4px 0 0; padding: 0; color: #888; font-size: 13px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kb-empty { font-size: 20px; text-align: center; padding: 40px 0; } @media (max-width: 991px) { .list_li .list_desc, .list_li .list_viewed { position: static; display: block; } .kb-search { padding-right: 0; } .kb-search .button_input { position: static; } } /* ── 账户下拉（用户反馈"样式太难看"，这里是有意比旧站好看）────── */ #top-links .dropdown-menu { min-width: 170px; padding: 6px 0; margin-top: 6px; border: 1px solid #e3e8ea; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); background: #fff; font-size: 13px; } #top-links .dropdown-menu > li > a { display: block; padding: 8px 16px; color: #333; white-space: nowrap; text-decoration: none; border-left: 3px solid transparent; } #top-links .dropdown-menu > li > a:hover { background: #f2faff; color: #0099ff; border-left-color: #40bcf6; } /* ── 顶部购物车：图标 + 数量角标 + 下拉 ─────────────────────── */ .sw-cart { display: inline-block; position: relative; } .sw-cart > a { color: inherit; text-decoration: none; } .sw-cart-count { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e0162a; color: #fff; font-size: 11px; line-height: 17px; text-align: center; font-weight: 700; } .sw-cart-menu { min-width: 340px; max-width: 92vw; padding: 10px; border: 1px solid #e3e8ea; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: 13px; text-align: left; } .sw-cart-table, .sw-cart-sum { width: 100%; } .sw-cart-table td { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: top; } .sw-cart-thumb img { width: 46px; height: auto; border: 1px solid #eee; } .sw-cart-opt { color: #999; font-size: 11px; } .sw-cart-qty, .sw-cart-total { white-space: nowrap; text-align: right; } .sw-cart-rm { border: 0; background: none; color: #e0162a; font-size: 18px; line-height: 1; cursor: pointer; } .sw-cart-sum td { padding: 3px 4px; text-align: right; } .sw-cart-sum tr:last-child td { font-weight: 700; } .sw-cart-act { margin: 8px 0 0; display: flex; justify-content: space-between; } .sw-cart-empty { padding: 26px 10px; text-align: center; color: #999; } /* ── 商品数量加减 ──────────────────────────────────────────── */ .sw-qty { display: inline-flex; align-items: stretch; } .sw-qty .sw-qty-btn { width: 36px; border: 1px solid #ced4da; background: #f5f7f8; color: #333; font-size: 16px; line-height: 1; cursor: pointer; user-select: none; } .sw-qty .sw-qty-btn:hover { background: #40bcf6; border-color: #40bcf6; color: #fff; } .sw-qty input[name="quantity"] { width: 56px; text-align: center; border-radius: 0; border-left: 0; border-right: 0; min-width: 0; } /* 商品页的数量在 BS5 的 .input-group 里，圆角要交给最外面那两个按钮 */ .input-group > .sw-qty { display: inline-flex; } .input-group > .sw-qty .sw-qty-btn:first-child { border-radius: 0; } /* 两个下拉都靠右对齐：BS5 交给 Popper 定位（会写内联 transform/left）， 而顶栏这两个在页面最右侧，Popper 算出来会溢出视口。直接钉死右对齐。 */ .sw-cart .dropdown-menu, #top-links .dropdown-menu { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; } /* 旧主题给 .dropdown-menu / td a 定了宽度与 16px 字号，购物车下拉会被挤成一列一个词。 这里按 .sw-cart 作用域覆盖掉，不影响其他下拉。 */ .sw-cart .sw-cart-menu { width: 370px; min-width: 370px; } .sw-cart .sw-cart-table { table-layout: fixed; } .sw-cart .sw-cart-table td { font-size: 13px; line-height: 1.45; } .sw-cart .sw-cart-table td a { font-size: 13px; color: #232323; } .sw-cart .sw-cart-table td a:hover { color: #0099ff; } .sw-cart-thumb { width: 58px; } .sw-cart-qty { width: 38px; } .sw-cart-total { width: 72px; } .sw-cart-rm { padding: 0 2px; } .sw-cart .sw-cart-act a { font-size: 13px; } /* 旧主题的 .well / #top-links li 规则会渗进来：下拉底色发灰、行高过大、 底部两个按钮被拆成两行。按作用域收一下。 */ .sw-cart .sw-cart-menu { background: #fff; } .sw-cart .sw-cart-menu > li { display: block; padding: 0; line-height: 1.45; } .sw-cart .sw-cart-act { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #f0f0f0; } .sw-cart .sw-cart-act a { white-space: nowrap; } #top-links .dropdown-menu > li { line-height: 1.3; } /* 商品名列要宽一点，否则长名字一行一个词 */ .sw-cart .sw-cart-menu { width: 420px; min-width: 420px; } .sw-cart .sw-cart-table { table-layout: auto; } .sw-cart .sw-cart-table td:nth-child(2) { width: 52%; } /* ═══ 顶部大菜单（用户反馈"太素"）══════════════════════════════════ 结构完全是旧站的，这里只加视觉：蓝色顶边、圆角、投影、条目悬停。 Model / Accessories 的红黑配色由旧站的 func()/func1() 用内联样式控制， 不去动它 —— 那是"当前选中"的指示。 */ .nav-goods-content { border: 0 !important; border-top: 3px solid #40bcf6 !important; border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .15); padding: 16px 0 20px !important; } .nav-goods-content .top-goods-nav > li { padding: 9px 16px 9px 10px; margin: 0 8px 4px 0; border-radius: 6px; cursor: pointer; transition: background .15s; } .nav-goods-content .top-goods-nav > li:hover { background: #f2faff; } .nav-goods-content .top-goods-nav > li > div { width: 8px !important; height: 8px !important; border-radius: 50%; right: 6px !important; } .nav-goods-content .top-goods-list { border-left: 1px solid #eef2f4; padding-left: 14px; } .nav-goods-content .top-goods-list li { margin-top: 0 !important; } .nav-goods-content .top-goods-list li a { display: block; padding: 8px 12px; border-radius: 5px; color: #4a4a4a; transition: background .15s, color .15s, padding .15s; } .nav-goods-content .top-goods-list li a:hover { background: #f2faff; color: #0099ff; padding-left: 18px; text-decoration: none; } /* ═══ 左上角币种：与同一行其它文字同字号同颜色 ═══════════════════ 核心那版是 .btn.btn-link，Bootstrap 给了自己的字号/内边距/链接色。 */ #top #form-currency .btn, #top #form-currency .btn:hover, #top #form-currency .btn:focus { font-size: 14px; color: #888; padding: 0; border: 0; text-decoration: none; box-shadow: none; vertical-align: baseline; } #top #form-currency .btn:hover { color: #0099ff; } #top #form-currency { margin: 0 14px 0 0; } /* ═══ 知识库分类页：压缩搜索区与结果区，分类图上移 ═══════════════ */ .kb-nav { padding-top: 26px; } .kb-nav .row { display: flex; flex-wrap: wrap; justify-content: center; } .body-kb { padding: 18px 0 !important; } .kb-search { margin: 0 0 14px; } .kb-pager { padding: 10px 0 24px; } .kb-pager .row { align-items: center; } /* 大菜单再收一版：条目左对齐、字号收到 14、悬停加左侧蓝条 */ .nav-goods-content .top-goods-list, .nav-goods-content .top-goods-list li, .nav-goods-content .top-goods-list li a { text-align: left; } .nav-goods-content .top-goods-list { width: 168px; } .nav-goods-content .top-goods-list li { margin: 0 !important; padding: 0 !important; } .nav-goods-content .top-goods-list li a { font-size: 14px; padding: 7px 10px 7px 12px; border-left: 3px solid transparent; border-radius: 0 5px 5px 0; } .nav-goods-content .top-goods-list li a:hover { padding-left: 12px; border-left-color: #40bcf6; } .nav-goods-content .top-goods-nav { width: 150px; } .nav-goods-content .top-goods-nav > li { font-size: 15px; } /* ═══ 内建论坛 ═════════════════════════════════════════════════ */ .sw-forum { padding: 26px 0 40px; } .sw-forum-error { margin-bottom: 16px; padding: 10px 14px; border-radius: 6px; background: #fdecee; border: 1px solid #f5c2c7; color: #a4232f; } .sw-forum-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .sw-forum-search { display: flex; } .sw-forum-search input { width: 260px; max-width: 60vw; height: 38px; padding: 0 10px; border: 1px solid #ced4da; border-right: 0; border-radius: 5px 0 0 5px; } .sw-forum-search button { height: 38px; padding: 0 16px; border: 0; border-radius: 0 5px 5px 0; background: #0099ff; color: #fff; cursor: pointer; } .sw-btn { display: inline-block; height: 38px; line-height: 38px; padding: 0 20px; border: 0; border-radius: 5px; background: #40bcf6; color: #fff !important; text-decoration: none !important; cursor: pointer; font-size: 14px; } .sw-btn:hover { background: #1ba3e0; } .sw-forum-form { margin-bottom: 22px; padding: 16px; background: #fff; border: 1px solid #e6ebee; border-radius: 8px; } .sw-forum-form input[type=text], .sw-forum-form textarea { width: 100%; margin-bottom: 10px; padding: 9px 12px; border: 1px solid #ced4da; border-radius: 5px; font: inherit; } .sw-forum-form .sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .sw-forum-note { color: #999; font-size: 12px; margin-bottom: 10px; } .sw-topics { width: 100%; background: #fff; border: 1px solid #e6ebee; border-radius: 8px; overflow: hidden; } .sw-topics th { padding: 11px 14px; background: #f5f9fb; border-bottom: 1px solid #e6ebee; font-size: 13px; color: #667; font-weight: 600; text-align: left; } .sw-topics td { padding: 13px 14px; border-bottom: 1px solid #f1f4f6; vertical-align: top; } .sw-topics tr:last-child td { border-bottom: 0; } .sw-topics td a { color: #232323; font-size: 15px; } .sw-topics td a:hover { color: #0099ff; } .sw-excerpt { color: #9aa2a8; font-size: 12px; margin-top: 4px; } .sw-num, .sw-date { text-align: center; white-space: nowrap; color: #667; font-size: 13px; } .sw-pin { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 3px; background: #e0162a; color: #fff; font-size: 11px; } .sw-forum-empty { padding: 44px 10px; text-align: center; color: #999; } .sw-topic-title { font-size: 22px; margin: 0 0 16px; } .sw-post { margin-bottom: 14px; padding: 16px 18px; background: #fff; border: 1px solid #e6ebee; border-radius: 8px; } .sw-post-first { border-left: 3px solid #40bcf6; } .sw-post-meta { color: #9aa2a8; font-size: 12px; margin-bottom: 8px; } .sw-post-body { line-height: 1.75; word-break: break-word; } .sw-del { margin-left: 10px; color: #e0162a; } @media (max-width: 767px) { .sw-topics th:nth-child(n+2), .sw-topics td:nth-child(n+2) { display: none; } } /* 分类页左栏：OC4 默认是灰底列表，贴一下站点的蓝色调 */ #column-left .list-group-item, #content .list-group-item { border-color: #e6ebee; } #column-left .list-group-item a, .list-group-item > a { color: #333; } #column-left .list-group-item a:hover { color: #0099ff; } #column-left .list-group-item.active, #column-left .list-group-item.active:hover { background: #f2faff; border-color: #cfe9fb; color: #0099ff; border-left: 3px solid #40bcf6; } /* 配件子菜单合成一列共 12 条，条目间距收紧一点，菜单不至于太高 */ .nav-goods-content .top-goods-list { width: 210px; } .nav-goods-content .top-goods-list li a { padding: 5px 10px 5px 12px; } /* main.css 给菜单钉死了 height:330px（当年配件排两列刚好放得下）。 合成一列 12 条后会溢出白底，改成按内容自适应，并给个最小高度保持原来的观感。 */ .nav-goods-content { height: auto !important; min-height: 330px; } /* 三列都是 float:left，父元素 height:auto 会塌成 0（只剩 min-height）， 条目多了就漏在白底外面。补个 clearfix 让它真的按内容撑开。 */ .nav-goods-content::after { content: ""; display: block; clear: both; } /* main.css 的 .top-goods-list 也钉死了 height:260px（两列各 6 条时够用）。 合成一列 12 条后要按内容撑开，右侧那根 2px 分隔线也随之拉满。 */ .nav-goods-content .top-goods-list { height: auto !important; min-height: 260px; } /* ═══ 主导航字体：大一号 + 圆润字形 ══════════════════════════════ Quicksand（SIL OFL，可商用）自托管，不走 Google Fonts —— 外链字体在大陆会被拖慢甚至打不开，而这套代码将来还要给 .cn 用。 中文回落到微软雅黑：雅黑本身字形就偏圆，与 Quicksand 搭起来不违和。 */ @font-face { font-family: 'Quicksand'; src: url('../fonts/quicksand.woff2') format('woff2'); font-weight: 400 700; font-display: swap; } .nav-text, .nav-text a, .nav-goods-content .top-goods-nav a, .xs-menu .hei16 a { font-family: Quicksand, ui-rounded, 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif; font-weight: 600; letter-spacing: .2px; } .nav-text, .nav-text a { font-size: 18px; } /* 旧站 .hei16 是 16px */ /* ═══ 大菜单的 Model / Accessories 改成 Tab ═════════════════════ */ .nav-goods-content .top-goods-nav > li.sw-tab { position: relative; margin: 0 10px 6px 0; padding: 0; border-radius: 6px; background: transparent; cursor: pointer; transition: background .15s, color .15s; } .nav-goods-content .top-goods-nav > li.sw-tab > a { display: block; padding: 10px 18px 10px 20px; color: #4a4a4a; font-size: 16px; text-decoration: none; border-left: 3px solid transparent; border-radius: 6px; } .nav-goods-content .top-goods-nav > li.sw-tab:hover > a { background: #f2faff; color: #0099ff; } .nav-goods-content .top-goods-nav > li.sw-tab.is-active > a { background: #eaf6fe; color: #0080d6; border-left-color: #40bcf6; } /* ═══ 顶栏邮箱：与同排文字同色，字号小一号，点击直接写信 ═════════ 旧站是内联的 color:#F00 / 20px / bold，在一排灰色小字里太刺眼。 */ #top-links a.sw-mail, #top-links a.sw-mail:hover { font-size: 18px; font-weight: 700; } #top-links a.sw-mail { color: #888; } #top-links a.sw-mail:hover { color: #0099ff; } /* ═══ 主导航悬停：只换颜色，字体本身不动 ═══════════════════════ font.css 有一条 .hei16 a:hover { font-size:16px; font-family:微软雅黑 }， 而导航的