@charset "utf-8"; /*! * RTS 瑞易检测 官网主题 v2 (theme-v2.css) * ------------------------------------------------------------------ * 纯「加法」样式：不修改任何原有 HTML 结构与数据，仅通过覆盖样式 * 提升界面质感与可读性。需要在 global.css / index.css 之后引入。 * * 引入方式（模板 内，放在 index.css 之后）： * * * 设计令牌 * 主色 #00923F（沿用品牌绿） 辅助 #F59E0B * 圆角 6 / 10 / 14 / 999 阴影 三级 * ------------------------------------------------------------------ */ /* 特性保护：不支持 CSS 自定义属性（如 IE11）的浏览器整体跳过本主题， 直接沿用原站样式，避免出现"半新半旧"的错乱效果。 */ @supports (--rts: 1) { /* ============================================================ 1. 设计令牌 ============================================================ */ :root { /* 品牌色 */ --c-primary: #00923F; --c-primary-dark: #007A34; --c-primary-darker: #01622B; --c-primary-light: #E8F6EE; --c-primary-lighter: #F3FBF6; --c-primary-grad: linear-gradient(135deg, #00A94B 0%, #007A33 100%); --c-accent: #F59E0B; --c-accent-light: #FEF6E7; --c-danger: #E5484D; /* 中性色 */ --c-ink: #0F1729; --c-ink-2: #344054; --c-text: #475467; --c-text-2: #667085; --c-muted: #98A2B3; --c-line: #EAECF0; --c-line-2: #F2F4F7; --c-bg: #F5F7FA; --c-bg-2: #FAFBFC; --c-white: #fff; /* 目录类标签（大菜单标签云 / 服务页分类树）的文字色。 原站 global.css 里有两条规则： .leftmenu dl dd a.c { color:#00923F } .service li .tree dd a.c { color:#00923F } CMS 只给一部分条目加了 .c，于是同一排里「有的绿、有的灰」。 本主题把带 .c 与不带 .c 的一起覆盖，统一成同一种颜色。 现值 var(--c-primary) = 全部品牌绿，与原站设计意图一致， 也与「我们的服务」页分类树的颜色统一。 ▸ 若想改成更冷淡的中性灰，把下一行换成 var(--c-text) 即可。 */ --c-tag: var(--c-primary); /* 圆角 */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* 阴影 */ --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --sh-2: 0 4px 16px rgba(16, 24, 40, .08); --sh-3: 0 12px 32px rgba(16, 24, 40, .12); --sh-primary: 0 6px 18px rgba(0, 146, 63, .22); /* 动效 */ --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: .18s var(--ease); --t: .28s var(--ease); --w-container: 1226px; } /* ============================================================ 2. 基础排版与全局细节 ============================================================ */ body { background-color: var(--c-bg); color: var(--c-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--c-ink-2); transition: color var(--t-fast); } a:hover { color: var(--c-primary); } h1, h2, h3, h4, h5 { color: var(--c-ink); font-weight: 600; } /* 选中态与滚动条 */ ::selection { background: rgba(0, 146, 63, .16); color: var(--c-ink); } * { scrollbar-width: thin; scrollbar-color: #CDD5DF transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #CDD5DF; border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #A9B4C2; background-clip: content-box; } /* 键盘可达性：仅在键盘操作时显示焦点圈 */ :focus-visible { outline: 2px solid rgba(0, 146, 63, .55); outline-offset: 2px; border-radius: var(--r-xs); } /* 全局过渡（只给常用交互元素，避免影响性能） */ .btn-main, .btn-second, .layui-btn, .pagination li, .nav_item, .index_list li, .list-article > li, .ads img, .module, .index_module, #toolbar > a, .classify .bd li, .form-message input, .form-message textarea { -webkit-transition: all var(--t); transition: all var(--t); } /* ============================================================ 3. 顶部信息条 header ============================================================ */ .header { height: 150px; background-color: var(--c-white); box-shadow: 0 1px 0 rgba(16, 24, 40, .06); /* 修复：必须高于导航（.nav z-index:40）， 否则搜索框的 layui 下拉面板会被导航盖住看不见 */ z-index: 41; } .header .loginbar, .header .toolbar { height: 34px; line-height: 34px; font-size: 12.5px; color: var(--c-text-2); } .header .toolbar li, .header .loginbar li { color: var(--c-text-2); margin: auto 7px; } .header .loginbar a, .header .toolbar a { color: var(--c-text-2); } .header .loginbar a:hover, .header .toolbar a:hover { color: var(--c-primary); } .header .line { height: 34px; background-color: #F7F9FB; border-bottom: 1px solid var(--c-line-2); } .header .fa-wechat { color: #07C160; } /* 下拉二维码 */ .header .dropdown-main { margin-top: 4px; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; } .header .dropdown-main img { border-radius: var(--r-sm); display: block; } /* 搜索区 */ .header .search { left: 296px; top: 72px; width: 400px; } .header .search input[name="keyword"] { width: 190px; height: 44px; line-height: 44px; padding: 0 14px; font-size: 14px; color: var(--c-ink); border: 1px solid var(--c-line); border-left: none; border-right: none; background-color: var(--c-white); box-shadow: inset 0 1px 0 rgba(16, 24, 40, .02); } .header .search input[name="keyword"]:focus { border-color: var(--c-line); box-shadow: none; } .header .search .layui-form-select { width: 92px; height: 44px; background-color: #F8FAFC; text-indent: 14px; border: 1px solid var(--c-line); border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); position: relative; z-index: 3; /* 修复：这里不能有 overflow:hidden。 layui 的下拉面板 dl 是 .layui-form-select 的绝对定位子元素， 一旦父级裁切，下拉面板就整个看不见了（上一版的回归 bug）。 */ overflow: visible; } /* 下拉面板本体：加宽、圆角、阴影，并保证层级高于搜索框 */ .header .search .layui-form-select dl { left: -1px; top: 46px; min-width: 112px; padding: 6px; border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-3); z-index: 1200; } .header .search .layui-form-select dl dd { height: 34px; line-height: 34px; font-size: 13.5px; color: var(--c-text); padding: 0 10px; } .header .search .layui-form-select .layui-input { height: 42px; background-color: transparent; border: none; font-size: 14px; color: var(--c-ink-2); padding-left: 0; } .header .search .layui-form-select .layui-edge { right: 10px; } .header .search button { width: 56px; height: 44px; margin-left: 0; background: var(--c-primary-grad); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 16px; box-shadow: var(--sh-primary); border: 1px solid transparent; } .header .search button:hover { filter: brightness(1.06); } /* 搜索框整体描边效果：用阴影模拟一个整体外框 */ .header .search form { display: flex; align-items: center; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--c-line), var(--sh-1); background-color: var(--c-white); overflow: visible; } .header .search form:hover { box-shadow: 0 0 0 1px #D5DBE3, var(--sh-2); } /* 电话 */ .header .phone { right: 14px; top: 58px; } .header .phone i { font-size: 26px; color: var(--c-primary); opacity: .9; margin-top: 6px; } .header .phone span { color: var(--c-ink); font-size: 22px; font-weight: 700; letter-spacing: .3px; } .header .phone div { color: var(--c-muted); font-size: 12px; letter-spacing: .5px; } /* 报告查询按钮 */ .header .authenticity { right: 14px; top: 104px; } .header .authenticity a { padding: 5px 14px; font-size: 12px; color: var(--c-text-2); background-color: #F8FAFC; border: 1px solid var(--c-line); border-radius: var(--r-pill); margin-left: 6px; } .header .authenticity a:hover { color: var(--c-primary); border-color: rgba(0, 146, 63, .4); background-color: var(--c-primary-lighter); } /* ============================================================ 4. 主导航 nav（含吸顶） ============================================================ */ .nav { height: 52px; background: var(--c-primary-grad); box-shadow: 0 4px 14px rgba(0, 60, 28, .18); z-index: 40; } .nav.is-stuck { position: sticky; top: 0; z-index: 60; box-shadow: 0 6px 20px rgba(0, 60, 28, .24); } /* 吸顶后仍需保持「悬停展开」的手感，此处无需额外规则， 服务分类在吸顶状态下会自动跟随导航浮层。 */ .all { height: 52px; line-height: 52px; width: 210px; background-color: rgba(0, 0, 0, .16); font-weight: 600; letter-spacing: .5px; } .all:after { content: "\f0c9"; font-family: FontAwesome; font-size: 13px; margin-left: 8px; opacity: .85; } .all a { font-size: 16px; } .all:hover { background-color: rgba(0, 0, 0, .26); } /* 主导航项 */ .nav-main { left: 214px; width: auto; background: transparent; } .nav-main > li { margin: 0 1px; } .nav-main > li > a { width: auto; padding: 0 18px; height: 52px; line-height: 52px; font-size: 15.5px; border-radius: 0; position: relative; transition: background-color var(--t-fast); } .nav-main > li > a:after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 0; height: 2px; background-color: #fff; border-radius: 2px; transform: translateX(-50%); transition: width var(--t); } .nav-main > li:hover > a { background-color: rgba(255, 255, 255, .12); } .nav-main > li:hover > a:after { width: 26px; } /* 导航二级下拉 */ .nav-main ul.sub-menu { min-width: 160px; padding: 8px; border: 1px solid var(--c-line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-3); background-color: var(--c-white); overflow: hidden; } .nav-main ul.sub-menu a { border-radius: var(--r-sm); } .nav-main > li:hover ul.sub-menu a { color: var(--c-ink-2); } .sub-menu li { width: auto; height: 40px; line-height: 40px; border-radius: var(--r-sm); color: var(--c-text); transition: background-color var(--t-fast), color var(--t-fast); } .sub-menu li a { padding: 0 14px; white-space: nowrap; } .sub-menu li:hover { background-color: var(--c-primary-light); } .sub-menu li:hover a { color: var(--c-primary-dark) !important; } /* ============================================================ 5. 服务大菜单（mega menu） ============================================================ */ .service_nav { width: 210px; } /* 修复：index.css 里有一句 `.service_nav > ul{display:block}`， 导致一进首页「我们的服务」的分类列表就常驻展开、像卡住的下拉菜单。 这里改为默认收起，鼠标悬停「我们的服务」时才浮出。 */ .service_nav > ul { display: none; padding: 6px 0; background-color: var(--c-white); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-3); max-height: 70vh; overflow-y: auto; overflow-x: visible; } .service_nav:hover > ul { display: block; } .nav_item { width: 100%; box-sizing: border-box; height: 42px; line-height: 42px; padding: 0 16px; background-color: transparent; box-shadow: none; border-bottom: 1px solid var(--c-line-2); transition: padding-left var(--t-fast), color var(--t-fast); } .nav_item:last-child { border-bottom: none; } .nav_item > a { font-size: 15px; color: var(--c-ink-2); } .nav_item:after { content: "\f105"; font-family: FontAwesome; color: var(--c-muted); font-size: 15px; } .nav_item:hover { background-color: var(--c-primary-light); padding-left: 20px; } .nav_item:hover > a { color: var(--c-primary-dark); font-weight: 600; } /* 触屏点击展开（配合 theme-v2.js 的 rts-open）： 原站这两个下拉都只绑了 :hover，触屏点不出来。 这里给「点击展开态」补上同等的显示规则，鼠标端不受影响。 */ .header .service_nav .nav_item.rts-open > .sub_menu, .nav-main > li.rts-open > ul.sub-menu { display: block; } /* 右侧大面板 */ .sub_menu { width: 1000px; left: 210px; top: -8px; padding: 22px 26px; background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); max-height: 76vh; overflow-y: auto; box-sizing: border-box; } ul li:hover .sub_menu { box-shadow: var(--sh-3); } .leftmenu { width: 100%; float: none; } .leftmenu dl { margin-left: 0; border-bottom: 1px dashed var(--c-line); padding-bottom: 12px; margin-bottom: 14px; } .leftmenu dl:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .leftmenu dl dt { font-size: 15px; padding: 0 0 8px 0; color: var(--c-ink); font-weight: 600; } .leftmenu dl dt a { color: var(--c-ink); position: relative; padding-left: 12px; } .leftmenu dl dt a:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--c-primary); } .leftmenu dl dt a:hover { color: var(--c-primary); } .leftmenu dl dd { line-height: 1; margin-top: 4px; } /* 把密密麻麻的宽条目改成“标签云”，更紧凑、更易扫读 */ .leftmenu dl dd span { width: auto; min-width: 0; margin: 0 8px 8px 0; padding: 0; background-color: #F8FAFC; border: 1px solid var(--c-line); border-radius: var(--r-pill); transition: all var(--t-fast); } .leftmenu dl dd span:hover { border-color: rgba(0, 146, 63, .45); background-color: var(--c-primary-lighter); transform: translateY(-1px); } /* 注意：必须同时写 .c 变体。原站 `.leftmenu dl dd a.c`（0,2,3） 特异性高于 `.leftmenu dl dd a`（0,1,3），只覆盖后者会漏掉带 .c 的条目， 造成「有绿有灰」的混排。写了同选择器后靠引入顺序取胜。 */ .leftmenu dl dd a, .leftmenu dl dd a.c { float: none; display: inline-block; height: auto; line-height: 1.5; padding: 7px 14px; font-size: 13px; color: var(--c-tag); max-width: 240px; } .leftmenu dl dd a:hover, .leftmenu dl dd a.c:hover { color: var(--c-primary-dark); } /* 「我们的服务」页的分类树同理：原站 `.service li .tree dd a.service_url` 与 `.service li .tree dd a.c` 把标签染成品牌绿，这里一并统一。 */ .service li .tree dd a, .service li .tree dd a.service_url, .service li .tree dd a.c { color: var(--c-tag); } .service li .tree dd a:hover, .service li .tree dd a.service_url:hover, .service li .tree dd a.c:hover { color: var(--c-primary-dark); } .leftmenu dl dd .fa { color: var(--c-primary); } .rightmenu { display: none !important; } /* ============================================================ 6. 按钮 ============================================================ */ .btn-main { height: 42px; line-height: 42px; min-width: 110px; padding: 0 22px; font-size: 14.5px; font-weight: 500; color: var(--c-white); background: var(--c-primary-grad) !important; border: none; border-radius: var(--r-sm); box-shadow: var(--sh-primary); text-align: center; } .btn-main:hover { color: var(--c-white); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 146, 63, .3); } .btn-main:active { transform: translateY(0); } .btn-second { height: 42px; line-height: 40px; padding: 0 22px; font-size: 14.5px; color: var(--c-primary-dark); background-color: var(--c-white); border: 1px solid rgba(0, 146, 63, .35); border-radius: var(--r-sm); } .btn-second:hover { color: var(--c-primary-dark); background-color: var(--c-primary-lighter); border-color: var(--c-primary); } .btn-main.layui-btn-fluid, .btn-second.layui-btn-fluid { width: 100%; box-sizing: border-box; display: block; } /* ============================================================ 7. 通用卡片 / 模块 ============================================================ */ .module { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; margin-bottom: 16px; } .module > .hd { border-bottom: 1px solid var(--c-line-2); padding: 0 18px; min-height: 46px; line-height: 46px; color: var(--c-text-2); background-color: var(--c-white); position: relative; font-size: 14px; } .module > .hd > span { color: var(--c-ink); font-size: 16px; font-weight: 600; line-height: 46px; height: auto; vertical-align: middle; position: relative; padding-left: 12px; } .module > .hd > span:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 2px; background: var(--c-primary); } .module > .hd > span a { font-size: 13px; font-weight: 400; } .module > .hd > small { font-size: 12px; color: var(--c-muted); font-style: normal; padding: 0 8px; vertical-align: middle; letter-spacing: .4px; } .module > .hd > a { color: var(--c-text-2); font-size: 13px; margin: 0 0 0 10px; } .module > .hd > a:hover { color: var(--c-primary); } .module > .bd { padding: 18px; overflow: hidden; } /* 面包屑 */ .location { padding: 0; margin: 16px 0 14px; font-size: 13px; color: var(--c-text-2); } .location > li { display: inline-block; color: var(--c-text-2); } .location > li > a { color: var(--c-text-2); padding: 2px 0; } .location > li > a:hover { color: var(--c-primary); } .location > li + li + li:before { content: "\f105"; font-family: FontAwesome; color: #C4CDD9; margin: 0 8px; } /* ============================================================ 8. 首页第一屏 ============================================================ */ /* ---- 布局改版：第一屏改为「大图主视觉 + 右侧信息栏」 ---- 原来左侧被常驻展开的服务分类占去 210px，把首屏挤成了三栏。 分类收起后，这块宽度让给主视觉，比例更接近现代官网。 */ .s3m0e3 { margin-bottom: 20px; } .s3m0e3 > .main { margin-left: 0; } .s3m0e3 .banner, .s3m0e3 .slideBox { width: 100%; height: 420px; } .s3m0e3 .slideBox .bd, .s3m0e3 .slideBox .bd ul { height: 420px; } .banner { margin-bottom: 0; } .slideBox { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); background-color: var(--c-white); } .slideBox .bd li { height: 420px; } .slideBox .bd li img { display: block; width: 100%; height: 420px; object-fit: cover; } /* 轮播底部标签：主视觉变宽后图片偏亮，这里加深底衬保证文字可读 */ .slideBox .hd { background: linear-gradient(to top, rgba(9, 20, 14, .78) 0%, rgba(9, 20, 14, .42) 52%, rgba(9, 20, 14, 0) 100%); padding-top: 56px; } .slideBox .hd ul { padding: 0 14px 14px; } .slideBox .hd li { height: 40px; line-height: 40px; font-size: 14px; background: rgba(15, 23, 41, .55); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-sm); margin-right: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color var(--t-fast); } .slideBox .hd li:last-child { margin-right: 0; } .slideBox .hd li a { font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .slideBox .hd li:hover { background: rgba(0, 146, 63, .75); } .slideBox .hd li.on { background: var(--c-primary); box-shadow: 0 4px 12px rgba(0, 146, 63, .35); } /* 左右箭头：用 CSS 圆形按钮替代原图片箭头 */ .slideBox .prev, .slideBox .next { left: 14px; top: 50%; margin-top: -21px; width: 42px; height: 42px; border-radius: 50%; background: rgba(15, 23, 41, .42) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t), background-color var(--t-fast); display: flex; align-items: center; justify-content: center; } .slideBox .next { left: auto; right: 14px; } .slideBox:hover .prev, .slideBox:hover .next { opacity: 1; } .slideBox .prev:after, .slideBox .next:after { content: "\f104"; font-family: FontAwesome; color: #fff; font-size: 20px; line-height: 1; } .slideBox .next:after { content: "\f105"; } .slideBox .prev:hover, .slideBox .next:hover { background: var(--c-primary) !important; } /* 侧栏：登录卡片 */ .index-user { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 18px; } .index-user h3 { font-size: 16px; color: var(--c-ink); display: flex; align-items: center; gap: 8px; } .index-user h3 .fa { color: var(--c-primary); font-size: 18px; } .index-user .welcome { color: var(--c-text-2); font-size: 13px; line-height: 1.6; } .index-user .mt10 { margin-top: 10px; } /* 首屏右侧「热点资讯」 */ .module.mt10 > .bd { padding: 10px 14px 14px; } .list-title li { padding: 9px 0; border-bottom: 1px dashed var(--c-line); color: var(--c-text); font-size: 13.5px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .list-title li:last-child { border-bottom: none; } .list-title li span { color: var(--c-primary-dark); background-color: var(--c-primary-light); font-size: 12px; padding: 1px 7px; border-radius: var(--r-xs); margin-right: 6px; white-space: nowrap; } .list-title li a { color: var(--c-ink-2); } .list-title li:hover a { color: var(--c-primary); } /* ============================================================ 9. 首页服务模块（index_module） ============================================================ */ .index_module { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; margin-top: 16px !important; } .index_module .hd { height: 64px; line-height: 64px; padding: 0 20px; border-bottom: 1px solid var(--c-line-2); background: linear-gradient(180deg, #FCFDFE 0%, #FFFFFF 100%); display: flex; align-items: center; } .index_module .hd span.icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 10px; border-radius: var(--r-sm); background: var(--c-primary-light); line-height: 1; } .index_module .hd span.icon i { font-size: 15px; color: var(--c-primary); } .index_module .hd > span { font-size: 19px; font-weight: 700; color: var(--c-ink); letter-spacing: .3px; flex-shrink: 0; } /* 标签页：改为胶囊，且支持点击（原站仅 hover） */ .index_module .hd ul.tab { position: static; margin: 0 0 0 26px; right: auto; top: auto; padding: 0; flex: 1; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; } .index_module .hd ul.tab:empty { display: none; } .index_module .hd ul li { display: inline-block; margin: 0 4px; padding: 0 14px; height: 32px; line-height: 32px; font-size: 14px; color: var(--c-text-2); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: all var(--t-fast); } .index_module .hd ul li:hover { color: var(--c-primary-dark); background-color: var(--c-primary-lighter); } .index_module .hd ul li.active { color: var(--c-white); background: var(--c-primary-grad); box-shadow: 0 4px 12px rgba(0, 146, 63, .28); font-weight: 500; } .index_module .hd a { position: static; margin-left: auto; color: var(--c-text-2); font-size: 13px; flex-shrink: 0; } .index_module .hd a:after { content: "\f105"; font-family: FontAwesome; margin-left: 5px; transition: margin var(--t-fast); } .index_module .hd a:hover { color: var(--c-primary); } .index_module .hd a:hover:after { margin-left: 9px; } .index_module .bd { min-height: 0; padding: 0; } /* 左侧广告位 */ .index_module .bd .item .ads { width: 300px; height: auto; min-height: 420px; border-radius: var(--r-md); overflow: hidden; margin: 16px; position: relative; background-color: #EEF2F6; box-shadow: var(--sh-1); } .index_module .bd .item .ads img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .index_module .bd .item .ads:hover img { transform: scale(1.06); } .index_module .bd .item .ads:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 30, 18, .5) 0%, rgba(6, 30, 18, 0) 42%, rgba(6, 30, 18, .35) 100%); z-index: 1; pointer-events: none; } .index_module .bd .item .ads .name { z-index: 2; font-size: 24px; font-weight: 700; top: 22px; left: 20px; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .index_module .bd .item .ads .description { z-index: 2; font-size: 14px; top: 58px; left: 21px; opacity: .9; } .index_module .bd .item .ads a { z-index: 2; width: 128px; height: 40px; line-height: 40px; bottom: 24px; left: 20px; border: none; border-radius: var(--r-sm); background-color: rgba(255, 255, 255, .92); color: var(--c-primary-dark); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all var(--t-fast); } .index_module .bd .item .ads a:hover { background-color: var(--c-primary); color: #fff; } /* 说明：原站靠 .index_list ul{height:410px} 硬撑高度，列表项是浮动元素， 一旦条目数变化就会被裁切。这里改成 flex 让高度由内容决定。 */ .index_module .bd > .item { overflow: hidden; } .index_module .bd .item .index_list { margin-left: 332px; padding: 16px 16px 16px 0; box-sizing: border-box; } .item .index_list ul { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; } .item .index_list li { width: auto; float: none; padding: 14px; height: auto; border-radius: var(--r-md); border: 1px solid transparent; } .item .index_list li:hover { top: 0; background-color: var(--c-white); border-color: var(--c-line); box-shadow: var(--sh-2); transform: translateY(-2px); } .item .index_list li h2 { padding: 0 0 6px; height: auto; line-height: 1.5; font-size: 15px; font-weight: 600; color: var(--c-ink); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 45px; } .item .index_list li a:hover h2 { color: var(--c-primary); } .item .index_list li .pic { margin-top: 0; height: 118px; border-radius: var(--r-sm); overflow: hidden; background-color: #F2F5F8; } .item .index_list li .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); } .item .index_list li:hover .pic img { transform: scale(1.06); } .item .index_list li .tabs { margin: 0 0 6px; padding: 0; } .item .index_list li .tabs span { font-size: 12px; color: #B54708; background: var(--c-accent-light); border-radius: var(--r-xs); height: 22px; line-height: 22px; padding: 0 8px; margin-right: 6px; } /* 底部指示点 */ .index_module .ft { min-height: 0; line-height: 1; text-align: center; border-bottom: none; padding: 0 0 18px; } .index_module .ft:empty { display: none; } .index_module .ft span { width: 9px; height: 9px; border: none; background-color: #D8DEE7; margin: 0 4px; vertical-align: middle; transition: all var(--t); } .index_module .ft span.active { width: 26px; border-radius: var(--r-pill); background: var(--c-primary-grad); } /* ---- 布局改版：下面 6 个分类模块（.index_module 但不带 .slide） 原来 6 张一模一样的白卡上下堆叠，视觉上非常"表格化"。 这里去掉卡片外壳，改成「章节标题 + 一条细线 + 内容卡」的编辑式排版， 每个分类成为一个章节，整页节奏更清楚。 ---- */ .index_module:not(.slide) { background-color: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; margin-top: 42px !important; } .index_module:not(.slide) > .hd { height: auto; line-height: 1.4; padding: 0 0 16px; background: transparent; border-bottom: 1px solid var(--c-line); } .index_module:not(.slide) > .hd > span { font-size: 23px; font-weight: 700; letter-spacing: .3px; } .index_module:not(.slide) > .hd span.icon { width: 38px; height: 38px; margin-right: 12px; } .index_module:not(.slide) > .hd span.icon i { font-size: 17px; } .index_module:not(.slide) > .hd a { font-size: 14px; } .index_module:not(.slide) > .bd { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-top: 18px; overflow: hidden; } .index_module:not(.slide) .bd .item .ads { width: 262px; margin: 14px; } .index_module:not(.slide) .bd .item .index_list { margin-left: 290px; padding: 14px 14px 14px 0; } /* ============================================================ 10. 首页资讯模块（index_article） ============================================================ */ .index_article { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; margin-top: 16px !important; } .index_article .hd { height: 64px; line-height: 64px; margin-bottom: 0; padding: 0 20px; border-bottom: 1px solid var(--c-line-2); background: linear-gradient(180deg, #FCFDFE 0%, #FFFFFF 100%); } .index_article .hd ul { text-align: left; display: flex; align-items: center; height: 100%; } .index_article .hd li { font-size: 15px; font-weight: 500; color: var(--c-text-2); margin: 0 4px; padding: 0 16px; height: 34px; line-height: 34px; border-radius: var(--r-pill); transition: all var(--t-fast); } .index_article .hd li:first-child { margin-left: 0; } .index_article .hd li:hover { color: var(--c-primary-dark); background-color: var(--c-primary-lighter); } .index_article .hd li.active { color: var(--c-white); background: var(--c-primary-grad); box-shadow: 0 4px 12px rgba(0, 146, 63, .28); } .index_article .bd { height: auto; min-height: 320px; padding: 20px; } .index_article .bd .item { animation: rtsFadeUp .4s var(--ease); } .index_pic { border-radius: var(--r-md); margin-right: 12px; position: relative; } .index_pic .box { height: 330px; } .index_pic .box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .index_pic:hover .box img { transform: scale(1.04); } /* 资讯大图上的信息条：用半透明实底，避免和图片自带文字互相干扰 */ .index_pic .infobox { background: rgba(9, 20, 14, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .1); z-index: 2; padding: 14px 18px; width: 100%; box-sizing: border-box; } .index_pic .infobox h1 { font-size: 16px; line-height: 1.45; margin-bottom: 6px; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .index_pic .infobox p { color: rgba(255, 255, 255, .75); font-size: 12.5px; line-height: 1.6; -webkit-line-clamp: 1; } .index_info { margin-left: 12px; background-color: transparent; border: 1px solid var(--c-line-2); border-radius: var(--r-md); overflow: hidden; } .index_info li { padding: 0 14px; font-size: 14px; background-color: var(--c-white); border-bottom: 1px solid var(--c-line-2); align-items: center; } .index_info li:last-child { border-bottom: none; } .index_info li.li-even { background-color: #FAFBFC; } .index_info li:hover { background-color: var(--c-primary-lighter); } .index_info li span { height: 48px; line-height: 48px; width: 96px; color: var(--c-muted); font-size: 12.5px; text-align: left; font-variant-numeric: tabular-nums; } .index_info li a { height: 48px; line-height: 48px; width: auto; flex: 1; color: var(--c-ink-2); font-size: 14px; } .index_info li:hover a { color: var(--c-primary); } /* ============================================================ 11. 合作伙伴 ============================================================ */ .index_link { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding-bottom: 8px; margin-top: 16px; } .index_link .hd { text-align: center; font-size: 20px; font-weight: 700; color: var(--c-ink); line-height: 1; height: auto; padding: 28px 0 22px; border-bottom: 1px solid var(--c-line-2); letter-spacing: .5px; } .index_link .hd span:last-child { display: block; font-size: 12px; font-weight: 400; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; } .index_link .bd ul { padding: 16px 10px 0; } .index_link .bd li { width: 16.6%; margin-bottom: 10px; align-items: center; border-radius: var(--r-sm); transition: background-color var(--t-fast); } .index_link .bd li:hover { background-color: #F8FAFC; } /* 修复：这里原本被加了 grayscale 灰度滤镜， 合作方 LOGO 显示成黑白，已去掉，恢复彩色 */ .index_link .bd li img { max-width: 150px; max-height: 62px; object-fit: contain; transition: transform var(--t); } .index_link .bd li:hover img { transform: scale(1.06); } /* ============================================================ 12. 列表页：侧栏分类 + 文章列表 ============================================================ */ .classify { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--c-line); } .classify .hd { height: 108px; background: var(--c-primary-grad); color: #fff; text-align: left; padding: 0 20px; position: relative; overflow: hidden; display: flex; align-items: center; } .classify .hd:after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .08); } .classify .hd .name h1 { margin: 0 0 4px; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: .5px; white-space: normal; } .classify .hd .name div { font-size: 12px; color: rgba(255, 255, 255, .78); letter-spacing: 1px; text-transform: uppercase; } .classify .bd { background-color: var(--c-white); overflow: hidden; padding: 8px 0; } .classify .bd ul { margin: 0; } .classify .bd li { text-indent: 0; line-height: 1; height: auto; border-bottom: none; padding: 0 16px; position: relative; } .classify .bd li > a { display: block; padding: 12px 12px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--c-text); position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .classify .bd li > a:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 16px; border-radius: 2px; background: var(--c-primary); transition: width var(--t-fast); } .classify .bd li:hover > a { background-color: #F8FAFC; color: var(--c-ink); padding-left: 18px; } .classify .bd li.on > a, .classify .bd li.active > a { background-color: var(--c-primary-light); color: var(--c-primary-dark); font-weight: 600; padding-left: 18px; } .classify .bd li.on > a:before, .classify .bd li.active > a:before { width: 3px; } .classify .bd dl { padding-left: 0; } .classify .bd dd { padding: 8px 16px; } /* 部分页面（如联系我们）侧栏分类是空列表，隐藏空容器，避免留一块白板。 :has() 属于渐进增强，旧浏览器不支持时保持原样。 */ .classify .bd:not(:has(li)) { display: none; } /* 文章列表 */ .list-article > li { padding: 18px 0; border-bottom: 1px solid var(--c-line-2); margin-bottom: 0; overflow: hidden; } .list-article > li:first-child { padding-top: 4px; } .list-article > li:hover { background-color: #FCFDFE; } .list-article.dotted > li, .dotted li { border-bottom: 1px solid var(--c-line-2); } /* 缩略图统一尺寸：解决原站图片高低不一导致的锯齿感 */ .pic-article, .pic-service, .pic-mall, [class*="pic-"] { width: 168px; height: 108px; border-radius: var(--r-sm); overflow: hidden; background-color: #F2F5F8; flex-shrink: 0; display: block; } .pic-article img, [class*="pic-"] img { width: 100%; height: 100%; object-fit: cover; display: block; } .list-article > li .info { padding: 0 0 0 6px; background-color: transparent; } .list-article > li h2 { font-size: 16px; font-weight: 600; height: auto; line-height: 1.5; margin-bottom: 6px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; } .list-article > li h2 a { color: var(--c-ink); } .list-article > li:hover h2 a { color: var(--c-primary); } .list-article > li p { color: var(--c-text-2); font-size: 13.5px; line-height: 1.7; height: auto; -webkit-line-clamp: 2; margin-bottom: 8px; overflow-wrap: anywhere; } .list-article > li label { display: flex; align-items: center; gap: 14px; margin-top: 0; } .list-article > li label span { color: var(--c-muted); font-size: 12.5px; margin-right: 0; display: inline-flex; align-items: center; gap: 5px; } .list-article > li label span:before { content: "\f017"; font-family: FontAwesome; font-size: 12px; color: #C4CDD9; } .list-article > li label span:last-child:before { content: "\f06e"; } /* 服务列表（卡片网格） */ .list-service li { background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 14px; margin-bottom: 14px; box-shadow: var(--sh-1); } .list-service li:hover { box-shadow: var(--sh-2); border-color: rgba(0, 146, 63, .3); transform: translateY(-2px); } .list-service li h2 { font-size: 15px; height: auto; line-height: 1.5; font-weight: 600; white-space: normal; margin-bottom: 8px; } .buyicon { left: auto; right: 12px; top: 12px; border-radius: var(--r-pill); height: 24px; line-height: 24px; width: auto; padding: 0 10px; font-size: 12px; background: var(--c-primary-grad); } /* 资质/图片列表 */ .list_images li { padding: 8px; } .list_images .images, .list_images .images a, .list_images .honor { width: 100%; height: 230px; display: flex; align-items: center; justify-content: center; background-color: #FAFBFC; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 10px; box-sizing: border-box; transition: all var(--t); } .list_images li:hover .images, .list_images li:hover .honor { border-color: rgba(0, 146, 63, .35); box-shadow: var(--sh-2); } .list_images img { max-width: 100%; max-height: 100%; object-fit: contain; } .list_images h2 { font-size: 14px; height: auto; line-height: 1.5; padding: 10px 4px 4px; color: var(--c-ink-2); font-weight: 500; } /* 下载列表 */ .list_download li .info { background-color: #FAFBFC; border: 1px solid var(--c-line); border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); height: 92px; width: calc(100% - 150px); } .list_download li .download { background-color: var(--c-primary-lighter); border: 1px solid var(--c-line); border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; height: 92px; } /* 分页 */ .pagination { padding: 22px 10px; text-align: center; } .pagination li { float: none; display: inline-block; border: 1px solid var(--c-line); border-radius: var(--r-sm); margin: 0 3px; background-color: var(--c-white); vertical-align: middle; } .pagination li:hover { border-color: rgba(0, 146, 63, .45); } .pagination li span, .pagination li a { padding: 8px 13px; font-size: 13.5px; color: var(--c-text); } .pagination li.active { background: var(--c-primary-grad); border-color: transparent; box-shadow: 0 4px 12px rgba(0, 146, 63, .25); } .pagination li.active span, .pagination li.active a { color: #fff; } .pagination li.disabled { color: #CBD3DD; background-color: #FAFBFC; } /* 筛选 */ .screen { margin: 16px 0 0; background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 12px 18px; } .screen dd a { padding: 4px 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line); color: var(--c-text); background-color: #FAFBFC; } .screen dd a:hover, .screen dd a.on { color: var(--c-primary-dark); border-color: rgba(0, 146, 63, .45); background-color: var(--c-primary-lighter); } /* ============================================================ 13. 详情页 ============================================================ */ .detail-service h1, [class*="detail-"] h1.title { font-size: 26px; line-height: 1.4; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line-2); } [class*="detail-"] small { margin-top: 0; display: flex; flex-wrap: wrap; gap: 18px; text-align: left; padding-bottom: 18px; } [class*="detail-"] small span { color: var(--c-text-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } [class*="detail-"] small span:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: var(--c-primary); opacity: .6; } .detail-service .description { margin-top: 0; color: var(--c-text-2); font-size: 14px; line-height: 1.7; } .detail-service .banner { margin-top: 0; height: auto; max-height: 340px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; box-shadow: var(--sh-1); } .detail-service .link { border: 1px solid var(--c-line); border-radius: var(--r-md); background-color: #FAFBFC; margin-top: 18px; padding: 4px 16px; display: flex; align-items: center; flex-wrap: wrap; } .detail-service .link li { font-size: 14px; height: 44px; line-height: 44px; } .detail-service .link a.current { color: var(--c-primary); font-weight: 600; } /* 正文小标题 */ [name="title-"], [name*="title-"] { border-left: none; text-indent: 0; font-size: 18px; height: auto; line-height: 1.5; font-weight: 700; color: var(--c-ink); margin: 34px 0 16px; padding-left: 14px; position: relative; display: block; letter-spacing: .2px; } [name="title-"]:before, [name*="title-"]:before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--c-primary-grad); } .summary { margin: 0 0 20px; line-height: 1.8; color: var(--c-ink-2); font-size: 14.5px; background-color: var(--c-primary-lighter); border: 1px solid #DCEFE4; border-left: 4px solid var(--c-primary); border-radius: var(--r-sm); padding: 14px 18px; flex: none; } /* 富文本正文 */ .content { line-height: 1.85; margin: 0; font-size: 15px; color: var(--c-text); overflow-wrap: anywhere; } .content p { margin: 0 0 14px; } .content img { margin: 16px auto; width: auto; max-width: 100%; height: auto; display: block; border-radius: var(--r-md); box-shadow: var(--sh-1); } .content a { text-decoration: none; color: var(--c-primary); border-bottom: 1px solid rgba(0, 146, 63, .35); } .content a:hover { color: var(--c-primary-dark); border-bottom-color: var(--c-primary-dark); } .content strong, .content b { color: var(--c-ink); font-weight: 600; } .content h1, .content h2, .content h3, .content h4 { margin: 26px 0 12px; line-height: 1.5; } .content h1 { font-size: 21px; } .content h2 { font-size: 19px; } .content h3 { font-size: 17px; } .content h4 { font-size: 15.5px; } .content ul, .content ol { margin: 0 0 16px; padding-left: 22px; } .content li { margin-bottom: 6px; } .content ul li { list-style: none; position: relative; padding-left: 2px; } .content ul li:before { content: ""; position: absolute; left: -14px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--c-primary); opacity: .7; } .content ol li { list-style: decimal; } .content blockquote { margin: 16px 0; padding: 12px 18px; background-color: #FAFBFC; border-left: 4px solid var(--c-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-text-2); } .content hr { border: none; border-top: 1px solid var(--c-line); margin: 24px 0; } /* 富文本表格：原站是无样式裸表格，这里统一成规范数据表 */ .content table { font-size: 14px; width: 100% !important; border-collapse: separate; border-spacing: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; margin: 18px 0; } .content table td, .content table th { padding: 10px 14px; border-bottom: 1px solid var(--c-line-2); border-right: 1px solid var(--c-line-2); line-height: 1.6; } .content table td:last-child, .content table th:last-child { border-right: none; } .content table tr:last-child td { border-bottom: none; } .content table tr:first-child td { background-color: #F7F9FC; color: var(--c-ink); font-weight: 600; } .content table tr:hover td { background-color: var(--c-primary-lighter); } .content table tr:first-child:hover td { background-color: #F7F9FC; } /* ============================================================ 14. 表单 ============================================================ */ .layui-input, .layui-textarea, input[type="text"], input[type="password"], input[type="tel"], select, textarea { border-radius: var(--r-sm); } .layui-input, .layui-textarea { border: 1px solid var(--c-line); color: var(--c-ink-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .layui-input:focus, .layui-textarea:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: rgba(0, 146, 63, .55) !important; box-shadow: 0 0 0 3px rgba(0, 146, 63, .12); outline: none; } .layui-input::placeholder, .layui-textarea::placeholder, input::placeholder, textarea::placeholder { color: #A9B4C2; } /* 侧栏留言表单 */ .form-message { width: 100%; box-sizing: border-box; background-color: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-primary); border-radius: var(--r-md); box-shadow: var(--sh-1); padding-bottom: 18px; } .form-message .hd, .form-message .bd { margin: 16px 18px; } .form-message .hd h3, .form-message .hd strong { font-size: 16px; color: var(--c-ink); } .form-message .hd p { margin-top: 8px; color: var(--c-accent); font-size: 12.5px; background-color: var(--c-accent-light); border-radius: var(--r-xs); padding: 5px 10px; display: inline-block; } .form-message .bd label { height: auto; line-height: 1.6; color: var(--c-text); font-size: 13.5px; display: block; margin-bottom: 6px; } .form-message .bd .item { margin-bottom: 14px; } .form-message .bd input[type="text"], .form-message .bd textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--c-line); background-color: #FAFBFC; font-size: 13.5px; height: auto; line-height: 1.5; } .form-message .bd input[type="text"]:focus, .form-message .bd textarea:focus { background-color: var(--c-white); } .form-message .btn-main { width: 100%; } /* layui 下拉 */ .layui-form-select dl { border-radius: var(--r-sm); border-color: var(--c-line); box-shadow: var(--sh-3); padding: 5px; } .layui-form-select dl dd { border-radius: var(--r-xs); line-height: 34px; } .layui-form-select dl dd.layui-this { background-color: var(--c-primary-light) !important; color: var(--c-primary-dark); font-weight: 600; } .layui-form-select dl dd:hover { background-color: #F5F7FA; } /* layui 弹层 */ .layui-layer { border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden; } .layui-layer-title { background-color: var(--c-white); border-bottom: 1px solid var(--c-line-2); color: var(--c-ink); font-weight: 600; } .layui-layer-btn { border-top: 1px solid var(--c-line-2); background-color: #FAFBFC; } .layui-layer-btn .layui-layer-btn0 { background-color: var(--c-primary) !important; border-color: var(--c-primary) !important; border-radius: var(--r-sm); } .layui-layer-btn a { border-radius: var(--r-sm); } /* ============================================================ 15. 页脚 ============================================================ */ .footer { background: linear-gradient(180deg, #1B2432 0%, #131A26 100%); color: #98A2B3; padding: 44px 20px 30px; margin-top: 30px; position: relative; } .footer:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c-primary-grad); opacity: .9; } .footer .layui-container { width: var(--w-container); margin: auto; } .footer a { color: #C3CBD8; transition: color var(--t-fast); } .footer a:hover { color: var(--c-primary); } .footer .footer-nav { line-height: 1; height: auto; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .footer .footer-nav li { display: inline-block; } .footer .footer-nav li a { margin-right: 0; padding: 0 14px; font-size: 14.5px; color: #E4E9F0; position: relative; display: inline-block; } .footer .footer-nav li:first-child a { padding-left: 0; } .footer .footer-nav li + li a:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: rgba(255, 255, 255, .16); } .footer .footer-nav li a:hover { color: #4ADE80; } .footer .mt15 { margin-top: 0; color: #98A2B3; font-size: 13.5px; line-height: 2; max-width: 760px; } .footer-copy { margin-top: 14px; } .footer-copy p { line-height: 1.9; height: auto; font-size: 12.5px; color: #8A94A4; } .footer-copy img { vertical-align: middle; margin: 0 4px; } .footer-copy font { color: #7C8798 !important; } .footer .fr img { background-color: #fff; padding: 6px; border-radius: var(--r-sm); box-shadow: var(--sh-2); } .footer .fr .mt10 { color: #C3CBD8; font-size: 12.5px; margin-top: 12px !important; } /* ============================================================ 16. 右侧悬浮工具条 & 在线咨询 ============================================================ */ #toolbar { position: fixed; left: auto; right: 18px; top: 50%; transform: translateY(-50%); margin-left: 0; width: auto; background-color: transparent; box-shadow: none; z-index: 30; display: flex; flex-direction: column; gap: 8px; } #toolbar > a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background-color: var(--c-white); box-shadow: var(--sh-2); border: 1px solid var(--c-line); position: relative; } #toolbar > a i { color: var(--c-text-2); padding-top: 0; font-size: 17px; } #toolbar > a:hover { background-color: var(--c-white); border-color: rgba(0, 146, 63, .35); transform: translateY(-2px); box-shadow: var(--sh-3); } #toolbar > a:hover i { color: var(--c-primary); } #toolbar > a .qrcode { left: auto; right: 58px; top: 0; width: 130px; height: 130px; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; background-color: #fff; background-clip: content-box; } #toolbar > a .phone { left: auto; right: 58px; top: 0; width: auto; white-space: nowrap; height: 46px; line-height: 46px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-3); font-size: 15px; font-weight: 600; color: var(--c-ink); } /* 在线咨询浮动按钮 */ .swim_message_open { bottom: 28px; right: 18px; width: 54px; height: 54px; border-radius: 50%; background: var(--c-primary-grad); box-shadow: 0 10px 24px rgba(0, 146, 63, .4); flex-direction: column; display: flex; align-items: center; justify-content: center; transition: all var(--t); } .swim_message_open:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(0, 146, 63, .48); } .swim_message_open i { font-size: 22px; margin: 0; line-height: 1; } .swim_message_open div { font-size: 11px; line-height: 1.4; height: auto; margin-top: 2px; } .swim_message_open:before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0, 146, 63, .45); animation: rtsPulse 2.4s infinite; } .swim_message { width: 340px; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; bottom: 0; right: 0; } .swim_message .hd { height: 48px; line-height: 48px; background: var(--c-primary-grad); padding: 0 6px 0 18px; } .swim_message .hd .title { font-size: 15px; font-weight: 600; margin-left: 0; } .swim_message .hd .close { width: 40px; height: 48px; line-height: 48px; border-radius: var(--r-sm); font-size: 22px; opacity: .85; } .swim_message .hd .close:hover { opacity: 1; background-color: rgba(255, 255, 255, .14); } .swim_message .bd { margin: 18px; } .swim_message .bd p { margin-top: 0; margin-bottom: 12px; color: var(--c-accent); background-color: var(--c-accent-light); border-radius: var(--r-xs); padding: 6px 10px; font-size: 12.5px; text-align: center; } .swim_message h2 { font-size: 16px; } .swim_message label { height: auto; line-height: 1.6; font-size: 13px; margin-bottom: 5px; } .swim_message label span { padding: 0; } .swim_message input, .swim_message textarea { background-color: #FAFBFC; border: 1px solid var(--c-line); padding: 9px 12px; box-sizing: border-box; width: 100%; height: auto; font-size: 13.5px; } .swim_message input:focus, .swim_message textarea:focus { background-color: var(--c-white); border-color: rgba(0, 146, 63, .55); box-shadow: 0 0 0 3px rgba(0, 146, 63, .12); } /* 弹窗广告 */ .popup { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); } .popup .close { width: 30px; height: 30px; line-height: 28px; font-size: 20px; background-color: rgba(0, 0, 0, .35); border: none; backdrop-filter: blur(4px); } .popup .close:hover { background-color: var(--c-primary); } /* ============================================================ 17. 其他通用元素 ============================================================ */ .no-data, .no-pic { color: var(--c-muted); background-color: #FAFBFC; border-radius: var(--r-sm); } .hr-line { background-color: transparent; border-top: 1px dashed var(--c-line); margin: 24px 0; } .btnt, .bdnt { border: 1px solid var(--c-line); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); } /* 列表点线样式微调 */ .dot li:before { background-color: #C4CDD9; } .bobd li { border-bottom: 1px solid var(--c-line-2); } /* 首页空占位（原站第一屏左侧有个空的 sudebar） */ .container.level .sudebar:empty { display: none; } /* ============================================================ 18. 动效 ============================================================ */ @keyframes rtsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes rtsPulse { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* 滚动进场（由 theme-v2.js 添加 .rts-in） */ .rts-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .rts-reveal.rts-in { opacity: 1; transform: none; } /* 图片懒加载淡入 */ img.rts-lazy { opacity: 0; transition: opacity .5s var(--ease); } img.rts-lazy.rts-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .rts-reveal { opacity: 1; transform: none; } } /* ============================================================ 19. 响应式 （原站为 1226px 固定宽度，这里在不改变栅格逻辑的前提下逐步适配） ============================================================ */ @media screen and (max-width: 1279px) { .container, .container-box, .footer .layui-container { width: 100%; max-width: var(--w-container); box-sizing: border-box; padding-left: 16px; padding-right: 16px; } .footer .layui-container { padding-left: 0; padding-right: 0; } .header .search { left: 250px; } .sub_menu { width: calc(100vw - 250px); max-width: 1000px; } } @media screen and (max-width: 1024px) { /* 侧栏一律堆到正文上方 */ .s3m0 > .sudebar, .m0s3 > .sudebar, .s3m0e3 > .sudebar { width: 100% !important; float: none; } .s3m0 > .main, .m0s3 > .main, .s3m0e3 > .main { margin-left: 0 !important; margin-right: 0 !important; } .s3m0e3 > .extra, .m0s3 > .extra { width: 100%; float: none; } .index_module .bd .item .index_list, .index_module:not(.slide) .bd .item .index_list { margin-left: 0; padding: 0 16px 16px; } .index_module .bd .item .ads, .index_module:not(.slide) .bd .item .ads { width: auto; min-height: 260px; margin: 16px; } .item .index_list li { width: 50%; height: auto; } .index_link .bd li { width: 33.33%; } } @media screen and (max-width: 768px) { /* 移动端重排：首屏先看轮播再看登录卡；列表页分类导航置顶 */ .container.level { display: flex; flex-direction: column; } .s3m0e3 > .main { order: 1; } .s3m0e3 > .extra { order: 2; } .s3m0e3 > .sudebar { order: 3; } .s3m0 > .sudebar { order: 1; } .s3m0 > .main { order: 2; } .m0s3 > .main { order: 1; } .m0s3 > .sudebar { order: 2; } .s3m0e3 > .extra .index-user { margin-bottom: 16px; } /* 分类导航改为横向标签条，节省首屏高度 */ .classify .hd { height: auto; padding: 14px 16px; } .classify .hd .name h1 { font-size: 18px; } .classify .bd { padding: 0; } .classify .bd ul { display: flex; gap: 8px; overflow-x: auto; padding: 12px; -webkit-overflow-scrolling: touch; } .classify .bd li { flex: 0 0 auto; padding: 0; } .classify .bd li > a { padding: 8px 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill); white-space: nowrap; background-color: #FAFBFC; font-size: 13.5px; } .classify .bd li > a:before { display: none; } .classify .bd li:hover > a, .classify .bd li.on > a, .classify .bd li.active > a { padding: 8px 14px; } .classify .bd li.on > a, .classify .bd li.active > a { color: #fff; background: var(--c-primary-grad); border-color: transparent; } .header { height: auto; padding-bottom: 12px; } .header .logo { position: static; width: auto; height: auto; padding: 54px 16px 0; overflow: visible; } .header .logo img { max-width: 200px; height: auto; } .header .toolbar, .header .loginbar, .header .phone, .header .authenticity, .header .line { display: none; } .header .search { position: static; width: 100%; padding: 12px 16px 0; box-sizing: border-box; } .header .search input[name="keyword"] { width: auto; flex: 1; } .header .search .layui-form-select { width: 84px; } /* 首页第一屏改为纵向：主视觉高度交给图片自适应 */ .banner, .slideBox, .s3m0e3 .banner, .s3m0e3 .slideBox, .s3m0e3 .slideBox .bd, .s3m0e3 .slideBox .bd ul, .slideBox .bd li { width: 100%; height: auto; } .slideBox .bd li img { height: auto; } /* 章节标题在手机上收小 */ .index_module:not(.slide) { margin-top: 28px !important; } .index_module:not(.slide) > .hd > span { font-size: 19px; } .index_module:not(.slide) > .hd span.icon { width: 32px; height: 32px; } .slideBox .hd ul { display: none; } .index_module .hd { height: auto; line-height: 1.4; padding: 14px 16px; flex-wrap: wrap; gap: 10px; } .index_module .hd > span { font-size: 17px; } .index_module .hd ul.tab { margin-left: 0; width: 100%; order: 3; } .index_module .hd ul li { margin: 0 4px 6px 0; padding: 0 12px; height: 30px; line-height: 30px; font-size: 13px; } .item .index_list ul { grid-template-columns: 1fr; gap: 8px; } .item .index_list li { border: 1px solid var(--c-line-2); } .item .index_list li h2 { min-height: 0; } .index_article .hd { height: auto; padding: 14px 16px; line-height: 1.4; } .index_article .hd ul { flex-wrap: wrap; gap: 6px; } .index_article .hd li { margin: 0; font-size: 14px; padding: 0 12px; } .index_article .bd { padding: 14px; } .index_article .rows > div { float: none; width: 100% !important; } .index_pic { margin-right: 0; margin-bottom: 12px; } .index_pic .box { height: 200px; } .index_info { margin-left: 0; } .index_link .bd li { width: 33.33%; } .pic-article, [class*="pic-"] { width: 116px; height: 82px; } .list-article > li p { -webkit-line-clamp: 2; } /* 详情页正文 */ [class*="detail-"] h1.title, .detail-service h1 { font-size: 20px; } .content { font-size: 14.5px; } .content table { display: block; overflow-x: auto; white-space: nowrap; } /* 悬浮工具条缩小并移到右下，避免遮挡正文按钮 */ #toolbar { right: 12px; bottom: 92px; top: auto; transform: none; gap: 6px; } #toolbar > a { width: 40px; height: 40px; } .swim_message { width: calc(100vw - 24px); right: 12px; } .footer .layui-container { width: 100%; padding: 0 16px; box-sizing: border-box; } .footer .layui-row > div { width: 100% !important; float: none; } .footer .fr { float: none; margin-top: 20px; text-align: center; } .footer .footer-nav li a { padding: 0 10px; font-size: 13.5px; } } /* ============================================================ 20. 移动端导航抽屉（由 theme-v2.js 动态创建） ============================================================ */ .rts-burger { display: none; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: none; border-radius: var(--r-sm); background: rgba(255, 255, 255, .16); cursor: pointer; z-index: 3; } .rts-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: #fff; border-radius: 2px; transition: transform var(--t), opacity var(--t-fast); } .rts-burger.rts-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .rts-burger.rts-active span:nth-child(2) { opacity: 0; } .rts-burger.rts-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .rts-drawer-mask { position: fixed; inset: 0; background: rgba(15, 23, 41, .5); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); z-index: 98; } .rts-drawer-mask.rts-open { opacity: 1; visibility: visible; } .rts-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 84vw; max-width: 340px; background: var(--c-white); z-index: 99; transform: translateX(-102%); transition: transform var(--t); display: flex; flex-direction: column; box-shadow: var(--sh-3); } .rts-drawer.rts-open { transform: none; } .rts-drawer-hd { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 8px 0 18px; background: var(--c-primary-grad); color: #fff; font-size: 16px; font-weight: 600; flex-shrink: 0; } .rts-drawer-close { width: 40px; height: 40px; border: none; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; border-radius: var(--r-sm); } .rts-drawer-close:hover { background: rgba(255, 255, 255, .16); } .rts-drawer-bd { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px 28px; } .rts-drawer-sec { padding: 6px 0; } .rts-drawer-sec + .rts-drawer-sec { border-top: 1px solid var(--c-line-2); } /* 抽屉内的主菜单 */ .rts-drawer .nav-main { position: static; width: auto; background: transparent; display: block; left: auto; } .rts-drawer .nav-main > li { display: block; margin: 0; position: relative; } .rts-drawer .nav-main > li > a { display: block; width: auto; height: auto; line-height: 1.5; padding: 13px 10px; text-align: left; color: var(--c-ink-2); font-size: 15px; border-radius: var(--r-sm); background: transparent; } .rts-drawer .nav-main > li > a:hover, .rts-drawer .nav-main > li.rts-open > a { background: var(--c-primary-lighter); color: var(--c-primary-dark); } .rts-drawer .nav-main > li > a:after { display: none; } .rts-drawer .nav-main ul.sub-menu { display: none; position: static; width: auto; min-width: 0; padding: 2px 0 8px 12px; border: none; box-shadow: none; border-radius: 0; background: transparent; max-height: none; } .rts-drawer .nav-main li.rts-open > ul.sub-menu { display: block; } .rts-drawer .sub-menu li { width: auto; height: auto; line-height: 1.5; border-radius: var(--r-sm); display: block; } .rts-drawer .sub-menu li a { display: block; padding: 10px; font-size: 14px; } /* 抽屉内的服务分类 */ .rts-drawer .service_nav > ul { display: block !important; position: static; max-height: none; overflow: visible; padding: 0; border-radius: 0; box-shadow: none; background: transparent; } .rts-drawer .nav_item { width: auto; height: auto; line-height: 1.5; padding: 0; border: none; box-shadow: none; background: transparent; position: relative; } .rts-drawer .nav_item > a { display: block; padding: 13px 10px; font-size: 15px; color: var(--c-ink-2); border-radius: var(--r-sm); } .rts-drawer .nav_item:after { display: none; } .rts-drawer .nav_item:hover { background: transparent; padding-left: 0; } .rts-drawer .nav_item:hover > a { background: var(--c-primary-lighter); color: var(--c-primary-dark); } .rts-drawer .sub_menu { display: none; position: static; width: auto; left: auto; top: auto; margin-left: 0; padding: 2px 0 10px; border: none; box-shadow: none; border-radius: 0; max-height: none; overflow: visible; background: transparent; box-sizing: border-box; } .rts-drawer li.rts-open > .sub_menu { display: block; } .rts-drawer .leftmenu { width: auto; float: none; } .rts-drawer .leftmenu dl { padding-bottom: 8px; margin-bottom: 10px; margin-left: 0; } .rts-drawer .leftmenu dl dt { padding-bottom: 6px; } .rts-drawer .leftmenu dl dd span { margin: 0 6px 6px 0; } .rts-drawer .leftmenu dl dd a { padding: 5px 10px; font-size: 12.5px; max-width: 100%; } /* 二级手风琴开关 */ .rts-drawer .rts-has-sub { position: relative; } .rts-sub-toggle { position: absolute; right: 2px; top: 2px; width: 42px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-sm); z-index: 2; } .rts-sub-toggle:before { content: "\f107"; font-family: FontAwesome; color: var(--c-muted); font-size: 15px; transition: transform var(--t); } .rts-has-sub.rts-open > .rts-sub-toggle:before { transform: rotate(180deg); } .rts-sub-toggle:hover:before { color: var(--c-primary); } body.rts-no-scroll { overflow: hidden; } @media screen and (min-width: 769px) { .rts-drawer, .rts-drawer-mask { display: none !important; } } @media screen and (max-width: 768px) { .rts-burger { display: block; } .nav { height: 54px; } /* 容器必须有实际高度，汉堡按钮才能正确垂直居中 */ .nav .container { display: flex; align-items: center; height: 54px; padding-left: 64px; } /* 只隐藏主导航与大菜单列表，保留 .all 作为「我们的服务」入口 */ .nav-main { display: none; } .service_nav { display: block; position: static; width: auto; } .service_nav > ul { display: none; } .all { width: auto; height: 54px; line-height: 54px; padding: 0 12px; background: transparent; font-weight: 500; } .all:after { display: none; } .all:hover { background: transparent; } } /* 打印：剔除所有浮层与导航 */ @media print { .nav, #toolbar, .swim_message, .swim_message_open, .footer, .rts-drawer, .rts-drawer-mask, .rts-burger { display: none !important; } } /* ============================================================ 21. 现代骨架改版（v2.2） —— 全宽吸顶头部（logo + 导航 + 搜索 + 电话同一行）/ 全宽主视觉 / 放宽的内容容器。本节位于文件末尾，用于覆盖前面旧的头部与首屏定位规则。 ============================================================ */ /* ---- 21.1 内容容器放宽：1226px → 1360px ---- */ .container, .container-box { width: 100%; max-width: 1360px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; margin-left: auto; margin-right: auto; } .footer .layui-container { width: 100%; max-width: 1360px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* 轮播箭头对齐到容器内边距 */ .s3m0e3 .slideBox .prev { left: max(20px, calc((100vw - 1360px) / 2 + 24px)); } .s3m0e3 .slideBox .next { left: auto; right: max(20px, calc((100vw - 1360px) / 2 + 24px)); } /* ---- 21.2 头部：顶部信息条 + 主导航行，整体吸顶 ---- */ .header { height: auto; padding: 0; position: sticky; top: 0; z-index: 80; background-color: var(--c-white); box-shadow: 0 1px 0 rgba(16, 24, 40, .07); transition: box-shadow var(--t); } .header.is-scrolled { box-shadow: 0 8px 28px rgba(16, 24, 40, .13); } .header .line { display: none; } /* 顶部信息条（通栏） */ .rts-top { background-color: #F7F9FB; border-bottom: 1px solid var(--c-line-2); max-height: 40px; /* 常态必须 visible：顶栏里「手机/微信版」的二维码弹层 （.dropdown-main，从 y=38 延伸到 y=176）需要跨出顶栏往下弹， 一旦这里裁切，二维码就整个被切掉、看起来像被导航条挡住了。 */ overflow: visible; transition: max-height .3s var(--ease), opacity .22s var(--ease), border-color .22s; } .header.is-scrolled .rts-top { max-height: 0; opacity: 0; border-color: transparent; /* 折叠状态下才需要裁切，把顶栏内容收干净 */ overflow: hidden; } .rts-top > .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 40px; } .rts-top .toolbar, .rts-top .loginbar, .rts-top .authenticity { position: static; top: auto; right: auto; float: none; height: 40px; line-height: 40px; } .rts-top .toolbar ul, .rts-top .loginbar ul { display: flex; align-items: center; gap: 14px; margin: 0; } .rts-top .toolbar li, .rts-top .loginbar li { float: none; margin: 0; color: var(--c-text-2); font-size: 12.5px; white-space: nowrap; } .rts-top .toolbar .dropdown { position: relative; } .rts-top .toolbar .dropdown-main { top: 34px; /* 左对齐：顶栏项目本身靠左，居中会让弹层在窄屏时超出左边界 */ left: 0; transform: none; margin-left: 0; padding: 8px; z-index: 90; } .rts-top .authenticity { display: flex; align-items: center; gap: 6px; } .rts-top .authenticity a { padding: 3px 12px; margin: 0; font-size: 12px; line-height: 1.5; background-color: var(--c-white); } .rts-top-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } /* 顶栏一行内容最少要约 902px，窄屏会横向溢出。 这里在窄屏隐藏左侧那句装饰性的欢迎语（保留「手机/微信版」入口）， 避免去掉整体的 overflow 裁切后出现横向滚动条。 */ @media screen and (max-width: 1024px) { .rts-top .toolbar ul > li:not(.dropdown) { display: none; } } .rts-top-right:before { content: ""; width: 1px; height: 14px; flex-shrink: 0; background-color: var(--c-line); } /* 主导航行：logo + 导航 + 搜索 + 电话 */ .rts-bar { display: flex; align-items: center; gap: 16px; height: 84px; } .header .rts-bar .logo { position: static; top: auto; width: auto; height: 52px; /* 旧移动端样式给 .header .logo 留了 padding，这里必须清零， 否则 logo 盒子会被撑高、把头部顶到 180px */ padding: 0; display: flex; align-items: center; overflow: visible; flex-shrink: 0; } /* line-height:0 消除 inline 元素的基线间隙（否则 logo 盒子会被撑高） */ .header .rts-bar .logo a { display: block; line-height: 0; } .header .rts-bar .logo img { display: block; height: 52px; width: auto; max-width: none; } .rts-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; margin-left: 4px; } /* 导航项：统一成胶囊 */ .header .nav-main { position: static; left: auto; top: auto; display: flex; align-items: center; gap: 2px; width: auto; background: transparent; } .header .nav-main > li { margin: 0; position: relative; } .header .nav-main > li > a { display: block; width: auto; height: 40px; line-height: 40px; padding: 0 15px; font-size: 15px; color: var(--c-ink-2); border-radius: var(--r-sm); background: transparent; white-space: nowrap; } .header .nav-main > li > a:after { display: none; } .header .nav-main > li > a:hover, .header .nav-main > li:hover > a { color: var(--c-primary-dark); background-color: var(--c-primary-lighter); } /* 二级下拉：贴到头部下方 */ .header .nav-main ul.sub-menu { top: calc(100% + 10px); left: 0; min-width: 168px; padding: 8px; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(16, 24, 40, .14); } .header .nav-main ul.sub-menu a { display: block; padding: 0 14px; border-radius: var(--r-sm); } /* 「我们的服务」并入导航，作为第一项 */ .header .service_nav { position: relative; width: auto; flex-shrink: 0; } .header .service_nav .all { display: flex; align-items: center; gap: 8px; width: auto; height: 40px; line-height: 40px; padding: 0 16px; background: var(--c-primary-grad); border-radius: var(--r-sm); box-shadow: 0 4px 14px rgba(0, 146, 63, .26); cursor: default; } .header .service_nav .all a { font-size: 15px; font-weight: 600; color: #fff; } .header .service_nav .all:after { content: "\f107"; font-family: FontAwesome; font-size: 13px; color: #fff; opacity: .92; transition: transform var(--t); } .header .service_nav:hover .all:after, .header .service_nav.rts-open .all:after { transform: rotate(180deg); } /* 悬停桥接区：面板与触发项之间有间隙， 鼠标穿过间隙时 :hover 会断开导致面板闪退，用不可见的桥接补上 */ .header .service_nav:before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; } /* 服务分类悬浮面板：从头部下方展开 修复：面板左边界固定在按钮左侧约 166px 处（跟随 logo 宽度）， 原来只写 calc(100vw - 48px) 没扣掉这个左偏移， 导致 769～1250px 之间面板右侧超出视口被裁、圆角与阴影缺一块。 这里按「左偏移 166 + 右侧留白 16 = 182」保守扣除； JS 开启后会按实测左边界再精确修正一次（见 theme-v2.js）。 */ .header .service_nav > ul { position: absolute; top: calc(100% + 20px); left: -106px; width: 1080px; /* 两条写法：旧内核不支持 min() 时整条声明会失效， 先给一条只用 calc() 的，能支持的浏览器再用 min() 覆盖。 */ max-width: calc(100vw - 182px); max-width: min(1080px, calc(100vw - 182px)); max-height: 70vh; overflow-y: auto; padding: 10px 0; background-color: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: 0 26px 60px rgba(16, 24, 40, .18); z-index: 90; } .header .service_nav:hover > ul, .header .service_nav.rts-open > ul { display: block; } .header .service_nav .nav_item { height: 44px; line-height: 44px; padding: 0 22px; border-bottom: 1px solid var(--c-line-2); } .header .service_nav .nav_item:last-child { border-bottom: none; } .header .service_nav .nav_item > a { font-size: 15px; } /* 搜索：紧凑胶囊 */ .rts-bar-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .header .rts-bar .search { position: static; left: auto; top: auto; width: auto; } .header .rts-bar .search form { display: flex; align-items: center; height: 42px; border-radius: var(--r-pill); background-color: #F5F7FA; box-shadow: inset 0 0 0 1px var(--c-line); overflow: visible; transition: box-shadow var(--t-fast), background-color var(--t-fast); } .header .rts-bar .search form:hover, .header .rts-bar .search form:focus-within { background-color: var(--c-white); box-shadow: inset 0 0 0 1px rgba(0, 146, 63, .45), 0 4px 14px rgba(16, 24, 40, .06); } .header .rts-bar .search .layui-form-select { width: 80px; height: 42px; background-color: transparent; border: none; border-radius: var(--r-pill) 0 0 var(--r-pill); text-indent: 16px; } .header .rts-bar .search .layui-form-select .layui-input { height: 42px; padding-left: 0; background-color: transparent; font-size: 13.5px; border: none; } .header .rts-bar .search .layui-form-select dl { left: 0; top: 46px; min-width: 108px; } .header .rts-bar .search input[name="keyword"] { width: 140px; height: 42px; line-height: 42px; padding: 0 8px; border: none; background-color: transparent; font-size: 13.5px; box-shadow: none; } .header .rts-bar .search input[name="keyword"]:focus { box-shadow: none; } .header .rts-bar .search button { width: 46px; height: 42px; margin: 0; border: none; border-radius: var(--r-pill); background: var(--c-primary-grad); box-shadow: none; font-size: 15px; } .header .rts-bar .search button:hover { filter: brightness(1.08); } /* 电话：两行小卡 */ .header .rts-bar .phone { position: static; right: auto; top: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; flex-shrink: 0; } .header .rts-bar .phone i { grid-row: 1 / span 2; font-size: 21px; margin: 0; color: var(--c-primary); } .header .rts-bar .phone span { font-size: 17px; font-weight: 700; color: var(--c-ink); letter-spacing: .2px; line-height: 1.2; } .header .rts-bar .phone div { font-size: 11px; color: var(--c-muted); text-align: left; line-height: 1.2; } /* 旧导航条的内容已搬进头部，隐藏空壳 */ .nav { display: none; } /* 悬浮工具条移到右下角：原来在右侧垂直居中，会和主视觉上的信息卡重叠 */ #toolbar { top: auto; bottom: 96px; transform: none; right: 30px; } /* ---- 21.3 首屏：全宽主视觉 + 悬浮信息卡 ---- */ .s3m0e3 { width: 100%; max-width: none; padding: 0; margin: 0 0 28px; } .s3m0e3 > .main { margin: 0; width: 100%; } .s3m0e3 .banner, .s3m0e3 .slideBox { width: 100%; height: 560px; border-radius: 0; box-shadow: none; } .s3m0e3 .slideBox .bd, .s3m0e3 .slideBox .bd ul, .s3m0e3 .slideBox .bd li, .s3m0e3 .slideBox .bd li img { height: 560px; } .s3m0e3 .slideBox .bd li img { object-fit: cover; object-position: center; } /* 轮播标签与内容对齐到容器宽度 */ .s3m0e3 .slideBox .hd ul { max-width: 1360px; margin: 0 auto; padding: 0 20px 18px; box-sizing: border-box; } .s3m0e3 .slideBox .hd { padding-top: 110px; } .s3m0e3 .slideBox .hd li { flex: 0 0 auto; min-width: 132px; } /* 右侧信息卡：悬浮在主视觉右侧。 说明：主视觉图片是按「右侧栏不重叠」的旧布局做的，卡片压太多会盖住图上的文字， 所以这里贴右边固定留白（不与栅格对齐），把中间的画面尽可能让出来。 */ .s3m0e3 > .extra { position: absolute; top: 50%; right: 32px; transform: translateY(-50%); width: 276px; float: none; z-index: 6; } .s3m0e3 > .extra .index-user, .s3m0e3 > .extra .module { background-color: rgba(255, 255, 255, .95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 20px 48px rgba(16, 24, 40, .2); } .s3m0e3 > .extra .module.mt10 { margin-top: 12px; } /* ---- 21.4 中等屏幕 ---- */ @media screen and (max-width: 1200px) { .header .rts-bar .search input[name="keyword"] { width: 100px; } .header .nav-main > li > a { padding: 0 11px; font-size: 14.5px; } .header .service_nav > ul { left: -20px; } } @media screen and (max-width: 1080px) { .header .rts-bar .search { display: none; } .s3m0e3 > .extra { position: static; transform: none; width: auto; margin-top: 16px; } .s3m0e3 .banner, .s3m0e3 .slideBox, .s3m0e3 .slideBox .bd, .s3m0e3 .slideBox .bd ul, .s3m0e3 .slideBox .bd li, .s3m0e3 .slideBox .bd li img { height: 420px; } } /* ---- 21.5 手机端 ---- */ @media screen and (max-width: 768px) { .rts-top { display: none; } /* 两行：第一行汉堡 + logo，第二行整行搜索 */ .rts-bar { height: auto; flex-wrap: wrap; align-content: flex-start; align-items: center; row-gap: 8px; column-gap: 10px; padding: 12px 16px 12px 56px; position: relative; } .header .rts-bar .logo { height: 40px; } .header .rts-bar .logo img { height: 40px; } .rts-nav { display: none; } .header .service_nav { display: none; } .header .rts-bar .phone { display: none; } .rts-bar-right { order: 3; width: 100%; height: 42px; gap: 0; } .header .rts-bar .search { height: 42px; } .header .rts-bar .search { display: block; width: 100%; } .header .rts-bar .search form { width: 100%; } .header .rts-bar .search .layui-form-select { width: 84px; flex-shrink: 0; } .header .rts-bar .search input[name="keyword"] { width: auto; flex: 1; min-width: 0; } /* 汉堡按钮与 logo 同高对齐（头部内边距 12px + logo 40px） */ .rts-bar .rts-burger { display: block; left: 12px; top: 12px; background: var(--c-primary-light); } .rts-bar .rts-burger span { background: var(--c-primary-dark); } .s3m0e3 .banner, .s3m0e3 .slideBox, .s3m0e3 .slideBox .bd, .s3m0e3 .slideBox .bd ul, .s3m0e3 .slideBox .bd li, .s3m0e3 .slideBox .bd li img { height: 250px; } .s3m0e3 .slideBox .hd { padding-top: 44px; } .s3m0e3 .slideBox .hd ul { padding: 0 16px 12px; } .s3m0e3 .slideBox .hd li { min-width: 0; } .s3m0e3 > .extra > .index-user { margin-bottom: 14px; } .s3m0e3 .slideBox .prev, .s3m0e3 .slideBox .next { display: none; } } /* ============================================================ 22. 细节修正（v2.3） 对应反馈：搜索框文字没居中 / 侧栏表单被拉成整屏 / 图片网格撑爆换行与右侧留空 / 服务大菜单被裁切换行出滚动条 ============================================================ */ /* ---- 22.1 搜索框：文字垂直居中 + 左内边距 ---- 原因：.layui-input 高度被设为 42px，但 line-height 仍是继承来的 17.55px， 单行 input 的文字因此贴顶；同时 text-indent 没有继承进 input，左边没有留白。 */ .header .rts-bar .search .layui-form-select { text-indent: 0; } .header .rts-bar .search .layui-form-select .layui-input { height: 42px; line-height: 42px; padding: 0 26px 0 16px; box-sizing: border-box; text-indent: 0; } /* 下拉箭头垂直居中：三角是 12px 的 border 盒，需按半高回退 */ .header .rts-bar .search .layui-form-select .layui-edge { right: 11px; top: 50%; margin-top: -6px; } /* ---- 22.2 侧栏留言表单：任何情况下都不要被拉成整屏宽 ---- 桌面端侧栏本身只有 ~370px，这条不生效；一旦侧栏堆叠成全宽（平板/手机）， 表单会保持 560px 并居中，不会出现 900px 宽的单行输入框。 */ .form-message { max-width: 560px; margin-left: auto; margin-right: auto; } /* 1024px 宽度下两栏依旧放得下，不再强制堆叠（原来侧栏被拉成 100%） */ @media screen and (min-width: 769px) and (max-width: 1024px) { .s3m0 > .sudebar { width: 20% !important; float: right; } .m0s3 > .sudebar { width: 28% !important; float: right; } .s3m0 > .main { margin-left: calc(20% + 15px) !important; margin-right: 0 !important; } .m0s3 > .main { margin-left: 0 !important; margin-right: calc(28% + 15px) !important; } .classify { max-width: none; } } /* ---- 22.3 图片网格（服务分类页 / 企业风采详情页）：修复撑爆与留空 ---- 两个原因： ① v2.1 的卡片样式给浮动 33.33% 的 li 加了 padding+border， content-box 下总宽超过 33.33%，导致一行只能放 2 个、右侧空一大块； ② v2.1 用了 [class*="pic-"] 这种通配选择器统一缩略图尺寸， 把网格里应当铺满格子的 .pic-service 也压成了 168×108。 */ .list-service.rows > li, .list_images li, .rows > li.w33 { box-sizing: border-box; } .list-service.rows .pic-service, .list-service.rows .pic-article, .w33 .pic-service, .w33 [class*="pic-"] { width: 100%; height: auto; border-radius: var(--r-sm); overflow: hidden; background-color: #F2F5F8; display: block; } .list-service.rows .pic-service img, .w33 .pic-service img, .w33 [class*="pic-"] img { width: 100%; height: auto; object-fit: cover; display: block; } /* 网格格子里的内层 .m10 不再叠加外边距，避免"卡片里还有卡片" */ .list-service.rows > li > .m10 { margin: 0; } /* 图集（资质荣誉 / 企业风采列表）里的图片同样铺满格子 */ .list_images .w33 [class*="pic-"], .list_images [class*="images"], .list_images .honor { width: 100%; } /* ---- 22.4 服务大菜单：不再被裁切、不再出横向滚动条 ---- 原因：我把大面板放在了 .service_nav > ul 内部，而那个 ul 有 overflow-y:auto； 按规范 overflow-y 为 auto 时 overflow-x 会被计算成 auto， 面板（1080×715）超出 ul 的 1070×372 → 既被裁切，又挤出横向滚动条。 */ .header .service_nav > ul { max-height: none; overflow: visible; } /* 面板自身仍然限制高度，过高时内部滚动 */ .header .service_nav .sub_menu, .header .service_nav .sub-menu { max-height: 76vh; overflow-y: auto; overflow-x: hidden; } /* 超长标签（如「装订工具类（订书机、大头针、回形针等）」）不再撑破面板 */ .leftmenu dl dd span { max-width: 100%; } .leftmenu dl dd a { max-width: 230px; } /* ---- 22.5 图片网格改用 CSS Grid ---- 原来是浮动栅格，格子内容高度不一致时会互相挤位，出现参差和右侧留白。 换成 grid 后每行严格对齐、同行等高，窄屏自动降列。 */ .list-service.rows, .list_images.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px; overflow: visible; } .list-service.rows > li, .list_images.rows > li { width: auto !important; float: none !important; margin: 0; } .list_images.rows > li { padding: 0; } .list-service.rows > li { display: flex; flex-direction: column; } /* 卡片内容撑满，标题高的卡片里图片也不会被压扁 */ .list-service.rows > li > .m10 { display: flex; flex-direction: column; height: 100%; } @media screen and (max-width: 1024px) { .list-service.rows, .list_images.rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media screen and (max-width: 560px) { .list-service.rows, .list_images.rows { grid-template-columns: 1fr; gap: 12px; margin: 14px; } } } /* @supports (--rts: 1) 结束 */