/* * 首页模块化构建器 — 前台响应式样式 (home.css) * * 颜色等动态令牌由 HomeTheme::css_vars() 以 CSS 变量挂在 .slh-home 上 * （--slh-accent / --slh-text / --slh-heading / --slh-tint / --slh-soft / * --slh-border / --slh-radius / --slh-maxw / --slh-fs）。 * 本文件只负责布局与断点，颜色一律读 var()，做到「内联管色彩、CSS 管响应式」。 * 仅在站点首页入队。 */ /* 全宽模块(100vw，含滚动条宽度)在「根/视口层」裁掉横向溢出：既保留全宽背景铺满 屏幕边到边，又不产生页面横向滚动。横向滚动的容器是 ，故必须裁 html（仅裁 body 不一定生效）。本样式仅在站点首页入队，只影响首页。 用 clip（非 hidden）：不破坏主题 sticky 头部、不产生多余滚动容器。 */ html, body { overflow-x: clip; } .slh-home { --slh-cardbw: 1px; color: var(--slh-text, #444); font-size: var(--slh-fs, 16px); line-height: 1.8; max-width: 100%; } .slh-home *, .slh-home *::before, .slh-home *::after { box-sizing: border-box; } .slh-home__inner { max-width: var(--slh-maxw, 1200px); margin: 0 auto; padding: 0 22px 50px; } .slh-home .slh-sec { margin: 0 0 56px; } .slh-home .slh-sec:last-child { margin-bottom: 0; } .slh-home .slh-sec__title { font-size: 24px; font-weight: 700; color: var(--slh-heading, #1a1a1a); text-align: center; margin: 0 0 28px; line-height: 1.3; } /* --- 首屏核心区 ------------------------------------------------------- */ .slh-home .slh-hero { text-align: center; padding: 24px 0 8px; } .slh-home .slh-hero--tint { background: linear-gradient(160deg, var(--slh-tint, #f4faf5), #ffffff 70%); border-radius: var(--slh-radius, 14px); padding: 56px 24px; } .slh-home .slh-hero__box { max-width: 760px; margin: 0 auto; } .slh-home .slh-hero__title { font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: .5px; color: var(--slh-heading, #1a1a1a); margin: 0 0 16px; } .slh-home .slh-hero__sub { font-size: calc(var(--slh-fs, 16px) + 2px); color: #666; margin: 0 auto 20px; max-width: 620px; } .slh-home .slh-hero__points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .slh-home .slh-hero__points li { position: relative; color: var(--slh-text, #444); font-size: 15px; padding-left: 20px; } .slh-home .slh-hero__points li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--slh-accent, #1a7f37); } .slh-home .slh-hero__cta { display: flex; justify-content: center; gap: 14px; margin: 8px 0 22px; flex-wrap: wrap; } .slh-home .slh-hero__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 18px; color: #777; font-size: 13px; } .slh-home .slh-hero__trust-item { position: relative; padding-left: 16px; } .slh-home .slh-hero__trust-item::before { content: "✓"; position: absolute; left: 0; color: var(--slh-accent, #1a7f37); font-weight: 700; } /* --- 按钮 ------------------------------------------------------------- */ .slh-home .slh-btn { display: inline-block; padding: 13px 30px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.2; transition: opacity .15s ease, background .15s ease; } .slh-home .slh-btn--primary { background: var(--slh-accent, #1a7f37); color: #fff; border: 1px solid var(--slh-accent, #1a7f37); } .slh-home .slh-btn--primary:hover { opacity: .9; } .slh-home .slh-btn--ghost { background: transparent; color: var(--slh-accent, #1a7f37); border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); } .slh-home .slh-btn--ghost:hover { background: var(--slh-tint, #f4faf5); } .slh-home .slh-link { color: var(--slh-accent, #1a7f37); font-weight: 600; text-decoration: none; } .slh-home .slh-link:hover { text-decoration: underline; } /* --- 信任标签区 ------------------------------------------------------- */ .slh-home .slh-badges__wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .slh-home .slh-badge { display: flex; align-items: center; gap: 10px; color: var(--slh-text, #444); font-size: 15px; font-weight: 500; } .slh-home .slh-badge__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--slh-soft, #e7f3ea); color: var(--slh-accent, #1a7f37); flex: none; } .slh-home .slh-badges--card .slh-badge { flex: 1 1 200px; justify-content: center; background: var(--slh-tint, #f4faf5); border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); padding: 18px 16px; } /* --- 网格（分类 / 产品共用） ----------------------------------------- */ .slh-home .slh-grid { display: grid; gap: 18px; } .slh-home .slh-grid--4 { grid-template-columns: repeat(4, 1fr); } .slh-home .slh-grid--3 { grid-template-columns: repeat(3, 1fr); } /* 关键：网格/弹性子项默认 min-width:auto 会拒绝收缩到内容最小宽度以下， 在移动端 2/3 列里遇到长价格/长词时会撑破容器→整页横向溢出。统一允许收缩。 */ .slh-home .slh-grid > *, .slh-home .slh-catlist > *, .slh-home .slh-spec2__cards > * { min-width: 0; } .slh-home .slh-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); text-decoration: none; text-align: center; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .slh-home .slh-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, .07); transform: translateY(-2px); border-color: var(--slh-accent, #1a7f37); } .slh-home .slh-cat__name, .slh-home .slh-prod__name { font-size: 16px; font-weight: 600; color: var(--slh-heading, #1a1a1a); } /* 产品标题最多 3 行，超出省略，避免卡片高度不一致 */ .slh-home .slh-prod__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .slh-home .slh-cat__meta { font-size: 13px; color: #888; } .slh-home .slh-prod__price { color: var(--slh-accent, #1a7f37); font-weight: 700; } .slh-home .slh-prod__name, .slh-home .slh-cat__name, .slh-home .slh-prod__price { overflow-wrap: anywhere; } .slh-home .slh-prod__rating { font-size: 13px; color: #e6a700; } .slh-home .slh-prods__more { text-align: center; margin-top: 24px; } /* --- 场景信任 / 新手引导：特征卡片 ----------------------------------- */ .slh-home .slh-feat { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; background: var(--slh-tint, #f4faf5); border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); } .slh-home .slh-feat__title { font-size: 16px; font-weight: 600; color: var(--slh-heading, #1a1a1a); } .slh-home .slh-feat__desc { font-size: 14px; color: #666; line-height: 1.7; } .slh-home .slh-feat-list { display: flex; flex-direction: column; gap: 12px; } .slh-home .slh-feat-list .slh-feat { flex-direction: row; align-items: baseline; gap: 14px; } .slh-home .slh-feat-list .slh-feat__title { flex: none; min-width: 120px; } /* --- 编号步骤（新手引导 steps 版） ---------------------------------- */ .slh-home .slh-steps { display: flex; flex-direction: column; gap: 14px; } .slh-home .slh-step { display: flex; gap: 14px; align-items: flex-start; } .slh-home .slh-step__num { flex: none; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--slh-accent, #1a7f37); color: #fff; font-weight: 700; font-size: 14px; } .slh-home .slh-step .slh-feat__title { font-size: 16px; font-weight: 600; color: var(--slh-heading, #1a1a1a); } .slh-home .slh-step .slh-feat__desc { font-size: 14px; color: #666; line-height: 1.7; } /* --- 数据背书 -------------------------------------------------------- */ .slh-home .slh-stats__wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; text-align: center; } .slh-home .slh-stat { flex: 1 1 160px; } .slh-home .slh-stat__num { font-size: 36px; font-weight: 800; color: var(--slh-accent, #1a7f37); line-height: 1.1; } .slh-home .slh-stat__label { font-size: 14px; color: #777; margin-top: 6px; } .slh-home .slh-stats--card .slh-stat { background: var(--slh-tint, #f4faf5); border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); padding: 22px 16px; } /* --- 品牌与品质说明 -------------------------------------------------- */ .slh-home .slh-brand--center { text-align: center; } .slh-home .slh-brand--center .slh-brand__box { max-width: 760px; margin: 0 auto; } .slh-home .slh-brand--left .slh-brand__box { max-width: 820px; } .slh-home .slh-brand__h { font-size: 24px; font-weight: 700; color: var(--slh-heading, #1a1a1a); margin: 0 0 16px; } .slh-home .slh-brand__p { font-size: var(--slh-fs, 16px); color: var(--slh-text, #444); line-height: 1.9; margin: 0 0 14px; } .slh-home .slh-brand__more { margin-top: 8px; } /* --- 内容活跃（最新文章） ------------------------------------------- */ .slh-home .slh-post { text-align: left; } .slh-home .slh-post__title { font-size: 15px; font-weight: 600; color: var(--slh-heading, #1a1a1a); line-height: 1.5; } .slh-home .slh-post__date { font-size: 12px; color: #999; } .slh-home .slh-post-list { display: flex; flex-direction: column; gap: 10px; } .slh-home .slh-post-list .slh-post { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 14px; } /* --- 安全保障 -------------------------------------------------------- */ .slh-home .slh-safe { display: flex; align-items: center; gap: 10px; padding: 16px 14px; background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); } .slh-home .slh-safe__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--slh-soft, #e7f3ea); color: var(--slh-accent, #1a7f37); } .slh-home .slh-safe__text { font-size: 14px; color: var(--slh-text, #444); } .slh-home .slh-safety--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .slh-home .slh-safety--row .slh-safe { flex: 0 1 auto; border: none; background: transparent; padding: 6px 10px; } /* --- 首屏：分栏基础（左文右图 / 右文左图 / 撞色 / 拍立得 共用） --- */ .slh-home .slh-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .slh-home .slh-hero__split .slh-hero__box { max-width: none; margin: 0; text-align: left; } .slh-home .slh-hero__split .slh-hero__sub { margin-left: 0; } .slh-home .slh-hero__split .slh-hero__points, .slh-home .slh-hero__split .slh-hero__cta, .slh-home .slh-hero__split .slh-hero__trust { justify-content: flex-start; } .slh-home .slh-hero--split, .slh-home .slh-hero--polaroid, .slh-home .slh-hero--colorblock { text-align: left; } .slh-home .slh-hero__media img, .slh-home .slh-hero__media .slh-img { width: 100%; height: auto; border-radius: var(--slh-radius, 14px); display: block; } .slh-home .slh-hero__media--ph { background: #e7eaef; border-radius: var(--slh-radius, 14px); min-height: 240px; } /* --- 渐变暗层·图上叠文 -------------------------------------------- */ .slh-home .slh-hero--overlay { position: relative; background-size: cover; background-position: center; border-radius: var(--slh-radius, 14px); overflow: hidden; padding: 92px 24px; text-align: center; background-color: #2b3340; } .slh-home .slh-hero--overlay .slh-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,28,.30), rgba(15,20,28,.74)); } .slh-home .slh-hero--overlay .slh-hero__box { position: relative; z-index: 1; } .slh-home .slh-hero--overlay .slh-hero__title { color: #fff; } .slh-home .slh-hero--overlay .slh-hero__sub { color: rgba(255,255,255,.9); } .slh-home .slh-hero--overlay .slh-hero__points li { color: rgba(255,255,255,.92); } .slh-home .slh-hero--overlay .slh-hero__points li::before { background: #fff; } .slh-home .slh-hero--overlay .slh-hero__trust { color: rgba(255,255,255,.85); } .slh-home .slh-hero--overlay .slh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); } .slh-home .slh-hero--overlay .slh-btn--ghost:hover { background: rgba(255,255,255,.15); } /* --- 撞色异形·视觉聚焦 -------------------------------------------- */ .slh-home .slh-hero--colorblock .slh-hero__split { gap: 0; align-items: stretch; border-radius: var(--slh-radius,14px); overflow: hidden; } .slh-home .slh-hero__col--accent { background: linear-gradient(135deg, var(--slh-accent, #1a7f37), #16243a); padding: 48px 40px; display: flex; align-items: center; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); } .slh-home .slh-hero__col--accent .slh-hero__title, .slh-home .slh-hero__col--accent .slh-hero__sub { color: #fff; } .slh-home .slh-hero__col--accent .slh-hero__points li { color: rgba(255,255,255,.92); } .slh-home .slh-hero__col--accent .slh-hero__points li::before { background: #fff; } .slh-home .slh-hero__col--accent .slh-hero__trust { color: rgba(255,255,255,.85); } .slh-home .slh-hero__col--accent .slh-btn--primary { background: #fff; color: var(--slh-accent,#1a7f37); border-color: #fff; } .slh-home .slh-hero__col--accent .slh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); } .slh-home .slh-hero--colorblock .slh-hero__media, .slh-home .slh-hero--colorblock .slh-hero__media--ph { min-height: 280px; } .slh-home .slh-hero--colorblock .slh-hero__media img { height: 100%; object-fit: cover; border-radius: 0; } /* --- 时尚杂志·拍立得 ---------------------------------------------- */ .slh-home .slh-hero__polaroid { background: #fff; padding: 14px 14px 38px; border-radius: 4px; box-shadow: 0 14px 40px rgba(18,38,63,.16); transform: rotate(-2deg); } .slh-home .slh-hero__polaroid img { border-radius: 2px; } .slh-home .slh-hero__polaroid--ph { min-height: 240px; } .slh-home .slh-hero--polaroid .slh-hero__title { color: var(--slh-accent, #1a7f37); } /* --- 图文交叠·错位立体感 ------------------------------------------ */ .slh-home .slh-hero--offset .slh-hero__offsetwrap { position: relative; } .slh-home .slh-hero--offset .slh-hero__media img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--slh-radius,14px); display: block; } .slh-home .slh-hero--offset .slh-hero__media--ph { min-height: 360px; } .slh-home .slh-hero--offset .slh-hero__floatcard { position: relative; margin: -120px 0 0; max-width: 560px; background: #fff; border-radius: var(--slh-radius,14px); padding: 34px 32px; text-align: left; box-shadow: 0 18px 50px rgba(18,38,63,.18); } .slh-home .slh-hero--offset .slh-hero__floatcard .slh-hero__points, .slh-home .slh-hero--offset .slh-hero__floatcard .slh-hero__cta, .slh-home .slh-hero--offset .slh-hero__floatcard .slh-hero__trust { justify-content: flex-start; } .slh-home .slh-hero--offset .slh-hero__floatcard .slh-hero__sub { margin-left: 0; } /* --- 卡片浮层·全幅承载 -------------------------------------------- */ .slh-home .slh-hero--cardfull { position: relative; background-size: cover; background-position: center; border-radius: var(--slh-radius,14px); overflow: hidden; padding: 64px 24px; background-color: #e7eaef; } .slh-home .slh-hero--cardfull .slh-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.18); } .slh-home .slh-hero--cardfull .slh-hero__card { position: relative; z-index: 1; background: #fff; border-radius: var(--slh-radius,14px); max-width: 620px; margin: 0 auto; padding: 40px 34px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.16); } /* --- 极简大标题·隐底图 -------------------------------------------- */ .slh-home .slh-hero--bigtitle { padding: 78px 0 46px; } .slh-home .slh-hero--bigtitle .slh-hero__box { max-width: 900px; } .slh-home .slh-hero--bigtitle .slh-hero__title { font-size: 56px; line-height: 1.12; letter-spacing: .5px; } .slh-home .slh-hero--bigtitle .slh-hero__sub { font-size: calc(var(--slh-fs,16px) + 3px); } .slh-home .slh-hero--bigtitle.slh-hero--hasbg { position: relative; background-size: cover; background-position: center; border-radius: var(--slh-radius,14px); overflow: hidden; padding: 92px 24px; text-align: center; } .slh-home .slh-hero--bigtitle.slh-hero--hasbg .slh-hero__overlay { position: absolute; inset: 0; background: rgba(255,255,255,.60); } .slh-home .slh-hero--bigtitle.slh-hero--hasbg .slh-hero__box { position: relative; z-index: 1; } /* --- 两列交错·双重呼吁 -------------------------------------------- */ .slh-home .slh-hero--dual .slh-hero__dual { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; } .slh-home .slh-hero__panel { border: var(--slh-cardbw,1px) solid var(--slh-border,#e2e8f0); border-radius: var(--slh-radius,14px); padding: 30px 28px; background: #fff; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .slh-home .slh-hero__panel:nth-child(2) { margin-top: 28px; background: #f7f9fc; } .slh-home .slh-hero__panel .slh-hero__title { margin: 0; font-size: 26px; } .slh-home .slh-hero__panel .slh-hero__sub { margin: 0; } .slh-home .slh-hero__panel .slh-hero__points { margin: 0; justify-content: flex-start; } /* --- 多维入口·紧凑横幅 -------------------------------------------- */ .slh-home .slh-hero--entries .slh-hero__bannerwrap { background: var(--slh-tint,#f4faf5); border: var(--slh-cardbw,1px) solid var(--slh-border,#cfe6d6); border-radius: var(--slh-radius,14px); padding: 30px 32px; text-align: left; } .slh-home .slh-hero--entries .slh-hero__title { font-size: 26px; margin-bottom: 6px; } .slh-home .slh-hero--entries .slh-hero__sub { margin: 0 0 16px; } .slh-home .slh-hero__entries { display: flex; flex-wrap: wrap; gap: 10px; } .slh-home .slh-hero__chip { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--slh-border,#cfe6d6); color: var(--slh-heading,#1a1a1a); font-size: 14px; font-weight: 600; } /* --- 倒计时抢购·强逼单 -------------------------------------------- */ .slh-home .slh-hero--countdown .slh-hero__cdwrap { text-align: center; } .slh-home .slh-hero__count { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; } .slh-home .slh-hero__cdbox { min-width: 88px; padding: 14px 16px; border-radius: 10px; background: #2b3340; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px; } /* --- 社交证明·信任背书 -------------------------------------------- */ .slh-home .slh-hero--social { text-align: center; } .slh-home .slh-hero__stars { color: #f5a623; font-size: 20px; letter-spacing: 3px; margin-bottom: 12px; } /* --- 侧边栏小工具一体化 ------------------------------------------- */ .slh-home .slh-hero--sidebar .slh-hero__withside { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; text-align: left; } .slh-home .slh-hero--sidebar .slh-hero__main .slh-hero__box { max-width: none; margin: 0; text-align: left; } .slh-home .slh-hero--sidebar .slh-hero__main .slh-hero__points, .slh-home .slh-hero--sidebar .slh-hero__main .slh-hero__cta, .slh-home .slh-hero--sidebar .slh-hero__main .slh-hero__trust { justify-content: flex-start; } .slh-home .slh-hero--sidebar .slh-hero__main .slh-hero__sub { margin-left: 0; } .slh-home .slh-hero__side { border: 1px solid var(--slh-border,#e2e8f0); border-radius: var(--slh-radius,14px); padding: 22px 20px; background: #f7f9fc; } .slh-home .slh-hero__sidelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .slh-home .slh-hero__sidelist li { position: relative; padding-left: 22px; color: var(--slh-text,#444); font-size: 14px; } .slh-home .slh-hero__sidelist li::before { content: "✓"; position: absolute; left: 0; color: var(--slh-accent,#1a7f37); font-weight: 700; } /* --- 卡片配图（分类/产品/文章图版本） ------------------------------ */ .slh-home .slh-card--img { padding: 0; overflow: hidden; } .slh-home .slh-card--img .slh-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--slh-tint, #f4faf5); } .slh-home .slh-card--img .slh-card__img img, .slh-home .slh-card--img .slh-card__img .slh-img { width: 100%; height: 100%; object-fit: cover; display: block; } .slh-home .slh-card--img .slh-cat__name, .slh-home .slh-card--img .slh-prod__name, .slh-home .slh-card--img .slh-post__title { padding: 0 14px; margin-top: 12px; } .slh-home .slh-card--img .slh-cat__meta, .slh-home .slh-card--img .slh-prod__price, .slh-home .slh-card--img .slh-prod__rating { padding: 0 14px; } .slh-home .slh-card--img.slh-prod { padding-bottom: 12px; } .slh-home .slh-card--img.slh-post { padding-bottom: 14px; } .slh-home .slh-card--img .slh-post__date { padding: 0 14px; } /* --- 产品卡：div 外层 + h3 内拉伸链接（整卡可点） ------------------- */ .slh-home .slh-prod { position: relative; } /* 产品网格：卡片按内容高度对齐（不拉伸），避免短标题卡片在价格下方留大块空白 */ .slh-home .slh-prods .slh-grid { align-items: start; } .slh-home .slh-prod__link { color: inherit; text-decoration: none; } .slh-home .slh-prod__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* --- 产品区 14 版式（每款明显区分） --------------------------------- */ /* 配图卡 card：白卡 + 常驻柔影（默认增强） */ .slh-home .slh-prods--card .slh-prod { box-shadow: 0 2px 12px rgba(18,38,63,.07); } /* 大图瓷砖 tile：大图主导、无卡框、左对齐、竖向大图 */ .slh-home .slh-prods--tile .slh-prod { border: none; box-shadow: none; background: transparent; padding: 0 0 10px; text-align: left; } .slh-home .slh-prods--tile .slh-card--img .slh-card__img { aspect-ratio: 3 / 4; border-radius: var(--slh-radius, 14px); } .slh-home .slh-prods--tile .slh-prod__name, .slh-home .slh-prods--tile .slh-prod__price { padding: 0; } .slh-home .slh-prods--tile .slh-prod__name { margin-top: 10px; } /* 描边卡 bordered：纯描边、扁平、无阴影 */ .slh-home .slh-prods--bordered .slh-prod { background: #fff; border: 1.5px solid var(--slh-border, #cfe6d6); box-shadow: none; } .slh-home .slh-prods--bordered .slh-prod:hover { box-shadow: none; transform: none; border-color: var(--slh-accent, #1a7f37); } /* 价格强调 price：价格放大成醒目红色价签 */ .slh-home .slh-prods--price .slh-prod__price { font-size: 22px; font-weight: 800; color: #e1413b; } /* 星级评分 rating：人工星数（支持半星）+ 可选好评 */ .slh-home .slh-prods--rating .slh-prod__stars { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; margin-top: 2px; } .slh-home .slh-prod__starbox { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 2px; } .slh-home .slh-prod__starbox .slh-prod__sb { color: #dcdfe4; } .slh-home .slh-prod__starbox .slh-prod__so { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5a623; } .slh-home .slh-prods--rating .slh-prod__stars em { color: #888; font-size: 12px; font-style: normal; letter-spacing: 0; } .slh-home .slh-prods--rating .slh-prod__review { display: block; color: #777; font-size: 12px; padding: 0 14px; margin-top: 4px; } /* 图片显示方式（自适应 / 拉伸 / 顶部填充；默认 cover 铺满裁切） */ .slh-home .slh-prods--fit-contain .slh-card--img .slh-card__img img { object-fit: contain; background: var(--slh-tint, #f4faf5); } .slh-home .slh-prods--fit-fill .slh-card--img .slh-card__img img { object-fit: fill; } .slh-home .slh-prods--fit-top .slh-card--img .slh-card__img img { object-fit: cover; object-position: top; } /* 固定宽度·完全显示：统一方形框（预留高度防错位）+ 整张完整显示不裁切 */ .slh-home .slh-prods--fit-natural .slh-card--img .slh-card__img { aspect-ratio: 1 / 1; height: auto; background: var(--slh-tint, #f4faf5); } .slh-home .slh-prods--fit-natural .slh-card--img .slh-card__img img { width: 100%; height: 100%; object-fit: contain; } .slh-home .slh-prods--fit-natural .slh-grid { align-items: start; } /* 极简 / 文字（保留旧 token 兼容） */ .slh-home .slh-prods--minimal .slh-prod, .slh-home .slh-prods--plain .slh-prod { border: none; box-shadow: none; background: transparent; } .slh-home .slh-prods--minimal .slh-prod:hover, .slh-home .slh-prods--plain .slh-prod:hover { transform: none; box-shadow: none; } .slh-home .slh-prod--overlay { position: relative; min-height: 210px; border-radius: var(--slh-radius, 14px); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; text-decoration: none; } .slh-home .slh-prod--overlay.is-noimg { background: linear-gradient(135deg, var(--slh-accent, #1a7f37), #16243a); } .slh-home .slh-prod--overlay .slh-prod__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.04)); } .slh-home .slh-prod--overlay .slh-prod__ov { position: relative; z-index: 1; padding: 16px; width: 100%; display: flex; flex-direction: column; gap: 4px; } .slh-home .slh-prod--overlay .slh-prod__name { color: #fff; font-weight: 700; } .slh-home .slh-prod--overlay .slh-prod__price { color: #fff; } .slh-home .slh-prod--row { display: flex; gap: 12px; align-items: center; border: var(--slh-cardbw,1px) solid var(--slh-border, #cfe6d6); border-radius: var(--slh-radius, 14px); padding: 10px; background: #fff; text-decoration: none; } .slh-home .slh-prod--row .slh-prod__rowimg { flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--slh-tint, #f4faf5); } .slh-home .slh-prod--row .slh-prod__rowimg img { width: 100%; height: 100%; object-fit: cover; } .slh-home .slh-prod--row .slh-prod__rowtxt { display: flex; flex-direction: column; gap: 4px; text-align: left; } /* --- 通用全宽出血（任意模块 width=full 时） ------------------------- */ .slh-home .slh-sec--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; } .slh-home .slh-sec--full > .slh-bound { max-width: var(--slh-maxw, 1200px); margin: 0 auto; padding-left: 22px; padding-right: 22px; } /* --- 信任标签区 v3（14 款排版，每条 图标 + 标题 + 副标题） --- */ .slh-home .slh-grid--2 { grid-template-columns: repeat(2, 1fr); } .slh-home .slh-badges2 .slh-badge2 { display: flex; align-items: center; gap: 12px; height: 100%; } .slh-home .slh-badge2__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--slh-soft, #e7f3ea); color: var(--slh-accent, #1a7f37); } .slh-home .slh-badge2__title { font-size: 16px; font-weight: 600; color: var(--slh-heading, #1a1a1a); line-height: 1.4; } .slh-home .slh-badge2__sub { font-size: 13px; color: #777; line-height: 1.6; margin-top: 2px; } /* 1·单行平铺 经典极简（基础行，无卡） */ .slh-home .slh-badges2--flatrow .slh-badge2 { justify-content: center; } /* 2·纯白卡片 独立悬浮 / 13·卡片群组 双列对等 */ .slh-home .slh-badges2--whitecard .slh-badge2, .slh-home .slh-badges2--duo .slh-badge2 { background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border,#e2e8f0); border-radius: var(--slh-radius,14px); padding: 18px 16px; box-shadow: 0 4px 14px rgba(18,38,63,.08); } /* 3·描边方格 严谨数码（联排方格，共享描边） */ .slh-home .slh-badges2--gridbox .slh-grid { gap: 0; border: var(--slh-cardbw,1px) solid var(--slh-border,#d6dde6); border-radius: var(--slh-radius,14px); overflow: hidden; } .slh-home .slh-badges2--gridbox .slh-badge2 { padding: 20px 16px; border-left: 1px solid var(--slh-border,#d6dde6); } .slh-home .slh-badges2--gridbox .slh-grid > .slh-badge2:first-child { border-left: none; } /* 4·垂直居中 图标交叠 */ .slh-home .slh-badges2--vcenter .slh-badge2 { flex-direction: column; text-align: center; gap: 10px; padding: 18px 14px; } /* 5·轻量网格 底部横线 */ .slh-home .slh-badges2--underline .slh-badge2 { padding: 4px 6px 14px; border-bottom: 2px solid var(--slh-accent,#1a7f37); border-radius: 0; } /* 6·通栏色块 反白视觉 */ .slh-home .slh-badges2--darkblock { background: #1f2a37; border-radius: var(--slh-radius,14px); padding: 30px 28px; } .slh-home .slh-badges2--darkblock .slh-badge2__icon { background: rgba(255,255,255,.12); color: #fff; } .slh-home .slh-badges2--darkblock .slh-badge2__title { color: #fff; } .slh-home .slh-badges2--darkblock .slh-badge2__sub { color: rgba(255,255,255,.7); } /* 7·微型气泡 圆润亲和 */ .slh-home .slh-badges2--bubble .slh-badge2 { justify-content: center; } .slh-home .slh-badges2--bubble .slh-badge2__icon { width: 40px; height: 40px; background: #eaf2fb; color: var(--slh-accent,#2271b1); } /* 8·左线锚定 秩序主义 */ .slh-home .slh-badges2--leftline .slh-badge2 { border-left: 3px solid var(--slh-accent,#1a7f37); padding: 4px 0 4px 14px; border-radius: 0; } /* 9·双行对齐 密集阵列（3 列 × 2 行，紧凑） */ .slh-home .slh-badges2--dense .slh-grid { gap: 14px 18px; } .slh-home .slh-badges2--dense .slh-badge2 { gap: 10px; } .slh-home .slh-badges2--dense .slh-badge2__icon { width: 38px; height: 38px; } /* 10·双色轻量 无框流 */ .slh-home .slh-badges2--twotone .slh-badge2__icon { background: transparent; color: var(--slh-accent,#1a7f37); width: 34px; height: 34px; } .slh-home .slh-badges2--twotone .slh-badge2__title { font-weight: 700; } /* 11·虚线环绕 手作复古 */ .slh-home .slh-badges2--dashed .slh-badge2 { border: 1.5px dashed var(--slh-border,#bcc6d2); border-radius: var(--slh-radius,14px); padding: 18px 16px; } /* 12·内凹嵌合 阴影凹槽 */ .slh-home .slh-badges2--inset .slh-badge2 { background: #eceff3; border-radius: var(--slh-radius,14px); padding: 18px 16px; box-shadow: inset 0 2px 6px rgba(18,38,63,.10), inset 0 -1px 2px #fff; } /* 14·底纹衬托 低饱和度 */ .slh-home .slh-badges2--tintrow { background: #eaf2fb; border-radius: var(--slh-radius,14px); padding: 24px 26px; } .slh-home .slh-badges2--tintrow .slh-badge2__icon { background: #d7e7f8; color: var(--slh-accent,#2271b1); } /* --- 场景信任区：复用信任标签 14 版式，但条目图标位放「图片」 ------- */ .slh-home .slh-scene2 .slh-badge2__icon { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--slh-tint, #f4faf5); } .slh-home .slh-scene2 .slh-badge2__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .slh-home .slh-scene2 .slh-badge2__icon--ph { background: linear-gradient(135deg, var(--slh-soft,#e7f3ea), #dfe7ee); } .slh-home .slh-scene2.slh-badges2--bubble .slh-badge2__icon { border-radius: 50%; } .slh-home .slh-scene2.slh-badges2--vcenter .slh-badge2__icon { width: 72px; height: 72px; } .slh-home .slh-scene2.slh-badges2--darkblock .slh-badge2__icon { background: rgba(255,255,255,.12); } /* --- 安全保障区 v2（14 款排版；复用 .slh-badge2 内卡片） ---------- */ .slh-home .slh-safety2 .slh-sec__title { text-align: center; margin: 0 0 22px; } /* 1) 单行盾牌 · 经典极简 */ .slh-home .slh-safety2--shield .slh-badge2 { justify-content: center; } /* 2) 纯白卡片 · 独立悬浮 */ .slh-home .slh-safety2--card .slh-badge2 { background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border,#e2e8f0); border-radius: var(--slh-radius,14px); padding: 18px 16px; box-shadow: 0 4px 16px rgba(18,38,63,.07); } /* 3) 描边方格 · 严谨数码 */ .slh-home .slh-safety2--grid .slh-grid { gap: 0; border: var(--slh-cardbw,1px) solid var(--slh-border,#d6dde6); border-radius: var(--slh-radius,14px); overflow: hidden; } .slh-home .slh-safety2--grid .slh-badge2 { padding: 20px 16px; border-left: 1px solid var(--slh-border,#d6dde6); } .slh-home .slh-safety2--grid .slh-grid > .slh-badge2:first-child { border-left: none; } /* 4) 两列平铺 · 左右对称 */ .slh-home .slh-safety2--split2 .slh-badge2 { justify-content: center; background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border,#e2e8f0); border-radius: var(--slh-radius,14px); padding: 20px 18px; } /* 5) 通栏色块 · 反白视觉 */ .slh-home .slh-safety2--dark { background: #1f2a37; border-radius: var(--slh-radius,14px); padding: 30px 28px; } .slh-home .slh-safety2--dark .slh-badge2 { justify-content: center; } .slh-home .slh-safety2--dark .slh-badge2__icon { background: rgba(255,255,255,.12); color: #fff; } .slh-home .slh-safety2--dark .slh-badge2__title { color: #fff; } .slh-home .slh-safety2--dark .slh-badge2__sub { color: rgba(255,255,255,.7); } .slh-home .slh-safety2--dark .slh-sec__title { color: #fff; } /* 6) 胶囊圆角 · 严谨令牌 */ .slh-home .slh-safety2--pill .slh-badge2 { justify-content: center; background: #fff; border: var(--slh-cardbw,1px) solid var(--slh-border,#dbe3ec); border-radius: 999px; padding: 12px 20px; } /* 7) 莫兰迪浅色 · 信任底纹 */ .slh-home .slh-safety2--morandi { background: #eef2f6; border-radius: var(--slh-radius,16px); padding: 26px 24px; } .slh-home .slh-safety2--morandi .slh-badge2__icon { background: #dfe7ef; color: var(--slh-accent,#2271b1); } /* 8) 虚线环绕 · 官方证书 */ .slh-home .slh-safety2--dashed { border: 1.5px dashed var(--slh-border,#bcc6d2); border-radius: var(--slh-radius,16px); padding: 26px 24px; } .slh-home .slh-safety2--dashed .slh-badge2 { justify-content: center; } .slh-home .slh-safety2--dashed .slh-badge2__icon { background: transparent; border: 1.5px solid var(--slh-accent,#2271b1); color: var(--slh-accent,#2271b1); } /* 9) 左线锚定 · 秩序主义 */ .slh-home .slh-safety2--leftline .slh-badge2 { border-left: 3px solid var(--slh-accent,#2271b1); padding: 4px 0 4px 14px; } /* 10) 内凹嵌合 · 钢印沉降 */ .slh-home .slh-safety2--inset .slh-badge2 { background: #eceff3; border-radius: var(--slh-radius,14px); padding: 18px 16px; box-shadow: inset 0 2px 6px rgba(18,38,63,.10), inset 0 -1px 2px #fff; } .slh-home .slh-safety2--inset .slh-badge2__icon { background: #fff; } /* 11) 微型气泡 · 圆润亲和 */ .slh-home .slh-safety2--bubble .slh-badge2 { justify-content: center; } .slh-home .slh-safety2--bubble .slh-badge2__icon { width: 40px; height: 40px; border-radius: 50%; background: #eaf2fb; color: var(--slh-accent,#2271b1); } /* 12) 极简字脊 · 无框极速 */ .slh-home .slh-safety2--spine .slh-grid { gap: 10px 24px; } .slh-home .slh-safety2--spine .slh-badge2 { gap: 8px; } .slh-home .slh-safety2--spine .slh-badge2__icon { background: transparent; color: var(--slh-accent,#2271b1); width: 28px; height: 28px; } .slh-home .slh-safety2--spine .slh-badge2__title { font-weight: 700; } /* 13) 左右括号 · 居中锁定 */ .slh-home .slh-safety2--bracket .slh-grid { position: relative; padding: 6px 30px; } .slh-home .slh-safety2--bracket .slh-grid::before, .slh-home .slh-safety2--bracket .slh-grid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; border: 2px solid var(--slh-heading,#1f2733); } .slh-home .slh-safety2--bracket .slh-grid::before { left: 0; border-right: none; } .slh-home .slh-safety2--bracket .slh-grid::after { right: 0; border-left: none; } .slh-home .slh-safety2--bracket .slh-badge2 { justify-content: center; } /* 14) 灰度高级感 · 克制 */ .slh-home .slh-safety2--gray { background: #eceef1; border-radius: var(--slh-radius,14px); padding: 28px 26px; } .slh-home .slh-safety2--gray .slh-badge2__icon { background: #fff; color: #4a5568; } .slh-home .slh-safety2--gray .slh-badge2__title { color: #2d3340; } .slh-home .slh-safety2--gray .slh-badge2__sub { color: #8a93a0; } /* --- 明星单品直购区（8 款排版，运行时实时渲染） ------------------ */ .slh-home .slh-feat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .slh-home .slh-feat2__media { min-width: 0; } .slh-home .slh-feat2__main { position: relative; } .slh-home .slh-feat2__main img, .slh-home .slh-feat2__main--ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--slh-radius,16px); display: block; background: #eef1f5; } /* 主图左右切换箭头 */ .slh-home .slh-feat2__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid #e2e6ec; box-shadow: 0 1px 6px rgba(0,0,0,.14); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: .9; transition: opacity .15s ease, background .15s ease; padding: 0; } .slh-home .slh-feat2__nav:hover { opacity: 1; background: #fff; } .slh-home .slh-feat2__nav--prev { left: 12px; } .slh-home .slh-feat2__nav--next { right: 12px; } .slh-home .slh-feat2__nav::before { content: ""; width: 9px; height: 9px; border-top: 2px solid #333; border-right: 2px solid #333; } .slh-home .slh-feat2__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; } .slh-home .slh-feat2__nav--next::before { transform: rotate(45deg); margin-right: 3px; } /* 缩略图条：横向可滑动（多图时不换行，溢出滚动，薄滚动条） */ .slh-home .slh-feat2__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; } .slh-home .slh-feat2__thumbs::-webkit-scrollbar { height: 6px; } .slh-home .slh-feat2__thumbs::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 999px; } .slh-home .slh-feat2__thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; scroll-snap-align: start; } .slh-home .slh-feat2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .slh-home .slh-feat2__thumb.is-active { border-color: var(--slh-accent,#2271b1); } .slh-home .slh-feat2__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .slh-home .slh-feat2__promo { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: #fff; background: var(--slh-accent,#2271b1); border-radius: 999px; padding: 3px 12px; } .slh-home .slh-feat2__title { font-size: 28px; line-height: 1.25; font-weight: 800; color: var(--slh-heading,#1a1a1a); margin: 0; } .slh-home .slh-feat2__sub { font-size: 15px; color: #5a6472; line-height: 1.6; margin: 0; } .slh-home .slh-feat2__rating { display: flex; align-items: center; gap: 8px; } .slh-home .slh-feat2__rv { font-style: normal; font-weight: 700; color: #1a1a1a; font-size: 14px; } .slh-home .slh-feat2__rc { font-size: 13px; color: #8a93a0; } .slh-home .slh-feat2__price { font-size: 26px; font-weight: 800; color: var(--slh-accent,#2271b1); } .slh-home .slh-feat2__price del { color: #aab2bd; font-weight: 500; font-size: 17px; margin-right: 8px; } .slh-home .slh-feat2__price ins { text-decoration: none; } .slh-home .slh-feat2__countdown { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: #fff4ec; border: 1px solid #ffd9c2; color: #c2410c; border-radius: 10px; padding: 8px 14px; } .slh-home .slh-feat2__cd-label { font-size: 12px; font-weight: 600; } .slh-home .slh-feat2__cd-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; letter-spacing: .5px; } .slh-home .slh-feat2__sell { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .slh-home .slh-feat2__sell li { position: relative; padding-left: 24px; font-size: 14px; color: #3f4754; line-height: 1.5; } .slh-home .slh-feat2__sell li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--slh-accent,#1a7f37); font-weight: 800; } .slh-home .slh-feat2__stock { font-size: 13px; color: #c2410c; font-weight: 600; } /* WooCommerce 加购表单：放大主按钮、对齐数量 */ .slh-home .slh-feat2__buy { margin-top: 4px; } .slh-home .slh-feat2 form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; } .slh-home .slh-feat2 form.cart .quantity { display: inline-flex; } .slh-home .slh-feat2 form.cart .quantity input.qty { width: 72px; height: 48px; text-align: center; border: 1px solid #d6dde6; border-radius: 10px; font-size: 15px; } .slh-home .slh-feat2 .single_add_to_cart_button { height: 48px; padding: 0 30px; border: none; border-radius: 10px; background: var(--slh-accent,#2271b1); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; flex: 1 1 auto; min-width: 160px; transition: filter .15s ease; } .slh-home .slh-feat2 .single_add_to_cart_button:hover { filter: brightness(1.06); } .slh-home .slh-feat2 .single_add_to_cart_button.loading { opacity: .7; cursor: default; } .slh-home .slh-feat2 .slh-feat2__btn { display: inline-flex; align-items: center; height: 48px; padding: 0 30px; border-radius: 10px; background: var(--slh-accent,#2271b1); color: #fff; font-weight: 700; text-decoration: none; } .slh-home .slh-feat2__buy--noqty .quantity { display: none !important; } /* WooCommerce 变体下拉表 */ .slh-home .slh-feat2 .variations { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .slh-home .slh-feat2 .variations th, .slh-home .slh-feat2 .variations td { text-align: left; padding: 4px 0; vertical-align: middle; } .slh-home .slh-feat2 .variations th { width: 1%; white-space: nowrap; padding-right: 12px; font-weight: 700; color: #44505e; } .slh-home .slh-feat2 .variations td { width: 99%; } .slh-home .slh-feat2 .variations td select { width: 100%; min-height: 42px; border: 1px solid #d6dde6; border-radius: 8px; padding: 0 10px; background: #fff; font-size: 15px; } .slh-home .slh-feat2 .variations .reset_variations { display: inline-block; margin: 4px 0 0; font-size: 13px; color: var(--slh-accent,#2271b1); } /* 兜底：若第三方色块(swatch)插件仍注入