hanhai-official-website/src/views/pages/Home.vue

<script setup>
// 导入视差滚动和动画库
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { initParallax, initAOS } from '../../plugins/animation.js';


import { useConfigStore } from '@/stores/config'
const { configParams } = useConfigStore()

// 导入服务部分组件
import ServiceSection from '../../components/home/ServiceSection.vue';

import CaseSection from '@/components/home/CaseSection.vue';
// 导入CTA组件
import CallToAction from '../../components/CallToAction.vue';
// 导入客户评价组件
import CustomerReviews from '../../components/CustomerReviews.vue';

// 获取路由实例
const router = useRouter();

// 创建服务部分的引用
const serviceSection = ref(null);

import api from '@/api'

const serviceProcess = ref([])

const getServiceProcess = async () => {
    const res = await api.getServiceProcess()
    serviceProcess.value = res.data
}

// 滚动到服务部分
const scrollToServices = () => {
    // 使用服务组件的DOM元素
    const element = document.querySelector('.services-section');
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
    }
};

// 导航到联系页面
const navigateToContact = () => {
    router.push('/contact');
};

onMounted(() => {
    // 初始化动画和视差效果
    initAOS();
    initParallax();
    getServiceProcess()
});
</script>

<template>
    <div class="home">
        <!-- 英雄区域（带视差效果） -->
        <section class="hero-section parallax-container">
            <!-- 添加一个注释：确保视差容器不会阻止按钮点击 -->
            <div class="parallax-bg" 
            :style="{ backgroundImage: `url(${configParams.home_banner_bg && configParams.home_banner_bg.split(',')[0]})` }" 
            data-depth="0.4"></div>
            <div class="hero-overlay"></div>
            <div class="hero-content hero-content-fixed" data-aos="fade-up" data-aos-duration="1000">
                <h1 class="hero-title">数字化转型的<span class="highlight">可靠伙伴</span></h1>
                <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="200">{{ configParams.home_banner_subtitle }}</p>
                <div class="cta-buttons" data-aos="fade-up" data-aos-delay="400">
                    <button class="btn primary" @click="scrollToServices">了解更多</button>
                    <button class="btn secondary" @click="navigateToContact">联系我们</button>
                </div>
            </div>
        </section>

        <!-- 我们的服务（视差滚动） -->
        <!-- <ServiceSection /> -->

        <!-- 精选案例展示 -->
        <CaseSection />

        <!-- 我们的优势（视差背景） -->
        <section class="advantages-section parallax-container">
            <div class="parallax-bg" :style="{ backgroundImage: `url(${configParams.home_advantages_bg})` }" data-depth="0.1"></div>
            <div class="overlay-dark"></div>
            <div class="container hero-content-fixed">
                <div class="section-content">
                    <div class="section-header" data-aos="fade-up">
                        <h2 style="color: #fff;">我们的优势</h2>
                        <p>为什么选择瀚海黎明</p>
                    </div>

                    <div class="advantages-grid" data-aos="fade-up" data-aos-delay="100">
                        <div class="advantage-card" data-aos="fade-right" 
                        v-for="(item, index) in serviceProcess"
                        :key="item.id"
                        :data-aos-delay="100 * (index + 1)">
                            <div class="advantage-number">{{ item.num }}</div>
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.info }}</p>
                        </div>
                    </div>
                    
                    <!-- <div class="advantages-grid" data-aos="fade-up" data-aos-delay="100">
                        <div class="advantage-card" data-aos="fade-right" data-aos-delay="100">
                            <div class="advantage-number">01</div>
                            <h3>专业团队</h3>
                            <p>由经验丰富的开发人员、设计师和项目经理组成的精英团队</p>
                        </div>
                        <div class="advantage-card" data-aos="fade-right" data-aos-delay="200">
                            <div class="advantage-number">02</div>
                            <h3>质量保证</h3>
                            <p>严格的质量控制流程，确保交付高质量的软件产品</p>
                        </div>
                        <div class="advantage-card" data-aos="fade-right" data-aos-delay="300">
                            <div class="advantage-number">03</div>
                            <h3>按时交付</h3>
                            <p>高效的项目管理，确保项目按时、按预算完成</p>
                        </div>
                        <div class="advantage-card" data-aos="fade-left" data-aos-delay="400">
                            <div class="advantage-number">04</div>
                            <h3>灵活合作模式</h3>
                            <p>根据客户需求提供灵活的合作方式和定价模式</p>
                        </div>
                        <div class="advantage-card" data-aos="fade-left" data-aos-delay="500">
                            <div class="advantage-number">05</div>
                            <h3>技术创新</h3>
                            <p>持续关注最新技术趋势，为客户提供创新解决方案</p>
                        </div>
                        <div class="advantage-card" data-aos="fade-left" data-aos-delay="600">
                            <div class="advantage-number">06</div>
                            <h3>售后支持</h3>
                            <p>提供全面的售后支持和维护服务，确保系统稳定运行</p>
                        </div>
                    </div> -->
                </div>
            </div>
        </section>

        <!-- 客户评价 -->
        <!-- <CustomerReviews /> -->

        <!-- 合作流程（视差滚动） -->
        <section class="process-section" data-aos="fade-up">
            <div class="section-header">
                <h2>合作流程</h2>
                <p>简单高效的项目合作流程</p>
            </div>
            <div class="process-flow">

                <div class="process-step" 
                data-aos="fade-right" 
                v-for="(item, index) in serviceProcess"
                :key="item.id"
                :data-aos-delay="100 * (index + 1)">
                    <div class="step-number">{{ item.num }}</div>
                    <div class="step-content">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.info }}</p>
                    </div>
                </div>

                <!-- <div class="process-step" data-aos="fade-right" data-aos-delay="100">
                    <div class="step-number">01</div>
                    <div class="step-content">
                        <h3>需求分析</h3>
                        <p>深入了解您的业务需求和目标，确定项目范围和技术方案</p>
                    </div>
                </div>
                <div class="process-step" data-aos="fade-right" data-aos-delay="200">
                    <div class="step-number">02</div>
                    <div class="step-content">
                        <h3>方案设计</h3>
                        <p>制定详细技术方案和项目计划，包括功能规格、UI设计和技术架构</p>
                    </div>
                </div>
                <div class="process-step" data-aos="fade-right" data-aos-delay="300">
                    <div class="step-number">03</div>
                    <div class="step-content">
                        <h3>开发实施</h3>
                        <p>按照敏捷开发方法，迭代开发并定期交付可测试的版本</p>
                    </div>
                </div>
                <div class="process-step" data-aos="fade-left" data-aos-delay="400">
                    <div class="step-number">04</div>
                    <div class="step-content">
                        <h3>测试验收</h3>
                        <p>进行全面的功能测试、性能测试和安全测试，确保产品质量</p>
                    </div>
                </div>
                <div class="process-step" data-aos="fade-left" data-aos-delay="500">
                    <div class="step-number">05</div>
                    <div class="step-content">
                        <h3>交付上线</h3>
                        <p>系统部署上线，提供用户培训和文档，确保平稳过渡</p>
                    </div>
                </div>
                <div class="process-step" data-aos="fade-left" data-aos-delay="600">
                    <div class="step-number">06</div>
                    <div class="step-content">
                        <h3>持续支持</h3>
                        <p>提供持续的技术支持和系统维护，确保系统稳定运行</p>
                    </div>
                </div> -->
            </div>
        </section>

        <!-- 使用通用的CallToAction组件 -->
        <CallToAction 
            title="准备好开始您的数字化转型了吗？"
            description="瀚海黎明为您提供专业的软件开发服务"
            primaryButtonText="开始项目咨询"
        />
    </div>
