style(cta): 全站 CTA Pill 化(Button 组件 + 11 个营销页内联按钮 rounded-full 对齐签名化)

This commit is contained in:
2026-08-31 16:17:42 +08:00
parent 1ae918e391
commit 88578a7433
12 changed files with 37 additions and 37 deletions
@@ -106,7 +106,7 @@ function HeroSection({ data }: { data: AboutData }) {
<a
href={data.heroPrimaryCtaHref || '#'}
aria-label={data.heroPrimaryCtaLabel || '预约咨询'}
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
{data.heroPrimaryCtaLabel || '预约咨询'}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
@@ -114,7 +114,7 @@ function HeroSection({ data }: { data: AboutData }) {
<a
href={data.heroSecondaryCtaHref || '#'}
aria-label={data.heroSecondaryCtaLabel || '了解更多'}
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
>
{data.heroSecondaryCtaLabel || '了解更多'}
</a>
@@ -432,7 +432,7 @@ function CTASection({ data }: { data: AboutData }) {
<a
href={data.ctaPrimaryHref || '#'}
aria-label={data.ctaPrimaryLabel || '预约咨询'}
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
{data.ctaPrimaryLabel || '预约咨询'}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
@@ -440,7 +440,7 @@ function CTASection({ data }: { data: AboutData }) {
<a
href={data.ctaSecondaryHref || '#'}
aria-label={data.ctaSecondaryLabel || '了解更多'}
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px] touch-manipulation"
>
{data.ctaSecondaryLabel || '了解更多'}
</a>
@@ -358,14 +358,14 @@ export default function BrandContent() {
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
>
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
</StaticLink>
<StaticLink
href="/cases"
className="group inline-flex items-center justify-center gap-2 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border hover:border-dark-text-muted transition-all duration-300 min-h-[52px]"
className="group inline-flex items-center justify-center gap-2 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border rounded-full hover:border-dark-text-muted transition-all duration-300 min-h-[52px]"
>
<ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
@@ -311,14 +311,14 @@ export default function CasesContentV3({
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/services"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-white transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-white transition-all duration-300 min-h-[52px] touch-manipulation"
>
</StaticLink>
@@ -531,14 +531,14 @@ function ContactFormContent({ data }: { data: ContactData }) {
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
<a
href={data.ctaPrimaryHref || '#'}
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90"
>
{data.ctaPrimaryLabel || ''}
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
</a>
<a
href={data.ctaSecondaryHref || '#'}
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
>
{data.ctaSecondaryLabel || ''}
</a>
+2 -2
View File
@@ -251,14 +251,14 @@ export default function NewsContentV3({ news, pageCopy }: { news?: NewsItem[]; p
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
<a
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90"
>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</a>
<a
href="/about"
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
>
</a>
@@ -148,14 +148,14 @@ export default function NewsDetailContentV3({ news, relatedNews = [] }: NewsDeta
<div className="mt-16 sm:mt-20 flex flex-col sm:flex-row justify-center gap-4">
<StaticLink
href="/news"
className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
>
<ArrowLeft className="w-4 h-4" />
</StaticLink>
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90"
>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
@@ -115,14 +115,14 @@ export function StandaloneProductClient({ item }: StandaloneProductClientProps)
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<StaticLink
href="/contact"
className="inline-flex items-center gap-2 rounded-lg bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg"
className="inline-flex items-center gap-2 rounded-full bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg"
>
线
<ArrowRight className="h-4 w-4" />
</StaticLink>
<StaticLink
href="/products"
className="inline-flex items-center rounded-lg border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
className="inline-flex items-center rounded-full border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
>
</StaticLink>
@@ -83,14 +83,14 @@ function DetailHero({ service }: { service: Service }) {
>
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<a
href="#cases"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
</a>
@@ -339,14 +339,14 @@ function CTASection() {
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/services"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
</StaticLink>
@@ -128,14 +128,14 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
>
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
{ctaPrimary}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
{ctaSecondary}
</StaticLink>
@@ -366,14 +366,14 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/team"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
</StaticLink>
@@ -76,14 +76,14 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
>
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
{ctaPrimary}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
{ctaSecondary}
</StaticLink>
@@ -242,14 +242,14 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<StaticLink
href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
>
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</StaticLink>
<StaticLink
href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
>
</StaticLink>
+4 -4
View File
@@ -217,7 +217,7 @@ export default function TeamContentV3({ data }: { data: Record<string, unknown>
>
<a
href={teamData.heroPrimaryCtaHref || '/contact'}
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
>
{teamData.heroPrimaryCtaLabel || '加入我们'}
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
@@ -225,7 +225,7 @@ export default function TeamContentV3({ data }: { data: Record<string, unknown>
{teamData.heroSecondaryCtaLabel && (
<a
href={teamData.heroSecondaryCtaHref || '#'}
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px]"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary rounded-full hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300 min-h-[52px]"
>
{teamData.heroSecondaryCtaLabel}
</a>
@@ -349,14 +349,14 @@ export default function TeamContentV3({ data }: { data: Record<string, unknown>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a
href={teamData.ctaPrimaryHref || '/contact'}
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white rounded-full transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
>
{teamData.ctaPrimaryLabel || '预约咨询'}
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
</a>
<a
href={teamData.ctaSecondaryHref || '/cases'}
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border hover:border-dark-text-muted transition-all duration-300 min-h-[52px]"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border rounded-full hover:border-dark-text-muted transition-all duration-300 min-h-[52px]"
>
{teamData.ctaSecondaryLabel || '查看客户案例'}
</a>
+5 -5
View File
@@ -24,11 +24,11 @@ const buttonVariants = cva(
'bg-error text-white shadow-sm hover:bg-error-hover hover:-translate-y-px active:translate-y-0 active:scale-[0.97] transition-all duration-fast ease-standard',
},
size: {
sm: 'h-9 rounded-md px-3 text-xs font-medium',
default: 'h-11 rounded-md px-5 py-2 font-medium',
lg: 'h-12 rounded-md px-6 text-base font-semibold',
xl: 'h-14 rounded-md px-8 text-base font-semibold',
icon: 'h-11 w-11 rounded-md',
sm: 'h-9 rounded-full px-3 text-xs font-medium',
default: 'h-11 rounded-full px-5 py-2 font-medium',
lg: 'h-12 rounded-full px-6 text-base font-semibold',
xl: 'h-14 rounded-full px-8 text-base font-semibold',
icon: 'h-11 w-11 rounded-full',
},
},
defaultVariants: {