经典居中（稳重、通用型）
html
<section class="py-14 px-4 bg-white">
<div class="max-w-6xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800">关于我们</h2>
<div class="w-12 h-1 bg-blue-700 mx-auto my-3"></div>
<p class="text-sm text-gray-500 tracking-wider uppercase">ABOUT US</p>
</div>
</section>左对齐现代工业风（科技感、国际化）
html
<section class="py-14 px-4 bg-gray-50">
<div
class="max-w-6xl mx-auto flex items-end gap-4 border-b border-gray-300 pb-4"
>
<div
class="w-1 h-14 bg-gradient-to-b from-emerald-600 to-cyan-400"
></div>
<div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">
产品中心
</h2>
<p class="text-sm text-gray-500 mt-1 tracking-wide uppercase">
PRODUCT CENTER
</p>
</div>
</div>
</section>深色工业质感（高端、品牌化）
html
<section class="py-16 px-4 bg-gray-900 relative overflow-hidden">
<div class="max-w-5xl mx-auto relative">
<!-- 左侧强调线 -->
<div class="absolute left-0 top-0 w-2 h-full bg-orange-500"></div>
<h2 class="text-4xl font-extrabold text-white pl-8">新闻动态</h2>
<p class="text-gray-400 pl-8 mt-2 text-sm tracking-wider uppercase">LATEST NEWS & INDUSTRY INSIGHTS</p>
<!-- 右侧几何装饰（可选） -->
<div class="absolute right-4 top-1/2 -translate-y-1/2 w-16 h-16 border-2 border-gray-700 rotate-45 opacity-40"></div>
</div>
</section>极简工业风（干净、专业、通用）
html
<section class="py-12 md:py-16 px-4 bg-white">
<div class="max-w-7xl mx-auto">
<!-- 标题容器：带动画入场 -->
<div class="animate-in fade-in slide-in-from-left-4 duration-700">
<div class="flex items-center gap-3 md:gap-4">
<div class="w-1 h-10 md:h-12 bg-slate-800 rounded-full"></div>
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight">
关于我们
</h2>
</div>
<p class="mt-3 md:mt-4 text-sm md:text-base text-slate-500 max-w-2xl
animate-in fade-in slide-in-from-left-8 duration-700 delay-150">
专注精密制造二十余年，以技术驱动产业升级，为全球客户提供可靠解决方案。
</p>
</div>
</div>
</section>炫酷数据流风（科技感、自动化、新能源）
html
<section class="py-12 md:py-16 px-4 bg-slate-900 relative overflow-hidden">
<!-- 背景微网格 -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(56,189,248,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(56,189,248,0.04)_1px,transparent_1px)] bg-[size:32px_32px]"></div>
<div class="max-w-7xl mx-auto relative z-10 text-center">
<div class="inline-flex flex-col items-center animate-slide-in-up tw-duration-800">
<span class="text-xs md:text-sm font-mono text-cyan-400 tracking-[0.3em] uppercase mb-2">PRODUCT CENTER</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white relative">
产品中心
<!-- 扫描线动画 -->
<span class="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-[shimmer_2s_linear_infinite]"></span>
</h2>
</div>
<p class="mt-4 text-slate-400 max-w-xl mx-auto text-sm md:text-base animate-fade-in tw-delay-300">
从核心零部件到整机系统，覆盖全场景工业应用需求。
</p>
</div>
</section>
<!-- 自定义扫描动画（tw-animate-css 未内置，需在 CSS 或 Tailwind 配置中添加） -->
<style>
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
</style>机械模块分割风（结构化、硬核、工厂感）
html
<section class="py-12 md:py-16 px-4 bg-gray-50">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
<!-- 左侧指示器：脉冲动画 -->
<div class="md:col-span-1 flex md:flex-col justify-center gap-2
animate-in fade-in zoom-in duration-1000">
<div class="w-2 h-8 bg-orange-500 rounded animate-pulse"></div>
<div class="w-2 h-12 bg-gray-300 rounded"></div>
<div class="w-2 h-6 bg-orange-500 rounded animate-pulse delay-200"></div>
</div>
<!-- 右侧标题：滑动入场 -->
<div class="md:col-span-11 animate-in fade-in slide-in-from-right-8 duration-700">
<div class="flex flex-col md:flex-row md:items-baseline md:gap-6 border-b-2 border-gray-200 pb-3">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">新闻动态</h2>
<span class="text-sm text-gray-400 font-mono mt-1 md:mt-0 uppercase tracking-wider">
LATEST NEWS & UPDATES
</span>
</div>
</div>
</div>
</section>科技数据流风（智能制造 · 动态聚焦）
html
<section class="py-12 md:py-16 px-4 bg-slate-900">
<div class="max-w-7xl mx-auto text-center">
<!-- 副标题先入场 -->
<span class="inline-block text-xs md:text-sm font-mono text-cyan-400 tracking-[0.3em] uppercase mb-3
animate-in fade-in slide-in-from-bottom-4 duration-500">
PRODUCT CENTER
</span>
<!-- 主标题缩放+淡入 -->
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white
animate-in fade-in zoom-in-95 duration-700 delay-100">
产品中心
</h2>
<!-- 底部指示线（Tailwind 内置循环动画） -->
<div class="mx-auto mt-4 w-24 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-500
animate-pulse"></div>
<p class="mt-5 text-slate-400 max-w-xl mx-auto text-sm md:text-base
animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
从核心零部件到整机系统，覆盖全场景工业应用需求。
</p>
</div>
</section>渐变光影风（高端品牌 · 展厅级质感）
html
<section class="py-14 md:py-20 px-4 bg-gradient-to-br from-slate-50 to-gray-100">
<div class="max-w-6xl mx-auto text-center">
<div class="animate-in fade-in zoom-in-95 duration-500">
<div class="inline-block relative mb-4">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black
bg-clip-text text-transparent
bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600
animate-in fade-in slide-in-from-top-4 duration-700">
合作客户
</h2>
<!-- 底部光晕（Tailwind 内置 animate-ping 模拟扩散） -->
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-16 h-16
bg-blue-400/20 rounded-full animate-ping [animation-duration:3s]"></div>
<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1/2 h-1
bg-gradient-to-r from-transparent via-blue-400/50 to-transparent blur-[2px]"></div>
</div>
<p class="text-gray-600 text-sm md:text-base max-w-2xl mx-auto mt-4
animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
携手全球 500+ 制造企业，共建智能制造新生态。
</p>
</div>
</div>
</section>线条装饰现代风（国际化 · 极简几何）
html
<section class="py-12 md:py-16 px-4 bg-white">
<div class="max-w-7xl mx-auto">
<div class="relative pl-6 md:pl-8">
<!-- 左侧装饰线（滑动+淡入） -->
<div class="absolute left-0 top-1 w-1 h-full bg-gradient-to-b from-blue-600 to-cyan-400
animate-in fade-in slide-in-from-top-4 duration-700"></div>
<!-- 标题内容 -->
<div class="animate-in fade-in slide-in-from-left-6 duration-700">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">
技术实力
</h2>
<div class="mt-2 w-20 h-0.5 bg-gray-200">
<div class="w-1/2 h-full bg-blue-600 animate-in slide-in-from-left-full duration-1000 delay-300"></div>
</div>
<p class="mt-3 text-sm md:text-base text-gray-500 max-w-2xl
animate-in fade-in slide-in-from-left-8 duration-700 delay-150">
拥有 50+ 项核心专利，通过 ISO9001、CE、UL 等国际认证。
</p>
</div>
</div>
</div>
</section>标题+内容- 卡片悬浮交互风（带 hover 增强 · 适合点击入口）
html
<section class="py-12 md:py-16 px-4 bg-gray-50">
<div class="max-w-7xl mx-auto">
<!-- 标题容器：初始入场动画 -->
<div class="text-center mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">
解决方案
</h2>
<p class="mt-2 text-gray-500 text-sm md:text-base">
按行业 / 场景 / 需求，定制专属智造方案
</p>
</div>
<!-- 卡片网格（hover 时微动效） -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<!-- 单卡片 -->
<div class="group p-5 bg-white rounded-xl border border-gray-100 shadow-sm
hover:shadow-md hover:-translate-y-0.5 transition-all duration-300
animate-in fade-in zoom-in-95 duration-500 [animation-delay:100ms]">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-3
group-hover:bg-blue-100 transition-colors">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 000-2.856l-4-4a2 2 0 00-2.856 0l-4 4a2 2 0 102.856 2.856L12 14.856l.572.572a2 2 0 002.856 0l4-4z"/>
</svg>
</div>
<h3 class="font-semibold text-gray-900">智能产线</h3>
<p class="mt-1 text-sm text-gray-500">MES+PLC+视觉检测一体化部署</p>
</div>
<!-- 更多卡片... 可复制上方结构，调整 [animation-delay:200ms] 等实现错落入场 -->
</div>
</div>
</section>徽章认证风（资质展示 · 权威感）
适合「企业荣誉」「认证资质」「合作伙伴」等区块，左侧徽章+右侧标题，强化信任感。
html
<section class="py-12 md:py-16 px-4 bg-white">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
<!-- 徽章图标：缩放+旋转组合入场 -->
<div class="flex-shrink-0 animate-in fade-in zoom-in spin-in-180 duration-700">
<div class="w-14 h-14 md:w-16 md:h-16 rounded-full bg-gradient-to-br from-amber-400 to-orange-500
flex items-center justify-center shadow-lg shadow-orange-500/20">
<svg class="w-7 h-7 md:w-8 md:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
</svg>
</div>
</div>
<!-- 标题区：滑动+淡入 -->
<div class="animate-in fade-in slide-in-from-right-6 duration-700 delay-150">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">权威认证</h2>
<p class="mt-1 text-sm md:text-base text-gray-500 max-w-xl">
ISO9001 · CE · UL · RoHS · 国家高新技术企业
</p>
</div>
</div>
</div>
</section>对角分割风（视觉冲击 · 现代几何）
适合「核心优势」「技术突破」等需要强调的区块，斜线背景+文字浮动。
html
<section class="py-12 md:py-16 px-4 bg-slate-900 relative overflow-hidden">
<!-- 对角分割背景（纯装饰） -->
<div class="absolute inset-0 bg-[linear-gradient(135deg,transparent_49%,#1e293b_50%,#1e293b_51%,transparent_52%)]"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
<!-- 左侧：大字号标题 -->
<div class="animate-in fade-in slide-in-from-left-8 duration-700">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-white leading-tight">
智造
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
新纪元
</span>
</h2>
</div>
<!-- 右侧：副标题+装饰点 -->
<div class="flex items-center gap-3 animate-in fade-in slide-in-from-right-8 duration-700 delay-100">
<div class="flex gap-1">
<span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse delay-150"></span>
<span class="w-2 h-2 rounded-full bg-violet-500 animate-pulse delay-300"></span>
</div>
<p class="text-sm md:text-base text-slate-300 font-mono">
SMART MANUFACTURING 2026
</p>
</div>
</div>
</div>
</section>砖块堆叠风（模块化 · 多入口导航）
适合「产品中心」「解决方案」等多分类入口，标题+标签云组合。
html
<section class="py-12 md:py-16 px-4 bg-gray-50">
<div class="max-w-7xl mx-auto">
<!-- 标题 + 分类标签 -->
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
<div class="animate-in fade-in slide-in-from-top-4 duration-700">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">产品中心</h2>
<p class="mt-1 text-gray-500 text-sm md:text-base">按场景选择，快速定位所需设备</p>
</div>
<!-- 标签云（错位滑动入场） -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 text-xs font-medium bg-white border border-gray-200 rounded-full text-gray-700
animate-in fade-in slide-in-from-bottom-4 duration-500 [animation-delay:100ms]">
数控机床
</span>
<span class="px-3 py-1 text-xs font-medium bg-white border border-gray-200 rounded-full text-gray-700
animate-in fade-in slide-in-from-bottom-4 duration-500 [animation-delay:150ms]">
自动化产线
</span>
<span class="px-3 py-1 text-xs font-medium bg-white border border-gray-200 rounded-full text-gray-700
animate-in fade-in slide-in-from-bottom-4 duration-500 [animation-delay:200ms]">
检测设备
</span>
<span class="px-3 py-1 text-xs font-medium bg-blue-50 border border-blue-200 rounded-full text-blue-700
animate-in fade-in slide-in-from-bottom-4 duration-500 [animation-delay:250ms]">
查看全部 →
</span>
</div>
</div>
<!-- 可选：底部装饰线（滑动展开） -->
<div class="h-0.5 bg-gray-200 rounded-full overflow-hidden">
<div class="h-full w-1/3 bg-gradient-to-r from-blue-600 to-cyan-400
animate-in slide-in-from-left-full duration-1000 delay-300"></div>
</div>
</div>
</section>全球网络风（出海企业 · 国际视野）
适合「全球布局」「服务网络」「海外案例」等区块，地球图标+节点连线。
html
<section class="py-12 md:py-16 px-4 bg-slate-900">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row lg:items-center gap-6">
<!-- 左侧：地球图标（旋转+缩放） -->
<div class="flex-shrink-0 flex justify-center lg:justify-start
animate-in fade-in zoom-in spin-in-180 duration-1000">
<div class="relative w-20 h-20 md:w-24 md:h-24">
<!-- 地球主体 -->
<div class="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400
flex items-center justify-center shadow-lg shadow-cyan-500/30">
<svg class="w-10 h-10 md:w-12 md:h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<!-- 环绕轨道（脉冲光点） -->
<div class="absolute inset-0 rounded-full border-2 border-dashed border-cyan-300/30 animate-[spin_8s_linear_infinite]"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-cyan-400 rounded-full
animate-ping [animation-duration:3s]"></div>
</div>
</div>
<!-- 右侧：标题+网络描述 -->
<div class="animate-in fade-in slide-in-from-right-8 duration-700 delay-200">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white">全球服务网络</h2>
<p class="mt-2 text-slate-300 text-sm md:text-base max-w-xl">
业务覆盖 30+ 国家与地区，本地化团队 7×24 小时响应，让智造无国界。
</p>
<!-- 节点标签 -->
<div class="mt-4 flex flex-wrap gap-2">
<span class="px-2.5 py-1 text-xs bg-slate-800 text-cyan-300 rounded border border-cyan-500/30">
🇨🇳 中国总部
</span>
<span class="px-2.5 py-1 text-xs bg-slate-800 text-cyan-300 rounded border border-cyan-500/30">
🇩🇪 欧洲中心
</span>
<span class="px-2.5 py-1 text-xs bg-slate-800 text-cyan-300 rounded border border-cyan-500/30">
🇺🇸 北美支持
</span>
</div>
</div>
</div>
</div>
</section>视频封面风（工厂实拍 · 播放引导）
适合「产线实拍」「客户见证」「技术演示」等带视频入口的区块。
html
<section class="py-12 md:py-16 px-4 bg-slate-900 relative overflow-hidden">
<!-- 背景图（制造业场景） -->
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?auto=format&fit=crop&w=1200&q=80')]
bg-cover bg-center opacity-20"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="flex flex-col md:flex-row md:items-center gap-6">
<!-- 播放按钮（Tailwind 原生 pulse + ping 组合） -->
<button class="group flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full
bg-white/10 border-2 border-white/30 backdrop-blur-sm
flex items-center justify-center
hover:bg-white/20 hover:scale-105 transition-all duration-300
animate-in fade-in zoom-in duration-700">
<!-- 外层脉冲光晕（Tailwind 原生 animate-ping） -->
<span class="absolute inline-flex w-full h-full rounded-full bg-white/20 animate-ping [animation-duration:2s]"></span>
<!-- 内层播放图标 -->
<svg class="w-6 h-6 md:w-8 md:h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<!-- 标题区（tw-animate 入场） -->
<div class="animate-in fade-in slide-in-from-right-8 duration-700 delay-150">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white">
智能产线实拍
</h2>
<p class="mt-2 text-slate-300 text-sm md:text-base max-w-xl">
4K 高清呈现全流程自动化，从原料到成品，每一环节精准可控。
</p>
<!-- 时长标签 -->
<span class="inline-flex items-center gap-1 mt-3 px-3 py-1 text-xs font-medium
bg-white/10 text-white rounded-full border border-white/20">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
2:36
</span>
</div>
</div>
</div>
</section>智能控制风（参数配置 · Toggle 交互）
适合「智能调控」「参数设置」「模式切换」等带交互控件的标题区。
html
<section class="py-12 md:py-16 px-4 bg-slate-900">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
<!-- 左侧：标题 + 描述（tw-animate 入场） -->
<div class="animate-in fade-in slide-in-from-left-8 duration-700">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white">
智能参数调控
</h2>
<p class="mt-2 text-slate-300 text-sm md:text-base max-w-xl">
一键切换生产模式，系统自动优化 20+ 核心参数，保障效率与品质平衡。
</p>
</div>
<!-- 右侧：Toggle 控件组（Tailwind 原生过渡 + 微动效） -->
<div class="flex flex-wrap items-center gap-4 animate-in fade-in slide-in-from-right-8 duration-700 delay-150">
<!-- 模式 1：高效优先 -->
<label class="flex items-center gap-2 cursor-pointer group">
<div class="relative">
<input type="radio" name="mode" class="sr-only peer" checked />
<div class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:bg-blue-600
transition-colors duration-300"></div>
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full
peer-checked:translate-x-5 transition-transform duration-300"></div>
</div>
<span class="text-sm text-slate-300 group-hover:text-white transition-colors">高效优先</span>
</label>
<!-- 模式 2：品质优先 -->
<label class="flex items-center gap-2 cursor-pointer group">
<div class="relative">
<input type="radio" name="mode" class="sr-only peer" />
<div class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:bg-emerald-600
transition-colors duration-300"></div>
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full
peer-checked:translate-x-5 transition-transform duration-300"></div>
</div>
<span class="text-sm text-slate-300 group-hover:text-white transition-colors">品质优先</span>
</label>
<!-- 模式 3：节能模式 -->
<label class="flex items-center gap-2 cursor-pointer group">
<div class="relative">
<input type="radio" name="mode" class="sr-only peer" />
<div class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:bg-amber-500
transition-colors duration-300"></div>
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full
peer-checked:translate-x-5 transition-transform duration-300"></div>
</div>
<span class="text-sm text-slate-300 group-hover:text-white transition-colors">节能模式</span>
</label>
</div>
</div>
<!-- 可选：实时参数预览（数字跳动 + 进度条） -->
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700 text-center
animate-in fade-in zoom-in-95 duration-500 [animation-delay:200ms]">
<div class="text-2xl font-bold text-white tabular-nums">128</div>
<div class="text-xs text-slate-400 mt-1">产能 (件/小时)</div>
</div>
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700 text-center
animate-in fade-in zoom-in-95 duration-500 [animation-delay:250ms]">
<div class="text-2xl font-bold text-emerald-400 tabular-nums">99.6%</div>
<div class="text-xs text-slate-400 mt-1">良品率</div>
</div>
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700 text-center
animate-in fade-in zoom-in-95 duration-500 [animation-delay:300ms]">
<div class="text-2xl font-bold text-amber-400 tabular-nums">-32%</div>
<div class="text-xs text-slate-400 mt-1">能耗</div>
</div>
<div class="p-4 bg-slate-800/50 rounded-lg border border-slate-700 text-center
animate-in fade-in zoom-in-95 duration-500 [animation-delay:350ms]">
<div class="text-2xl font-bold text-cyan-400 tabular-nums">2.1s</div>
<div class="text-xs text-slate-400 mt-1">响应延迟</div>
</div>
</div>
</div>
</section>