</template>

<style lang="scss" scoped>
/* 全局样式 */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    
    h2 {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 15px;
    }
    
    p {
        font-size: 1.2rem;
        color: #7f8c8d;
    }
}

.btn {
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer !important; /* 确保鼠标悬停时显示小手 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none;
    margin: 0;
    position: relative;
    overflow: hidden;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 30; /* 确保按钮在最上层 */
    pointer-events: auto; /* 确保可以接收鼠标事件 */
    
    &.primary {
        background-color: #3498db;
        color: white;
        
        &:hover {
            background-color: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        &:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }
    
    &.secondary {
        background-color: transparent;
        color: white;
        border: 2px solid white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        
        &:hover {
            background-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        &:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
    }
}

/* 英雄区域样式 */
.hero-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

/* 确保视差容器不会阻止点击事件 */
.parallax-container {
    pointer-events: none; /* 默认不接收鼠标事件，让事件穿透到下层元素 */
    
    .hero-content,
    .hero-content * {
        pointer-events: auto; /* 恢复内容区域的鼠标事件 */
    }
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80');
    background-size: cover;
    background-position: center;
    z-index: -2;
    transform: scale(1.1);
    /* 轻微放大背景，增强视差效果 */
    transition: transform 0.5s ease;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
    z-index: -1;
}

.hero-content {
    z-index: 1;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px);
    /* 使用!important确保transform属性不被AOS动画库覆盖 */
}

/* 添加额外的样式来修复AOS动画结束后的位置问题 */
[data-aos].aos-animate {
    transform: none;
}

/* 特定针对hero-content中的元素恢复正确的transform */
.hero-content[data-aos].aos-animate {
    transform: translate(-50%, -50%) !important;
}

/* 添加固定定位样式确保hero-content始终居中 */
.hero-content-fixed {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 40px) !important;
    z-index: 10 !important; /* 提高z-index确保内容在最上层 */
    pointer-events: auto !important; /* 确保可以接收鼠标事件 */
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    color: #fff;
    
    .highlight {
        color: #3498db;
        position: relative;
        
        &::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #3498db;
        }
    }
}

