refactor: 调整首页所有板块为全屏布局
🎨 设计调整: - 所有板块改为 min-h-screen 全屏展示 - 每个板块独立占据一屏，视觉冲击力更强 - 统一使用 flex 居中布局 - 调整标题和内容间距，更适合全屏显示 - 保持响应式设计和所有动画效果 📐 修改的组件: - HomeServices: 服务能力展示 - HomeAchievements: 数字成就展示 - HomeTestimonials: 客户评价轮播 - HomeTechStack: 技术栈展示 - HomeProcess: 创意流程时间线 - HomeUpdates: 最新动态网格 ✨ 视觉效果: - 更加现代化的全屏滚动体验 - 每个板块都有足够的呼吸空间 - 符合整体设计风格 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-black text-white py-32 md:py-40 overflow-hidden">
|
||||
<section ref="rootRef" class="relative bg-black text-white min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<!-- 背景粒子 -->
|
||||
<canvas ref="canvasRef" class="absolute inset-0 w-full h-full opacity-30"></canvas>
|
||||
|
||||
<div class="relative z-10 w-page-container max-w-[1200px] mx-auto px-6 md:px-10">
|
||||
<div class="relative z-10 w-full max-w-[1200px] mx-auto px-6 md:px-10">
|
||||
<!-- 成就网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-20">
|
||||
<div
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题 -->
|
||||
<div ref="headerRef" class="text-center mb-20 md:mb-28" style="opacity: 0;">
|
||||
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
|
||||
<h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.process.title') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1200px] mx-auto px-6 md:px-10">
|
||||
<section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题区 -->
|
||||
<div ref="headerRef" class="text-center mb-20 md:mb-28" style="opacity: 0;">
|
||||
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
|
||||
<h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.services.title') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
<p class="text-xl md:text-2xl text-gray-600 max-w-2xl mx-auto">
|
||||
{{ t('home.services.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
<!-- 服务卡片网格 -->
|
||||
<div
|
||||
ref="cardsRef"
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10"
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
@@ -22,14 +22,14 @@
|
||||
v-for="(service, index) in services"
|
||||
:key="service.id"
|
||||
:ref="el => setCardRef(el, index)"
|
||||
class="service-card group relative h-[380px] md:h-[420px] cursor-pointer"
|
||||
class="service-card group relative h-[380px] cursor-pointer"
|
||||
:style="{ transformStyle: 'preserve-3d' }"
|
||||
@mouseenter="() => handleCardHover(index, true)"
|
||||
@mouseleave="() => handleCardHover(index, false)"
|
||||
>
|
||||
<!-- 前面 -->
|
||||
<div
|
||||
class="card-face card-front absolute inset-0 rounded-3xl p-8 md:p-10 flex flex-col justify-between overflow-hidden"
|
||||
class="card-face card-front absolute inset-0 rounded-3xl p-8 flex flex-col justify-between overflow-hidden"
|
||||
:class="service.gradient"
|
||||
>
|
||||
<div class="relative z-10">
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<!-- 背面 -->
|
||||
<div
|
||||
class="card-face card-back absolute inset-0 rounded-3xl p-8 md:p-10 bg-white border-2 flex flex-col justify-between shadow-2xl"
|
||||
class="card-face card-back absolute inset-0 rounded-3xl p-8 bg-white border-2 flex flex-col justify-between shadow-2xl"
|
||||
:class="service.borderColor"
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center">
|
||||
<!-- 左侧：3D 球体 -->
|
||||
<div class="relative h-[500px] md:h-[600px]">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-gradient-to-b from-gray-50 to-white py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<section ref="rootRef" class="relative bg-gradient-to-b from-gray-50 to-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题 -->
|
||||
<div ref="headerRef" class="text-center mb-20" style="opacity: 0;">
|
||||
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
|
||||
<h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.testimonials.title') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<section ref="rootRef" class="relative bg-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题 -->
|
||||
<div ref="headerRef" class="text-center mb-20 md:mb-28" style="opacity: 0;">
|
||||
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
|
||||
<h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.updates.title') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
|
||||
Reference in New Issue
Block a user