@charset "utf-8"; /* ========================================================================== 版式 v3 · 公共层 —— 全站加载（首页 + 内页，见 src/front/index.js 的 extraCss） 这份文件承担两件事，改之前先分清楚自己动的是哪一层： ① 站点公共外壳（会作用于所有页面） body.lv-v3 上的 CSS 变量与字体栈， 以及 .lv-wrap / .lv-btn / .lv-head / .lv-title 这组通用件， 再加上第十一章的页头(.lv-hd)与页脚(.lv-ft)。 —— 内页复用它们靠的就是 body 上那个 lv-v3 类，所以内页 body 也带 lv-v3。 ② 首页专属版式（只在 .lv-home 作用域内生效） 从 .lv-home 的排版重置到 hero / 数据条 / 服务网格 / 套餐 / 案例 / 资讯 / CTA， 全部挂在 .lv-home 里。内页没有 .lv-home 容器，因此这部分一条都命中不了。 原先"内页零影响"的说法指的是这一层，仍然成立。 ★ 变量声明在 body 上，不是 .lv-home 上： 页头(.lv-hd)与页脚(.lv-ft)是 .lv-home 的**兄弟节点**，不在它内部； 内页更是连 .lv-home 都没有。变量必须挂在 body 这一层， 页头页脚（以及内页的所有规则）才能用上同一套色板。 ★ body.lv-v3 上只放变量与字体，不放任何盒模型/排版重置 —— 重置写在 .lv-home 或内页的 .lv-body 里，避免顺着继承链污染正文。 ========================================================================== */ /* ★ body 类名 lv-v3 = "版式 v3"。首页与内页共用，仅此一个类。 */ body.lv-v3 { --lv-w: 1200px; --lv-ink: #0a0e15; --lv-ink2: #121a26; --lv-paper: #ffffff; --lv-tint: #f5f7fa; --lv-line: #e7ecf2; --lv-t1: #16202e; --lv-t2: #5a6675; --lv-t3: #8b95a3; --lv-red: #e1251b; --lv-red2: #ff5a4d; --lv-gold: #c8a96a; --lv-dark-t1: #eef3fa; --lv-dark-t2: #93a1b5; --lv-r: 14px; --lv-shadow: 0 10px 30px rgba(16, 32, 56, .07); --lv-shadow-h: 0 18px 44px rgba(16, 32, 56, .13); /* ★★ 2026-10-01 新增：第二层变量 —— 为「后台切换模板（换肤）」把口子开全。 上面那批是 v3 版式一开始就有的；下面这些原先**写死在规则里**， 现在一律提到这里。目的只有一个：换一套配色 = 换这一组值， 不必再去 900 行里翻。两套皮肤（skin-tech / skin-police）就是两组赋值。 三条纪律（以后改的时候别破坏）： 1) 只收"品牌色"。中性灰阶（#fff / #eef1f6 / --lv-t1…）留在原处 —— 换肤不该把正文色、分隔线一起搅进去。 2) 透明色（rgba）**整条**存成变量，不拆成 --lv-red-rgb 再用 color-mix 拼： 变量存的就是"值"，整条 rgba 直接赋值最直观，也不受浏览器支持度影响。 3) 皮肤文件只覆盖变量、不重写规则。个别老样式表（style.css / ny.css） 没走变量、又确实还在页面上染色的，由皮肤文件用选择器单独覆盖， 见 skin-*.css 里那段"老 CSS 残留"的说明。 */ /* —— 主色族（换肤的主战场）—— */ --lv-red3: #c2180f; /* 主色·深：按钮/图标底渐变的尾色 */ --lv-red4: #b81a12; /* 主色·最暗：色带左端 */ --lv-red5: #8e130d; /* 主色·最暗：色带右端 */ --lv-hot: #ff7a45; /* 暖色·中：标题下划线的中段 */ --lv-hot2: #ff9b6a; /* 暖色·浅：H1 渐变的中段 */ --lv-wash1: #fff2f1; /* 主色浅底（图标卡的起点） */ --lv-wash2: #fff8f0; /* 主色浅底（图标卡的终点） */ --lv-washline: #ffe0dc; /* 主色浅底的描边 */ /* —— 主色的透明版本（阴影 / 光晕 / 描边）—— */ --lv-a10: rgba(225, 37, 27, .1); --lv-a12: rgba(225, 37, 27, .12); --lv-a16: rgba(225, 37, 27, .16); --lv-a20: rgba(225, 37, 27, .2); --lv-a22: rgba(225, 37, 27, .22); --lv-a26: rgba(225, 37, 27, .26); --lv-a30: rgba(225, 37, 27, .3); --lv-a32: rgba(225, 37, 27, .32); --lv-a34: rgba(225, 37, 27, .34); --lv-a35: rgba(225, 37, 27, .35); --lv-a38: rgba(225, 37, 27, .38); --lv-a45: rgba(225, 37, 27, .45); --lv-a50: rgba(225, 37, 27, .5); /* —— 辅色的透明版本 —— */ --lv-gold-a07: rgba(200, 169, 106, .07); --lv-gold-a34: rgba(200, 169, 106, .34); /* —— 深底色（页头导航 / 首屏 / 模拟窗 / 页脚）—— 这几条不是"品牌色"里的主色，但决定了整站的明暗气质： 科技红配近黑蓝，公安蓝配藏青 —— 换肤必须能一起换。 */ --lv-hd: #0f1620; /* 页头导航条底 */ --lv-nav: #18202e; /* 导航项悬停底 */ --lv-ink3: #0f1622; /* 首屏模拟窗外壳底 */ --lv-ink4: #0c121c; /* 首屏模拟窗内容底 */ --lv-ft-bot: #06090e; /* 页脚最底一条 */ --lv-glow-a: rgba(225, 37, 27, .34); /* 首屏右上暖光团 */ --lv-glow-b: rgba(64, 120, 210, .26); /* 首屏左下冷光团 */ /* —— 内页与专题页共用的几条 —— */ --lv-pghero-grad: linear-gradient(120deg, #0b111a 0%, #16202e 52%, #1f2c3f 100%); /* 内页顶部暗色带（inner-v3 / page-ruanjiankaifa） */ --lv-cta-grad: linear-gradient(135deg, #16202e 0%, #243448 100%); /* 侧栏底部行动块 */ --lv-wash3: #fdf4f3; /* 主色浅底：侧栏当前项 */ --lv-wash-t: #ffd9d5; /* 深底上的浅主色文字 */ /* —— 老样式表遗留色的归拢（2026-10-01，为「后台切换模板」而做）—— 下面这批色值分散在 style.css / ny.css / css.css / app.css / website.css 里， 直接写在各自的选择器上、从来没走过变量。它们是**原站 1:1 复刻的那几个老栏目** （智慧党建 / APP建设 / 域名注册 / 套餐页 / 案例页 / 公安专题）在用的。 不把它们拉进来，切到公安蓝之后这几页会原地红着 —— 一半蓝一半红的花脸。 实测这批在页面上确实可见（案例外链按钮 20 处、列表分页、页内分页条、 APP建设页标题与悬停底、智慧党建通栏标题与栏目标题、套餐页 .bb、 域名页价格字与上边框、公安专题侧栏当前项）。 取值全部照抄老样式表原值，一个像素都不动 —— 这里只是换了个存放位置。 实际覆盖规则在文件末尾「十二、老样式表遗留色归拢」一节。 */ --lv-old-case-btn: #ee3939; /* 案例页：外链按钮底 */ --lv-old-case-btn-h: #e40101; /* 案例页：外链按钮悬停底 */ --lv-old-page-on: #f96868; /* 列表分页：当前项 / 悬停 */ --lv-old-pagenav: #b10000; /* 页内小分页条底 */ --lv-old-app: #cc0000; /* APP建设页：标题与悬停底 */ --lv-old-zj-head: #c02222; /* 智慧党建：通栏标题 / 导航悬停 */ --lv-old-zj-line: #c05555; /* 智慧党建：导航悬停下划线 */ --lv-old-zj-btn: #da3e44; /* 智慧党建：右上按钮底 */ --lv-old-zj-h3: #da1d25; /* 智慧党建：栏目标题 */ --lv-old-bb: #d92129; /* 套餐页：.bb 强调字 */ --lv-old-price: #e10b15; /* 域名页：价格字与上边框 */ --lv-old-side-on: #ff6600; /* 公安专题：左侧当前项 */ --lv-old-link: #d82128; /* 老页面正文里的链接（原站全局 a{color} 的红）*/ /* 字体栈统一挂在这里 —— 全站（含内页）都用同一套字体， 旧 CSS 里那套 "宋体/微软雅黑" 混排不会再把新页面拉回 2010 年。 这是"改 body 而不是改 .lv-home"的第二个理由：内页连 .lv-home 都没有。 */ font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } .lv-home { font-family: inherit; color: var(--lv-t1); font-size: 14px; line-height: 1.7; } .lv-home *, .lv-home *:before, .lv-home *:after { box-sizing: border-box; } /* ★★ 必读：为什么要有下面这条"外边距归零" style1.css 里躺着一条 IE6 时代的老规则： .m_wrap, .m_wrap1, .m_wrap2, div { margin: 0 auto; } 它给页面上**每一个
** 都塞了左右 auto 外边距。 在老式 float 布局里这是"水平居中"的常用写法，但在 grid / flex 容器里， auto 外边距会先吃掉剩余空间 —— 于是子项不再"拉伸填满整列"， 而是退化成 shrink-to-fit 宽度再居中。 症状很有迷惑性：网格列宽明明是对的（583px / 300px），子项却只有 520px / 70px， 而且**只有内容较短的 div 才看得出来**（内容长的 div 恰好撑满，看起来一切正常）。 所以这里统一把直系子项的左右外边距收回 0 —— 选择器权重 (0,2,0) 稳压 `div` (0,0,1)。 顺带把 min-width 也收回 0。原因：grid / flex 子项的 min-width 默认是 auto， 表示"不小于自身 min-content 宽度"。案例卡片的标题是 `white-space: nowrap`， 它的 min-content 就是整行文字宽度 —— 于是窄屏下 `repeat(2, 1fr)` 的两列 会被文字撑到 194px / 218px（不是均分的 175px），整行超出容器 48px， 在 390px 的视口上真的拉出一条横向滚动条（实测 documentElement.scrollWidth = 438）。 收回 min-width 后，列宽回到均分，文字按 ellipsis 截断。 */ .lv-home .lv-hero-in > *, .lv-home .lv-stats-in > *, .lv-home .lv-grid > *, .lv-home .lv-adv-list > *, .lv-home .lv-cases > *, .lv-home .lv-news > *, .lv-home .lv-cta-in > * { margin-left: 0; margin-right: 0; min-width: 0; } .lv-home ul, .lv-home ol { list-style: none; margin: 0; padding: 0; } .lv-home h1, .lv-home h2, .lv-home h3, .lv-home h4, .lv-home h5, .lv-home p { margin: 0; font-weight: normal; } .lv-home img { display: block; max-width: 100%; border: 0; } .lv-home em, .lv-home i { font-style: normal; } .lv-home a { color: inherit; text-decoration: none; } /* 容器 */ .lv-wrap { width: var(--lv-w); max-width: calc(100% - 40px); margin: 0 auto; } /* ---------------- 通用标题 ---------------- */ .lv-sec { padding: 84px 0; } .lv-sec-tint { background: var(--lv-tint); } .lv-head { text-align: center; margin-bottom: 46px; } .lv-kicker { font-size: 12px; letter-spacing: .22em; color: var(--lv-t3); font-weight: 600; margin-bottom: 10px; } .lv-title { font-size: 34px; line-height: 1.3; font-weight: 700; color: var(--lv-t1); letter-spacing: -.5px; } .lv-title:after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--lv-red), var(--lv-gold)); margin: 16px auto 0; } .lv-desc { color: var(--lv-t2); font-size: 15px; margin-top: 14px; } /* ---------------- 按钮 ---------------- */ .lv-btn { display: inline-block; height: 48px; line-height: 48px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease; white-space: nowrap; } .lv-btn-main { background: linear-gradient(135deg, var(--lv-red), var(--lv-red3)); color: #fff; box-shadow: 0 10px 24px var(--lv-a30); } .lv-btn-main:hover { transform: translateY(-2px); box-shadow: 0 16px 32px var(--lv-a38); } .lv-btn-line { border: 1px solid rgba(255, 255, 255, .28); color: #fff; } .lv-btn-line:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); } /* ★★ 按钮文字色一律用「两个类」写（.lv-btn.lv-btn-xxx，权重 0,2,0）， 不要只写单类（0,1,0）。原因： ny.css 第 8 行躺着一条 `a:link{color:#333333;text-decoration:none;...}`， **伪类也算 class**，所以它的权重是 (0,1,1) —— 稳压所有单类选择器，跟加载先后无关。 后果是内页上凡是 做的按钮，文字都被刷成深灰 #333： · 侧栏那枚红底「立即咨询」→ 红底配深灰字，对比度不达标； · 深色底上的白描边按钮（新页 .lv-sd-cta）→ 几乎看不见。 首页之所以一直没暴露，是因为首页的版式表里**没有 ny.css** （见 theme.js 的 LAYOUT_CSS.index），而 ny.css 是内页的公共表。 抬到 (0,2,0) 之后不依赖加载顺序，谁先谁后都赢； 而浅色版的 `.lv-home .lv-btn-line.lv-btn-sm` 是 (0,3,0)，仍然压得住这一条。 */ .lv-btn.lv-btn-main, .lv-btn.lv-btn-line { color: #fff; } .lv-btn-sm { height: 42px; line-height: 40px; padding: 0 24px; font-size: 14px; } .lv-home .lv-btn-line.lv-btn-sm { border-color: var(--lv-line); color: var(--lv-t1); } .lv-home .lv-btn-line.lv-btn-sm:hover { border-color: var(--lv-red); color: var(--lv-red); background: #fff; } /* 滚动淡入（.lv-js 由 home-v3.js 添加；脚本没跑起来时内容照常可见，不会白屏） */ .lv-home.lv-js .lv-reveal, .lv-home.lv-js .lv-cases, .lv-home.lv-js .lv-news, .lv-home.lv-js .lv-adv-list, .lv-home.lv-js .lv-grid { opacity: 0; transform: translateY(26px); } .lv-home.lv-js .lv-reveal.is-in, .lv-home.lv-js .lv-cases.is-in, .lv-home.lv-js .lv-news.is-in, .lv-home.lv-js .lv-adv-list.is-in, .lv-home.lv-js .lv-grid.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); } /* 卡片逐个错开出现 */ .lv-home.lv-js .lv-grid.is-in > * { animation: lv-up .6s cubic-bezier(.2, .7, .3, 1) both; } .lv-home.lv-js .lv-grid.is-in > *:nth-child(2) { animation-delay: .06s; } .lv-home.lv-js .lv-grid.is-in > *:nth-child(3) { animation-delay: .12s; } .lv-home.lv-js .lv-grid.is-in > *:nth-child(4) { animation-delay: .18s; } .lv-home.lv-js .lv-grid.is-in > *:nth-child(5) { animation-delay: .24s; } .lv-home.lv-js .lv-grid.is-in > *:nth-child(6) { animation-delay: .3s; } @keyframes lv-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ========================================================================== 一、首屏 ========================================================================== */ .lv-hero { position: relative; background: var(--lv-ink); color: var(--lv-dark-t1); overflow: hidden; /* 与上方红色导航条衔接的一道品牌渐变细线 */ border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--lv-red), var(--lv-hot) 40%, var(--lv-gold)) 1; } .lv-hero-deco { position: absolute; inset: 0; display: block; pointer-events: none; } .lv-glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); } .lv-glow-a { width: 620px; height: 620px; top: -240px; right: -120px; background: radial-gradient(circle, var(--lv-glow-a), transparent 68%); } .lv-glow-b { width: 560px; height: 560px; bottom: -300px; left: -160px; background: radial-gradient(circle, var(--lv-glow-b), transparent 68%); } .lv-mesh { position: absolute; inset: 0; display: block; background-image: linear-gradient(rgba(255, 255, 255, .038) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .038) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 26%, transparent 78%); mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 26%, transparent 78%); } .lv-hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; padding: 74px 0 82px; } /* 首页 H1：第一行是关键词（同时充当视觉上的"眉标"），第二行是主标语。 这样 H1 里既有地域+业务词，又不至于像关键词堆砌。 */ .lv-hero-title { font-size: 52px; line-height: 1.2; font-weight: 800; letter-spacing: -1.4px; color: #fff; margin-bottom: 22px; } .lv-hero-kw { display: block; width: -moz-fit-content; width: fit-content; font-size: 14px; font-weight: 600; letter-spacing: .1em; line-height: 1.6; color: var(--lv-gold); background: var(--lv-gold-a07); border: 1px solid var(--lv-gold-a34); border-radius: 999px; padding: 5px 15px; margin-bottom: 18px; } .lv-hero-title em { background: linear-gradient(100deg, var(--lv-red2), var(--lv-hot2) 55%, var(--lv-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lv-hero-sub { font-size: 16px; color: var(--lv-dark-t2); line-height: 1.95; max-width: 520px; } .lv-hero-points { margin: 26px 0 32px; } .lv-hero-points li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 15px; color: #c8d4e3; } .lv-hero-points li:before { content: ""; position: absolute; left: 0; top: 9px; width: 15px; height: 15px; border-radius: 50%; background: var(--lv-a16); border: 1px solid var(--lv-a50); } .lv-hero-points li:after { content: ""; position: absolute; left: 5px; top: 13px; width: 5px; height: 3px; border-left: 1.6px solid var(--lv-red2); border-bottom: 1.6px solid var(--lv-red2); transform: rotate(-45deg); } .lv-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .lv-hero-note { margin-top: 22px; font-size: 13px; color: #7c8899; } .lv-hero-note a { color: var(--lv-gold); font-weight: 600; } .lv-hero-note span { margin-left: 10px; } .lv-hero-note span:before { content: "·"; margin-right: 8px; color: #55606f; } /* --- 设备壳 + 后台轮播 --- */ .lv-hero-visual { position: relative; } .lv-mock { position: relative; border-radius: 16px; overflow: hidden; background: var(--lv-ink3); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 8px rgba(255, 255, 255, .028); transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); transform-origin: right center; transition: transform .6s cubic-bezier(.2, .7, .3, 1); } .lv-mock:hover { transform: perspective(1600px) rotateY(-1.5deg) rotateX(0deg); } .lv-mock-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: var(--lv-nav); border-bottom: 1px solid rgba(255, 255, 255, .07); } .lv-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4557; } .lv-mock-bar i:nth-child(1) { background: #ff5f57; } .lv-mock-bar i:nth-child(2) { background: #febc2e; } .lv-mock-bar i:nth-child(3) { background: #28c840; } .lv-mock-url { flex: 1; margin-left: 8px; height: 19px; line-height: 19px; border-radius: 5px; background: rgba(255, 255, 255, .06); color: #7d8b9e; font-size: 11px; padding: 0 10px; letter-spacing: .3px; overflow: hidden; white-space: nowrap; } .lv-mock-screen { position: relative; padding-top: 62.5%; /* 16:10，不依赖 aspect-ratio，老浏览器也稳 */ background: var(--lv-ink4); } .lv-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; display: block; } .lv-slide img { width: 100%; height: 100%; object-fit: cover; } .lv-slide.is-on { opacity: 1; } /* 脚本没接管时（没有 .lv-ready），退化成静态显示第一张 */ .lv-mock-screen:not(.lv-ready) .lv-slide:first-child { opacity: 1; } .lv-mock-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 3; } .lv-mock-dots span { width: 7px; height: 7px; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .45); transition: all .3s ease; } .lv-mock-dots span.is-on { width: 20px; background: #fff; } .lv-mock-screen:not(.lv-ready) .lv-mock-dots { display: none; } /* 悬浮数据卡 */ .lv-fcard { position: absolute; z-index: 4; background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 16px 38px rgba(0, 0, 0, .32); display: flex; flex-direction: column; line-height: 1.2; animation: lv-float 5.5s ease-in-out infinite; } .lv-fcard b { font-size: 22px; font-weight: 800; color: var(--lv-red); letter-spacing: -.5px; } .lv-fcard b small { font-size: 12px; font-weight: 600; margin-left: 1px; } .lv-fcard em { font-size: 12px; color: var(--lv-t2); margin-top: 3px; } .lv-fcard-a { left: -26px; top: 42px; } .lv-fcard-b { right: -18px; bottom: 56px; animation-delay: 2.2s; } @keyframes lv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ========================================================================== 二、数据条 ========================================================================== */ .lv-stats { background: var(--lv-ink2); border-top: 1px solid rgba(255, 255, 255, .06); } .lv-stats-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 34px 0; } .lv-stat { text-align: center; border-right: 1px solid rgba(255, 255, 255, .07); } .lv-stat:last-child { border-right: 0; } .lv-stat b { display: block; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.15; font-variant-numeric: tabular-nums; } .lv-stat b i { font-size: 18px; color: var(--lv-red2); margin-left: 2px; } .lv-stat em { display: block; font-size: 13px; color: var(--lv-dark-t2); margin-top: 6px; } /* ========================================================================== 三、服务项目 ========================================================================== */ .lv-grid { display: grid; gap: 22px; } .lv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lv-svc { display: block; background: #fff; border: 1px solid var(--lv-line); border-radius: var(--lv-r); padding: 30px 26px 26px; height: 100%; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .lv-svc:before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--lv-red), var(--lv-gold)); transition: width .38s cubic-bezier(.2, .7, .3, 1); } .lv-svc:hover { transform: translateY(-6px); box-shadow: var(--lv-shadow-h); border-color: transparent; } .lv-svc:hover:before { width: 100%; } .lv-svc-ico { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; margin-bottom: 20px; background: linear-gradient(135deg, var(--lv-wash1), var(--lv-wash2)); border: 1px solid var(--lv-washline); color: var(--lv-red); transition: transform .3s ease; } .lv-svc:hover .lv-svc-ico { transform: scale(1.07) rotate(-4deg); } .lv-svc-ico svg { width: 25px; height: 25px; display: block; } .lv-svc h3 { font-size: 18px; font-weight: 700; color: var(--lv-t1); margin-bottom: 10px; } .lv-svc p { font-size: 14px; color: var(--lv-t2); line-height: 1.85; min-height: 52px; } .lv-svc-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--lv-t3); transition: color .25s ease, gap .25s ease; } .lv-svc-more i { width: 14px; height: 8px; position: relative; display: inline-block; } .lv-svc-more i:before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 1.5px; background: currentColor; transition: width .25s ease; } .lv-svc-more i:after { content: ""; position: absolute; right: 1px; top: 0; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } .lv-svc:hover .lv-svc-more { color: var(--lv-red); gap: 9px; } /* ========================================================================== 四、套餐 ========================================================================== */ .lv-pkg { position: relative; background: #fff; border: 1px solid var(--lv-line); border-radius: var(--lv-r); padding: 30px 24px 26px; height: 100%; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .lv-pkg:hover { transform: translateY(-6px); box-shadow: var(--lv-shadow-h); border-color: transparent; } .lv-pkg-tag { position: absolute; right: 16px; top: -1px; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .04em; padding: 4px 10px 5px; border-radius: 0 0 8px 8px; background: linear-gradient(135deg, var(--lv-red), var(--lv-red3)); } .lv-pkg.is-hot { border-color: var(--lv-a35); box-shadow: 0 12px 34px var(--lv-a10); } .lv-pkg-name { font-size: 12px; letter-spacing: .18em; color: var(--lv-t3); font-weight: 600; text-transform: uppercase; } .lv-pkg-cn { font-size: 19px; font-weight: 700; color: var(--lv-t1); margin: 6px 0 16px; } .lv-pkg-price { font-size: 34px; font-weight: 800; color: var(--lv-red); letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; } .lv-pkg-price small { font-size: 16px; font-weight: 600; margin-right: 2px; } .lv-pkg-price i { font-size: 13px; font-weight: 500; color: var(--lv-t3); letter-spacing: 0; margin-left: 4px; } .lv-pkg-line { height: 1px; background: var(--lv-line); margin: 20px 0; } .lv-pkg-desc { font-size: 14px; color: var(--lv-t2); line-height: 1.85; flex: 1; } .lv-pkg-btn { display: block; text-align: center; height: 42px; line-height: 40px; margin-top: 22px; border: 1px solid var(--lv-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--lv-t1); transition: all .25s ease; } .lv-pkg:hover .lv-pkg-btn, .lv-pkg.is-hot .lv-pkg-btn { background: linear-gradient(135deg, var(--lv-red), var(--lv-red3)); color: #fff; border-color: transparent; box-shadow: 0 8px 20px var(--lv-a26); } /* ========================================================================== 五、我们的优势（深色） ========================================================================== */ .lv-adv { background: var(--lv-ink); color: var(--lv-dark-t1); position: relative; overflow: hidden; } .lv-adv:before { content: ""; position: absolute; width: 700px; height: 700px; left: 50%; top: -420px; margin-left: -350px; border-radius: 50%; background: radial-gradient(circle, var(--lv-a20), transparent 66%); filter: blur(70px); } .lv-adv .lv-wrap { position: relative; z-index: 2; } .lv-adv .lv-kicker { color: #6f7d90; } .lv-adv .lv-title { color: #fff; } .lv-adv .lv-desc { color: var(--lv-dark-t2); } .lv-adv-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .lv-adv-item { border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--lv-r); padding: 26px 20px 24px; background: rgba(255, 255, 255, .026); transition: background-color .3s ease, border-color .3s ease, transform .3s ease; } .lv-adv-item:hover { background: rgba(255, 255, 255, .06); border-color: var(--lv-a50); transform: translateY(-5px); } .lv-adv-no { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--lv-red2); font-variant-numeric: tabular-nums; } /* 注意选择器：这里是 p.lv-adv-word，不能写成 `.lv-adv-item p` —— 那样权重 (0,2,1) 会压过 (0,1,0)，34px 的大字会被下面的小字规则吃掉。 */ .lv-adv-item p.lv-adv-word { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.2; margin: 8px 0 10px; letter-spacing: -.5px; } .lv-adv-item p.lv-adv-txt { font-size: 13px; color: var(--lv-dark-t2); line-height: 1.85; } /* ========================================================================== 六、精品案例（案例截图墙） ========================================================================== */ .lv-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .lv-case { display: block; background: #fff; border: 1px solid var(--lv-line); border-radius: var(--lv-r); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .lv-case:hover { transform: translateY(-6px); box-shadow: var(--lv-shadow-h); border-color: transparent; } .lv-case-pic { position: relative; display: block; height: 186px; background: #eef2f7; overflow: hidden; } /* 图是整站截图（长图），用 cover + 顶部对齐 → 露出网站头部横幅，像作品集而不是缩略图 */ .lv-case-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s cubic-bezier(.2, .7, .3, 1); } .lv-case:hover .lv-case-pic img { transform: scale(1.05); } .lv-case-pic:after { content: "查看案例 →"; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 21, .62); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .3s ease; } .lv-case:hover .lv-case-pic:after { opacity: 1; } .lv-case-name { display: block; padding: 13px 16px; font-size: 13.5px; color: var(--lv-t1); border-top: 1px solid var(--lv-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s ease; } .lv-case:hover .lv-case-name { color: var(--lv-red); } .lv-cases-more { text-align: center; margin-top: 34px; } /* ========================================================================== 七、资讯 ========================================================================== */ .lv-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .lv-news-col { background: #fff; border: 1px solid var(--lv-line); border-radius: var(--lv-r); padding: 26px 24px 18px; height: 100%; transition: box-shadow .3s ease, transform .3s ease; } .lv-news-col:hover { transform: translateY(-4px); box-shadow: var(--lv-shadow-h); } .lv-news-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .lv-news-h h3 { font-size: 18px; font-weight: 700; color: var(--lv-t1); } .lv-news-h a { font-size: 12px; color: var(--lv-t3); transition: color .25s ease; } .lv-news-h a:hover { color: var(--lv-red); } .lv-news-list li { border-top: 1px dashed var(--lv-line); } .lv-news-list li:first-child { border-top: 0; } .lv-news-list a { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-size: 14px; color: var(--lv-t2); transition: color .22s ease, padding-left .22s ease; } .lv-news-list a:before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lv-red); flex: none; opacity: .45; transition: opacity .22s ease; } .lv-news-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lv-news-list a:hover { color: var(--lv-t1); padding-left: 4px; } .lv-news-list a:hover:before { opacity: 1; } /* ========================================================================== 八、联系 CTA ========================================================================== */ .lv-cta { position: relative; overflow: hidden; background: linear-gradient(118deg, var(--lv-red4) 0%, var(--lv-red) 46%, var(--lv-red5) 100%); color: #fff; } .lv-cta-deco { position: absolute; inset: 0; background-image: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, .16), transparent 42%), radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .1), transparent 40%); } .lv-cta-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 52px 0; } .lv-cta-copy h2 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; } .lv-cta-copy p { font-size: 14px; color: rgba(255, 255, 255, .82); max-width: 560px; line-height: 1.85; } .lv-cta-tel { text-align: right; flex: none; } .lv-cta-tel em { display: block; font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, .72); } .lv-cta-tel a { display: block; font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.25; font-variant-numeric: tabular-nums; } .lv-cta-tel a:hover { text-decoration: underline; text-underline-offset: 6px; } .lv-cta-tel span { display: block; font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 4px; } /* ========================================================================== 九、友情链接 ========================================================================== */ .lv-links { background: #fff; border-top: 1px solid var(--lv-line); } .lv-links-in { padding: 30px 0 38px; } .lv-links-t { font-size: 14px; font-weight: 700; color: var(--lv-t2); margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; } .lv-links-t em { font-size: 11px; letter-spacing: .18em; color: var(--lv-t3); font-weight: 500; } .lv-links-b { display: flex; flex-wrap: wrap; gap: 10px 22px; } .lv-links-b a { font-size: 13px; color: var(--lv-t3); transition: color .25s ease; } .lv-links-b a:hover { color: var(--lv-red); } /* ========================================================================== 十、响应式 ========================================================================== */ /* 中等屏：两列 */ @media (max-width: 1200px) { .lv-hero-title { font-size: 44px; } .lv-hero-in { gap: 40px; padding: 60px 0 68px; } .lv-fcard-a { left: 0; } .lv-fcard-b { right: 0; } .lv-adv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .lv-sec { padding: 62px 0; } .lv-title { font-size: 28px; } .lv-hero-in { grid-template-columns: minmax(0, 1fr); gap: 46px; padding: 52px 0 62px; } .lv-hero-title { font-size: 40px; } .lv-hero-sub { max-width: none; } .lv-mock { transform: none; max-width: 620px; } .lv-mock:hover { transform: none; } .lv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-news { grid-template-columns: minmax(0, 1fr); } .lv-cta-in { flex-direction: column; align-items: flex-start; gap: 22px; padding: 44px 0; } .lv-cta-tel { text-align: left; } } @media (max-width: 640px) { .lv-home { font-size: 13px; } .lv-wrap { max-width: calc(100% - 28px); } .lv-sec { padding: 48px 0; } .lv-head { margin-bottom: 30px; } .lv-title { font-size: 24px; } .lv-desc { font-size: 14px; } .lv-hero-in { padding: 40px 0 50px; gap: 38px; } .lv-hero-title { font-size: 31px; letter-spacing: -.8px; } .lv-hero-sub { font-size: 15px; line-height: 1.85; } .lv-hero-kw { font-size: 12px; padding: 4px 12px; margin-bottom: 14px; } .lv-hero-actions { gap: 10px; } .lv-btn { height: 45px; line-height: 45px; padding: 0 20px; font-size: 14px; flex: 1; text-align: center; } .lv-hero-note span { display: block; margin-left: 0; margin-top: 3px; } .lv-hero-note span:before { content: none; } .lv-fcard { padding: 9px 13px; } .lv-fcard b { font-size: 18px; } .lv-fcard-a { left: -6px; top: 20px; } .lv-fcard-b { right: -6px; bottom: 26px; } .lv-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; padding: 26px 0; } .lv-stat { border-right: 0; } .lv-stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .07); } .lv-stat b { font-size: 26px; } .lv-grid-3, .lv-grid-4, .lv-adv-list { grid-template-columns: minmax(0, 1fr); gap: 14px; } .lv-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lv-case-pic { height: 112px; } .lv-case-name { padding: 10px 12px; font-size: 12px; } .lv-adv-item p.lv-adv-word { font-size: 26px; } .lv-adv-item { padding: 20px 18px 18px; } .lv-svc { padding: 24px 20px 20px; } .lv-svc p { min-height: 0; } .lv-cta-copy h2 { font-size: 21px; } .lv-cta-tel a { font-size: 31px; } } /* 尊重系统的「减少动态效果」设置 */ @media (prefers-reduced-motion: reduce) { .lv-fcard { animation: none; } .lv-home.lv-js .lv-reveal, .lv-home.lv-js .lv-cases, .lv-home.lv-js .lv-news, .lv-home.lv-js .lv-adv-list, .lv-home.lv-js .lv-grid { opacity: 1; transform: none; } .lv-home.lv-js .lv-grid.is-in > * { animation: none; } } /* ========================================================================== 十一、站点页头 / 页脚（.lv-hd / .lv-ft）—— 首页与内页共用同一套 ── 这两个块是 .lv-home 的兄弟节点，所以规则必须挂在 body.lv-v3 下， 不能挂在 .lv-home 里。变量已经提到 body 上，这里直接引用即可。 ── 2026-09-30 起内页也换成这一套（原来那套老页头页脚已停用）： 内页 body 同样带 lv-v3，于是这里的所有规则自动生效， 不需要为内页复制第二份页头页脚样式。 随之而来的一个好处：改一次页头，全站一起变。 ========================================================================== */ body.lv-v3 .lv-hd { background: #fff; position: relative; z-index: 50; } body.lv-v3 .lv-hd ul, body.lv-v3 .lv-ft ul { list-style: none; margin: 0; padding: 0; } body.lv-v3 .lv-hd a, body.lv-v3 .lv-ft a { text-decoration: none; } /* 同样躲开 style1.css 那条 `div{margin:0 auto}` —— flex 子项被 auto 外边距居中会 把 justify-content 的分配吃光，页头左右两端会缩成一坨。 */ body.lv-v3 .lv-hd-top-in > *, body.lv-v3 .lv-hd-main > *, body.lv-v3 .lv-ft-main > *, body.lv-v3 .lv-ft-cols > *, body.lv-v3 .lv-ft-topics-in > * { margin-left: 0; margin-right: 0; } /* ---- 页头：顶部信息条 ---- */ body.lv-v3 .lv-hd-top { background: #f6f8fb; border-bottom: 1px solid #eef1f6; font-size: 12px; color: #8b95a3; } body.lv-v3 .lv-hd-top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 38px; } body.lv-v3 .lv-hd-slogan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.lv-v3 .lv-hd-topinfo { white-space: nowrap; flex: none; } body.lv-v3 .lv-hd-topinfo a { color: var(--lv-red); font-weight: 700; font-size: 13px; } /* ---- 页头：logo 行 ---- */ body.lv-v3 .lv-hd-main { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 92px; } body.lv-v3 .lv-hd-logo { display: block; flex: none; } body.lv-v3 .lv-hd-logo img { display: block; height: 68px; width: auto; } body.lv-v3 .lv-hd-tel { text-align: right; line-height: 1.25; flex: none; } body.lv-v3 .lv-hd-tel em { display: block; font-size: 12px; color: #98a2b0; letter-spacing: .12em; } body.lv-v3 .lv-hd-tel a { display: block; font-size: 27px; font-weight: 800; color: var(--lv-red); letter-spacing: -.6px; font-variant-numeric: tabular-nums; } body.lv-v3 .lv-hd-tel span { display: block; font-size: 12px; color: #98a2b0; margin-top: 3px; } /* ---- 页头：导航（深色，与下方深色首屏连成一体） ---- */ body.lv-v3 .lv-hd-nav { background: var(--lv-hd); position: relative; z-index: 40; } body.lv-v3 .lv-nav { display: flex; align-items: stretch; } /* ★ flex 子项默认 flex-shrink:1 —— 宽度不够时它们会被压扁， * 而中文没有"词"的概念，压到极限就变成「首/页」「网站建/设」这种逐字换行， * 视觉上等于导航彻底崩了（1024 / 768 档实测踩过）。 * 这里明确不许收缩 + 不许换行：宽度实在不够时由父级横向滚动兜底（见下方媒体查询）。 */ body.lv-v3 .lv-nav > li { position: relative; flex: 0 0 auto; } body.lv-v3 .lv-nav > li > a { display: block; height: 52px; line-height: 52px; padding: 0 21px; color: #c3cedd; font-size: 15px; position: relative; white-space: nowrap; transition: color .22s ease, background-color .22s ease; } body.lv-v3 .lv-nav > li > a:hover { color: #fff; background: rgba(255, 255, 255, .06); } body.lv-v3 .lv-nav > li.on > a { color: #fff; font-weight: 600; } body.lv-v3 .lv-nav > li.on > a:after { content: ""; position: absolute; left: 21px; right: 21px; bottom: 0; height: 2px; background: var(--lv-red); } body.lv-v3 .lv-sub { position: absolute; left: 0; top: 100%; min-width: 174px; background: var(--lv-ink2); border: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 10px 10px; padding: 6px 0; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .34); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 60; } body.lv-v3 .lv-nav > li:hover > .lv-sub { opacity: 1; visibility: visible; transform: none; } /* ★★ 2026-10-03 修：靠右栏目（如「联系我们」）的下拉会顶出视口外 * * 症状：1024px 下全站每页 scrollWidth 都比 innerWidth 大 58~67px，元凶就是 * 「联系我们」这一项 —— 它的父项 right=1003 已经贴着视口边（1024）， * 而下拉是 left:0 往右展开（min-width:174px），右边界直接跑到 1091。 * * 为什么以前没发现：上一轮的判据只看「整页有没有横向滚动条」， * 而 body/html 上有 overflow-x 兜底（见 responsive.css），滚动条根本不出现， * 于是 1005/1005 全绿 —— 但元素实际是超出的，放大到某些宽度就会露馅。 * * 修法：加一个 .lv-sub-flip 修饰类，让下拉改成「贴父项右边缘向左展开」。 * 可翻转位置不能写死 —— 栏目是可以增删的（本季就加了「软件定制开发」「BIM运维」）， * 今天哪一项最靠右，明天可能就变了。所以由 theme.js 的 navSubFlip() 在页面加载与 * 窗口尺寸变化时实测每一下拉的右边界，超出就自动打上这个类，不依赖任何硬编码名单。 */ body.lv-v3 .lv-nav > li.lv-sub-flip > .lv-sub { left: auto; right: 0; } body.lv-v3 .lv-sub a { display: block; padding: 9px 18px; font-size: 14px; color: #aab6c6; transition: color .2s ease, background-color .2s ease; } body.lv-v3 .lv-sub a:hover { color: #fff; background: rgba(255, 255, 255, .06); } /* ★ 2026-10-03 补：下拉里「当前页所在的那一项」。 移动端的 .lv-mnav-sub > li.on 一直有，桌面这侧却从来没写过 —— 于是访问 /gongsijianjie/ 时，父级「联系我们」亮了，下拉里真正对应的 「公司介绍」却是灰的，看着像点错了。样式与 hover 取同一套（深色底上白字 + 微亮）。 */ body.lv-v3 .lv-sub li.on > a { color: #fff; background: rgba(255, 255, 255, .06); } /* ---- 页脚 ---- */ body.lv-v3 .lv-ft { background: var(--lv-ink); color: #93a1b5; font-size: 13px; } body.lv-v3 .lv-ft a { color: #93a1b5; transition: color .22s ease; } body.lv-v3 .lv-ft a:hover { color: #fff; } body.lv-v3 .lv-ft-main { display: flex; gap: 48px; padding: 56px 0 44px; } body.lv-v3 .lv-ft-brand { width: 296px; flex: none; } body.lv-v3 .lv-ft-logo { display: inline-block; background: #fff; border-radius: 10px; padding: 10px 16px; margin-bottom: 18px; } body.lv-v3 .lv-ft-logo img { display: block; height: 42px; width: auto; } body.lv-v3 .lv-ft-brand p { line-height: 1.9; color: #7f8b9c; } body.lv-v3 .lv-ft-brandtel { margin-top: 14px; font-size: 12px; color: #6d7889; } body.lv-v3 .lv-ft-brandtel a { display: block; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.5px; margin-top: 4px; font-variant-numeric: tabular-nums; } /* 「联系我们」那一列装的是联系方式（QQ/邮箱/手机/地址），比前面三列的字更长， * 等宽四列时最后那句「地址：盐城市东进路美食街3F506室」会在行尾甩出一个孤零零的"室"。 * 给最后一列多一点宽度即可（最后一列同时占 2 格，便于以后再加联系方式行不挤）。 */ body.lv-v3 .lv-ft-cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.34fr); gap: 24px; } body.lv-v3 .lv-ft-col dt { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px; } body.lv-v3 .lv-ft-col dd { margin: 0 0 10px; } body.lv-v3 .lv-ft-col dd a { font-size: 13px; } body.lv-v3 .lv-ft-topics { border-top: 1px solid rgba(255, 255, 255, .07); } body.lv-v3 .lv-ft-topics-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 20px 0; } body.lv-v3 .lv-ft-topics-in > span { font-size: 12px; color: #6d7889; letter-spacing: .1em; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, .12); } body.lv-v3 .lv-ft-topics-in a { font-size: 13px; } body.lv-v3 .lv-ft-bot { background: var(--lv-ft-bot); border-top: 1px solid rgba(255, 255, 255, .06); } body.lv-v3 .lv-ft-bot .lv-wrap { padding: 22px 0 26px; } body.lv-v3 .lv-ft-bot p { font-size: 12px; color: #6d7889; line-height: 2; } body.lv-v3 .lv-ft-bot a { color: #8b95a3; } /* ========================================================================== ★★ 手机 / 平板抽屉导航（2026-10-01 新增） -------------------------------------------------------------------------- 起因（实测数据，不是感觉）：窄屏原来把 .lv-nav 变成一条"隐藏滚动条的横滑带"， 390px 上一屏只看得到 4/10 个栏目，另 6 个要横滑才够得到、而滚动条被藏了； 二级菜单在窄屏是 display:none，于是「客户案例」下 12 个子栏目、「网站建设」下 5 个套餐、「微信开发」等在手机上**完全不可达**。 现在 ≤1000px：横滑带整条收掉，换成右上角汉堡 + 全屏抽屉，10 个栏目与 其子栏目一次列全。桌面端（>1000px）一个字节都不变。 ========================================================================== */ /* 汉堡按钮：默认不显示，只在 ≤1000 出现 */ body.lv-v3 .lv-mbtn { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lv-line); border-radius: 10px; background: #fff; cursor: pointer; position: relative; } body.lv-v3 .lv-mbtn i { display: block; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--lv-t1); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } body.lv-v3 .lv-mbtn i:nth-child(1) { top: 14px; } body.lv-v3 .lv-mbtn i:nth-child(2) { top: 21px; } body.lv-v3 .lv-mbtn i:nth-child(3) { top: 28px; } /* 打开时变成 × */ body.lv-v3.lv-mnav-open .lv-mbtn i:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.lv-v3.lv-mnav-open .lv-mbtn i:nth-child(2) { opacity: 0; } body.lv-v3.lv-mnav-open .lv-mbtn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 抽屉本体：默认 hidden，>1000px 一律不显示 */ body.lv-v3 .lv-mnav { display: none; } @media (max-width: 1000px) { body.lv-v3 .lv-mbtn { display: block; } body.lv-v3 .lv-mnav { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; } body.lv-v3 .lv-mnav[hidden] { display: none; } /* 抽屉打开时锁住背景滚动（否则手指滑动会穿透到页面） */ body.lv-v3.lv-mnav-open { overflow: hidden; } body.lv-v3 .lv-mnav-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8, 13, 20, .58); opacity: 0; transition: opacity .26s ease; } body.lv-v3.lv-mnav-open .lv-mnav-mask { opacity: 1; } body.lv-v3 .lv-mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; /* 不用 min()（CSS 取值 4，老引擎不认）：86vw 配一个 max-width 上限， 效果等价 —— 宽屏取 380，窄屏取屏宽的 86%。 */ width: 86vw; max-width: 380px; display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 48px rgba(8, 13, 20, .28); transform: translateX(100%); transition: transform .28s cubic-bezier(.22, .61, .36, 1); } body.lv-v3.lv-mnav-open .lv-mnav-panel { transform: none; } body.lv-v3 .lv-mnav-hd { flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px 0 20px; background: var(--lv-hd); color: #fff; } body.lv-v3 .lv-mnav-hd > span { font-size: 15px; font-weight: 600; letter-spacing: .04em; } body.lv-v3 .lv-mnav-x { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #c3cedd; font-size: 26px; line-height: 1; cursor: pointer; } body.lv-v3 .lv-mnav-x:hover { color: #fff; } /* 菜单区：唯一可滚动的地方 */ body.lv-v3 .lv-mnav-bd { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.lv-v3 .lv-mnav-list, body.lv-v3 .lv-mnav-sub { list-style: none; margin: 0; padding: 0; } body.lv-v3 .lv-mnav-i { border-bottom: 1px solid #eef1f6; } body.lv-v3 .lv-mnav-row { display: flex; align-items: stretch; } body.lv-v3 .lv-mnav-row > a { flex: 1 1 auto; min-width: 0; padding: 15px 8px 15px 20px; color: var(--lv-t1); font-size: 15.5px; line-height: 1.4; display: flex; align-items: center; } body.lv-v3 .lv-mnav-i.on > .lv-mnav-row > a { color: var(--lv-red); font-weight: 700; } /* 触控目标 ≥44px：父子两项都按 44 起算，拇指点得中 */ body.lv-v3 .lv-mnav-tg { flex: none; width: 56px; padding: 0; border: 0; background: #f7f9fc; border-left: 1px solid #eef1f6; cursor: pointer; position: relative; } body.lv-v3 .lv-mnav-tg > span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 11px; height: 11px; } body.lv-v3 .lv-mnav-tg > span:before, body.lv-v3 .lv-mnav-tg > span:after { content: ""; position: absolute; background: #8b95a3; border-radius: 1px; } body.lv-v3 .lv-mnav-tg > span:before { left: 0; right: 0; top: 5px; height: 2px; } body.lv-v3 .lv-mnav-tg > span:after { top: 0; bottom: 0; left: 5px; width: 2px; transition: transform .22s ease; } body.lv-v3 .lv-mnav-i.is-open > .lv-mnav-row .lv-mnav-tg > span:after { transform: scaleY(0); } body.lv-v3 .lv-mnav-i.is-open > .lv-mnav-row .lv-mnav-tg { background: #eef2f8; } /* 子栏目：默认收起，展开时给出层级感（左侧竖线 + 缩进） */ body.lv-v3 .lv-mnav-sub { display: none; background: #f7f9fc; padding: 6px 0 8px; } body.lv-v3 .lv-mnav-i.is-open > .lv-mnav-sub { display: block; } body.lv-v3 .lv-mnav-sub > li > a { /* 用 flex + min-height 定高，不靠 padding 凑 —— 老站 CSS 里对 ul/li 有一堆重置，line-height 不一定是我们以为的那个值， 靠 padding 算高度的写法实测只有 36px（差 8px 就点不舒服了）。 */ display: flex; align-items: center; min-height: 44px; padding: 6px 20px 6px 34px; color: #55606f; font-size: 14px; line-height: 1.5; border-left: 2px solid #e2e8f0; margin-left: 20px; } body.lv-v3 .lv-mnav-sub > li.on > a { color: var(--lv-red); border-left-color: var(--lv-red); font-weight: 600; } body.lv-v3 .lv-mnav-ft { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #eef1f6; background: #fff; } body.lv-v3 .lv-mnav-ft em { font-style: normal; font-size: 12px; color: #98a2b0; letter-spacing: .1em; } body.lv-v3 .lv-mnav-ft a { font-size: 19px; font-weight: 800; color: var(--lv-red); } } /* ---- 页头页脚的响应式 ---- */ /* 1101–1200px：导航 10 个一级栏目在 15px/21px 内边距下约需 1030px， * 而 1200 宽的可视区只有约 1170px —— 余量太薄，缩一点字号与内边距更稳。 * 实测 1024 档按 14px/15px 算总宽约 836px，放进 994px 的可视区富余充足。 */ @media (max-width: 1200px) { body.lv-v3 .lv-nav > li > a { padding: 0 15px; font-size: 14px; height: 48px; line-height: 48px; } body.lv-v3 .lv-nav > li.on > a:after { left: 15px; right: 15px; } } @media (max-width: 1000px) { body.lv-v3 .lv-hd-main { height: 80px; } body.lv-v3 .lv-hd-logo img { height: 46px; } body.lv-v3 .lv-hd-tel a { font-size: 22px; } /* ★ 平板及以下：横滑导航带**整条收掉**，改由汉堡 + 抽屉承担（见文件上方「抽屉导航」段）。 * 保留原注释作为来龙去脉的记录：这条横滑带本身是为了解决 641–1000 这段 * "flex 被压扁 → 中文逐字换行"的崩坏（768 档实测每个栏目被拆成两行单字）。 * 它解决了"被压扁"，但没解决"够不到"——量下来 390px 只露 4/10 个栏目， * 而二级菜单因为溢出裁剪只能 display:none，等于手机上把一半网站藏了。 * 所以现在直接 display:none 掉整条带子，不再让用户去猜"还能横滑"。 */ body.lv-v3 .lv-hd-nav { display: none; } body.lv-v3 .lv-ft-main { flex-direction: column; gap: 30px; padding: 44px 0 34px; } body.lv-v3 .lv-ft-brand { width: auto; } body.lv-v3 .lv-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } } @media (max-width: 640px) { /* ★ 小热区改造：把「更多 >」「友情链接」「页头电话」这几个实际高度只有 * 20–24px 的链接，用「内边距撑大 + 等量负外边距拉回」的方式把可点范围 * 做到 ≥32px —— 视觉位置与排版一个像素都不动，只是手指更容易点中。 * 直接用 padding 会把行高顶开、版面跟着变，所以必须配负 margin 抵消。 */ body.lv-v3 .lv-news-h > a { padding: 7px 6px; margin: -7px -6px; } body.lv-v3 .lv-links-b a { padding: 6px 3px; margin: -6px -3px; } body.lv-v3 .lv-hd-tel > a { padding: 6px 2px; margin: -6px -2px; } /* 页脚「业务专题」这一排是 flex 子项（会被块化），所以 padding 真的会撑高 —— 干脆给它一个 36px 的行高，并把行间距收到 0，六条链接排出来的总高度几乎没变。 改造前实测每条只有 13px 高（font-size 13 × line-height 1），手机上很难点。 */ body.lv-v3 .lv-ft-topics-in { gap: 0 14px; padding: 8px 0 10px; } body.lv-v3 .lv-ft-topics-in > a, body.lv-v3 .lv-ft-topics-in > span { display: flex; align-items: center; min-height: 36px; } body.lv-v3 .lv-hd-top-in { height: auto; padding: 8px 0; font-size: 11px; } body.lv-v3 .lv-hd-slogan { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; } body.lv-v3 .lv-hd-topinfo { display: none; } /* 这一行现在是「logo + 电话 + 汉堡」，三个都要留在 320px 内。 电话字样缩到 17px，并把 log 与电话之间的 gap 收紧。 */ body.lv-v3 .lv-hd-main { height: 62px; gap: 10px; } body.lv-v3 .lv-hd-logo img { height: 38px; } body.lv-v3 .lv-hd-tel a { font-size: 17px; letter-spacing: -.4px; } body.lv-v3 .lv-mbtn { width: 40px; height: 40px; } body.lv-v3 .lv-mbtn i { left: 11px; right: 11px; } body.lv-v3 .lv-mbtn i:nth-child(1) { top: 13px; } body.lv-v3 .lv-mbtn i:nth-child(2) { top: 19px; } body.lv-v3 .lv-mbtn i:nth-child(3) { top: 25px; } body.lv-v3.lv-mnav-open .lv-mbtn i:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.lv-v3.lv-mnav-open .lv-mbtn i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.lv-v3 .lv-hd-tel em, body.lv-v3 .lv-hd-tel span { display: none; } body.lv-v3 .lv-hd-tel a { font-size: 19px; } body.lv-v3 .lv-nav > li > a { padding: 0 13px; font-size: 14px; height: 44px; line-height: 44px; } body.lv-v3 .lv-nav > li.on > a:after { left: 13px; right: 13px; } body.lv-v3 .lv-ft-col dd { margin-bottom: 8px; } body.lv-v3 .lv-ft-topics-in { gap: 6px 16px; padding: 16px 0; } body.lv-v3 .lv-ft-topics-in > span { padding-right: 12px; } body.lv-v3 .lv-ft-bot .lv-wrap { padding: 18px 0 22px; } body.lv-v3 .lv-ft-bot p { line-height: 1.9; } } /* ========================================================================== 十一之二、首页「BIM 运维管理平台」重锤区块（2026-10-02 新增） ───────────────────────────────────────────────────────────────────────── 位置：夹在「我们的优势」和「精品案例」之间。 做法：深色通栏 + 一整幅运行中的大屏截图。首页只有首屏是深色， 这里再给一次深色，是为了让它在满屏白底里"跳"出来。 ★ 为什么不用 .lv-sec-tint（浅灰底）： 浅灰区块在首页已经用了两回（套餐、资讯），再来一个就彻底不突出了。 ★ 大屏截图为什么不做 16:10 裁切： 原图是完整大屏（顶部标题 + 左中右三栏全在），裁掉任何一边， "这是一块真在跑的大屏"的说服力就打折了。 ========================================================================== */ .lv-bim { background: var(--lv-pghero-grad); padding: 76px 0; overflow: hidden; } .lv-bim-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 46px; align-items: center; } .lv-bim-copy { min-width: 0; } .lv-bim-copy .lv-kicker { color: var(--lv-wash-t); } .lv-bim-title { margin-top: 14px; font-size: 34px; font-weight: 800; line-height: 1.32; color: #fff; letter-spacing: -.01em; } .lv-bim-desc { margin-top: 18px; font-size: 15px; line-height: 2; color: var(--lv-dark-t2); } .lv-bim-points { margin-top: 24px; display: grid; gap: 13px; } .lv-bim-points li { position: relative; padding-left: 24px; font-size: 14.4px; line-height: 1.7; color: var(--lv-dark-t1); } .lv-bim-points li:before { content: ""; position: absolute; left: 1px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--lv-red); box-shadow: 0 0 0 4px var(--lv-a16); } .lv-bim-actions { margin-top: 32px; display: flex; gap: 12px; } .lv-bim-actions .lv-btn { flex: none; } .lv-bim-shot { position: relative; display: block; min-width: 0; border-radius: var(--lv-r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); } .lv-bim-shot img { display: block; width: 100%; height: auto; } /* 播放提示条：贴在截图底部居中。 ★ 这不是真的