virtheart/arcticnewone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 调整首页所有板块为全屏布局

Browse Source 
🎨 设计调整:
- 所有板块改为 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:
陈春
2026-06-03 19:19:17 +08:00
parent cd87644d41
commit 42c96f7363
6 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/home/HomeAchievements.vue
+2 -2
View File
@@ -1,9 +1,9 @@
<template> <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> <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 class="grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-20">
<div <div
app/components/home/HomeProcess.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<template> <template>
<section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 py-32 md:py-40 overflow-hidden"> <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-page-container max-w-[1400px] mx-auto px-6 md:px-10"> <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;"> <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6"> <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
{{ t('home.process.title') }} {{ t('home.process.title') }}
</h2> </h2>
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto"> <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
app/components/home/HomeServices.vue
+9 -9
View File
@@ -1,12 +1,12 @@
<template> <template>
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden"> <section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
<div class="w-page-container max-w-[1200px] mx-auto px-6 md:px-10"> <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;"> <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6"> <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
{{ t('home.services.title') }} {{ t('home.services.title') }}
</h2> </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') }} {{ t('home.services.subtitle') }}
</p> </p>
</div> </div>
@@ -14,7 +14,7 @@
<!-- 服务卡片网格 --> <!-- 服务卡片网格 -->
<div <div
ref="cardsRef" 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" @mousemove="handleMouseMove"
@mouseleave="handleMouseLeave" @mouseleave="handleMouseLeave"
> >
@@ -22,14 +22,14 @@
v-for="(service, index) in services" v-for="(service, index) in services"
:key="service.id" :key="service.id"
:ref="el => setCardRef(el, index)" :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' }" :style="{ transformStyle: 'preserve-3d' }"
@mouseenter="() => handleCardHover(index, true)" @mouseenter="() => handleCardHover(index, true)"
@mouseleave="() => handleCardHover(index, false)" @mouseleave="() => handleCardHover(index, false)"
> >
<!-- 前面 --> <!-- 前面 -->
<div <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" :class="service.gradient"
> >
<div class="relative z-10"> <div class="relative z-10">
@@ -52,7 +52,7 @@
<!-- 背面 --> <!-- 背面 -->
<div <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" :class="service.borderColor"
> >
<div> <div>
app/components/home/HomeTechStack.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden"> <section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10"> <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"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center">
<!-- 左侧：3D 球体 --> <!-- 左侧：3D 球体 -->
<div class="relative h-[500px] md:h-[600px]"> <div class="relative h-[500px] md:h-[600px]">
app/components/home/HomeTestimonials.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<template> <template>
<section ref="rootRef" class="relative bg-gradient-to-b from-gray-50 to-white py-32 md:py-40 overflow-hidden"> <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-page-container max-w-[1400px] mx-auto px-6 md:px-10"> <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;"> <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6"> <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
{{ t('home.testimonials.title') }} {{ t('home.testimonials.title') }}
</h2> </h2>
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto"> <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
app/components/home/HomeUpdates.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<template> <template>
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden"> <section ref="rootRef" class="relative bg-white min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
<div class="w-page-container max-w-[1400px] mx-auto px-6 md:px-10"> <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;"> <div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6"> <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
{{ t('home.updates.title') }} {{ t('home.updates.title') }}
</h2> </h2>
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto"> <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">