/* ============================================================================ * home-hero.css — 首页首屏「工厂实景大 banner」（**仅 index.html 引用**） * ---------------------------------------------------------------------------- * 参考稿：深色航拍工业园区实景图 + 深色遮罩 + 白色大标题， * 搜索框与操作按钮保持白底可点；图上有缓慢的「呼吸」缩放动效， * 并浮着一句「中国制造 链接全球」。 * * 铁律：**只做视觉，不动结构、不动功能** * · 不改任何 DOM（JS 渲染的 SPA，改结构风险极高） * · 不给 .hero 及其子孙加 pointer-events / z-index 之类的交互干扰， * 遮罩层显式 pointer-events:none，搜索框、下拉、按钮全部照旧可点 * · 只加在 index.html 的 末尾 → 其他 5 个页面物理上不受影响 * （验收：grep -c 'home-hero' www/*.html 只应有一个 1） * * 层级安排（三层，缺一不可）： * .hero::after z-index 0 ← 背景图（**动效层**，独立缩放，不带动文字） * .hero::before z-index 1 ← 遮罩 * .hero > .wrap z-index 2 ← 真正的内容 * 注意 ::before 与 ::after 同为 z-index:0 时，按 DOM 顺序 ::after 会盖住 * ::before，遮罩就失效了 —— 所以必须显式错开。 * * 遮罩为什么放在 ::before 而不是叠进 background-image： * 多张背景图叠在一起时，改一条 background-position 会重置其余图层 * （值数量不匹配 → 未指定的图层回到 0% 0%），窄屏适配时非常容易踩。 * 拆成独立的绝对定位伪元素后，图片只管图片、遮罩只管遮罩，互不干扰。 * =========================================================================== */ /* --------------------------------------------------------------------------- * 一、首屏底：图片层搬进 ::after * 主包原本给 .hero 直接挂 background-image，同时也给 .hero::after 画了一个 * 浅色模式的红色光斑（right/top:-60px + 280×280 + 圆角 50%）。 * 这里接管 ::after 当动效图层，必须把那几个遗留值一并复位， * 否则 inset:0 与 width:280px 打架 —— 浏览器会让 left/width 胜出， * 图层退化成右上角一个小方块。 * -------------------------------------------------------------------------- */ .hero { background-color: #1b2027; /* 图未加载完时也不会闪白 */ background-image: none; /* 真正的图在 ::after 上 */ border-bottom-color: rgba(255, 255, 255, 0.1); /* 主包已给 .hero 写了 position:relative + overflow:hidden， 缩放后的图层会被裁在首屏内，不会溢到下面的区块里去 */ } .hero::after { content: ""; position: absolute; inset: 0; width: auto; /* 复位主包的 width:280px */ height: auto; /* 复位主包的 height:280px */ border-radius: 0; /* 复位主包的圆角 50% */ z-index: 0; pointer-events: none; /* 关键：绝不吃掉鼠标事件 */ background-color: transparent; background-image: url("/assets/hero/hero-factory.jpg"); background-size: cover; background-position: center 38%; /* 偏上取景：留住天空与厂房对角线 */ background-repeat: no-repeat; will-change: transform; /* 仿 juan.useai.live 的 home-hero-breathe：18 秒一个来回的极慢呼吸。 最小 1.02 倍是有讲究的 —— 背景图铺满容器，只要 scale ≥ 1 就不会露边， 配合 translate 的位移也仍在安全范围内。 */ animation: heroBreathe 18s ease-in-out infinite; } @keyframes heroBreathe { 0%, 100% { transform: scale(1.02) translate(0, 0); } 50% { transform: scale(1.07) translate(-0.7%, -0.35%); } } /* 用户开了「减少动态效果」就老实停住，只保留 1.02 的基准缩放 */ @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; transform: scale(1.02); } } /* --------------------------------------------------------------------------- * 二、遮罩层：分区块控制明暗，保证白字处处可读 * 顶部稍暗（压住顶栏与标题之间的过渡） * 中段 55%（标题所在的左上角另有径向压暗，右侧留亮露出夕阳与厂房） * 底部最暗（5 个数据条要看得清） * -------------------------------------------------------------------------- */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* 必须高于 ::after 的图片层 */ pointer-events: none; /* 关键：绝不吃掉鼠标事件 */ background-image: linear-gradient( 180deg, rgba(13, 17, 23, 0.72) 0%, rgba(13, 17, 23, 0.3) 34%, rgba(13, 17, 23, 0.52) 70%, rgba(13, 17, 23, 0.84) 100% ), radial-gradient( 108% 118% at 4% 46%, rgba(8, 12, 17, 0.6), rgba(8, 12, 17, 0) 55% ); } /* --------------------------------------------------------------------------- * 二·二、首屏背景点缀：**最终决定不加**（用户 2026-09-14 选方案 D） * 同一轮里依次试过并全部否决： * · 方案 A 暖色光晕呼吸（.hero > .wrap::before + 暖橙 radial-gradient） * · 方案 B 斜向扫光（.hero > .wrap::after + 斜 22° 亮带横向平移） * · 方案 C 细颗粒噪点（未实现） * → banner 保持干净，不加任何背景点缀。**别再主动往回加。** * 两套代码完整留档在 .workbuddy/memory/2026-09-14.md（补记 9 及其后续）。 * * ⚠️ 日后真要加回来，记住挂载点的取舍（都是踩出来的）： * · `.hero` 自己的 ::before（遮罩）/ ::after（背景图）**都被占了**； * · `.hero > .wrap` 是本文件下方显式给的 `position:relative; z-index:2`， * 给它伪元素 `z-index:-1` → 落点正好「高于遮罩、低于文字」： * 光效不会被遮罩压暗，也不会糊在标题与按钮上； * · `.hero` 自带 `overflow:hidden`，溢出部分会被裁掉，不会撑出横向滚动条； * · 高度**别用 %**：`.wrap` 只是内容容器、比整个 banner 矮， * 用 % 会覆盖不到 banner 上下沿（改用 vh 或干脆把伪元素撑大）； * · 只动 `transform` / `opacity`（能上合成层）， * 别用 background-position 做位移动画，那是每帧重绘。 * -------------------------------------------------------------------------- */ /* 内容压到遮罩之上 */ .hero > .wrap { position: relative; z-index: 2; } /* --------------------------------------------------------------------------- * 三、大标题：白字 + 柔和投影；原来的品牌红 .hl 在深底上对比度极差，改白 * 品牌色改由标题下方的「红→金」渐变短条承担（与首页区块标题同一套语言） * -------------------------------------------------------------------------- */ .hero h1 { color: #fff; letter-spacing: -0.035em; line-height: 1.16; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35); } .hero h1 .hl { color: #fff; } /* 标题下的品牌渐变短条（参考稿里标题下方那道红色装饰的呼应） */ .hero h1::after { content: ""; display: block; width: 78px; height: 4px; margin-top: 20px; border-radius: 999px; background: linear-gradient(90deg, #e04a2e 0%, #f0a63c 100%); box-shadow: 0 6px 18px -6px rgba(224, 74, 46, 0.9); } .hero .sub { color: rgba(255, 255, 255, 0.83); font-size: 16px; line-height: 1.7; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------------- * 四、「中国制造 链接全球」标语 * 最终形态（2026-09-14 第四次定稿）：**所有宽度都出现在** * 「标题下方、副标题上方」，贴着左边与标题同轴。 * * ⚠️ 迭代史（前三次全踩在"媒体查询"上，务必记住）： * v1 眉标（h1::before，且写在媒体查询**外面**）+ 桌面水印（wrap::after） * → 桌面端同一句话**出现两次**； * v2 眉标≤640 / 水印≥1180 → 两套互斥，但 641~1179 之间**是空的**； * v3 ≤640 隐藏 + ≥641 走"标题下方" → 区间互补，但用户随后又要求手机也显示； * v4（现在）**不要任何媒体查询**，一条无条件规则覆盖全部宽度。 * 教训：这几轮 bug 全是"加一档 / 减一档"引发的。既然这句话**所有宽度都要显示**， * 就压根不该用媒体查询把它拆成两支 —— 只有"某一档真的不要"时才需要 media query， * 且那时必须把"要显示的那一档"也显式写出来。 * * 为什么挂在 .sub::before 而不是 h1::after： * h1::after 已经被标题下方那道渐变短条占了；.sub 是紧跟 h1 的段落， * 在它前面插一个块级伪元素，位置天然就是「标题下方、副标题上方」。 * -------------------------------------------------------------------------- */ .hero .sub::before { content: "中国制造 链接全球"; display: block; margin-bottom: 9px; font-size: 13px; font-weight: 900; line-height: 1.3; letter-spacing: 0.18em; color: #ffb18c; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); } /* 手机上一行更短，字号与下间距各收一点，免得把副标题挤远 */ @media (max-width: 640px) { .hero .sub::before { font-size: 12.5px; margin-bottom: 7px; } } /* --------------------------------------------------------------------------- * 五、搜索面板：**保持白底**（功能优先），只加强投影让它"浮"在图上 * 面板内部的 select / input / 提示文字全在白底上，原始深色文字不用改 * -------------------------------------------------------------------------- */ .hero .catalog-filter { background: #fff; border-color: transparent; border-radius: 18px; box-shadow: 0 34px 74px -34px rgba(0, 0, 0, 0.82), 0 6px 20px -8px rgba(0, 0, 0, 0.45); } /* --------------------------------------------------------------------------- * 六、品类热词：深色玻璃胶囊 + 白字 * -------------------------------------------------------------------------- */ .hero-tags .tag { color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; } .hero-tags .tag:hover { color: #fff; background: rgba(224, 74, 46, 0.94); border-color: transparent; box-shadow: 0 10px 22px -10px rgba(224, 74, 46, 0.9); } /* --------------------------------------------------------------------------- * 七、数据条：白字；**不要分隔线**（用户 2026-09-14 定稿） * 原先这里给 ≥641 加了 `border-left: 2px solid rgba(255,255,255,.2)` * 当分隔线，深色底上呈现为 3 条发灰的窄条，用户要求去掉。 * 处理方式：**显式写 border-left: none，而不是把规则删掉** —— * 主包目前没有给 .stat 加边框，但保留这一行能兜住"主包将来加了边框"的情况， * 且成本只有一行。（`:first-child` 那条随之冗余，已删。） * -------------------------------------------------------------------------- */ .hero .stat { border-left: none; } .hero .stat b { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .hero .stat span { color: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------------------------- * 八、「查看商品目录」入口：深底上换成暖金，hover 转白 * -------------------------------------------------------------------------- */ .hero-catalog-link { color: #ffd08a; } .hero-catalog-link:hover { color: #fff; } /* --------------------------------------------------------------------------- * 九、≥1025：发布区块放「搜索卡右上方」，右边缘与搜索卡右边缘对齐 * （用户 2026-09-14 第五次定稿。手机端与 641~1024 保持"整宽动作条在卡片下方"） * 迭代史： * v1 右侧竖列，与搜索面板垂直居中（靠照抄外边距补偿那 12px 偏差）； * v2 竖列钉 `grid-row:1`（标题行右上角）； * v3 整段删网格、全宽单列，发布条横铺在搜索卡下方； * v4（现在）桌面改回两列 —— 但右栏不是固定 240px，而是 `auto` * （= 发布条自己的宽度）；发布条跨「标题 + 副标题」两行且 `align-self:end` * 贴底，贴住的那条底边正好是搜索卡顶边 = "搜索框右上方"。 * * ⚠️ 这个网格唯一但致命的坑：第 2 列是 auto 宽，**凡是必须整宽的元素都得 * 显式写 `grid-column: 1 / -1`** —— 搜索卡、目录链接、热词、数据条。 * 漏一个，它就被压进第 1 列变窄，而且不报错。 * * 为什么不用「绝对定位 + 写死 top」：副标题行数会随视口 / 语言变， * 写死的 top 一定错位；grid 的行高由内容自己算，永远贴得住。 * -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .hero > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; } /* 标题与副标题留在第 1 列 */ .hero > .wrap > h1, .hero > .wrap > .sub { grid-column: 1; } /* 搜索卡及以下一律横跨两列 —— 漏写就会被压窄 */ .hero > .wrap > .catalog-filter, .hero > .wrap > .hero-catalog-link, .hero > .wrap > .hero-tags, .hero > .wrap > .stats { grid-column: 1 / -1; } /* 发布区块：第 2 列，跨标题 + 副标题两行，贴底（= 搜索卡顶边）右对齐。 margin 必须归零 —— 基础样式里的 margin-top:20px 是给"卡片下方槽位"用的。 */ .hero > .wrap > .hero-side { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; margin-top: 0; margin-bottom: 0; } } /* --------------------------------------------------------------------------- * 十、尺寸：桌面给足呼吸，窄屏收住 —— 每档都显式写，避免盖掉窄屏口径 * -------------------------------------------------------------------------- */ .hero { padding-top: 60px; padding-bottom: 54px; } @media (min-width: 1025px) { .hero { padding-top: 86px; padding-bottom: 74px; } .hero h1 { font-size: 46px; } .hero .sub { font-size: 16.5px; max-width: 720px; } .hero .stats { margin-top: 36px; } } @media (max-width: 640px) { .hero { padding-top: 40px; padding-bottom: 36px; } .hero h1 { font-size: 32px; } .hero h1::after { width: 62px; height: 3px; margin-top: 15px; } .hero .sub { font-size: 14.5px; } /* 手机端首屏窄高，取景上移一点，避免只切到一片屋顶 */ .hero::after { background-position: center 26%; } }