/* English site header — aligned with the CN site header. Load AFTER style.css and en.css. Header scope only. */ /* ---------- base ---------- */ header{width: 100%;position: fixed;left: 0;top: 0;z-index: 12345;transition: background-color .5s cubic-bezier(.25,.1,.25,1),height .3s ease;} .h-inner{width: 100%;max-width: 18rem;margin: 0 auto;} .h-inner:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;font-size:0;} .h-top{transition: margin-top .3s;text-align: right;font-size: 0;} .h-top:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;font-size:0;} .h-topbox{float: right; display: flex;justify-content: space-between; align-items: center; min-height: .58rem; } .h-bot{display: inline-block;vertical-align: top; font-size: 0;transition: all .3s;} .h-left{float: left;font-size: 0;height: .95rem;margin-top: .35rem;transition: all .3s;} .h-index{display: inline-block;vertical-align: top;margin-right: .78rem;height: .6rem;margin-top: .18rem;} .h-logo{height: 100%;} .h-nav{display: inline-block;vertical-align: top;transition: all .3s;} .h-ul{display: block; font-size: 0;} .h-li{display: inline-block;vertical-align: top;margin-right: .48rem;position: relative;} .h-li:last-child{margin-right: .2rem;} .h-link{display: block;position: relative; color: #000;padding-top: .17rem;line-height: 1; height: .72rem;} .h-link:after{content: '';position: absolute;bottom: 0;left: 0;width: 0;transition: all ease .5s;height: .03rem;background-color: #0b70a1; background-image: linear-gradient(90deg, #0b70a1 0%, #007db8 100%) ;} .h-sub{display: none;position: absolute;left: 50%;transform: translate(-50%,0); top: 100%;min-width: 100%;white-space: nowrap;padding: .15rem 0; background-color: #fff;z-index: 1000; } .h-sub>li{display: inline-block;vertical-align: middle;margin: 0 .5rem;} .h-sub>li>a{display: block;width: 100%;line-height: 1.66;padding: .1rem 0; text-align: center;color: #111111;font-weight: bold; } .h-sub>li>a:after{content: '';display: inline-block;vertical-align: middle;margin-left: .15rem; width: .333em;height: 1em;background-image: url('../images/a49.png');background-size: 100% auto;background-position: center center;background-repeat: no-repeat;} .h-sub>li>a:hover{color: #017cb6;} .h-sub>li>a:hover:after{background-image: url('../images/a49-b.png');} .h-sub>li>a{font-size: calc(18 * 1rem / 100);} @media(max-width: 1493px){ .h-sub>li>a{font-size: 14px;} } .h-right{float: right;} .h-tel{display: inline-block;vertical-align: top;line-height: .5rem;color: #000;} .h-tel:before{content: "";display: inline-block;vertical-align: middle;width: .875em;height: 1.5em;background-image: url(../images/4.png);background-size: 100% auto;margin-right: .5em;background-position: center center;background-repeat: no-repeat;} .h-btn{display: inline-block;vertical-align: top;color: #fff;cursor: pointer;background-color: #017cb6;background-image: linear-gradient(90deg, #0b70a1 0%, #007db8 100%);padding: 0 .34rem;line-height: .5rem;border-radius: .3125em;margin-left: .3rem;} .h-search{display: inline-block;vertical-align: top;margin-left: .3rem; width: .3rem;height: .5rem; background-image: url(../images/5.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center center;cursor: pointer;} .h-map{display: inline-block;vertical-align: top;line-height: .58rem;color: #000;cursor: pointer;} .h-lang, .h-user{height: .58rem;display: inline-block;vertical-align: top;background-size: 100% auto;background-repeat: no-repeat;background-position: center center;cursor: pointer;margin-left: 10px;} .h-lang{width: .18rem;background-image: url(../images/2.png);position: relative;} .h-lang{display: none;} .h-user{float: right; margin-left: .25rem; width: .35rem;background-image: url(../images/3.png);} .h-menu{display: none; width: 36px;height: 36px;background-repeat: no-repeat;background-position: center center;background-image: url(../images/menu.png);background-size: auto 20px;} .h-mask{background-color: rgba(0,0,0,0.6);position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 998;transition:all .5s;opacity: 0;visibility: hidden;} .h-sch{display: none;width: 100%;padding: .4rem 0;position: fixed;top: 0;right: 0;margin-right: 0;z-index: 999;background-color: #fff;font-size: 0;text-align: center;} .h-form{width: 100%;background-color: transparent;position: relative;overflow: hidden;font-size: 0;} .h-text{width: 3.8rem;height: .4rem;line-height: .4rem;font-size: .14rem;padding: 0 .1rem 0 0.05rem;border: none;border-bottom: 1px solid #ccc;border-right: none;vertical-align: top;background-color: transparent;color: #333;text-align: left;vertical-align: top;} .h-smt{background-image: url(../images/5.png);background-position: center center;width: .4rem;height: .4rem;background-size: .19rem .19rem;background-repeat: no-repeat;color: transparent;cursor: pointer;border: none;border-bottom: 1px solid #ccc;background-color: transparent;transition: all .3s;vertical-align: top;} .h-lang-list{width: 6em;background-color: #fff;position: absolute;left: 50%;top: 100%;padding: 0.05rem 0;margin-left: -3em;visibility: hidden;opacity: 0;transition: all .3s;border-radius: 0.3125em;} .h-lang-link{display: block;width: 100%;line-height: 1.71;padding: .06rem 0.03rem;text-align: center;color: #666;} header.show-sch .h-mask{opacity:1;visibility:visible;} header.show-sch .h-sch{display: block;} header.show-menu .h-nav{right: 0;} header.show-menu .h-mask{opacity:1;visibility:visible;} header.show-lang .h-lang-list{opacity:1;visibility:visible;} .h-sub2{display: none;position: absolute;left: 50%; top: 100%;transform: translate(-50%,0); min-width: 100%;padding: .1rem 0; background-color: #fff;z-index: 1000; } .hs-cont{display: block;white-space: nowrap;} .hs-item{display: inline-block;vertical-align: top;margin: 0 .5rem;} .hs-one{display: inline-block;margin-bottom: .25rem; border-bottom: 1px solid rgba(0,0,0,0.08);padding: .15rem 0; min-width: 1.3rem;color: #111111;line-height: 1.5; font-weight: bold;} .hs-one:after{content: '';display: inline-block;vertical-align: middle;margin-left: .15rem; width: .333em;height: 1em;background-image: url('../images/a49.png');background-size: 100% auto;background-position: center center;background-repeat: no-repeat;} .hs-twobox{width: 100%;} .hs-two{display: block;margin-bottom: .18rem; width: 100%;cursor: pointer;} .hs-tip{display: block;margin-bottom: .02rem; line-height: 1.6;color: #666666;font-weight: bold;} .hs-intro{display: block; max-width:20em; color: #888888;line-height: 1.71;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .hs-one:hover{color: #017cb6;} .hs-one:hover:after{background-image: url('../images/a49-b.png');} .hs-two:hover .hs-tip{color: #017cb6;} .h-bottom{width: 100%;} .h-li.on .h-link{color: #017cb6 !important;} .hl-one{display: block; cursor: pointer; } .hl-icon1{display: block;width: .25rem;min-width: 20px;} .hl-icon1 img{width: 100%;} .hl-icon2{display: none;width: .25rem;min-width: 20px;} .hl-icon2 img{width: 100%;} @media(max-width: 1920px){ /* .h-search{width: 18px;} */ .h-lang{width: 18px;} /* .h-user{width: 18px;} */ .h-text{width: 380px;height: 40px;line-height: 40px;font-size: 14px;padding: 0 10px 0 5px;} .h-smt{width: 40px;height: 40px;background-size: 19px 19px;} } @media(max-width: 1400px){ .h-sub>li{margin: 0 .25rem;} } @media(max-width: 1550px){ .hs-item{margin: 0 .25rem;} .hs-intro{max-width: 19em;font-size: 12px;} } @media(min-width: 1200px){ .h-link{color: #fff;} .h-map{color: #fff;} .h-lang{background-image: url('../images/2-b.png');} .h-user{background-image: url('../images/3-b.png');} .h-tel:before{background-image: url('../images/4-b.png');} .h-tel{color: #fff;} .h-search{background-image: url('../images/5-b.png');} .hl-icon1{display: none;} .hl-icon2{display: block;} .no-banner .h-link{color: #000;} .no-banner .h-map{color: #000;} .no-banner .h-lang{background-image: url('../images/2.png');} .no-banner .h-user{background-image: url('../images/3.png');} .no-banner .h-tel:before{background-image: url('../images/4.png');} .no-banner .h-tel{color: #000;} .no-banner .h-search{background-image: url('../images/5.png');} .no-banner .hl-icon1{display: block;} .no-banner .hl-icon2{display: none;} .product .h-link{color: #000;} .product .h-map{color: #000;} .product .h-lang{background-image: url('../images/2.png');} .product .h-user{background-image: url('../images/3.png');} .product .h-tel:before{background-image: url('../images/4.png');} .product .h-tel{color: #000;} .product .h-search{background-image: url('../images/5.png');} .product .hl-icon1{display: block;} .product .hl-icon2{display: none;} header.white .h-link{color: #000;} header.white .h-map{color: #000;} header.white .h-lang{background-image: url('../images/2.png');} header.white .h-user{background-image: url('../images/3.png');} header.white .h-tel:before{background-image: url('../images/4.png');} header.white .h-tel{color: #000;} header.white .h-search{background-image: url('../images/5.png');} header.white .hl-icon1{display: block;} header.white .hl-icon2{display: none;} header:hover .h-link{color: #000;} header:hover .h-map{color: #000;} header:hover .h-lang{background-image: url('../images/2.png');} header:hover .h-user{background-image: url('../images/3.png');} header:hover .h-tel:before{background-image: url('../images/4.png');} header:hover .h-tel{color: #000;} header:hover .h-search{background-image: url('../images/5.png');} header:hover .hl-icon1{display: block;} header:hover .hl-icon2{display: none;} } @media(min-width: 1201px){ .h-sub>li>a:hover, .h-lang-link:hover{color: #017cb6;} header.white{background-color: #fff;height: .95rem;border-bottom: 1px solid rgba(0,0,0,0.08); } header.white .h-top{margin-top: -0.6rem;} header.white .h-left{margin-top: 0;} header.white .h-nav{margin-top: .225rem;} header.white .h-bot{margin-top: .225rem;} header:hover{background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); } .h-li:hover .h-link:after{width: 100%;} .h-li:hover .h-link{color: #017cb6;} } @media(max-width: 1200px){ body{padding-top: 71px;} header{width: 100%;height: 71px;background-color: #fff;padding-left: 10px;border-bottom: 1px solid rgba(0,0,0,0.08); } .h-bot{padding-right: 10px;} .h-inner{max-width: 100%;} .h-map{ line-height: 36px;} .h-lang{width: 36px;height: 36px;background-size: 18px auto; margin-left: 0;} .h-user{width: 36px;height: 36px;background-size: 25px auto;margin-left: 0;} .h-topbox{min-height: 36px;} .h-tel{line-height: 30px;} .h-btn{line-height: 30px;} .h-search{width: 36px; height: 30px;margin-left: 0;background-size: 18px auto;} .h-left{margin-top: 0;} .h-index{margin-top: 17px;margin-right: 0;height: 36px;} .h-nav{width: 280px;height: 100%;position: fixed;right: -280px;top: 0;left: auto;transform: translate(0,0);background-color: #fff;z-index: 12345;overflow: auto;transition: all .3s;} .h-ul{width: 100%;} .h-li{display: block;margin: 0;width: 100%;} .h-li.active .h-link:after{display: none;} .h-sub>li{display: block;margin: 0;} .h-sub{width: 100%;margin-left: 0;top: 0;transform: translate(0,0); white-space: normal; position: relative;left: 0;padding: 0;} .h-sub>li>a{text-align: left;padding: 10px 0 10px 40px;} .h-li.has-nav:after{content: "+";display: inline-block;width: 40px;height: 46px;line-height: 46px;text-align: center;position: absolute;right: 0;top: 0;font-size: 20px;color: #666;} .h-li.has-nav.show:after{content: "-";} .h-sub2{width: 100%;margin-left: 0;top: 0;left: 0; transform: translate(0,0); white-space: normal;max-height: none; position: relative;left: 0;padding: 0;} .hs-cont{white-space: normal; } .h-li.has-nav2:after{content: "+";display: inline-block;width: 40px;height: 46px;line-height: 46px;text-align: center;position: absolute;right: 0;top: 0;font-size: 20px;color: #666;} .h-li.has-nav2.show:after{content: "-";} .hs-item{width: 100%;margin: 0 ; padding-left: 40px;padding-right: 10px;} .h-one{width: 100%;} .hs-two{padding-left: 10px;} .hs-intro{max-width: 100%;} .h-link{line-height: 46px;padding: 0 46px 0 20px;display: inline-block;} .h-menu{position: absolute;top: 0;right: 5px;display: block;} .h-top{padding-right: 40px;} .h-sch{padding: 40px 0;} .h-text{width: 380px;} .h-smt{background-size: 17px 17px;} header.show-lang .h-lang{background-color: #fff;z-index: 12345;} header.show-lang .h-mask{opacity:1;visibility:visible;} .hl-one{margin-left: 15px;} } @media(max-width: 750px){ header.show-sch .h-text{width: 220px;} .h-map{display: none;} .h-tel{display: none;} .h-right{display: flex;align-items: center;height: 71px;} .h-top{display: none;white-space: nowrap; width: auto;padding-right: 0; } .h-bot{display: none; width: auto;margin-right: 36px;} .h-index{display: block; margin-top: 0;height: 71px;line-height: 71px;} .h-index img{height: 30px;} .h-lang{margin-left: 0;} .h-menu{top: 50%;transform: translate(0,-50%);} .h-nav{top: 71px;height: calc(100vh - 71px);} header.show-menu .h-mask{top: 71px;} header.show-menu .h-top{display: block;} header.show-menu .h-bot{display: block;} header.show-sch .h-nav{ right: -280px;} header.show-lang .h-nav{ right: -280px;} .h-user{float: none;} .h-topbox{display: none;} .h-lang{display: inline-block;} .h-bot{width: auto; padding-right: 0;} } @media(max-width: 500px){ .h-index img{height: 25px;} } @media(max-width: 370px){ .h-btn{padding: 0 10px;} .h-btn{margin-left: 5px;} } /* @media(max-width: 360px){ .h-index{height: 30px;margin-top: 3px;position: absolute;left: 10px;top: 0;} } */ /* ---------- overlay ---------- */ /* ============================================================ 导航胶囊白底 · 2026-10-20 作用：给「菜单 + 400 电话」加一条白色胶囊底，防止和 banner 图撞色 说明：按导航文字的垂直中线居中；右侧让出「预约演示 + 搜索框」 注意：只在 1201px 以上生效。1200px 及以下导航会变成抽屉， 白底若不屏蔽会变成一条悬空白条压在页头上。 ============================================================ */ @media (min-width: 1201px){ .h-bottom{ position: relative; } .h-bottom::before{ content: ''; position: absolute; left: -.2rem; /* 右边界不要再写百分比。 19.6% 是按容器宽度算的：容器越窄，19.6% 折出来的像素越少，胶囊右端就越往左缩， 窄屏时直接缩到 400 电话身上（1201px 宽时电话比胶囊多出 4px → 看起来"内容溢出"）。 改成「跟着字号缩放的一段 + 固定一段」： 1.68rem —— 跟着 html 字号等比缩放，宽屏窄屏比例一致； 42px —— 搜索图标的固有宽度（它是 px 写死的，不跟字号缩）。 这样胶囊右端在任何宽度下都稳稳停在「预约演示按钮左侧固定距离」处。 */ right: calc(1.68rem + 42px); top: -.01rem; height: .52rem; box-sizing: border-box; background-color: rgba(255,255,255,.78); /* 半透明白，透出 banner */ border: 1px solid rgba(255,255,255,.55); /* 玻璃边缘高光 */ border-radius: 999px; -webkit-backdrop-filter: blur(.1rem) saturate(150%); /* 背景虚化 */ backdrop-filter: blur(.1rem) saturate(150%); box-shadow: 0 .03rem .14rem rgba(0,0,0,.08); } .h-nav, .h-bot{ position: relative; z-index: 1; } /* 内页（banner 偏暗）导航文字默认是白色 #fff，白底胶囊上看就消失了， 胶囊范围内统一压成深色；当前栏目仍由 .h-li.on 的 !important 蓝色覆盖 */ .h-bottom .h-link{ color: #111; } .h-bottom .h-tel{ color: #111; } /* 电话图标原来是背景图（4.png / 4-b.png 两套换着用，color 管不了）。 2026-10-20 已改成「SVG 遮罩 + 当前文字色」，图标颜色自动跟着上一条 color 走， 所以原来这里换图的那条规则删掉了 —— 现在删了也不影响，4.png/4-b.png 不再被引用。 */ /* 右侧「预约演示」按钮改胶囊圆角，高度与左边白底胶囊对齐（都是 .52rem） */ .h-bottom .h-btn{ border-radius: 999px; height: .52rem; line-height: .52rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); /* 玻璃边缘高光 */ } /* 半透明蓝底：只在未悬停时生效，鼠标移上去仍是模板原本的白底蓝字 */ .h-bottom .h-btn:not(:hover){ background-image: linear-gradient(90deg, rgba(11,112,161,.90) 0%, rgba(0,125,184,.90) 100%); -webkit-backdrop-filter: blur(.05rem); backdrop-filter: blur(.05rem); } /* 下滑后页头会加 .white 类（整条变白、语言栏收起、导航下移 .225rem）， 此时白底胶囊既多余又对不齐，直接隐藏，交给页头自身的白底 */ header.white .h-bottom::before{ display: none; } } /* ============================================================ 页头右上「语言切换 + 用户中心」重做 · 2026-10-20 问题：三个语言标签是 41×42 的位图（白描边 + 白字烤死在图里）， 放到本站偏浅的 banner 上几乎看不见；「繁」字糊成一团； 用户图标里那条浅蓝小药丸像渲染 bug； 另外 js.js 会给 .h-topbox 写入 min-width（=预约演示按钮宽）， 配合 space-between 把三个图标拉开 28px 间距，看着不匀。 做法：语言 → 一枚磨砂白胶囊 + 真实文字（任意分辨率都清晰） 用户 → 白玻璃圆 + 深色人形（SVG 遮罩，颜色可换、永不糊） 位置 → 胶囊左右边缘与「预约演示」按钮完全对齐（见 ② 开头的注释） 注意：不改任何盒子高度（.h-topbox / .h-user 仍是 .58rem）， 只画在 ::before / ::after 上，页头总高不变，不影响导航胶囊定位。 ============================================================ */ /* ① 位图换成文字（全断点通用，模板 751px 以下不显示这一排，无副作用） */ .h-top .h-topbox .hl-one .hl-icon1, .h-top .h-topbox .hl-one .hl-icon2{ display: none !important; } .h-top .h-topbox .hl-one::after{ content: "中"; } .h-top .h-topbox .hl-one:nth-of-type(2)::after{ content: "EN"; letter-spacing: .06em; } .h-top .h-topbox .hl-one:nth-of-type(3)::after{ content: "繁"; } /* ② ≥1201px：磨砂胶囊 + 白玻璃圆（与导航白底胶囊同一套语言） */ @media (min-width: 1201px){ /* 让语言胶囊的左右边缘正好压在「预约演示」按钮上： js.js 会把按钮宽度写进 .h-topbox 的 min-width，所以容器本身 = 按钮宽； 再把它整体左移「搜索图标宽度 + 它的左边距」（各 .3rem，共 .6rem）， 胶囊右边缘就落到按钮右边缘上，左边缘跟着对齐。 */ .h-top{ position: relative; } .h-top .h-topbox{ position: relative; justify-content: space-between; /* 胶囊撑到按钮宽后，三段均分 */ gap: 0; margin-right: .6rem; /* 整体左移=搜索图标宽+间距，右边缘落到按钮右边缘 */ } .h-top .h-topbox::before{ content: ''; position: absolute; right: 0; top: 50%; width: 100%; height: 26px; transform: translate(0,-50%); background-color: rgba(255,255,255,.90); border: 1px solid rgba(0,0,0,.06); border-radius: 999px; box-shadow: 0 .01rem .06rem rgba(0,0,0,.06); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); } .h-top .h-topbox .hl-one{ position: relative; z-index: 1; display: block; height: 24px; line-height: 24px; padding: 0 9px; margin: 0; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #111; font-family: Arial, "PingFang SC", "Microsoft Yahei", sans-serif; transition: background-color .2s ease, color .2s ease; } .h-top .h-topbox .hl-one:hover{ background-color: #fff; color: #017cb6; } /* 用户中心 */ header .h-top .h-user{ position: absolute; right: 0; top: 0; width: 26px; background-image: none !important; } header .h-top .h-user::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); background-color: rgba(255,255,255,.90); border: 1px solid rgba(0,0,0,.06); border-radius: 50%; box-shadow: 0 .01rem .06rem rgba(0,0,0,.06); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } header .h-top .h-user::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); background-color: #111; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.6'/%3E%3Cpath d='M4.8 20.4c0-3.6 3.2-6.2 7.2-6.2s7.2 2.6 7.2 6.2'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.6'/%3E%3Cpath d='M4.8 20.4c0-3.6 3.2-6.2 7.2-6.2s7.2 2.6 7.2 6.2'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } /* 悬停：圆变纯白 + 人形转品牌蓝 + 轻微放大，跟导航文字"变色"的反馈同一套语言 */ header .h-top .h-user{ transition: transform .18s ease; } header .h-top .h-user::after{ transition: background-color .2s ease; } header .h-top .h-user:hover{ transform: scale(1.08); } header .h-top .h-user:hover::before{ background-color: #fff; border-color: rgba(0,0,0,.10); box-shadow: 0 .02rem .12rem rgba(0,0,0,.16); } header .h-top .h-user:hover::after{ background-color: #017cb6; } } /* ③ 751–1200px：这一档页头是白底，不需要胶囊，只把位图换成深色文字 */ @media (min-width: 751px) and (max-width: 1200px){ .h-top .h-topbox{ min-width: 0 !important; gap: 0; } .h-top .h-topbox .hl-one{ display: block; height: 24px; line-height: 24px; padding: 0 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #333; font-family: Arial, "PingFang SC", "Microsoft Yahei", sans-serif; } .h-top .h-topbox .hl-one:hover{ color: #017cb6; } /* 白底页头上，用户图标同样去掉位图，只留深色人形 */ header .h-top .h-user{ position: relative; width: 26px; background-image: none !important; transition: transform .18s ease; } header .h-top .h-user::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); background-color: #333; transition: background-color .2s ease; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.6'/%3E%3Cpath d='M4.8 20.4c0-3.6 3.2-6.2 7.2-6.2s7.2 2.6 7.2 6.2'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.6' r='3.6'/%3E%3Cpath d='M4.8 20.4c0-3.6 3.2-6.2 7.2-6.2s7.2 2.6 7.2 6.2'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } header .h-top .h-user:hover{ transform: scale(1.08); } header .h-top .h-user:hover::after{ background-color: #017cb6; } } /* ============================================================ 页头搜索图标重做 · 2026-10-20 问题：原来用 5.png / 5-b.png（200×200 位图，且图形本身就有毛病—— 镜圈里多一道弧线像划痕，手柄还偏，放大后发虚）。 做法：换成 SVG 遮罩画的放大镜，矢量、不要新图片文件； 颜色跟着 color 走：banner 上白、白页头上深。 注意：只改“画什么”，.h-search 的 30×50 点击区一点没动。 ============================================================ */ .h-bot .h-search{ background-image: none !important; background-color: currentColor; /* 颜色由 color 决定，遮罩只取形状 */ color: #111; /* 白底页头（≤1200）默认深色 */ -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6'/%3E%3Cpath d='M15.4 15.4L20.5 20.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6'/%3E%3Cpath d='M15.4 15.4L20.5 20.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat; transition: color .2s ease, transform .18s ease; } @media (min-width: 1201px){ /* banner 上是白图标；页头变白（无 banner / 产品页 / 下滑 / 悬停）时转深色 */ .h-bot .h-search{ color: #fff; } .no-banner .h-bot .h-search, .product .h-bot .h-search, header.white .h-bot .h-search, header:hover .h-bot .h-search{ color: #111; } } /* 悬停：转品牌蓝 + 轻微放大；按下再回缩一点，手感更实在。 选择器特意写到和 header:hover 那条同权重(0,3,1)，靠"写在后面"取胜。 */ header .h-bot .h-search:hover{ color: #017cb6; transform: scale(1.14); } header .h-bot .h-search:active{ transform: scale(1.02); } /* ============================================================ 「预约演示」文案加粗 · 2026-10-20 说明：放在最后、且不带媒体查询，所有宽度都生效。 按钮变粗后宽度会略微变化 —— 语言胶囊是靠 js.js 量的按钮宽， 会跟着自动对齐，不需要另外改。 ============================================================ */ .h-bottom .h-btn{ font-weight: 700; } /* ============================================================ 窄屏防挤压：把 400 电话推回胶囊里 · 2026-10-20 问题：浏览器窗口收窄到 1201~1300px 时，胶囊右端会顶到 400 电话上 ——实测 1201px 时电话右端比胶囊右边缘多出 4px，看着就是"内容溢出"。 做法：给「预约演示」按钮加一段左边距。 按钮自己位置不动（它是靠右对齐的），左边距只会把电话往左推， 于是电话整体退回胶囊内部，右侧重新有留白。 实测「电话右端 → 胶囊右边缘」的留白： 1201:18px 1280:19 1366:19 1440:20 1600:20 1920:32 每一档都是正数，任何宽度都不会再顶出去。 副作用：无。导航是右对齐的自适应盒子，左侧还有 150px 以上空余 （1201px 时 logo 与首字间距 150.8px），推左 10px 完全吃得下。 ============================================================ */ @media (min-width: 1201px){ .h-bottom .h-btn{ margin-left: .5rem; } } /* ============================================================ 400 电话图标 · E 款「听筒 + 信号弧」 · 2026-10-20 造型：线框听筒（左下）+ 两道信号弧（右上），扁平、单线、圆头。 实现：mask + background-color:currentColor → 图标颜色 = 文字颜色，不需要再准备深色/白色两套图。 ============================================================ */ .h-bot .h-tel:before{ content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -.085em; /* 1em 盒子理论值 -.14em；E 款墨迹在网格里略偏下，实测补 .055em 才齐 */ background-image: none !important; /* 老的 4.png / 4-b.png 不再使用 */ background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.14 5.35) scale(0.7)' stroke-width='3.14'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3Cpath d='M17.1 8.7a4.3 4.3 0 0 1 3.2 3.2'/%3E%3Cpath d='M19.1 5.2a7.4 7.4 0 0 1 4.1 4.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.14 5.35) scale(0.7)' stroke-width='3.14'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3Cpath d='M17.1 8.7a4.3 4.3 0 0 1 3.2 3.2'/%3E%3Cpath d='M19.1 5.2a7.4 7.4 0 0 1 4.1 4.1'/%3E%3C/svg%3E") center / contain no-repeat; } /* ============================================================ ① 搜索条里的放大镜换成和页头同一个 · 2026-10-20 原来用的是位图 images/5.png：一个开口的圆圈，缺口难看，跟页头那个不是一个形状。 现在改成和页头 .h-search 完全相同的 SVG（圆 + 斜柄），只是这里用 background-image （.h-smt 是 ，加不了伪元素，所以不用 mask）。 尺寸、位置不动：.19rem / 19px / 17px 那几档 background-size 原样沿用。 ============================================================ */ .h-smt{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.4 2.4 19.2 19.2' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6'/%3E%3Cpath d='M15.4 15.4L20.5 20.5'/%3E%3C/svg%3E"); } /* ============================================================ ② 当前所在栏目加粗 · 2026-10-20 原来只有颜色变蓝(#017cb6)，字重和别的栏目一样，扫一眼不够醒目。 加粗只影响导航文字宽度，不影响胶囊：胶囊左边是固定 -.2rem、右边是 calc 定位， 都不看导航宽度；导航右侧 1201px 时还有 150px 余量，加粗顶多占掉 2~3px。 ============================================================ */ .h-li.on .h-link{ font-weight: 700; } /* ============================================================ ③ 400 电话号码加粗 · 2026-10-20 号码是右对齐那组的第一个元素，加粗后只会往左长，右端位置不变， 所以不会破坏之前调好的「电话右端 → 胶囊右边缘」留白（1201:18px … 1920:32px）。 ============================================================ */ .h-tel{ font-weight: 700; } /* ---------- dropdown / spacing ---------- */ /* ============================================================ 1201~1620px 导航文字下沉修正 · 2026-10-21 字号系统在 ≤1620px 把 .s16 锁死成 13.5px 不再缩放（见文件开头 .s16 的媒体查询）， 但胶囊高度 .52rem、文字上边距 .17rem 仍在继续缩小 → 文字相对越沉越低 （1620px 时正好对齐，1201px 时偏下 1.75px）。 把上边距换成「跟随胶囊中心」的公式，越窄自动上提越多，1620px 时与原值完全一致。 ============================================================ */ @media (min-width: 1201px) and (max-width: 1620px){ .h-link{ padding-top: calc(.25rem - 6.75px); } } /* ============================================================ 导航下拉浮层（.h-sub2）视觉重做 · 2026-10-21 原来是一张纯白纸：无圆角、无投影、左右 0 内边距，糊在渐变页面上很生硬。 这里只改外观（圆角/投影/内边距/层次），不动 hover 显示逻辑与定位。 ============================================================ */ @media (min-width: 1201px){ .h-sub2{ padding: .2rem .24rem; border-radius: .18rem; width: max-content; /* 面板宽度跟随内容，右侧不再留白 */ max-width: calc(100vw - .6rem); box-shadow: 0 .24rem .54rem rgba(11,60,90,.18), 0 .04rem .12rem rgba(11,60,90,.06), inset 0 0 0 1px rgba(11,112,161,.08); } .hs-item{ margin: 0 .14rem; } /* 列与列之间：40px → 28px */ /* 原来这里对 :first-child 做了 margin-left:0 —— 只有第一行首项被归零， 一旦换行，第二行首项仍带 20px margin，两行左边缘就差 20px（实测 641 vs 661）。 改成用 .hs-cont 负 margin 统一抵消，所有列无论在哪一行左边缘都一致。 */ .hs-cont{ margin-left: -.14rem; margin-right: -.14rem; } .hs-one{ color: #0b3d57; padding-bottom: .1rem; margin-bottom: .14rem; border-bottom-color: rgba(11,112,161,.12); } .hs-two{ width: auto; margin: 0 -.1rem .04rem; padding: .07rem .1rem; border-radius: .09rem; transition: background-color .18s ease; } .hs-two:hover{ background-color: rgba(11,112,161,.055); } .hs-tip{ color: #0b5f85; } .hs-intro{ color: #7f909e; } } /* ============================================================ 导航下拉浮层 · 单行列表版（.h-sub）与三列版统一 · 2026-10-21 「最新动态 / 关于我们 / 联系我们」这几个栏目用的是横向单行