/* ============================================================ vercel-editorial/index.css — Home page reskin STRATEGY: borrow default's geometry (widths/heights/floats) via @import, then override only the visual layer below (colors, borders, shadows, radii, fonts). The head template only loads default common.css/idialog/pagination, NOT default index.css — so without @import the page has no layout (img containers were collapsing to lazyload placeholder size). Tokens come from chrome.css (already on the page). ============================================================ */ @import url('/Public/themes/default/css/index.css'); @import url('/Public/themes/default/css/index_section_layout.css'); /* page baseline (do not touch globally) */ body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* ============================================================= HERO BANNER — keep default geometry, only restyle the wrapper #mainBannerCon .bd li{display:none} + first-child{display:block} #mainBannerCon .bd li a{height:400px} ← default supplies height ============================================================= */ #mainBannerSection { background: var(--color-bg); margin: 0 0 64px; padding: 16px 0 0; } #mainBannerCon { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-bg-tint); } /* let default own li{display}/li:first-child{display:block} and a{height:400px} */ #mainBannerCon .bd li { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; /* Placeholder shimmer while jQuery slide() injects background-image from _src */ background-color: var(--color-bg-tint); } /* slide indicators — pill style */ #mainBannerCon .hd { width: auto !important; margin-left: 0 !important; left: auto !important; right: 24px !important; bottom: 16px !important; } #mainBannerCon .hd ul { text-align: right !important; margin: 0 !important; } #mainBannerCon .hd ul li { width: 24px !important; height: 4px !important; background: rgba(255, 255, 255, 0.5) !important; border-radius: var(--radius-pill) !important; margin: 0 0 0 6px !important; cursor: pointer; text-indent: -9999px !important; overflow: hidden; border: 0 !important; box-shadow: none !important; transition: background 200ms ease, width 200ms ease; } #mainBannerCon .hd ul li.on, #mainBannerCon .hd ul .on { background: var(--color-bg) !important; width: 36px !important; } /* prev/next arrows — circle pills */ #mainBannerCon .prev, #mainBannerCon .next { background: rgba(23, 23, 23, 0.6) !important; border-radius: var(--radius-pill) !important; width: 40px !important; height: 40px !important; margin-top: -20px !important; } #mainBannerCon .prev { left: 16px !important; } #mainBannerCon .next { right: 16px !important; left: auto !important; } /* ============================================================= SECTION T1 — single ad strip (adpic node 2) ============================================================= */ .section-t1 { margin: 0 auto 64px; padding: 0 16px; } .section-t1 a.block { display: block; height: 220px; background-color: var(--color-bg-tint); /* placeholder before inline bg-image loads */ background-size: cover !important; background-position: center !important; border-radius: 12px; box-shadow: var(--shadow-card); transition: transform 200ms ease; } .section-t1 a.block:hover { transform: translateY(-2px); } /* hide the empty section-t11 placeholder */ .section-t11 { display: none; } /* ============================================================= SECTION T2 — Vercel feature pipeline (Phase D) Replaces default's .part1+.part2 split with a unified 3×3 grid. Data binding (m3idxad{name|pic|price|url}{1-8} + m3idxadname + m3idxsubtitle + m3idxadpic9/10) is preserved 1:1 in index_body.html. Old .part1/.part2 CSS dropped — markup gone, default index.css rules for those classes harmlessly no-op. ============================================================= */ .section-t2 { margin: 0 auto 64px !important; padding: 0 16px !important; max-width: 1200px; } /* neutralise default .section-t2 padding/clearfix */ .section-t2.fp-section { display: block; } .section-t2.fp-section::before, .section-t2.fp-section::after { content: none !important; } /* --- Section header (m3idxadname / m3idxsubtitle / m3idxadpic9 bg) --- */ .fp-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 16px; border-radius: 12px; background: var(--color-bg-tint); background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important; box-shadow: var(--shadow-card); overflow: hidden; } /* dim the bg image so text stays readable; the linear-gradient sits on top of the inline background-image from m3idxadpic9 */ .fp-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0.4) 100%); pointer-events: none; } .fp-header-text { position: relative; z-index: 1; flex: 1; min-width: 0; } .fp-title { font-family: var(--font-sans); font-size: 24px; font-weight: var(--fw-strong); letter-spacing: -0.6px; color: var(--color-fg); margin: 0 0 4px; line-height: 1.2; } /* defeat inline {$vo.m3idxcolor} when it conflicts with theme palette */ .fp-title[style] { color: var(--color-fg) !important; } .fp-subtitle { font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-read); color: var(--color-fg-3); margin: 0; line-height: 1.4; letter-spacing: -0.1px; } .fp-subtitle[style] { color: var(--color-fg-3) !important; } /* hide subtitle row when value is empty (avoid blank line) */ .fp-subtitle:empty { display: none; } .fp-more { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-ui); color: var(--color-fg-2); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-6); box-shadow: var(--shadow-border-light); background: var(--color-bg); transition: color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .fp-more:hover { color: var(--color-fg); box-shadow: var(--shadow-border); transform: translateY(-1px); } /* --- 3×3 grid: hero spans 2 cols on row 1, 7 small cards fill the rest --- */ .fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fp-card { display: block; position: relative; background: var(--color-bg); border-radius: var(--radius-8); box-shadow: var(--shadow-border-light); overflow: hidden; text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; } .fp-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .fp-card--hero { grid-column: span 2; grid-row: span 1; } /* thumb area: square aspect for small cards, 16:9-ish for hero */ .fp-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: var(--color-bg-tint); background-size: cover; background-position: center; overflow: hidden; } .fp-card--hero .fp-thumb { aspect-ratio: 2 / 1; } .fp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; } .fp-card:hover .fp-thumb img { transform: scale(1.03); } /* meta row (always visible — no hover-overlay) */ .fp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-family: var(--font-sans); } .fp-name { font-size: 13px; font-weight: var(--fw-ui); color: var(--color-fg); letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .fp-card--hero .fp-name { font-size: 15px; font-weight: var(--fw-strong); } .fp-price { font-size: 13px; font-weight: var(--fw-strong); color: var(--color-fg); font-family: var(--font-mono); letter-spacing: -0.2px; white-space: nowrap; flex-shrink: 0; } .fp-card--hero .fp-price { font-size: 15px; } /* responsive: collapse to 2-col then 1-col on narrow viewports */ @media (max-width: 960px) { .fp-grid { grid-template-columns: repeat(2, 1fr); } .fp-card--hero { grid-column: span 2; } .fp-card--hero .fp-thumb { aspect-ratio: 16 / 9; } } @media (max-width: 600px) { .fp-grid { grid-template-columns: 1fr; } .fp-card--hero { grid-column: span 1; } .fp-card--hero .fp-thumb { aspect-ratio: 16 / 9; } .fp-header { flex-direction: column; align-items: flex-start; padding: 20px 16px; } } /* ============================================================= V1 Editorial 改造(2026-05-24) - 1440 全宽 override(击穿 default/common.css 的 1200) - Hero 高 620 - .ve-3blocks 3 大区 - fp-grid 4 列 + 去 hero 跨列 - .fp-badge 左上角商品角标 - .fp-sub 商品副标 + .fp-origprice 原价划线 - .fp-header 白底 + .fp-eyebrow 紫色 eyebrow + 衬线大标题 - .ve-howto HOW TO ORDER 整图容器 - .ve-foot-intro footer 公司简介段 - 3 档响应式断点(1200 / 960 / 600) ============================================================= */ /* 1. 宽度 override(body 提权重 + !important 击穿 default/common.css) 注意:default/common.css 用的是 width:1180px(固定),不是 max-width, 所以这里必须 width !important 而非 max-width 才能击穿。 */ body .container1180 { width: auto !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } #mainBannerCon { max-width: 1440px; border-radius: 0; } .section-t2 { max-width: 1440px !important; } /* 2. Hero 整图高度 620(覆盖 default/index.css 的 .bd li a height:400) */ #mainBannerCon .bd li a { height: 620px !important; } /* 3. 3 大区(.ve-3blocks)— 渲染 adpic.adpicnode=2 多行 */ .ve-3blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1440px; margin: 0 auto 80px; padding: 0 16px; } .ve-block { text-decoration: none; color: inherit; display: block; } .ve-block-img { aspect-ratio: 3 / 4; background-size: cover; background-position: center; background-color: var(--color-bg-tint); margin-bottom: 16px; transition: transform 400ms ease; } .ve-block:hover .ve-block-img { transform: translateY(-2px); } .ve-block-meta { padding: 0 4px; } .ve-block-eyebrow { font-size: 12px; letter-spacing: 2px; color: var(--color-accent, #4F46E5); margin: 0 0 8px; text-transform: uppercase; font-weight: var(--fw-ui); } .ve-block-title { font-size: 22px; font-weight: var(--fw-strong); color: var(--color-fg); margin: 0 0 6px; letter-spacing: -0.3px; line-height: 1.3; } .ve-block-sub { font-size: 13px; color: var(--color-fg-3); margin: 0; line-height: 1.4; } /* 4. fp-header 白底(覆盖 inline background-image,m3idxadpic9 不再展示) */ .fp-header { background: #fff !important; padding: 32px 0 24px; border-bottom: none; } .fp-eyebrow { display: block; font-size: 12px; letter-spacing: 2px; color: var(--color-accent, #4F46E5); text-transform: uppercase; margin-bottom: 8px; font-weight: var(--fw-ui); } .fp-title { font-size: 36px !important; line-height: 1.2 !important; font-family: var(--font-serif, var(--font-sans)) !important; letter-spacing: -0.5px !important; } /* 5. 8 宫格 4 列 + 去 hero 跨列(设计稿是 4 列均匀,无 hero 卡) */ .fp-grid { grid-template-columns: repeat(4, 1fr) !important; } .fp-card--hero { grid-column: span 1 !important; } .fp-card--hero .fp-thumb { aspect-ratio: 4 / 5 !important; } .fp-thumb { aspect-ratio: 4 / 5; position: relative; } /* 6. .fp-badge 左上角小角标(白底黑字小框,m3idxadbadgeN 渲染) */ .fp-badge { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--color-fg); padding: 4px 10px; font-size: 11px; border-radius: var(--radius-4, 4px); box-shadow: var(--shadow-border-light); font-weight: var(--fw-ui); letter-spacing: 0.5px; z-index: 2; } /* 7. fp-meta 改为纵向布局(name + sub + price-row),容纳新字段 */ .fp-meta { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 14px 14px 16px !important; } .fp-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; margin: 0 0 4px !important; } .fp-sub { font-size: 12px; color: var(--color-fg-3); margin: 0 0 10px; line-height: 1.4; font-family: var(--font-sans); /* 双行截断 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fp-price-row { display: flex; align-items: baseline; gap: 8px; margin: 0; width: 100%; } .fp-price { font-size: 14px !important; font-weight: var(--fw-strong); font-family: var(--font-mono); color: var(--color-fg); } .fp-origprice { font-size: 12px; color: var(--color-fg-3); text-decoration: line-through; font-family: var(--font-mono); font-weight: var(--fw-read); } /* 8. .ve-howto HOW TO ORDER 整图容器(corp_baidu_case 整图) */ .ve-howto { margin: 60px auto 80px; max-width: 1440px; padding: 0 16px; } .ve-howto img { display: block; width: 100%; height: auto; } /* 9. .ve-foot-intro footer 公司简介(LOGO + AI Memory Album + 2 行描述) */ .ve-foot-intro { padding: 48px 16px 24px; max-width: 1440px; margin: 0 auto; text-align: left; } .ve-foot-intro-logo img { max-height: 32px; width: auto; margin-bottom: 4px; } .ve-foot-intro-tagline { font-size: 12px; color: var(--color-fg-3); margin: 4px 0 16px; letter-spacing: 2px; font-family: var(--font-sans); } .ve-foot-intro-desc { font-size: 14px; color: var(--color-fg-2); line-height: 1.7; max-width: 520px; margin: 0; } /* 10. 响应式 3 档(1200 / 960 / 600) */ @media (max-width: 1200px) { .ve-3blocks { gap: 16px; } .fp-grid { grid-template-columns: repeat(3, 1fr) !important; } .fp-title { font-size: 30px !important; } } @media (max-width: 960px) { body .container1180 { max-width: 100% !important; padding: 0 16px; } #mainBannerCon .bd li a { height: 360px !important; } .ve-3blocks { grid-template-columns: 1fr; gap: 24px; } .fp-grid { grid-template-columns: repeat(2, 1fr) !important; } .fp-title { font-size: 24px !important; } .ve-block-title { font-size: 20px; } .ve-foot-intro { padding: 32px 16px 16px; } } @media (max-width: 600px) { #mainBannerCon .bd li a { height: 240px !important; } .fp-grid { grid-template-columns: 1fr !important; } .fp-title { font-size: 22px !important; } .ve-block-img { aspect-ratio: 4 / 3; } .ve-howto { margin: 32px auto 40px; } } /* ============================================================= V1 Editorial Fix 1(2026-05-24):顶部 + 8 宫格 + footer 对齐设计稿 ============================================================= */ /* ===== Fix A: 顶部 chrome 按设计稿(LOGO 居中 + tagline + SEARCH) ===== */ /* 隐藏黑色"全部商品分类"块(设计稿无此元素) */ #topbar #tnavbarMain .quanbufenlei { display: none !important; } /* tnavbarMain 菜单条居中 */ #topbar #tnavbarMain { box-shadow: 0 1px 0 0 var(--color-divider) !important; } #topbar #tnavbarMain .container1180 { display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; } #topbar #tnavbarMain .container1180 > ul.clearfix { display: flex !important; justify-content: center !important; align-items: center !important; float: none !important; gap: 16px; padding: 0; margin: 0; } #topbar #tnavbarMain li.navTab { float: none !important; margin: 0 !important; padding: 16px 18px !important; line-height: 1 !important; height: auto !important; } #topbar #tnavbarMain li.navTab a { font-size: 15px !important; font-weight: var(--fw-ui) !important; letter-spacing: 0.2px; } #topbar #tnavbarMain li.navTab.active { border-bottom: 2px solid var(--color-fg); padding-bottom: 14px !important; } /* headbar-2 LOGO 区:LOGO 居中 + 右侧 SEARCH(SEARCH 绝对定位) */ #topbar #headbar-2 { padding: 32px 0 24px !important; position: relative; } #topbar #headbar-2 .container1180 { display: flex !important; justify-content: center !important; align-items: center !important; position: relative; } #topbar #headbar-2 ul.pullLeft { display: none !important; } #topbar #headbar-2 .logo.ve-logo-centered { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none; gap: 6px; } #topbar #headbar-2 .logo.ve-logo-centered img { max-height: 36px; width: auto; display: block; } #topbar #headbar-2 .ve-logo-tagline { font-size: 11px; letter-spacing: 4px; color: var(--color-fg-3); font-family: var(--font-sans); font-weight: var(--fw-read); text-transform: uppercase; } #topbar #headbar-2 .ve-search-link { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--color-fg-3); font-family: var(--font-sans); letter-spacing: 1px; text-decoration: none; font-weight: var(--fw-ui); } #topbar #headbar-2 .ve-search-link:hover { color: var(--color-fg); } /* headbar-1(顶部小条)宽度跟随 1440 */ body #topbar #headbar-1 .container1180, body #topbar #headbar-2 .container1180, body #topbar #tnavbarMain .container1180 { width: auto !important; max-width: 1440px !important; } /* ===== Fix B: 8 宫格 + 标题区去圆角 / 去边框 / 调间距 ===== */ .fp-header { background: #fff !important; padding: 48px 0 32px !important; border-bottom: none !important; box-shadow: none !important; } .section-t2 { box-shadow: none !important; background: transparent !important; } .fp-grid { gap: 24px !important; } .fp-card { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transition: none !important; } .fp-card:hover { box-shadow: none !important; transform: none !important; } .fp-card:hover .fp-thumb img { transform: none !important; } .fp-thumb { border-radius: 0 !important; background-color: #f5f5f5 !important; } .fp-thumb img { transition: none !important; } .fp-badge { border-radius: 2px !important; box-shadow: none !important; border: 1px solid var(--color-divider); background: #fff !important; font-weight: var(--fw-read) !important; } .fp-meta { padding: 14px 0 0 !important; } .fp-name { font-size: 16px !important; margin: 0 0 6px !important; font-weight: var(--fw-strong) !important; } .fp-sub { font-size: 13px !important; -webkit-line-clamp: 1 !important; } .fp-price-row { margin-top: 10px !important; } .fp-price { font-size: 16px !important; font-family: var(--font-sans) !important; } .fp-origprice { font-size: 13px !important; font-family: var(--font-sans) !important; } /* ===== Fix C: footer 横向布局重构(LOGO+简介左 / 5 列右) ===== */ #webFooter { padding: 80px 0 32px !important; } /* ve-foot-intro 去掉重复 LOGO(以 kefurexian 列的 LOGO 为主) */ .ve-foot-intro { display: none !important; } /* 改为新的横向 wrap 容器(模板会同步加) */ .ve-foot-wrap { display: flex; max-width: 1440px; margin: 0 auto; padding: 0 16px; gap: 48px; align-items: flex-start; } .ve-foot-wrap .ve-foot-left { flex: 0 0 320px; } .ve-foot-wrap .ve-foot-left .ve-foot-logo img { max-height: 36px; margin-bottom: 8px; } .ve-foot-wrap .ve-foot-left .ve-foot-tagline { font-size: 11px; letter-spacing: 4px; color: var(--color-fg-3); margin: 0 0 20px; text-transform: uppercase; } .ve-foot-wrap .ve-foot-left .ve-foot-desc { font-size: 13px; color: var(--color-fg-2); line-height: 1.8; margin: 0; max-width: 280px; } .ve-foot-wrap .navCon { flex: 1; max-width: none !important; padding: 0 !important; } .ve-foot-wrap .navCon ul { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 32px !important; } #webFooter .navCon .kefurexian { /* 服务时间列电话已合并在内 */ } #webFooter .navCon .kefurexian .logo { display: none !important; } /* LOGO 已在左侧 ve-foot-left */ #webFooter .navCon .kefurexian .title { margin-top: 0 !important; } @media (max-width: 1200px) { .ve-foot-wrap { flex-direction: column; gap: 32px; } .ve-foot-wrap .ve-foot-left { flex: 0 0 auto; } .ve-foot-wrap .navCon ul { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .ve-foot-wrap .navCon ul { grid-template-columns: repeat(2, 1fr) !important; } }