feat(ui): 营销站 UI/UE/UX 治理 P0→P3 + 数字口径 basis 机制 #28
@@ -209,7 +209,8 @@ function WhoWeAreSection({ data }: { data: AboutData }) {
|
||||
className="group relative border-b border-border-primary pb-6 md:pb-8 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="flex items-start gap-6 md:gap-8">
|
||||
<div className="text-4xl md:text-5xl font-black text-text-muted/30 font-mono shrink-0 leading-none pt-1">
|
||||
{/* 纯装饰序号:与右侧 value.title 并列,无独立语义,标记 aria-hidden 豁免对比度要求 */}
|
||||
<div aria-hidden="true" className="text-4xl md:text-5xl font-black text-text-muted/30 font-mono shrink-0 leading-none pt-1">
|
||||
{value.number}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
|
||||
@@ -121,12 +121,12 @@ export default function BrandContent() {
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* 副标题 */}
|
||||
{/* 副标题 — alpha 0.7 仅 4.35:1 未达 WCAG AA 4.5:1,提到 0.8 → 5.74:1,视觉几乎无变化 */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.5, ease: EASE_OUT }}
|
||||
className="text-lg sm:text-xl text-text-secondary/70 max-w-2xl leading-relaxed"
|
||||
className="text-lg sm:text-xl text-text-secondary/80 max-w-2xl leading-relaxed"
|
||||
>
|
||||
公司于 2026 年 1 月正式成立,核心团队专注企业数字化,从战略规划到系统落地,致力于陪伴每一家企业实现可衡量的业务改善。
|
||||
我们相信,技术的力量在于让每一家企业都拥有数据驱动的决策能力。
|
||||
@@ -268,7 +268,8 @@ export default function BrandContent() {
|
||||
<span className="text-3xl sm:text-4xl font-black text-brand tracking-tight">
|
||||
{item.year}
|
||||
</span>
|
||||
<span className="text-[11px] tracking-[0.15em] uppercase text-text-muted bg-bg-tertiary px-2 py-0.5">
|
||||
{/* text-muted 在 bg-tertiary(#F1F5F9) 上仅 4.34:1;换 text-secondary → 9.45:1 */}
|
||||
<span className="text-[11px] tracking-[0.15em] uppercase text-text-secondary bg-bg-tertiary px-2 py-0.5">
|
||||
{item.highlight}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -285,7 +285,8 @@ function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-bg-secondary to-bg-tertiary relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-text-muted/10">
|
||||
{/* 客户名首字作占位图形(无真实配图时),纯装饰 → aria-hidden 豁免对比度 */}
|
||||
<span aria-hidden="true" className="text-6xl font-bold text-text-muted/10">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -414,7 +415,7 @@ function CTASection({ product }: CTASectionProps) {
|
||||
正在使用旧版 ERP?
|
||||
<StaticLink
|
||||
href="/products/erp-upgrade"
|
||||
className="inline-flex items-center gap-1 font-medium text-brand hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-brand hover:underline py-0.5"
|
||||
>
|
||||
了解睿新 ERP 升级专题
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
|
||||
@@ -375,7 +375,8 @@ function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-bg-secondary to-bg-tertiary relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-text-muted/10">
|
||||
{/* 客户名首字作占位图形(无真实配图时),纯装饰 → aria-hidden 豁免对比度 */}
|
||||
<span aria-hidden="true" className="text-6xl font-bold text-text-muted/10">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -79,7 +79,9 @@ function StrengthCard({ strength, index }: { strength: StrengthData; index: numb
|
||||
<div className="w-12 h-12 flex items-center justify-center border border-brand/30 bg-brand/[0.08] text-brand">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-4xl font-bold text-text-muted/10 font-mono">{strength.number}</span>
|
||||
{/* 纯装饰序号:与右侧 h3 标题并列,无独立语义。
|
||||
aria-hidden 让 WCAG 1.4.3 对比度要求不适用于装饰内容(1.13:1 无需强行提亮) */}
|
||||
<span aria-hidden="true" className="text-4xl font-bold text-text-muted/10 font-mono">{strength.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-ink mb-3">{strength.title}</h3>
|
||||
@@ -112,7 +114,7 @@ function CultureCard({ culture, index }: { culture: CultureData; index: number }
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
|
||||
<span className="block text-6xl font-bold text-text-muted/10 font-mono mb-4">{culture.number}</span>
|
||||
<span aria-hidden="true" className="block text-6xl font-bold text-text-muted/10 font-mono mb-4">{culture.number}</span>
|
||||
|
||||
<h3 className="text-2xl font-bold text-ink mb-4">{culture.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{culture.description}</p>
|
||||
@@ -197,13 +199,13 @@ export default function TeamContentV3({ data }: { data: Record<string, unknown>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 描述 */}
|
||||
{/* 描述 — alpha 0.7 仅 4.35:1 未达 WCAG AA 4.5:1,提到 0.8 → 5.74:1,视觉几乎无变化 */}
|
||||
{teamData.heroDescription && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.5, ease: EASE_OUT }}
|
||||
className="text-lg sm:text-xl text-text-secondary/70 max-w-2xl leading-relaxed mb-12 sm:mb-14"
|
||||
className="text-lg sm:text-xl text-text-secondary/80 max-w-2xl leading-relaxed mb-12 sm:mb-14"
|
||||
>
|
||||
{teamData.heroDescription}
|
||||
</motion.p>
|
||||
|
||||
@@ -1278,6 +1278,17 @@ p, li, span {
|
||||
/* WCAG 2.5.5 (AAA): 44×44px 触控目标仅作用于移动端导航/页眉/页脚交互元素。
|
||||
原全局选择器会撑大正文行内链接,破坏排版节奏与组件自有的尺寸控制。 */
|
||||
@media (max-width: 768px) {
|
||||
/* MobileTabBar 是 fixed bottom-0 高度 64px,需给 main 与 footer 都留出安全区
|
||||
防止正文/页脚被遮挡("联系我们"等页脚内链接被截问题)。
|
||||
使用 calc + env(safe-area-inset-bottom) 兼容刘海屏/小白条。
|
||||
选择器同时匹配 <main> 与 div[role="main"](marketing layout 当前用后者)。 */
|
||||
main,
|
||||
[role="main"] {
|
||||
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
footer {
|
||||
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
nav a,
|
||||
nav button,
|
||||
header a,
|
||||
|
||||
@@ -125,7 +125,7 @@ export function ServiceCard({ service }: ServiceCardProps) {
|
||||
<Link href={`/services/${service.id}`} className="block">
|
||||
<div className="relative h-full rounded-2xl bg-bg-secondary border border-border-primary overflow-hidden hover:border-blue-300 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="p-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--color-accent-blue)] to-[#1d4ed8] flex items-center justify-center mb-5 shadow-md shadow-blue-500/20 group-hover:scale-110 transition-transform">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--color-accent-blue)] to-[#1d4ed8] flex items-center justify-center mb-5 shadow-md shadow-brand group-hover:scale-110 transition-transform">
|
||||
<Cpu className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ export function Footer() {
|
||||
>
|
||||
{config.icp}
|
||||
</a>
|
||||
<span className="hidden sm:inline text-gray-500">|</span>
|
||||
<span className="hidden sm:inline text-text-hint">|</span>
|
||||
<a
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=51010602003285"
|
||||
target="_blank"
|
||||
|
||||
Reference in New Issue
Block a user