feat(theme): 暗黑模式 Phase 2 批次 2 — services/service-detail/solution-value token 化
将 services-content-v3(7 处)、service-detail-content-v4(7 处)、 solution-value(1 处)的浅色 bg-white 全部迁移到 bg-bg-primary。 浅色下值完全等价(#FFFFFF)→ 浅色视觉零差异;dark 下随 token 自动 反色为 #0A0E14,section 间 bg-bg-secondary 层次交替保留。 【变更】 - services-content-v3.tsx(7 处):Hero + section + 卡片×3 + main wrapper (含卡片条件 className 中两个 bg-white 分支) - service-detail-content-v4.tsx(7 处):Hero + FeaturesSection + 卡片×3 + CasesSection + main wrapper - solution-value.tsx(1 处):共享 section 组件 【验证】 - type-check 0 / lint 0 errors(127 warnings 既有) - jest 128 suites / 1623 passed - 视觉回归 22 passed(含 /services 与 /services/software 浅色快照零 diff) - computed-style 一次性脚本验证(已删除): dark: /services 与 /services/software 的 html/body/header → #0A0E14 section 层次 [primary, secondary, primary, secondary] 自动反色正确 light: 零深色残留 【Phase 2 剩余批次】 - 批次 3:product-detail-content-v3 + products/standalone + detail-hero 共享组件 - 批次 4:admin 全量(user决策:参与暗黑)
This commit is contained in:
@@ -14,7 +14,7 @@ function DetailHero({ service }: { service: Service }) {
|
||||
const firstBenefit = service.benefits?.[0] || '效率提升 40%';
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<motion.h1
|
||||
@@ -147,7 +147,7 @@ function OverviewSection({ service }: { service: Service }) {
|
||||
|
||||
function FeaturesSection({ service }: { service: Service }) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -176,7 +176,7 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white"
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-bg-primary"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<Icon className="w-8 h-8 mb-6 text-brand" />
|
||||
@@ -230,7 +230,7 @@ function ProcessSection({ service }: { service: Service }) {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
className="relative group p-6 sm:p-8 bg-white hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
|
||||
className="relative group p-6 sm:p-8 bg-bg-primary hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mb-6"
|
||||
@@ -255,7 +255,7 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
if (caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section id="cases" className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<section id="cases" className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -278,7 +278,7 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
|
||||
className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-bg-primary border border-transparent hover:border-border-primary"
|
||||
>
|
||||
|
||||
<div className="relative z-10">
|
||||
@@ -348,7 +348,7 @@ function CTASection() {
|
||||
|
||||
export default function ServiceDetailContentV4({ service }: { service: Service }) {
|
||||
return (
|
||||
<main className="min-h-screen bg-white text-ink">
|
||||
<main className="min-h-screen bg-bg-primary text-ink">
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
|
||||
Reference in New Issue
Block a user