/*! * Ernest Chemical — 定制组件样式 * --------------------------------------------------- * 依赖 theme.css 的 CSS 变量（--color-* / --radius-* / --shadow-*）。 * 业务样式一律使用 var(--color-*)，禁止硬编码颜色。 * 绿色为默认主题，切换到 即全站变蓝。 * * 组织： * 1. 全局基础（字体、容器、链接按钮） * 2. Header 顶栏 CTA + 主题切换 * 3. Hero Banner * 4. 区块通用（section_title 间距、浅灰交替区块） * 5. 首页组件（intro / advantages / cat-grid / rd-split / stats / cta） * 6. Products（剂型 Badge / 网格） * 7. Contact（询盘表单 / 地图） * 8. Footer（深色四列） * 9. 单页正文排版 * 10. 响应式 */ /* ========================================================= 1. 全局基础 ========================================================= */ body { font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.6; } h1, h2, h3, h4, h5 { font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.25; color: var(--color-text); } p { line-height: 1.7; } /* 修复 D3：legacy style.css 给导航/区块标题等指定了 tt_xxx / Arial 字体栈且字体文件 404， 导致导航与标题实际回退为 Arial，与正文 Inter 不一致。此处统一收口到 Inter（设计指南 §3.1）。 ernest.css 在 style.css 之后加载，同特异性下后写覆盖。 */ .nav > ul > li a, .section_title > p, .section_title > p *, .right_li span, .service_box h4, .news_box h4 a, p.detail_title, .contact_left p, .contact_right > p, ul.category li a, p.copy { font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; } /* 修复 D10：容器宽度对齐设计指南 §4.2（最大 1200px + 左右 24px padding）， 并中和 legacy @media≤1279 把 .w1200 钉死为 960px 造成的两侧大留白。 */ .w1200 { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } @media screen and (max-width: 1279px) { .w1200 { width: 100%; max-width: 1200px; } } /* 修复 D13：swiper 分页圆点点击热区偏小（默认 8×8），放大到 12×12，便于触控 */ .ec-hero .swiper-pagination-bullet { width: 12px; height: 12px; opacity: .5; background: #fff; } .ec-hero .swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary); } .ec-section-alt { background: var(--color-bg-alt); padding: 1px 0; } /* 包裹区块，制造交替灰白 */ /* 通用主按钮 */ .ec-btn-cta, .ec-btn-cta-light { display: inline-block; padding: 12px 28px; border-radius: var(--radius-btn); font-weight: 600; font-size: 15px; text-decoration: none; transition: all .25s ease; border: 2px solid transparent; cursor: pointer; } .ec-btn-cta { background: var(--color-primary); color: #fff; } .ec-btn-cta:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .ec-btn-cta-light { background: #fff; color: var(--color-primary); border-color: #fff; } .ec-btn-cta-light:hover { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); } /* 文字链接带箭头 */ .ec-link-more { color: var(--color-primary); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 12px; transition: color .2s; } .ec-link-more:hover { color: var(--color-primary-dark); } /* 区块标题统一上下间距（覆盖模板过紧间距） */ .ec-section-alt .section_1, .content.w1200 .section_1 { padding: 64px 0; } /* ========================================================= 2. Header 顶栏 ========================================================= */ /* 修复 D7：中和 legacy .head_info{line-height:120px} 对 flex 布局的拉伸 */ .head_info.ec-top-cta, .ec-top-cta { line-height: 1; } .ec-top-cta { display: flex; align-items: center; gap: 16px; } .ec-top-cta .ec-btn-cta { padding: 10px 22px; font-size: 14px; } /* 2026-07-17：主题切换按钮已从顶栏移除（B2B 站点不向客户暴露主题切换器）。 主题切换改用 URL 参数 ?theme=blue|green（见 theme.css §5 / 设计指南 §2.6）。 以下规则保留以备未来在 footer/后台恢复可见切换。 .ec-theme-switch { display: inline-flex; gap: 2px; background: var(--color-bg-alt); border-radius: var(--radius-btn); padding: 2px; } .ec-theme-switch button { border: none; background: transparent; cursor: pointer; font-size: 18px; min-width: 44px; min-height: 44px; padding: 8px 10px; border-radius: 4px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; } .ec-theme-switch button[aria-pressed="true"] { background: var(--color-primary-soft); } .ec-theme-switch button:hover { background: rgba(0,0,0,.06); } */ /* ========================================================= 3. Hero Banner ========================================================= */ .ec-hero { position: relative; } .ec-hero .swiper-slide { position: relative; } .ec-hero img { width: 100%; height: 560px; object-fit: cover; display: block; } .ec-hero-caption { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; max-width: 720px; box-sizing: border-box; /* 修复 D2：width:100% + padding 不再加和溢出视口 */ display: flex; flex-direction: column; justify-content: center; padding: 0 8%; color: #fff; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%); } .ec-hero-caption h2 { color: #fff; font-size: 44px; font-weight: 700; margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,.3); } .ec-hero-caption p { color: #fff; font-size: 18px; margin-bottom: 28px; max-width: 520px; text-shadow: 0 1px 4px rgba(0,0,0,.3); } /* ========================================================= 4. 通用区块 ========================================================= */ .section_title { text-align: center; margin-bottom: 48px; } .section_title span { display: inline-block; font-size: 14px; letter-spacing: .12em; color: var(--color-primary); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; } .section_title p { font-size: 30px; font-weight: 600; color: var(--color-text); } /* ========================================================= 5. 首页组件 ========================================================= */ /* 5.1 公司简介 */ .ec-intro-box { display: flex; align-items: center; gap: 48px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-card); } .ec-intro-text { flex: 1.4; } .ec-intro-text p { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 8px; } .ec-intro-img { flex: 1; } .ec-intro-img img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-card); } /* 5.2 核心优势 4 卡 */ .ec-advantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ec-adv-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 32px 24px; text-align: center; transition: all .3s ease; } .ec-adv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary-soft); } .ec-adv-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary); font-size: 28px; display: flex; align-items: center; justify-content: center; } /* 修复 D9：用线性 SVG 图标替代彩色 emoji（设计指南 §6.3）， 继承 currentColor=var(--color-primary)，统一 2px 描边 */ .ec-adv-icon svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ec-adv-card h4 { font-size: 19px; font-weight: 600; margin-bottom: 12px; color: var(--color-text); } .ec-adv-card p { font-size: 14px; color: var(--color-text-secondary); } /* 5.3 产品分类入口 */ .ec-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ec-cat-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; transition: all .3s ease; } .ec-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary-soft); color: inherit; } .ec-cat-img img { width: 100%; height: 200px; object-fit: cover; display: block; } .ec-cat-body { padding: 24px; } .ec-cat-body h4 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--color-text); } .ec-cat-body p { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 12px; } .ec-cat-count { color: var(--color-primary); font-weight: 600; font-size: 14px; } /* 5.4 R&D / Production 图文 */ .ec-rd-split { display: flex; align-items: center; gap: 48px; } .ec-rd-text { flex: 1; } .ec-rd-text h4 { font-size: 26px; font-weight: 600; margin-bottom: 16px; } .ec-rd-text p { color: var(--color-text-secondary); margin-bottom: 8px; } .ec-rd-gallery { flex: 1.2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ec-rd-gallery img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-card); transition: transform .3s; } .ec-rd-gallery img:hover { transform: scale(1.03); } /* 5.5 全球网络数据带 */ .ec-stats-band { background: var(--color-primary-dark); color: #fff; padding: 56px 0; } .ec-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .ec-stat-num { font-size: 48px; font-weight: 700; color: #fff; line-height: 1.1; } .ec-stat-label { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 8px; } /* 5.6 CTA Band */ .ec-cta-band { background: var(--color-primary); color: #fff; padding: 64px 0; text-align: center; } .ec-cta-band h3 { color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 12px; } .ec-cta-band p { color: rgba(255,255,255,.92); font-size: 17px; margin-bottom: 28px; } /* ========================================================= 6. Products ========================================================= */ .ec-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 24px; width: 100%; clear: both; } .pic_list .pic_box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; padding: 0 0 16px; position: relative; transition: all .3s ease; margin: 0; /* 强制覆盖模板原有的 float/width，配合 .ec-product-grid 的 grid 布局 */ float: none; width: 100%; } .pic_list .pic_box:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary-soft); } .pic_list .pic_box_img { height: 200px; overflow: hidden; position: relative; } .pic_list .pic_box_img img { width: 100%; height: 100%; object-fit: cover; } .pic_list .pic_box p { padding: 14px 16px 4px; font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.4; min-height: 48px; } /* 剂型 Badge */ .ec-form-badge { display: inline-block; margin: 4px 16px 0; padding: 3px 10px; background: var(--color-tag-bg); color: var(--color-tag-text); border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; } /* 空状态 */ .ec-empty { text-align: center; padding: 60px 20px; color: var(--color-text-secondary); grid-column: 1 / -1; } /* ---- 分页器（产品列表 / 新闻列表）---- ThinkPHP $list->render() 输出