/* ===================================================== 安天官网 —— 向 avlcode.cn 视觉靠拢覆盖样式 工作目录：D:\work\ZZWH\网站工作\www.antiy.cn_20260728_142124_改版 作用范围：首页(index) + 安全引擎栏目页(SecurityEngine / AVL_SDK_*) 保持不变：首页中的安天译作、应急响应与分析、守护移动智能时代安全、安天动态 引入方式：在对应 .avlcode.html 末尾添加 ===================================================== */ /* ---------- 1. 字体 ---------- */ @font-face { font-family: 'Geist Sans'; src: url('fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- 2. 设计变量 ---------- */ :root { --avl-ink: #171717; --avl-body: #4d4d4d; --avl-mute: #888888; --avl-canvas: #ffffff; --avl-canvas-soft: #fafafa; --avl-canvas-soft-2: #f5f5f5; --avl-hairline: #ebebeb; --avl-hairline-strong: #a1a1a1; --avl-brand: #171717; --avl-brand-deep: #000000; --avl-brand-soft: #f5f5f5; --avl-radius: 8px; --avl-radius-lg: 12px; --avl-radius-xl: 16px; --avl-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); --avl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); } /* ---------- 3. 全局覆盖 ---------- */ body, h1, h2, h3, h4, h5, h6, p, li, span, a, div { font-family: 'Geist Sans', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif; } body { color: var(--avl-body); background-color: var(--avl-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 解决方案产品详情页 */ .page-product .product-section { padding: 80px 0; } /* 仅非 legacy 标题应用 avlcode 颜色/字重，避免破坏需保持原样的四块 */ :not(.antiy-legacy) h1, :not(.antiy-legacy) h2, :not(.antiy-legacy) h3, :not(.antiy-legacy) h4, :not(.antiy-legacy) h5, :not(.antiy-legacy) h6 { color: var(--avl-ink); font-weight: 600; } /* 还原 legacy 区块内未被原始 CSS 覆盖的标题为原始默认值 */ .antiy-legacy .index-title h2, .antiy-legacy .index-title-white h2 { color: #000; font-weight: bold; } /* 阻止 body 文字色继承进需要保持原样的 legacy 区块 */ .antiy-legacy { color: #000; } :not(.antiy-legacy) a { color: var(--avl-brand); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } :not(.antiy-legacy) a:hover, :not(.antiy-legacy) a:focus { color: var(--avl-brand-deep); text-decoration: none; } /* 仅针对 header.html / footer.html 里加载的链接，恢复为所在上下文颜色，不使用 avlcode 品牌红 */ #headCommon a, #headCommon a:hover, #headCommon a:focus, #footerCommon a, #footerCommon a:hover, #footerCommon a:focus { color: inherit; } /* 统一 index 主体、header、footer 容器宽度为 1200px */ #globalWrapper .container, #mainHeader .container, #footerWrapper .container { width: auto; max-width: 1200px; } /* Banner 文字区、入口三块与下方 "安天反病毒引擎生态合作解决方案" 容器严格同宽 */ .banner-text, .index-entrance { width: 100% !important; max-width: 1200px; } /* 移除原版段落默认 14px 限制 */ .col-md-12 p { font-size: inherit; } /* ---------- 4. 标题复用组件 / CTA 按钮 ---------- */ /* 仅应用于需要向 avlcode 视觉靠拢的区块，保持 .antiy-legacy 四块原有样式 */ :not(.antiy-legacy) .index-title, :not(.antiy-legacy) .index-title-white { margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } :not(.antiy-legacy) .index-title h2, :not(.antiy-legacy) .index-title-white h2 { font-size: 28px; font-weight: 600; color: var(--avl-ink); letter-spacing: -0.01em; } :not(.antiy-legacy) .index-title-white h2 { color: #ffffff; } /* "了解更多" / "更多" 文字按钮 → 统一为 AVLCODE 头部下载按钮风格 */ :not(.antiy-legacy) .index-title .more-btn, :not(.antiy-legacy) .index-title-white .more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: auto; line-height: 1; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--avl-brand); font-size: 14px; font-weight: 500; float: right; } :not(.antiy-legacy) .index-title .more-btn:hover, :not(.antiy-legacy) .index-title-white .more-btn:hover { color: var(--avl-brand-deep); } :not(.antiy-legacy) .index-title-white .more-btn { color: rgba(255, 255, 255, 0.80); } :not(.antiy-legacy) .index-title-white .more-btn:hover { color: #ffffff; } /* ---------- 5. 按钮 ---------- */ :not(.antiy-legacy) .learn-more-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 36px; border: 1px solid var(--avl-hairline); color: var(--avl-ink); background: var(--avl-canvas); border-radius: 9999px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } :not(.antiy-legacy) .learn-more-btn:hover { border-color: var(--avl-hairline-strong); background: var(--avl-canvas); color: var(--avl-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .index-product-item .learn-more-btn, .index-solution-item .learn-more-btn, .avl-item > a { background: var(--avl-brand); color: #ffffff; border-color: var(--avl-brand); } .index-product-item .learn-more-btn:hover, .index-solution-item .learn-more-btn:hover, .avl-item > a:hover { background: var(--avl-brand-deep); border-color: var(--avl-brand-deep); color: #ffffff; } /* 聚焦态（点击后焦点留在链接上）与 hover 一致，否则全局 a:focus 规则 （特异性 0,2,1）会压过 .avl-item > a（0,1,1）与 .xxx .learn-more-btn（0,2,0）， 把深色按钮的白字染成 --avl-brand-deep 纯黑 */ .index-product-item .learn-more-btn:focus, .index-solution-item .learn-more-btn:focus, .avl-item > a:focus { background: var(--avl-brand-deep); border-color: var(--avl-brand-deep); color: #ffffff; } :not(.antiy-legacy) .learn-more-btn-white { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 36px; border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; background: transparent; border-radius: 9999px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } :not(.antiy-legacy) .learn-more-btn-white:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.50); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* 聚焦态与 hover 一致，避免点击后被全局 a:focus 规则（0,2,1 > 本按钮常态 0,2,0）染成纯黑 */ :not(.antiy-legacy) .learn-more-btn-white:focus { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.50); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* ---------- 6. Banner 区 ---------- */ /* banner 文字改黑色（浅色底图），并去掉为白字设计的投影 */ .banner-text h3 { width: 100% !important; font-size: 36px; font-weight: 600; color: #171717; letter-spacing: -0.02em; text-shadow: none; } .banner-text p { font-size: 18px; color: var(--avl-mute); /* 与其他页 hero 摘要一致（#888888） */ text-shadow: none; } /* ---------- 7. 快速入口 ---------- */ .index-entrance { bottom: 30px; } .index-entrance.container > .row.entrance-section-box { margin-left: -15px; margin-right: -15px; } .entrance-section-box { display: flex; gap: 16px; } .entrance-section-box > .col-md-4, .entrance-section-box > .col-sm-4, .entrance-section-box > .col-xs-4 { width: calc((100% - 32px) / 3); padding: 0; float: none; } /* 去掉旧版遗留的白色竖线分隔 */ .entrance-section-box > div { border-right: none; } .entrance-item { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px; box-shadow: var(--avl-shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .entrance-title h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; } .entrance-title h2 a { color: var(--avl-ink); } .entrance-title h2 a:hover { color: var(--avl-brand); } .entrance-title p { margin-bottom: 8px; line-height: 1.6; } .entrance-title p a { color: var(--avl-body); font-size: 14px; } .entrance-title p a:hover { color: var(--avl-brand); } /* ---------- 8. 引擎生态 ---------- */ .index-avl { background: var(--avl-canvas-soft); padding: 80px 0; } .index-avl .container > .row { display: flex; flex-wrap: wrap; gap: 20px; } .index-avl .container > .row:before, .index-avl .container > .row:after { display: none; } .index-avl .container > .row > .col-md-3 { width: calc(25% - 15px); padding: 0; float: none; } .avl-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; text-align: center; height: 100%; transition: box-shadow 0.15s ease; } .avl-item:hover { box-shadow: var(--avl-shadow-lg); } .avl-item img { width: 56px; margin-bottom: 20px; } .avl-item h2 { font-size: 18px; font-weight: 600; color: var(--avl-ink); margin-bottom: 6px; line-height: 1.4; } .avl-item p { font-size: 14px; color: var(--avl-mute); margin-bottom: 12px; } .avl-item span { display: block; font-size: 14px; color: var(--avl-body); line-height: 1.7; margin-bottom: 20px; } .avl-item > a { display: inline-block; height: 38px; line-height: 36px; padding: 0 18px; border-radius: var(--avl-radius); font-size: 13px; font-weight: 500; } /* ---------- 9. 政企安全产品 ---------- */ .index-product { background: var(--avl-canvas); padding: 80px 0; } .index-product .container > .row { display: flex; flex-wrap: wrap; gap: 20px; } .index-product .container > .row:before, .index-product .container > .row:after { display: none; } .index-product .container > .row > .col-md-3 { width: calc(25% - 15px); padding: 0; float: none; } .index-product-item { background: var(--avl-canvas-soft) !important; border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; height: 100%; transition: box-shadow 0.15s ease; } .index-product-item:hover { box-shadow: var(--avl-shadow-lg); } .index-product-item span { display: none; } .index-product-item img { width: 56px; margin-bottom: 16px; } .index-product-item h3 { font-size: 18px; font-weight: 600; color: var(--avl-ink); margin: 0 0 12px; line-height: 1.5; min-height: auto; } .index-product-item p { font-size: 14px; color: var(--avl-body); line-height: 1.7; min-height: auto; margin-bottom: 20px; } /* ---------- 10. 安全服务 ---------- */ .index-service { background: var(--avl-ink) !important; padding: 80px 0; } .index-service > .container:nth-of-type(2) > .row > div { display: flex; flex-wrap: wrap; gap: 20px; } .index-service-item { width: calc(20% - 16px); flex: 0 0 auto; padding: 0; float: none; } .index-service-item > div { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--avl-radius-lg); padding: 28px 20px; height: 100%; transition: background-color 0.15s ease, border-color 0.15s ease; } .index-service-item > div:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } .index-service-item img { width: 48px; margin-bottom: 4px; } .index-service-item h3 { font-size: 16px; font-weight: 600; color: #ffffff; margin: 20px 0 12px; line-height: 1.5; min-height: auto; } .index-service-item p { font-size: 14px; color: rgba(255, 255, 255, 0.70); line-height: 1.7; min-height: auto; margin-bottom: 20px; } /* ---------- 11. 解决方案 ---------- */ .index-solution { background: var(--avl-canvas-soft); padding: 80px 0; } .index-solution .container[style*="overflow: hidden"] { padding-top: 20px !important; padding-bottom: 20px !important; } .index-solution .owl-carousel .imgWrapper { margin: 0; padding: 0 10px; } .index-solution-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; box-shadow: none; height: 100%; transition: box-shadow 0.15s ease; } .index-solution-item:hover { box-shadow: var(--avl-shadow-lg); } .index-solution-item img { width: 56px; margin-bottom: 4px; } .index-solution-item h3 { font-size: 17px; font-weight: 600; color: var(--avl-ink); margin: 20px 0 12px; line-height: 1.5; min-height: auto; } .index-solution-item p { font-size: 14px; color: var(--avl-body); line-height: 1.7; min-height: auto; margin-bottom: 20px; } .index-solution .owl-theme .owl-controls .owl-buttons .owl-prev, .index-solution .owl-theme .owl-controls .owl-buttons .owl-next { width: 36px; height: 36px; background-size: 36px; margin-top: 30px; opacity: 0.55; transition: opacity 0.15s ease; } .index-solution .owl-theme .owl-controls .owl-buttons .owl-prev:hover, .index-solution .owl-theme .owl-controls .owl-buttons .owl-next:hover { opacity: 1; } /* ---------- 12. 联系我们 ---------- */ .contactBox { background: var(--avl-canvas-soft-2); padding: 56px 0; } .contactBox .container { text-align: center; padding-left: 0; } .contact-title { font-size: 24px; font-weight: 600; color: var(--avl-ink); text-align: center; margin: 0 0 28px; padding: 0; } .contact-item { display: inline-flex; float: none; align-items: center; gap: 10px; font-size: 14px; color: var(--avl-body); margin: 0 16px; font-weight: 500; } .contact-item img { width: 20px; height: auto; opacity: 0.55; } /* ---------- 13. 保持内容不变的 legacy 区块背景净化 ---------- */ .index-resrarch { background-image: none; background-color: #ffffff; } .index-dynamics { background-color: var(--avl-canvas-soft-2); } .index-dynamics .dynamics-list, .index-dynamics .dynamics-item { background-color: #ffffff; } /* ---------- 14. AVLCODE 风格按钮 ---------- */ .antiy-legacy .avlcode-btn, .index-title .avlcode-btn, .index-title-white .avlcode-btn { display: inline-flex; align-items: center; justify-content: center; width: auto !important; max-width: none; height: 44px; padding: 0 36px !important; border: 1px solid #52525b; /* 深灰边框：低对比消除分数缩放下的曲线毛刺感 */ border-radius: 9999px; background-color: var(--avl-canvas); color: var(--avl-ink); font-size: 14px; font-weight: 500; line-height: 1 !important; white-space: nowrap; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .antiy-legacy .avlcode-btn:hover, .antiy-legacy .avlcode-btn:focus, .index-title .avlcode-btn:hover, .index-title .avlcode-btn:focus, .index-title-white .avlcode-btn:hover, .index-title-white .avlcode-btn:focus { border-color: #3f3f46; background-color: var(--avl-canvas); color: var(--avl-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); text-decoration: none; } /* 保留块标题按钮保持原右浮动（安天动态、应急响应与分析） */ .antiy-legacy .index-title .avlcode-btn { float: right; } /* 移动安全入口区居中显示 */ .mobile-section-content .row > div { text-align: center; } .mobile-section .avlcode-btn { display: inline-flex; width: auto !important; margin-top: 20px; padding: 0 20px !important; } /* ---------- 15. 响应式适配 ---------- */ @media (max-width: 1200px) { .banner-text h3 { font-size: 30px; } .banner-text p { font-size: 16px; } } @media (max-width: 992px) { .index-avl .container > .row > .col-md-3, .index-product .container > .row > .col-md-3 { width: calc(50% - 10px); } .index-service-item { width: calc(33.333% - 13.33px); } } @media (max-width: 768px) { .index-entrance.container > .row.entrance-section-box { margin-left: 0; margin-right: 0; } :not(.antiy-legacy) .index-title h2, :not(.antiy-legacy) .index-title-white h2, .contact-title { font-size: 22px; } :not(.antiy-legacy) .index-title .more-btn, :not(.antiy-legacy) .index-title-white .more-btn { float: none; margin-top: 10px; } :not(.antiy-legacy) .index-title, :not(.antiy-legacy) .index-title-white { display: block; } .entrance-section-box { flex-direction: column; } .entrance-section-box > .col-md-4, .entrance-section-box > .col-sm-4, .entrance-section-box > .col-xs-4 { width: 100%; } .entrance-item { padding: 20px; backdrop-filter: none; } .index-avl .container > .row > .col-md-3, .index-product .container > .row > .col-md-3, .index-service-item { width: 100%; } .index-service > .container:nth-of-type(2) > .row > div { gap: 16px; } .contact-item { display: flex; margin: 0 0 12px; } } /* ===================================================== 以下样式原位于 css/engine-avlcode.css， 现合并到 index-avlcode.css 供首页与安全引擎等页面共用 作用范围：SecurityEngine / AVL_SDK_Base / AVL_SDK_For_Network AVL_SDK_For_Mobile / AVL_SDK_Lite 合并时间：2026-07-29 ===================================================== */ /* 容器宽度统一 1200px */ .container { width: auto; max-width: 1200px; } /* ---------- 4. Banner 区 ---------- */ .productTop, .engineTop { background: #ffffff !important; background-image: none !important; height: 360px; margin-top: 70px; } .topTitleBox { display: flex; align-items: center; justify-content: center; height: 100%; } .topTitle { text-align: center; } .productTop .container, .productTop .row, .productTop .col-lg-12, .engineTop .container, .engineTop .row, .engineTop .col-lg-12 { height: 100%; } .engineTop .topTitleBox { justify-content: center; } .engineTop .topTitle { position: relative; left: auto; top: auto; transform: none; width: auto; text-align: center; } .productTop .topTitle h1, .engineTop .topTitle h1 { font-size: 42px; font-weight: 600; color: #171717; letter-spacing: -0.02em; text-shadow: none; margin-bottom: 16px; } .productTop .topTitle h1 { text-align: center; } .engineTop .topTitle h1 { text-align: center; } .productTop .topTitle p { font-size: 18px; color: #4d4d4d; text-shadow: none; text-align: center; max-width: 800px; margin: 0 auto; line-height: 1.7; } .productTop .topTitle .hero-btn { margin-top: 28px; background: var(--avl-brand); color: #ffffff; border: 1px solid var(--avl-brand); } .productTop .topTitle .hero-btn:hover, .productTop .topTitle .hero-btn:focus { background: var(--avl-brand-deep); border-color: var(--avl-brand-deep); color: #ffffff; } /* ---------- 5. 面包屑 ---------- */ .breadBox { background: var(--avl-canvas); border-bottom: 1px solid var(--avl-hairline); height: auto; padding: 14px 0; margin-bottom: 24px; } .breadList { overflow: visible; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .breadList li { float: none; line-height: 1.5; margin: 0; color: var(--avl-mute); font-size: 14px; } .breadList li a { color: var(--avl-mute); text-decoration: none; transition: color 0.15s ease; } .breadList li a:hover { color: var(--avl-brand); text-decoration: none; } .breadList li.breadAct, .breadList li.breadAct a, .breadList li.breadAct a:hover, .breadList li.breadAct a:focus { color: var(--avl-body); font-weight: 400; } /* 面包屑分隔符统一为浅灰色，避免过深 */ .breadList li:not(.breadAct):not(:last-child) { color: var(--avl-hairline-strong); } /* ---------- 6. 锚点导航 ---------- */ .anchorBar, .anchorBarFixed { background: var(--avl-canvas); height: auto; } .anchorBarFixed { box-shadow: var(--avl-shadow); } .anchorBar .container, .anchorBarFixed .container { display: flex; justify-content: center; } .anchorBar .anchor, .anchorBarFixed .anchor { display: inline-flex; justify-content: center; align-items: center; padding: 12px 0; } .anchorBar .anchor > ul, .anchorBarFixed .anchor > ul { display: inline-flex; align-items: center; flex-wrap: nowrap !important; gap: 4px; margin: 0; padding: 5px; list-style: none; overflow: visible; max-width: 100%; background: var(--avl-canvas-soft-2); border: 1px solid var(--avl-hairline); border-radius: 9999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); } .anchorBar .anchor li, .anchorBarFixed .anchor li { float: none; margin: 0; padding: 0; flex: 0 0 auto; list-style: none; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--avl-body); line-height: 1.5; padding: 8px 22px; white-space: nowrap; border-radius: 9999px; border: 0; background: transparent; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translateZ(0); backface-visibility: hidden; } .anchorBar .anchor li a:hover, .anchorBarFixed .anchor li a:hover, .anchorBar .anchor li a:focus, .anchorBarFixed .anchor li a:focus, .anchorBar .anchor .anchorItems:hover, .anchorBarFixed .anchor .anchorItems:hover { color: var(--avl-ink); background: rgba(255, 255, 255, 0.85); outline: none; cursor: pointer; } .anchorBar .anchor .anchorActive a, .anchorBarFixed .anchor .anchorActive a, .anchorBar .anchor .anchorActive a:hover, .anchorBarFixed .anchor .anchorActive a:hover, .anchorBar .anchor .anchorActive a:focus, .anchorBarFixed .anchor .anchorActive a:focus { display: inline-flex; color: #ffffff; background: var(--avl-ink); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); text-decoration: none; cursor: default; } /* ---------- 7. 区块标题 ---------- */ .product-section { padding: 80px 0; } .product-title h1, .product-title h2 { font-size: 28px; font-weight: 600; color: var(--avl-ink); letter-spacing: -0.01em; text-align: center; margin: 0 auto 40px; line-height: 1.4; } /* ---------- 7. 解决方案区块 ---------- */ .solution-section { background: var(--avl-canvas); padding: 80px 0; } .solution-title { margin-bottom: 24px; } .solution-content { text-align: left; max-width: none; } .solution-content h6 { font-size: 16px; font-weight: 400; color: var(--avl-ink); line-height: 1.8; text-indent: 2em; margin: 0; } .solution-desc { font-size: 16px; font-weight: 400; color: var(--avl-body); line-height: 1.8; text-indent: 2em; margin: 12px 0 0; } .solutionImage { text-align: center; margin-top: 32px; } .solutionImage img { max-width: 100%; height: auto; } /* ---------- 8. 功能特性卡片 ---------- */ .function-section { background: var(--avl-canvas-soft); } .function-item-box { margin-bottom: 20px; height: 100%; } .function-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; margin-bottom: 0; height: 100%; position: relative; z-index: 1; overflow: hidden; text-align: center; } .function-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .function-item::before, .function-item::after { display: none !important; } .function-icon img { width: 64px; margin: 0 auto 20px; display: block; } .function-content { padding: 0; text-align: center; } .function-content h4 { font-size: 18px; font-weight: 600; color: var(--avl-ink); text-align: center; line-height: 1.5; margin-bottom: 12px; } .function-content p { font-size: 15px; color: var(--avl-body); line-height: 1.7; text-align: center; margin: 0; } /* ---------- 9. 典型客户卡片 ---------- */ .cases-section { background: var(--avl-canvas-soft); } .custom-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; margin-bottom: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .custom-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .custom-item img { width: 64px; margin: 0 auto 16px; } .custom-item h5 { font-size: 16px; font-weight: 600; color: var(--avl-ink); text-align: center; line-height: 1.5; margin: 0; min-height: 0; } /* ---------- 10. 使用场景 ---------- */ .scene-section { background: var(--avl-canvas-soft-2); } .scene-item { margin: 0 10px; border-radius: var(--avl-radius-lg); overflow: hidden; position: relative; box-shadow: var(--avl-shadow); } .scene-bg { position: relative; } .scene-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15)); } .scene-content { width: 85%; z-index: 2; } .scene-content h4 { font-size: 20px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.4; margin-bottom: 12px; } .scene-content span { width: 40px; height: 2px; background: rgba(255, 255, 255, 0.70); margin: 0 auto 12px; } .scene-content p { font-size: 14px; color: rgba(255, 255, 255, 0.90); line-height: 1.7; text-align: center; margin: 0; } /* 单图场景 */ .scene-item-one { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); overflow: hidden; display: flex; align-items: stretch; box-shadow: var(--avl-shadow); } .scene-item-one .scene-bg { float: none; width: 50%; flex: 0 0 50%; overflow: hidden; } .scene-item-one .scene-bg::after { display: none; } .scene-content-box { float: none; width: 50%; flex: 0 0 50%; padding: 40px; } .scene-content-box h4 { font-size: 20px; font-weight: 600; color: var(--avl-ink); text-align: left; line-height: 1.5; margin-bottom: 16px; } .scene-content-box span { width: 60px; height: 3px; background: var(--avl-brand); margin: 0 0 20px; display: block; } .scene-content-box p { font-size: 15px; color: var(--avl-body); line-height: 1.7; text-align: left; width: auto; float: none; margin: 0 0 8px; } .scene-item-box { width: 100%; margin: 0 auto; } /* ---------- 11. 客户价值卡片 ---------- */ /* .value-section 区块同页交替：奇数块白、偶数块浅灰（靠兄弟选择器计数，支持到10块） */ .value-section { background: var(--avl-canvas); } .value-section ~ .value-section { background: var(--avl-canvas-soft); } .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas); } .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas-soft); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas-soft); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas-soft); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas); } .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section ~ .value-section { background: var(--avl-canvas-soft); } /* 客户价值区块白底（product页面通用） */ #solution02, #solution04 { background-color: var(--avl-canvas); background: var(--avl-canvas); } /* 产品优势区块浅灰背景 */ #solution05 { background-color: var(--avl-canvas-soft); background: var(--avl-canvas-soft); } .solution-value, .solution-assembly { background: var(--avl-canvas); padding: 80px 0; } .solution-value .value-box { margin: 0 0 24px; } .solution-value .value-item-box { margin-bottom: 32px; } .solution-value .value-item-box:last-child { margin-bottom: 0; } /* ---------- 方案组件覆盖样式 ---------- */ #solution05 .value-box { position: relative; padding-top: 170px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } #solution05 .value-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 15px; } #solution05 .value-content a { display: block; font-size: 16px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; text-align: center; text-decoration: none; } #solution05 .value-bg { position: absolute !important; top: 20px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%); opacity: 0.18; width: 160px; height: 160px !important; z-index: 0; } #solution05 .value-bg img { width: 100%; height: 100%; object-fit: contain; } #solution05 .assembly-label { position: absolute; top: 10px; right: 10px; display: inline-block; color: #fff; background: #2683C6; padding: 4px 10px; font-size: 14px; font-weight: bold; border-radius: 3px; z-index: 3; } #solution05 .value-content a { text-align: center; font-weight: bold; font-size: 16px; display: block; } .value-section .value-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 40px 24px; box-shadow: var(--avl-shadow); transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; margin: 0 0 20px; height: 100%; position: relative; overflow: hidden; } .value-section .value-box:hover { background: var(--avl-canvas-soft-2); box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .value-section .value-box:hover h3, .value-section .value-box:hover p { color: inherit; } /* 解决方案卡片：水印上浮，文字下沉 */ .solution-section.product-section .value-box { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 40px 24px; padding-top: 100px; box-shadow: var(--avl-shadow); transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; margin: 0 0 20px; height: 100%; position: relative; overflow: hidden; } .solution-section.product-section .value-box:hover { background: var(--avl-canvas-soft-2); box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .solution-section.product-section .value-box:hover h3, .solution-section.product-section .value-box:hover p { color: inherit; } /* 解决方案首页卡片标题描述间距 */ .solution-section.product-section .value-box h3 { font-size: 16px; font-weight: 600; color: var(--avl-ink); margin: 0 0 20px; line-height: 1.5; text-align: center; min-height: auto; } .solution-section.product-section .value-box p { font-size: 14px; color: var(--avl-mute); margin: 0; line-height: 1.7; text-align: center; } /* 解决方案首页卡片：图标+标题+描述间距 */ .solution-section.product-section .antiy-solution { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 40px 20px 32px; color: var(--avl-body); text-decoration: none; border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); background: var(--avl-canvas); transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .solution-section.product-section .antiy-solution:hover { background: var(--avl-canvas-soft-2); box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .solution-section.product-section .antiy-solution .solution-icon { width: 56px; height: 56px; margin-bottom: 24px; } .solution-section.product-section .antiy-solution .solution-icon img { width: 100%; height: 100%; object-fit: contain; } .solution-section.product-section .antiy-solution h3 { font-size: 16px; font-weight: 600; color: var(--avl-ink); margin: 0 0 20px; line-height: 1.5; min-height: auto; } .solution-section.product-section .antiy-solution p { font-size: 14px; line-height: 1.7; margin: 0; color: var(--avl-mute); } .solution-section.product-section .value-bg { position: absolute !important; top: 20px !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%); opacity: 0.12; } .value-bg { position: absolute; right: 16px; bottom: 16px; left: auto; top: auto; width: 120px; margin: 0; opacity: 0.18; z-index: 0; pointer-events: none; } .value-bg img { display: block; width: 100%; height: auto; } .value-content { width: 100%; margin: auto; text-align: center; z-index: 1; } .value-content h3 { font-size: 16px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; text-align: center; margin: 0 0 20px; } .value-content p { font-size: 14px; color: var(--avl-body); line-height: 1.7; text-align: center; margin: 16px 0 0; } /* ---------- 12. SecurityEngine.html 专有元素 ---------- */ .EngineTitle { width: 100%; } .EngineTitle h2 { font-size: 28px; font-weight: 600; color: var(--avl-ink); text-align: left; margin-bottom: 16px; letter-spacing: -0.01em; } .EngineTitle p { font-size: 16px; color: var(--avl-body); line-height: 1.8; text-align: left; max-width: none; margin: 0; width: 100%; } .EngineBg03 { display: none; } .EngineItem { margin-top: 60px; overflow: visible; } .EngineItem .container > .row { display: flex; flex-wrap: wrap; gap: 20px; } .EngineItem .container > .row:before, .EngineItem .container > .row:after { display: none; } .EngineItem .container > .row > .EngineItemBox { flex: 0 0 100%; width: 100%; } .EngineItem .container > .row > .col-md-3 { width: calc(25% - 15px); padding: 0; float: none; } .EngineItem .container > .row > .col-md-4 { width: calc(33.333% - 13.333px); padding: 0; float: none; } .EngineItemBox h5 { font-size: 28px; font-weight: 600; color: var(--avl-ink); text-align: center; margin: 0 auto 40px; letter-spacing: -0.01em; } .EngineItemBox > p { font-size: 16px; color: var(--avl-body); line-height: 1.7; text-align: center; margin: 0 auto 40px; max-width: 900px; } /* 引擎四宫格复用 index 的 .avl-item 结构 */ .EngineItem .avl-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; text-align: center; height: 100%; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .EngineItem .avl-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .EngineItem .avl-item img { width: 56px; margin-bottom: 20px; } .EngineItem .avl-item h2 { font-size: 18px; font-weight: 600; color: var(--avl-ink); margin-bottom: 6px; line-height: 1.4; } .EngineItem .avl-item p { font-size: 14px; color: var(--avl-mute); margin-bottom: 12px; } .EngineItem .avl-item span { display: block; font-size: 14px; color: var(--avl-body); line-height: 1.7; margin-bottom: 20px; } .EngineItem .avl-item > a { display: inline-block; height: 38px; line-height: 36px; padding: 0 18px; border-radius: var(--avl-radius); background: var(--avl-brand); border: 1px solid var(--avl-brand); color: #ffffff; font-size: 13px; font-weight: 500; } .EngineItem .avl-item > a:hover { background: var(--avl-brand-deep); border-color: var(--avl-brand-deep); color: #ffffff; } /* 核心优势列表（ SecurityEngine / VILLM 等类似页面共用） 行距统一由 .value-content .value-item-box 的 margin-bottom:25px 提供，此处 gap 归零避免叠加 */ .EngineItemBox + .value-content { display: flex; flex-direction: column; gap: 0; margin-top: 16px; padding-bottom: 50px; } /* VILLM 核心优势 3列卡片间距 */ .EngineItemBox + .value-content > .row > [class*="col-"] { margin-bottom: 24px; } .EngineItemBox + .value-content > .row > [class*="col-"]:last-child { margin-bottom: 0; } .value-item-box { width: 100%; overflow: visible; } /* 优势价值卡片行距：custom.css 的 .value-item{margin-bottom:30px} 已被上方清零，此处补回卡片间距 */ .value-content .value-item-box { margin-bottom: 25px; } .value-content .value-item-box:last-child { margin-bottom: 0; } .value-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 28px 32px; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; margin-bottom: 0; display: flex; align-items: center; gap: 24px; } .value-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .value-item::before, .value-item::after { display: none !important; } .value-number { float: none; width: 64px; height: 64px; border-radius: 50%; background: var(--avl-brand-soft); color: var(--avl-brand); font-size: 24px; font-weight: 600; line-height: 64px; text-align: center; margin: 0; flex: 0 0 64px; } .assembly-label { display: inline-block; padding: 4px 16px; border-radius: 4px; font-size: 14px; font-weight: 600; color: #fff; background: #2683C6; margin-bottom: 12px; } .value-desc { float: none; width: auto; margin: 0; flex: 1; } .value-desc h4 { font-size: 18px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; text-align: center; margin-bottom: 12px; } .value-desc p { font-size: 15px; color: var(--avl-body); line-height: 1.9; text-align: left; margin: 0 0 12px; } .value-desc p:last-child { margin-bottom: 0; } .value-item-box:hover .value-desc h4 { color: var(--avl-ink); } /* 价值表格 */ .avl-value { background: var(--avl-canvas-soft-2) !important; padding: 40px 0 !important; } .avl-value .EngineItemBox { padding: 0 0 16px; margin: 0; /* 由 .avl-value 统一提供 40px 上沿内边距，EngineItemBox 不再额外推开 */ } .avl-value .EngineItemBox h5 { margin-bottom: 0; } /* 标题与下方表格之间留出呼吸间距（SecurityEngine 为伙伴提供切实的价值 等） */ .EngineItemBox h5 + .avl-table { margin-top: 24px; } .avl-table { width: 100%; border: 1px solid var(--avl-hairline) !important; border-radius: var(--avl-radius-lg); overflow: hidden; border-collapse: collapse; box-shadow: var(--avl-shadow); font-size: 15px; line-height: 1.7; } .avl-table td, .avl-table th { border: 1px solid var(--avl-hairline) !important; padding: 16px 20px !important; color: var(--avl-body) !important; background: var(--avl-canvas) !important; } .avl-table tr:nth-child(odd) td { background: var(--avl-canvas-soft) !important; } .avl-table tr:first-child td { background: var(--avl-ink) !important; color: #ffffff !important; font-weight: 600; } .avl-table tr:first-child td * { color: #ffffff !important; } .avl-table td b, .avl-table td strong { color: var(--avl-ink) !important; } /* 其它引擎通用未使用到的 EngineValue 等做防御性清理 */ .EngineValue { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px; box-shadow: var(--avl-shadow); } .EngineValue p { color: var(--avl-ink); font-size: 18px; font-weight: 600; position: static; transform: none; } .EngineValue span { color: var(--avl-canvas-soft-2); } /* ---------- 13. Owl 轮播控件 ---------- */ .owl-theme .owl-controls .owl-buttons .owl-prev, .owl-theme .owl-controls .owl-buttons .owl-next { width: 36px; height: 36px; background-size: 36px; opacity: 0.55; transition: opacity 0.15s ease; } .owl-theme .owl-controls .owl-buttons .owl-prev:hover, .owl-theme .owl-controls .owl-buttons .owl-next:hover { opacity: 1; } .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-prev, .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: 50%; transform: translateY(-50%); margin-top: 0; } .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-prev { left: 20px; } .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-next { right: 20px; } } .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-prev { left: 20px; } .scene-content-width .owl-theme .owl-controls .owl-buttons .owl-next { right: 20px; } /* ---------- 14. 响应式适配 ---------- */ @media (max-width: 992px) { .productTop, .engineTop { height: 280px; } .productTop .topTitle h1, .engineTop .topTitle h1 { font-size: 32px; } .EngineItem .container > .row > .col-md-3, .custom-item-box > .col-lg-3, .custom-item-box > .col-md-3, .value-section .row > .col-lg-3, .value-section .row > .col-md-3, .value-section .row > .col-lg-4, .value-section .row > .col-md-4 { width: calc(50% - 10px); } .EngineItem .container > .row, .cases-section .row, .value-section .row { display: flex; flex-wrap: wrap; gap: 20px; } .cases-section .row > [class*="col-"], .value-section .row > [class*="col-"] { padding: 0; } .scene-item-one { flex-direction: column; } .scene-item-one .scene-bg, .scene-content-box { width: 100%; flex: 0 0 100%; } } @media (max-width: 768px) { .productTop, .engineTop { height: 200px; margin-top: 50px; } .productTop .topTitle h1, .engineTop .topTitle h1 { font-size: 24px; } .productTop .topTitle p { font-size: 14px; } .product-section { padding: 50px 0; } .product-title h1, .product-title h2, .EngineItemBox h5, .EngineTitle h2 { font-size: 22px; margin-bottom: 28px; } .anchor { gap: 16px; padding: 10px 0; } .anchor li a { font-size: 14px; } .function-item, .custom-item, .value-box, .EngineItem .avl-item, .value-item { padding: 20px; } .EngineItem .container > .row > .col-md-3, .cases-section .row > [class*="col-"], .value-section .row > [class*="col-"] { width: 100%; } .value-item { flex-direction: column; text-align: center; gap: 16px; padding: 20px; } .value-desc { text-align: center; } .scene-content h4 { font-size: 18px; } .scene-content-box { padding: 24px; } .avl-table td, .avl-table th { padding: 12px !important; font-size: 14px; } .researchTop { height: 260px; } .lecture-item { padding: 18px 20px; } .lecture-item > a { font-size: 15px; } } /* ===================================================== 15. 网络安全人工智能栏目页面专用样式 作用范围：Security_Product/VILLM.avlcode.html Security_AI/case/index.avlcode.html ===================================================== */ /* ---------- 15.1 引擎页 / VILLM 详情页 通用分区间距 ---------- */ /* 统一标题与所在区块上沿距离：EngineTitle/EngineItemBox 内距顶部 40px， .avl-value 内部由其父级提供 40px 上沿内距，避免 custom.css 旧 margin-top 撑大间隙 */ .EngineTitle { padding: 40px 0 30px; margin-top: 0; } .EngineItemBox { padding: 40px 0 16px; margin: 0 0 30px 0; } .EngineItemBox h5 { margin-bottom: 0; } .EngineItem .EngineTitle { padding: 40px 0 30px; } /* VILLM 应用场景与价值等小容器同宽 */ .value-content + .row, .EngineItemBox + .row, .EngineTitle + .row { margin-left: -15px; margin-right: -15px; } .value-content + .row > [class*="col-"], .EngineItemBox + .row > [class*="col-"], .EngineTitle + .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } /* ---------- 15.2 案例列表页 banner ---------- */ .researchTop, .researchTop.research-banner { height: 400px; margin-top: 70px; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; } .researchTop .container, .researchTop .row, .researchTop .col-lg-12 { height: 100%; } .researchTop .topTitleBox { display: flex; align-items: center; justify-content: center; height: 100%; } .researchTop .topTitle { text-align: center; } .researchTop .topTitle h1 { font-size: 42px; font-weight: 600; color: #ffffff; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); margin: 0; } /* ---------- 15.3 案例列表容器 ---------- */ .annual-report { background: var(--avl-canvas-soft); padding: 60px 0 80px; } .annual-report .container > .row > aside { padding: 0; } #biuuu_city_list { margin: 0; padding: 0; list-style: none; } #biuuu_city_list::after { content: ''; display: table; clear: both; } .lecture-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px 28px; margin: 0 0 16px 0; /* 覆盖 custom.css margin-top:30px，列表间距保持 16px */ box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .lecture-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .lecture-item > a { display: block; font-size: 17px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin-bottom: 8px; text-decoration: none; } .lecture-item > a:hover, .lecture-item > a:focus { color: var(--avl-brand); text-decoration: none; } .entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--avl-mute); } .entry-meta li { display: inline-flex; align-items: center; line-height: 1.5; } .entry-date::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: 0.6; } /* ---------- 15.4 Layui 分页美化 ---------- */ #lockDom { margin-top: 40px; display: flex; justify-content: center; } /* 取消 layui.css 默认的 relative + translateX(-50%) 居中，避免在 flex 容器内偏移 */ #lockDom .layui-laypage { position: static; left: auto; -webkit-transform: none; -moz-transform: none; transform: none; } .layui-laypage { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px; background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: 9999px; box-shadow: var(--avl-shadow); font-size: 14px; } .layui-laypage > a { cursor: pointer; } .layui-laypage > a, .layui-laypage > span, .layui-laypage .layui-laypage-spr, .layui-laypage .layui-laypage-curr { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0 !important; border-radius: 9999px; background: transparent; color: var(--avl-body); line-height: 1; margin: 0; transition: color 0.15s ease, background-color 0.15s ease; } .layui-laypage > a:hover, .layui-laypage > a:focus { color: var(--avl-ink); background: var(--avl-canvas-soft-2); } .layui-laypage .layui-laypage-curr { background: var(--avl-canvas-soft-2); color: var(--avl-ink); font-weight: 600; } .layui-laypage .layui-laypage-curr em { color: var(--avl-ink); font-style: normal; } .layui-laypage .layui-laypage-curr .layui-laypage-em { display: none; } /* ===================================================== 16. 锚点导航单行强化（以 AVL_SDK_For_Mobile 为例） 目标："关键特性 典型客户 使用场景 客户价值" 始终单行显示 ===================================================== */ .anchorBar, .anchorBarFixed { height: auto; } .anchorBar .container, .anchorBarFixed .container { display: flex; justify-content: center; } .anchorBar .anchor, .anchorBarFixed .anchor { display: inline-flex; justify-content: center; align-items: center; width: auto; max-width: 100%; padding: 10px 0; } .anchorBar .anchor > ul, .anchorBarFixed .anchor > ul { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; margin: 0 auto; padding: 6px; list-style: none; max-width: 100%; background: var(--avl-canvas-soft-2); border: 1px solid var(--avl-hairline); border-radius: 9999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); overflow: visible; } .anchorBar .anchor li, .anchorBarFixed .anchor li { float: none; margin: 0; padding: 0; flex: 0 0 auto; list-style: none; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--avl-body); line-height: 1.4; padding: 9px 26px; white-space: nowrap !important; border-radius: 9999px; border: 0; background: transparent; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; } .anchorBar .anchor li a:hover, .anchorBarFixed .anchor li a:hover, .anchorBar .anchor li a:focus, .anchorBarFixed .anchor li a:focus, .anchorBar .anchor .anchorItems:hover, .anchorBarFixed .anchor .anchorItems:hover { color: var(--avl-ink); background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none; cursor: pointer; text-decoration: none; } .anchorBar .anchor .anchorActive a, .anchorBarFixed .anchor .anchorActive a, .anchorBar .anchor .anchorActive a:hover, .anchorBarFixed .anchor .anchorActive a:hover, .anchorBar .anchor .anchorActive a:focus, .anchorBarFixed .anchor .anchorActive a:focus { display: inline-flex; color: #ffffff; background: var(--avl-ink); border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); text-decoration: none; cursor: default; } /* 防止原页面 inline style 或其他样式把锚点栏撑开 */ .anchorBar .anchor::before, .anchorBar .anchor::after, .anchorBarFixed .anchor::before, .anchorBarFixed .anchor::after { display: none !important; } /* ===================================================== 17. VILLM 页面 Hero 标题区 参考：https://vs.antiy.cn/changelog.html 去掉 banner 图，仅保留白底标题 + 副标题 ===================================================== */ .avlcode-hero { padding: 130px 0 70px; background: #ffffff; color: var(--avl-ink); text-align: center; border-bottom: 1px solid var(--avl-hairline); } .avlcode-hero h1 { font-size: 40px; font-weight: 700; margin: 0 0 14px; letter-spacing: 1px; color: var(--avl-ink); text-shadow: none; text-align: center; line-height: 1.3; } .avlcode-hero p { font-size: 17px; color: var(--avl-mute); max-width: 640px; margin: 0 auto; line-height: 1.7; text-align: center; } @media (max-width: 768px) { .avlcode-hero { padding: 110px 0 50px; } .avlcode-hero h1 { font-size: 26px; } .avlcode-hero p { font-size: 15px; } } /* ===================================================== 18. VILLM 页面专属收尾 其余分区间距已全局统一，此处仅保留 VILLM 特有收尾处理 ===================================================== */ .page-villm .EngineBg03 { display: none; } /* EngineItemBox 标题下方的卡片/内容区底部留白 VILLM 结构：.EngineItemBox + .row SecurityEngine 结构：.row > .EngineItemBox 后的相邻 .row（:has 渐进增强） */ .EngineItemBox + .row, .row:has(> .EngineItemBox) + .row { padding-bottom: 60px; } /* ===================================================== 19. VILLM 页面分区间距收紧 参考 https://vs.antiy.cn/changelog.html 的紧凑标题区 ===================================================== */ .page-villm .avlcode-hero { padding: 130px 0 40px; } .page-villm .breadBox + div .EngineTitle, .page-villm .breadBox + div + div .EngineTitle { padding: 24px 0 20px; } .page-villm .EngineItemBox { padding: 24px 0 16px; } /* 模型性能对比与上方的呼吸间距 */ .page-villm .avl-value { padding: 32px 0 !important; } .page-villm .avl-value .EngineItemBox { padding: 0 0 16px; } /* 应用场景与价值：标题上移、卡片区底部留白 */ .page-villm .EngineItemBox + .row { padding-bottom: 50px; } @media (max-width: 768px) { .page-villm .avlcode-hero { padding: 110px 0 32px; } .page-villm .EngineTitle, .page-villm .breadBox + div .EngineTitle, .page-villm .breadBox + div + div .EngineTitle { padding: 20px 0 16px; } .page-villm .EngineItemBox { padding: 16px 0 12px; } } /* ===================================================== 20. 锚点导航单行强化（全站安全引擎详情页通用） ===================================================== */ .anchorBar, .anchorBarFixed { height: auto !important; min-height: 0; background: var(--avl-canvas) !important; } .anchorBar .container, .anchorBarFixed .container { display: flex; justify-content: center; } .anchorBar .anchor, .anchorBarFixed .anchor { display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 1200px; padding: 20px 15px 10px; box-sizing: border-box; } .anchorBar .anchor > ul, .anchorBarFixed .anchor > ul { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 6px; margin: 0 auto; padding: 6px; list-style: none; width: auto; max-width: 100%; overflow-x: auto; overflow-y: visible; background: var(--avl-canvas-soft-2); border: 1px solid var(--avl-hairline); border-radius: 9999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); -ms-overflow-style: none; scrollbar-width: none; } .anchorBar .anchor > ul::-webkit-scrollbar, .anchorBarFixed .anchor > ul::-webkit-scrollbar { display: none; } .anchorBar .anchor li, .anchorBarFixed .anchor li { float: none !important; margin: 0 !important; padding: 0; flex: 0 0 auto; list-style: none; } .anchorBar .anchor li:first-child, .anchorBarFixed .anchor li:first-child, .anchorBar .anchor li:last-child, .anchorBarFixed .anchor li:last-child { margin-left: 0 !important; margin-right: 0 !important; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--avl-body); line-height: 1.4; padding: 9px 22px; white-space: nowrap !important; border-radius: 9999px; border: 0; background: transparent; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; } .anchorBar .anchor li a:hover, .anchorBarFixed .anchor li a:hover, .anchorBar .anchor li a:focus, .anchorBarFixed .anchor li a:focus, .anchorBar .anchor .anchorItems:hover, .anchorBarFixed .anchor .anchorItems:hover { color: var(--avl-ink); background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none; cursor: pointer; text-decoration: none; } .anchorBar .anchor .anchorActive a, .anchorBarFixed .anchor .anchorActive a, .anchorBar .anchor .anchorActive a:hover, .anchorBarFixed .anchor .anchorActive a:hover, .anchorBar .anchor .anchorActive a:focus, .anchorBarFixed .anchor .anchorActive a:focus { display: inline-flex; color: #ffffff; background: var(--avl-ink); border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); text-decoration: none; cursor: default; } @media (max-width: 768px) { .anchorBar .anchor, .anchorBarFixed .anchor { padding: 8px 10px; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { font-size: 14px; padding: 8px 16px; } } /* ===================================================== 21. 技术报告厅列表页样式（research/notice&report/research_report/index.html） ===================================================== */ .page-lecture { background: var(--avl-canvas-soft); } .page-lecture .anchorBar, .page-lecture .anchorBarFixed { margin-bottom: 16px; } .page-lecture .annual-report { padding: 16px 0 60px; } .page-lecture #biuuu_city_list { margin: 0; padding: 0; list-style: none; } .page-lecture .lecture-item, .page-lecture #biuuu_city_list .lecture-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px 28px; margin: 0 0 16px 0 !important; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; transform: none !important; } .page-lecture .lecture-item:hover, .page-lecture #biuuu_city_list .lecture-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); transform: none !important; margin-top: 0 !important; } .page-lecture .lecture-item > a, .page-lecture #biuuu_city_list .lecture-item > a { display: block; font-size: 17px; font-weight: 600; font-style: normal; color: var(--avl-ink); line-height: 1.5; margin: 0 0 8px 0; text-decoration: none; } .page-lecture .lecture-item > a:hover, .page-lecture .lecture-item > a:focus { color: var(--avl-brand); text-decoration: none; } .page-lecture .lecture-item .entry-meta, .page-lecture #biuuu_city_list .lecture-item .entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--avl-mute); } .page-lecture .lecture-item .reportLabel, .page-lecture #biuuu_city_list .lecture-item .reportLabel { margin-top: 12px; } .page-lecture .lecture-item .reportLabel a { color: #1143c1; background: #e9ebff; line-height: 28px; padding: 0 15px; display: inline-block; margin-right: 10px; font-size: 14px; border-radius: 20px; text-decoration: none; } .page-lecture .lecture-item .reportLabel a:hover { background: #d5d8f5; text-decoration: none; } .page-lecture #lockDom { margin-top: 32px; display: flex; justify-content: flex-end; clear: both; position: static; } /* ===================================================== 21. 安天译作列表页样式（research/version/index.html） ===================================================== */ .page-lecture .report-list { padding: 16px 0 60px; } .page-lecture .reportCard { display: block; background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px 28px; margin: 0 0 16px 0; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; text-decoration: none; color: inherit; } .page-lecture .reportCard:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .page-lecture .reportRow { display: flex; flex-wrap: wrap; margin: 0; } .page-lecture .reportImg { display: flex; align-items: flex-start; justify-content: center; padding: 0; } .page-lecture .reportImg img { max-width: 100%; height: auto; border-radius: var(--avl-radius); border: 1px solid var(--avl-hairline); } .page-lecture .reportCont { padding-left: 24px; } .page-lecture .reportCont h3.reportTit01 { font-size: 20px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin: 0 0 12px 0; } .page-lecture .reportCont p { font-size: 14px; color: var(--avl-body); line-height: 1.8; margin: 0 0 6px 0; } .page-lecture .reportCont .reportDesc { margin-top: 10px; color: var(--avl-mute); } .page-lecture .reportTag { display: inline-block; margin-top: 14px; padding: 4px 16px; font-size: 13px; color: var(--avl-brand); background: rgba(38, 131, 198, 0.08); border: 1px solid rgba(38, 131, 198, 0.2); border-radius: var(--avl-radius-sm); line-height: 1.8; text-decoration: none; transition: background 0.15s ease; } .page-lecture .reportCard:hover .reportTag { background: rgba(38, 131, 198, 0.14); } .page-lecture .reportCont i { color: var(--avl-mute); font-style: italic; } .page-lecture .reportCard p + p { margin-top: 4px; } @media (max-width: 767px) { .page-lecture .reportCont { padding-left: 0; padding-top: 16px; } .page-lecture .reportCard { padding: 18px 16px; } .page-lecture .reportCont h3.reportTit01 { font-size: 18px; } } /* ===================================================== 22. 网络安全冬训营列表页样式（Market/Subject/WTC/index.html） ===================================================== */ .page-product .wtc-card { display: block; background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); overflow: hidden; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; text-decoration: none; color: inherit; height: 100%; } .page-product .wtc-card:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .page-product .wtc-img { display: block; overflow: hidden; line-height: 0; } .page-product .wtc-img img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .page-product .wtc-card:hover .wtc-img img { transform: scale(1.03); } .page-product .wtc-content { padding: 20px 24px 24px; } .page-product .wtc-content h3.reportTit01 { font-size: 18px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin: 0 0 10px 0; } .page-product .wtc-meta { display: block; font-size: 13px; color: var(--avl-mute); margin-bottom: 6px; } .page-product .wtc-topic { font-size: 14px; color: var(--avl-body); line-height: 1.6; margin: 0; } .page-product .wtc-card p { margin: 0; } /* 冬训营描述区 reportCont 字体样式（对齐 .page-lecture） */ .page-product .reportCont p { font-size: 14px; color: var(--avl-body); line-height: 1.8; margin: 0 0 6px 0; } .page-product .reportCont p:last-child { margin-bottom: 0; } /* 冬训营描述区标题 */ .page-product .reportCont h3.reportTit01 { font-size: 20px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin: 0 0 16px 0; } /* 重大安全事件报告 4列图片卡片间距 */ .product-section .report-row > [class*="col-"] { margin-bottom: 24px; } .product-section .report-row > [class*="col-"]:last-child { margin-bottom: 0; } .product-section .importantReport { display: block; border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius); overflow: hidden; background: var(--avl-canvas); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .product-section .importantReport:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .product-section .importantReport img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .product-section .importantReport:hover img { transform: scale(1.03); } /* WTC卡片列表行间距 */ .page-product .wtc-row > [class*="col-"] { margin-bottom: 24px; } .page-product .wtc-row > [class*="col-"]:last-child { margin-bottom: 0; } @media (max-width: 767px) { .page-product .wtc-content { padding: 16px 18px 20px; } .page-product .wtc-content h3.reportTit01 { font-size: 16px; } } /* ===================================================== 21. 网络安全人工智能 / 应用案例列表页专用 ===================================================== */ .page-ai-case { background: var(--avl-canvas-soft); } .page-ai-case .annual-report { padding: 40px 0 60px; } .page-ai-case #biuuu_city_list { margin: 0; padding: 0; list-style: none; } .page-ai-case .lecture-item, .page-ai-case #biuuu_city_list .lecture-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px 28px; margin: 0 0 16px 0 !important; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; transform: none !important; } .page-ai-case .lecture-item:hover, .page-ai-case #biuuu_city_list .lecture-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); transform: none !important; margin-top: 0 !important; } .page-ai-case .lecture-item > a, .page-ai-case #biuuu_city_list .lecture-item > a { display: block; font-size: 17px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin: 0 0 8px 0; text-decoration: none; } .page-ai-case .lecture-item > a:hover, .page-ai-case .lecture-item > a:focus { color: var(--avl-brand); text-decoration: none; } .page-ai-case .lecture-item .entry-meta, .page-ai-case #biuuu_city_list .lecture-item .entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--avl-mute); } .page-ai-case #lockDom { margin-top: 32px; display: flex; justify-content: flex-end; clear: both; position: static; } /* ===================================================== 22. 最终覆盖与统一收口 作用范围：锚点导航 / VILLM 详情页 / 应用案例列表页 说明：对前面重复或仍偏松的样式做最终强制覆盖，保证视觉紧凑 ===================================================== */ /* ---------- 22.1 锚点导航：强制单行、胶囊、激活态 ---------- */ .anchorBar, .anchorBarFixed { height: auto !important; min-height: 0; background: var(--avl-canvas) !important; } .anchorBar .container, .anchorBarFixed .container { display: flex; justify-content: center; } .anchorBar .anchor, .anchorBarFixed .anchor { display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 1200px; padding: 20px 15px 10px; box-sizing: border-box; } .anchorBar .anchor::before, .anchorBar .anchor::after, .anchorBarFixed .anchor::before, .anchorBarFixed .anchor::after { display: none !important; } .anchorBar .anchor > ul, .anchorBarFixed .anchor > ul { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 6px; margin: 0 auto; padding: 6px; list-style: none; width: auto; max-width: 100%; overflow-x: auto; overflow-y: visible; background: var(--avl-canvas-soft-2); border: 1px solid var(--avl-hairline); border-radius: 9999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); -ms-overflow-style: none; scrollbar-width: none; } .anchorBar .anchor > ul::-webkit-scrollbar, .anchorBarFixed .anchor > ul::-webkit-scrollbar { display: none; } .anchorBar .anchor li, .anchorBarFixed .anchor li { float: none !important; margin: 0 !important; padding: 0; flex: 0 0 auto; list-style: none; } .anchorBar .anchor li:first-child, .anchorBarFixed .anchor li:first-child, .anchorBar .anchor li:last-child, .anchorBarFixed .anchor li:last-child { margin-left: 0 !important; margin-right: 0 !important; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--avl-body); line-height: 1.4; padding: 9px 22px; white-space: nowrap !important; border-radius: 9999px; border: 0; background: transparent; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; text-decoration: none; } .anchorBar .anchor li a:hover, .anchorBarFixed .anchor li a:hover, .anchorBar .anchor li a:focus, .anchorBarFixed .anchor li a:focus, .anchorBar .anchor .anchorItems:hover, .anchorBarFixed .anchor .anchorItems:hover { color: var(--avl-ink); background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: none; cursor: pointer; text-decoration: none; } .anchorBar .anchor .anchorActive a, .anchorBarFixed .anchor .anchorActive a, .anchorBar .anchor .anchorActive a:hover, .anchorBarFixed .anchor .anchorActive a:hover, .anchorBar .anchor .anchorActive a:focus, .anchorBarFixed .anchor .anchorActive a:focus { display: inline-flex; color: #ffffff; background: var(--avl-ink); border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); text-decoration: none; cursor: default; } @media (max-width: 768px) { .anchorBar .anchor, .anchorBarFixed .anchor { padding: 8px 10px; } .anchorBar .anchor li a, .anchorBarFixed .anchor li a, .anchorBar .anchor .anchorItems, .anchorBarFixed .anchor .anchorItems { font-size: 14px; padding: 8px 16px; } } /* ---------- 22.2 VILLM 页面：进一步收紧分区间距 ---------- */ .page-villm .avlcode-hero { padding: 110px 0 30px; } .page-villm .breadBox + div .EngineTitle, .page-villm .breadBox + div + div .EngineTitle { padding: 16px 0 20px; } .page-villm .EngineItemBox { padding: 16px 0 12px; } .page-villm .EngineItemBox + .value-content { margin-top: 8px; padding-bottom: 24px; gap: 0; } .page-villm .avl-value { padding: 24px 0 !important; } .page-villm .EngineItemBox + .row { padding-bottom: 40px; } @media (max-width: 768px) { .page-villm .avlcode-hero { padding: 100px 0 24px; } .page-villm .EngineTitle, .page-villm .breadBox + div .EngineTitle, .page-villm .breadBox + div + div .EngineTitle { padding: 12px 0 16px; } .page-villm .EngineItemBox { padding: 12px 0 10px; } .page-villm .EngineItemBox + .value-content { padding-bottom: 20px; } } /* ---------- 22.3 应用案例列表页：间距与悬浮最终覆盖 ---------- */ .page-ai-case .lecture-item, .page-ai-case #biuuu_city_list .lecture-item { margin: 0 0 16px 0 !important; transform: none !important; } .page-ai-case .lecture-item:hover, .page-ai-case #biuuu_city_list .lecture-item:hover { transform: none !important; margin-top: 0 !important; } .page-ai-case .lecture-item > a, .page-ai-case #biuuu_city_list .lecture-item > a { color: var(--avl-ink); } .page-ai-case .lecture-item > a:hover, .page-ai-case .lecture-item > a:focus { color: var(--avl-brand); } .page-ai-case #lockDom { margin-top: 24px; display: flex; justify-content: flex-end; } /* ===================================================== 23. 政企安全产品详情页补充样式（IEP / EDR 等） 作用范围：Security_Product/*.avlcode.html ===================================================== */ /* ---------- 23.1 产品概述 ---------- */ .product-introduction { background: var(--avl-canvas); padding: 80px 0; } .product-introduction .overview-content { max-width: none; text-align: left; } .product-introduction .overview-content p { font-size: 16px; color: var(--avl-body); line-height: 1.8; text-indent: 2em; margin: 0; } /* ---------- 23.2 产品优势 ---------- */ .abvantage-section { background: var(--avl-canvas-soft-2); padding: 80px 0; } /* 标题居中 */ .abvantage-section .product-title { text-align: center; } .abvantage-section .product-title h2 { text-align: center; } .abvantage-section .challenge-box { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; box-shadow: var(--avl-shadow); margin-bottom: 24px; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .abvantage-section .challenge-box::before, .abvantage-section .challenge-box::after { display: none !important; } .abvantage-section .challenge-box:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .abvantage-section .challenge-box:hover .challenge-title h3, .abvantage-section .challenge-box:hover .challenge-desc p { color: inherit; } .abvantage-section .challenge { margin-bottom: 16px; } .abvantage-section .challenge img { width: 64px; height: auto; } .abvantage-section .challenge-title h3 { font-size: 18px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; padding: 0 0 12px; margin: 0; text-align: center; } .abvantage-section .challenge-desc p { font-size: 15px; color: var(--avl-body); line-height: 1.7; text-align: center; margin: 0; } /* ---------- 23.3 成功案例（左图右文版） ---------- */ .cases-section { background: var(--avl-canvas-soft); padding: 80px 0 100px; } /* OWL carousel内成功案例item间距 */ .cases-section .cases-item-box { width: 100%; } .cases-section .owl-stage { display: flex !important; gap: 0; } .cases-section .cases-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); overflow: hidden; box-shadow: var(--avl-shadow); display: flex; align-items: stretch; max-width: calc(100% - 40px); margin: 12px auto; } .cases-section .cases-img { float: none; width: 50%; flex: 0 0 50%; overflow: hidden; } .cases-section .cases-img img { width: 100%; height: 100%; object-fit: cover; } .cases-section .cases-content { float: none; width: 50%; flex: 0 0 50%; padding: 40px; } .cases-section .cases-content h4 { font-size: 20px; font-weight: 600; color: var(--avl-ink); line-height: 1.4; margin: 0 0 12px; text-align: left; } .cases-section .cases-content span { width: 60px; height: 3px; background: var(--avl-brand); margin: 0 0 20px; display: block; } .cases-section .cases-content p { font-size: 15px; color: var(--avl-body); line-height: 1.7; text-align: left; margin: 0; } .cases-section .cases-item-box { width: 100%; margin: 0 auto; } /* ---------- 23.4 响应式 ---------- */ @media (max-width: 768px) { .product-introduction, .abvantage-section, .cases-section { padding: 50px 0; } .abvantage-section .challenge-box { padding: 24px 20px; } .cases-section .cases-item { flex-direction: column; } .cases-section .cases-img, .cases-section .cases-content { width: 100%; flex: 0 0 100%; } .cases-section .cases-content { padding: 24px; } } /* ===================================================== 24. AVLCODE 头部下载按钮风格 — 全局"了解更多" CTA 参考：https://www.avlcode.cn 头部右侧"下载"按钮 核心特征：bg-ink(#171717) + 白字 + h-7(28px) + rounded-md ===================================================== */ /* 将 .index-title 内的 .more-btn 从纯文字链接升级为药丸按钮 */ :not(.antiy-legacy) .index-title .more-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 36px !important; padding: 0 22px !important; border-radius: 8px !important; background: var(--avl-ink) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; border: none !important; float: right !important; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; text-decoration: none; } :not(.antiy-legacy) .index-title .more-btn::after { content: ''; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; opacity: 0.7; transition: opacity 0.15s ease; } /* 确保 .index-title-white 右侧按钮也变为深色 */ :not(.antiy-legacy) .index-title-white .more-btn { background: var(--avl-ink) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; text-decoration: none; } :not(.antiy-legacy) .index-title-white .more-btn:hover { background: #2a2a2a !important; } :not(.antiy-legacy) .index-title .more-btn:hover { background: #2a2a2a !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :not(.antiy-legacy) .index-title .more-btn:hover::after { opacity: 1; } /* 移动端缩小 */ @media (max-width: 768px) { :not(.antiy-legacy) .index-title .more-btn, :not(.antiy-legacy) .index-title-white .more-btn { height: 34px !important; padding: 0 16px !important; font-size: 13px !important; } } /* ---------- 23.5 无 Banner 产品详情页（参考 VILLM） ---------- */ .page-product-nobanner .EngineTitle p { text-indent: 2em; } /* 无 banner 产品页 / Hero 页面：Hero 与面包屑之间无上分隔线， 面包屑文字上下各有一条与内容区容器同宽的分隔线 */ .page-product-nobanner .avlcode-hero, .page-villm .avlcode-hero { border-bottom: none; } .page-product-nobanner .breadBox, .page-villm .breadBox { border-bottom: none; padding: 0; margin: 20px 0; } .page-product-nobanner .breadBox .container, .page-villm .breadBox .container { border-top: 1px solid var(--avl-hairline); border-bottom: 1px solid var(--avl-hairline); padding: 14px 0; } /* ===================================================== 25. 升级通告列表页样式（upgrade_AVLSDK.html 等） ===================================================== */ /* 页面主体背景 */ .page-upgrade #page { padding: 60px 0 80px; } /* 侧边导航栏 */ .page-upgrade .upgrade-left { background: var(--avl-canvas-soft); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 32px 24px; height: fit-content; position: sticky; top: 100px; } .page-upgrade .upgrade-nav-title { font-size: 16px; font-weight: 600; color: var(--avl-ink); margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--avl-hairline); } .page-upgrade .panel-group { margin: 0; } .page-upgrade .panel { border: none; box-shadow: none; margin: 0; background: transparent; } .page-upgrade .panel-heading { padding: 0; border: none; background: transparent; } .page-upgrade .panel-title { font-size: 14px; font-weight: 500; } .page-upgrade .panel-title a { display: block; padding: 10px 0; color: var(--avl-body); text-decoration: none; transition: color 0.15s ease; line-height: 1.5; } .page-upgrade .panel-title a:hover { color: var(--avl-brand); } .page-upgrade .panel-title-active a { color: var(--avl-ink) !important; font-weight: 600; } /* 分页容器 */ .page-upgrade #lockDom { margin-top: 32px; display: flex; justify-content: flex-end; clear: both; position: static; } /* 列表区 */ .page-upgrade #biuuu_city_list { margin: 0; padding: 0; list-style: none; } .page-upgrade .lecture-item { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 24px 28px; margin: 0 0 12px 0; box-shadow: var(--avl-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .page-upgrade .lecture-item:hover { box-shadow: var(--avl-shadow-lg); border-color: var(--avl-hairline-strong); } .page-upgrade .lecture-item > a { display: block; font-size: 16px; font-weight: 600; color: var(--avl-ink); line-height: 1.5; margin-bottom: 8px; text-decoration: none; } .page-upgrade .lecture-item > a:hover, .page-upgrade .lecture-item > a:focus { color: var(--avl-brand); text-decoration: none; } .page-upgrade .lecture-item > p { font-size: 14px; color: var(--avl-body); line-height: 1.7; margin: 0; } /* 胶囊标签导航 */ .tab-nav-wrap { background: var(--avl-canvas); border-bottom: 1px solid var(--avl-hairline); padding: 20px 0; } .tab-nav-wrap .container { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .tab-nav-wrap .tab-pill { display: inline-block; padding: 8px 28px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--avl-body); background: var(--avl-canvas); border: 1px solid var(--avl-hairline); text-decoration: none; transition: all 0.15s ease; cursor: pointer; } .tab-nav-wrap .tab-pill:hover { color: var(--avl-brand); border-color: var(--avl-brand); } .tab-nav-wrap .tab-pill.active { background: var(--avl-brand); color: #ffffff; border-color: var(--avl-brand); font-weight: 600; } /* ===================================================== 26. 安全服务页面样式（Service_Support 下 .html） ===================================================== */ /* 正文段落 */ .page-service-support .productTxt, .page-service-support .service-item-box > p { font-size: 15px; color: var(--avl-body); line-height: 1.8; margin: 0 0 16px; } .page-service-support .service-item-box > p:last-child { margin-bottom: 0; } /* 小标题 */ .page-service-support .titleOne { margin-bottom: 20px; } .page-service-support .titleOne h5 { font-size: 18px; font-weight: 600; color: var(--avl-ink); margin: 0 0 12px; line-height: 1.5; } .page-service-support .titleOne span { display: block; width: 40px; height: 3px; background: var(--avl-brand); margin: 0; } /* 服务页面图片 */ .page-service-support .productImg { max-width: 100%; height: auto; border-radius: var(--avl-radius); } /* 服务页面大标题 */ .page-service-support .titleBig { font-size: 28px; font-weight: 600; color: var(--avl-ink); letter-spacing: -0.01em; margin-bottom: 24px; text-align: center; } /* 响应式 */ @media (max-width: 768px) { .page-upgrade .upgrade-left { position: static; margin-bottom: 24px; } .page-upgrade #page { padding: 40px 0 60px; } .page-service-support .titleBig { font-size: 22px; } } /* ===================================================== 27. 软件升级下载卡片样式（Service_Support/Upgrade 下 .html） ===================================================== */ .download-card { background: var(--avl-canvas); border: 1px solid var(--avl-hairline); border-radius: var(--avl-radius-lg); padding: 48px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: var(--avl-shadow); max-width: 800px; margin: 0 auto; } .download-info h2 { font-size: 22px; font-weight: 600; color: var(--avl-ink); margin: 0 0 12px; line-height: 1.4; } .download-info .download-desc { font-size: 15px; color: var(--avl-body); line-height: 1.7; margin: 0 0 8px; } .download-info .download-date { font-size: 13px; color: var(--avl-mute); margin: 0; } .download-action .hero-btn { display: inline-block; padding: 12px 32px; border-radius: var(--avl-radius); font-size: 15px; font-weight: 600; color: #ffffff; background: var(--avl-brand); border: 1px solid var(--avl-brand); text-decoration: none; white-space: nowrap; transition: all 0.15s ease; cursor: pointer; } .download-action .hero-btn:hover, .download-action .hero-btn:focus { background: var(--avl-brand-deep); border-color: var(--avl-brand-deep); color: #ffffff; text-decoration: none; } @media (max-width: 768px) { .download-card { flex-direction: column; text-align: center; padding: 32px 24px; } .download-info h2 { font-size: 18px; } } /* ===================================================== 28. research/index.html 局部样式 ===================================================== */ /* 应急响应报告卡片标题链接 */ #emergency-response .value-content h3 a { color: #171717; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.5; } #emergency-response .value-content h3 a:hover { color: #171717; text-decoration: underline; } /* 描述段落与下方卡片间距 */ #emergency-response .product-title > p, #special-reports .product-title > p, #annual-review .product-title > p { margin-bottom: 32px; } /* ===================================================== 锚点导航条(anchorBar)与下方首个区块间距统一： 边界 0 + 内容距条底 80px（与 product-section 一致） 适用：41 个带 anchorBar 的 .html 页面 ===================================================== */ @media (min-width: 769px) { .anchorBar { margin-bottom: 0; } .anchorBar + .body-box { margin-top: 0; padding-top: 80px; } /* 大事记 */ .anchorBar + .columnBox { margin-top: 0 !important; padding-top: 80px; } /* 荣誉资质 */ .anchorBar + .party-box { padding-top: 80px; } /* 党建 */ .anchorBar + .annual-report { padding-top: 80px !important; } /* SDK升级/技术博客 */ .anchorBar + div[class=""] { padding-top: 80px; } /* 新闻/研究报告列表 */ } /* ===== 红色文字链接（参考 avlcode.cn 首页"了解更多"：--link #c80000 / --link-deep #a00000，lucide 箭头 14px） ===== 颜色等全部属性挂在 .index-title 前缀上（特异性 0,2,0）： ① 压过 custom.css .index-title a 的旧方块按钮样式； ② 压过本文件 :not(.antiy-legacy) a 的全局链接色（基础类单独放颜色会被它压掉） */ .index-title .avl-text-link { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; line-height: 1.5; float: none; border: none; border-radius: 0; text-align: left; font-size: 14px; font-weight: 500; color: #c80000; text-decoration: none; } .index-title .avl-text-link:hover { color: #a00000; } .avl-text-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; } .avl-text-link:hover svg { transform: translateX(2px); } /* 基础红色文字链接：任意页面任意位置可用（不只标题行）。 a.avl-text-link 与本文件 :not(.antiy-legacy) a 同为 (0,1,1) 特异性， 本规则声明在后，按级联顺序获胜；标题行内的旧方块重置仍由上面 .index-title / .index-title-white 两条规则负责 */ a.avl-text-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #c80000; text-decoration: none; } a.avl-text-link:hover { color: #a00000; text-decoration: none; }