.hero-subtitle {
    font-size: 1.6rem;
    margin-bottom: 40px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: 300;
    line-height: 1.5;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 20; /* 确保按钮在最上层 */
    pointer-events: auto; /* 确保可以接收鼠标事件 */
}


/* 优势部分样式 */
.advantages-section {
    position: relative;
    padding: 100px 20px;
    color: white;
    overflow: hidden;
    text-align: center;
    /* 确保文本居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 确保子元素水平居中 */
    width: 100%;
    /* 确保宽度占满容器 */
    box-sizing: border-box;
    /* 确保padding不会增加元素总宽度 */
    
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    
    .parallax-bg {
        // background-image: url('https://images.unsplash.com/photo-1504639725590-34d0984388bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');
        filter: brightness(0.3);
        /* 降低亮度以增加对比度 */
    }
    
    /* 移动端隐藏优势部分 */
    @media (max-width: 768px) {
        display: none;
    }
}

.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    z-index: 0;
}

.section-content {
    position: relative;
    z-index: 2;
    /* 提高z-index确保内容在叠加层之上 */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    /* 确保宽度占满容器 */
    padding: 0 15px;
    /* 添加内边距，确保在小屏幕上内容不会贴边 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 确保子元素水平居中 */
    box-sizing: border-box;
    /* 确保padding不会增加元素总宽度 */
    left: 0;
    /* 确保不会有偏移 */
    right: 0;
    /* 确保不会有偏移 */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* 确保文本居中 */
}

.advantages-grid {
    display: grid;
    gap: 30px;
    margin-top: 40px;
    justify-content: center;
    /* 确保网格居中 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* 确保宽度占满容器 */
    grid-template-columns: repeat(3, 1fr);
    /* 固定为3列布局 */
    box-sizing: border-box;
    /* 确保padding不会增加元素总宽度 */
    
    @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
        /* 中等屏幕2列 */
    }
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        /* 小屏幕1列 */
    }
}

.advantage-card {
    background: rgba(0, 0, 0, 0.5);
    /* 更深的背景色以增加对比度 */
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 30px;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 添加阴影增强可见性 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 添加细边框增强可见性 */
    
    &:hover {
        transform: translateY(-10px);
        background: rgba(0, 0, 0, 0.6);
        /* 悬停时背景更深 */
    }
    
    .advantage-number {
        font-size: 3rem;
        font-weight: 700;
        color: rgba(52, 152, 219, 0.7);
        /* 使用品牌蓝色，增加可见性 */
        margin-bottom: 15px;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        /* 添加文字阴影 */
    }
    
    h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        color: #ffffff;
        /* 确保标题为纯白色 */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        /* 添加文字阴影增强可读性 */
    }
    
    p {
        color: rgba(255, 255, 255, 0.9);
        /* 段落文字颜色 */
        line-height: 1.6;
        /* 增加行高提高可读性 */
        font-size: 1rem;
        /* 设置合适的字体大小 */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        /* 轻微文字阴影 */
    }
}

/* 客户评价部分样式 */
.testimonials-section {
    position: relative;
    padding: 100px 20px;
    color: white;
    overflow: hidden;
    
    .parallax-bg {
        //background-image: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');
        filter: brightness(0.4);
    }
    
    .testimonials-slider {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 30px;
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    
    .testimonial-rating {
        color: #f1c40f;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .testimonial-text {
        font-style: italic;
        margin-bottom: 20px;
        line-height: 1.6;
    }
    
    .testimonial-author {
        display: flex;
        align-items: center;
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }
        
        .author-info {
            h4 {
                font-size: 1.2rem;
                margin-bottom: 5px;
            }
            
            p {
                opacity: 0.8;
                font-size: 0.9rem;
            }
        }
    }
}

/* 合作流程部分样式 */
.process-section {
    padding: 100px 20px;
    background-color: #f8f9fa;
    
    .process-flow {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-top: 40px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

.process-step {
    display: flex;
    background: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .step-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: #3498db;
        margin-right: 20px;
        line-height: 1;
    }
    
    .step-content {
        h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        p {
            color: #7f8c8d;
        }
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-content {
        h1 {
            font-size: 2.5rem;
        }
        
        p {
            font-size: 1.2rem;
        }
    }
    
    .cases-grid {
        grid-template-columns: 1fr;
    }
    
    .process-step {
        flex-direction: column;
        
        .step-number {
            margin-right: 0;
            margin-bottom: 15px;
        }
    }
}
</style>