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

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import PageHeader from '../../components/PageHeader.vue';
import CaseItem from '../../components/cases/CaseItem.vue';

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

// 路由实例
const route = useRoute();
const router = useRouter();

// 获取案例ID
const caseId = computed(() => Number(route.params.id));

// 案例数据 (实际项目中可能从API获取)
const casesList = ref([
    {
        id: 1,
        title: '企业资源管理系统',
        description: '为某制造企业开发的一套完整ERP系统，实现了生产、销售、库存等全流程管理',
        image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: '企业系统',
        client: '某制造业集团',
        completionDate: '2023年6月',
        services: ['系统架构设计', '数据库优化', '前端开发', '后端开发', '系统集成'],
        challenge: '客户面临的主要挑战是多个业务系统之间数据孤岛问题，导致信息流通不畅，管理效率低下。同时，随着业务规模扩大，原有系统已无法满足日益增长的业务需求。',
        solution: '我们为客户设计并实现了一套全面的企业资源管理系统，整合了生产、销售、采购、库存、财务等多个模块。系统采用微服务架构，确保了各模块之间的松耦合与高内聚，同时保证了系统的可扩展性和稳定性。我们还为客户定制了数据分析和决策支持功能，帮助管理层快速获取业务洞察。',
        results: '系统上线后，客户的运营效率提升了35%，信息处理时间缩短了60%，库存周转率提高了25%，大幅降低了运营成本。同时，实时的数据分析功能帮助客户更快速地响应市场变化，提升了企业的竞争力。',
        testimonial: '微隐软件工作室的团队展现了卓越的专业能力和服务态度。他们不仅理解我们的业务需求，还能提供创新的技术解决方案。新系统极大地提升了我们的运营效率，是我们数字化转型的重要一步。',
        testimonialAuthor: '张总 - 客户CIO',
        gallery: [
            'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ],
        galleryContent: `
        <div class="project-showcase">
            <h3>系统架构概览</h3>
            <p>本项目采用了先进的微服务架构，通过模块化设计实现了高可用性和可扩展性。系统的核心组件包括：</p>
            <ul>
                <li><strong>前端框架</strong>：基于Vue.js构建的响应式界面，支持多端适配</li>
                <li><strong>后端服务</strong>：使用Spring Cloud微服务架构，确保高可用性</li>
                <li><strong>数据存储</strong>：结合MySQL和MongoDB的混合存储策略</li>
                <li><strong>消息队列</strong>：采用Kafka实现系统间的异步通信</li>
                <li><strong>缓存层</strong>：使用Redis优化查询性能和降低数据库压力</li>
            </ul>
            
            <div class="image-showcase">
                <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="系统架构图" />
                <p class="image-caption">系统整体架构示意图</p>
            </div>
            
            <h3>核心功能模块</h3>
            <p>系统包含多个紧密集成的功能模块，覆盖企业运营的各个方面：</p>
            
            <div class="feature-grid">
                <div class="feature-item">
                    <h4>生产管理</h4>
                    <p>实现从生产计划到执行的全流程管理，支持生产排程、物料需求计划、生产进度跟踪等功能。</p>
                </div>
                <div class="feature-item">
                    <h4>库存管理</h4>
                    <p>提供实时库存监控、自动补货、批次管理、库位管理等功能，优化库存水平并降低管理成本。</p>
                </div>
                <div class="feature-item">
                    <h4>销售管理</h4>
                    <p>涵盖从询价、报价到订单履行的完整销售流程，支持多渠道销售和客户关系管理。</p>
                </div>
                <div class="feature-item">
                    <h4>财务管理</h4>
                    <p>提供应收应付、成本核算、财务报表等功能，实现财务数据与业务数据的无缝集成。</p>
                </div>
            </div>
            
            <div class="image-showcase">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="系统界面示例" />
                <p class="image-caption">系统主控制台界面</p>
            </div>
            
            <h3>数据可视化与分析</h3>
            <p>系统内置强大的数据分析和可视化功能，帮助管理层快速洞察业务状况并做出决策：</p>
            <ul>
                <li>多维度的销售分析报表，支持按产品、客户、区域等维度分析</li>
                <li>生产效率和成本分析，识别生产瓶颈和优化机会</li>
                <li>库存优化建议，基于历史数据和预测算法</li>
                <li>财务绩效仪表盘，展示关键财务指标和趋势</li>
            </ul>
            
            <div class="image-showcase">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="数据分析界面" />
                <p class="image-caption">系统数据分析仪表盘</p>
            </div>
            
            <h3>实施成果</h3>
            <p>该系统的成功实施为客户带来了显著的业务价值和竞争优势：</p>
            
            <div class="results-grid">
                <div class="result-item">
                    <div class="result-value">35%</div>
                    <div class="result-label">运营效率提升</div>
                </div>
                <div class="result-item">
                    <div class="result-value">60%</div>
                    <div class="result-label">信息处理时间缩短</div>
                </div>
                <div class="result-item">
                    <div class="result-value">25%</div>
                    <div class="result-label">库存周转率提高</div>
                </div>
                <div class="result-item">
                    <div class="result-value">40%</div>
                    <div class="result-label">决策效率提升</div>
                </div>
            </div>
            
            <p class="conclusion">通过该系统的实施，客户实现了业务流程的标准化和数字化，为未来的智能制造转型奠定了坚实基础。</p>
        </div>
        `
    },
    {
        id: 2,
        title: '电商平台重构',
        description: '帮助某电商企业重构其线上平台，提升用户体验和系统性能，实现销售额提升30%',
        image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: 'Web应用',
        client: '某知名电商企业',
        completionDate: '2023年9月',
        services: ['用户体验设计', '前端重构', '后端优化', '性能调优', '安全加固'],
        challenge: '客户的电商平台面临用户体验不佳、系统响应缓慢、移动端适配不足等问题，导致用户流失和转化率下降。同时，随着业务量增长，系统稳定性也面临挑战。',
        solution: '我们对客户的电商平台进行了全面重构，采用了现代化的前端框架和响应式设计，优化了用户界面和交互流程。在后端，我们重构了核心服务，引入了微服务架构和缓存机制，提升了系统性能和可扩展性。同时，我们还加强了系统的安全性，实现了全面的HTTPS和数据加密。',
        results: '重构后的平台页面加载速度提升了65%，用户停留时间增加了40%，转化率提高了25%，最终带来了30%的销售额增长。系统的稳定性也得到了显著提升，即使在促销高峰期也能保持良好的性能。',
        testimonial: '微隐软件工作室的团队展现了卓越的技术实力和创新思维。他们不仅解决了我们平台的技术问题，还从用户体验和业务角度提供了宝贵建议。重构后的平台获得了用户的一致好评，为我们带来了实质性的业务增长。',
        testimonialAuthor: '李总 - 客户产品总监',
        gallery: [
            'https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1556740772-1a741d976155?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1556761175-129418cb2dfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ]
    },
    {
        id: 3,
        title: '医疗服务APP',
        description: '为连锁医疗机构开发的患者服务APP，实现在线挂号、问诊和健康管理等功能',
        image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: '移动应用',
        client: '某连锁医疗机构',
        completionDate: '2023年12月',
        services: ['移动应用开发', 'UI/UX设计', '后端API开发', '数据安全', '系统集成'],
        challenge: '客户希望通过数字化手段提升患者服务体验，减少排队等待时间，同时提高医疗资源利用效率。传统的线下预约和就诊流程繁琐，患者满意度不高。',
        solution: '我们为客户开发了一款功能全面的医疗服务APP，支持在线挂号、远程问诊、检查报告查询、健康档案管理等功能。APP采用了直观的用户界面和流畅的交互设计，确保各年龄段用户都能轻松使用。在技术层面，我们实现了与医院HIS系统的无缝集成，并采用了严格的数据加密和隐私保护措施。',
        results: 'APP上线后，患者预约效率提升了80%，平均等待时间减少了65%，患者满意度提高了45%。同时，医生的工作效率也得到了提升，资源利用率增加了30%。APP已成为客户数字化医疗服务的核心平台。',
        testimonial: '微隐软件工作室深入理解了医疗行业的特殊需求，为我们打造了一款既专业又易用的医疗服务APP。他们在确保数据安全和系统稳定性方面表现出色，为我们的患者提供了便捷、高效的服务体验。',
        testimonialAuthor: '王院长 - 客户医疗总监',
        gallery: [
            'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ]
    },
    {
        id: 4,
        title: '金融数据可视化平台',
        description: '为金融机构开发的数据分析和可视化平台，帮助决策者快速洞察市场趋势',
        image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: 'Web应用',
        client: '某投资管理公司',
        completionDate: '2024年2月',
        services: ['数据分析', '可视化设计', '前端开发', 'API集成', '实时数据处理'],
        challenge: '客户需要一个能够整合多源金融数据，并提供直观、实时的可视化分析工具，帮助投资分析师和决策者快速识别市场趋势和投资机会。',
        solution: '我们为客户开发了一个功能强大的金融数据可视化平台，整合了市场数据、公司财报、宏观经济指标等多种数据源。平台提供了丰富的图表类型和分析工具，支持自定义仪表盘和报告。我们采用了高性能的前端渲染技术和实时数据处理架构，确保了大数据量下的流畅体验。',
        results: '平台上线后，客户的数据分析效率提升了70%，决策周期缩短了50%，投资组合表现超过了基准指数15%。平台的预测模型准确率达到了85%，为客户提供了显著的竞争优势。',
        testimonial: '微隐软件工作室交付的数据可视化平台超出了我们的预期。他们不仅具备出色的技术能力，还展现了对金融行业的深刻理解。平台直观的界面和强大的分析功能极大地提升了我们的决策效率和准确性。',
        testimonialAuthor: '赵总 - 客户投资总监',
        gallery: [
            'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ]
    },
    {
        id: 5,
        title: '智慧校园系统',
        description: '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块',
        image: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: '企业系统',
        client: '某知名高校',
        completionDate: '2023年8月',
        services: ['系统规划', '软件开发', '数据迁移', '用户培训', '持续支持'],
        challenge: '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。',
        solution: '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。',
        results: '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。',
        testimonial: '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。',
        testimonialAuthor: '陈校长 - 客户负责人',
        gallery: [
            'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ]
    },
    {
        id: 6,
        title: '品牌官网设计',
        description: '为高端品牌设计的响应式官方网站，展现品牌形象并提升用户转化率',
        image: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        category: 'UI/UX设计',
        client: '某高端消费品牌',
        completionDate: '2024年1月',
        services: ['品牌策略', 'UI/UX设计', '前端开发', 'CMS实现', 'SEO优化'],
        challenge: '客户的原有网站设计过时，无法有效展现品牌高端形象，且缺乏移动端适配，导致用户体验不佳和转化率低下。',
        solution: '我们为客户重新设计了品牌官网，采用了现代简约的设计风格，突出品牌的高端定位。网站采用了响应式设计，确保在各种设备上都能提供出色的用户体验。我们还优化了产品展示和购买流程，降低了用户转化的摩擦。在技术层面，我们实现了高性能的前端架构和易用的内容管理系统。',
        results: '新网站上线后，用户停留时间增加了45%，页面跳出率降低了30%，转化率提升了35%。网站的加载速度提高了60%，搜索引擎排名也有显著提升。客户的品牌形象得到了有效提升，线上销售额增长了40%。',
        testimonial: '微隐软件工作室的设计团队展现了卓越的创意和专业能力。他们不仅理解我们的品牌价值，还能将其完美地转化为视觉设计。新网站获得了客户和合作伙伴的一致好评，成为了我们品牌传播的重要窗口。',
        testimonialAuthor: '林总 - 客户市场总监',
        gallery: [
            'https://images.unsplash.com/photo-1542744094-3a31f272c490?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1542744173-8659239e9452?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            'https://images.unsplash.com/photo-1542744173-05336fcc7ad4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
        ]
    }
]);

// 当前案例
const currentCase = computed(() => {
    return casesList.value[0] || null;
});

// 相关案例
const relatedCases = computed(() => {
    if (!currentCase.value) return [];

    return casesList.value
        .filter(item =>
            item.id !== currentCase.value.id &&
            item.category === currentCase.value.category
        )
        .slice(0, 3);
});

// 返回案例列表
const goBackToList = () => {
    router.push('/cases');
};

// 查看相关案例
const viewRelatedCase = (id) => {
    router.push(`/cases/${id}`);
};

onMounted(() => {
    // 如果案例不存在，返回列表页
    if (!currentCase.value) {
        router.push('/cases');
    }

    // 滚动到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
</script>

<template>
    <div v-if="currentCase" class="case-detail-page">
        <!-- 页面头部 -->
        <PageHeader :title="currentCase.title" :subtitle="currentCase.description" :backgroundImage="currentCase.image"
            height="70vh">
            <template #header-cta>
                <div class="header-cta" data-aos="fade-up" data-aos-delay="400">
                    <button @click="goBackToList" class="btn-outline">
                        <i class="fas fa-arrow-left"></i> 返回案例列表
                    </button>
                </div>
            </template>
        </PageHeader>

        <!-- 案例概览 -->
        <section class="case-overview">
            <div class="container">
                <div class="overview-grid">
                    <div class="overview-item" data-aos="fade-up">
                        <h4>客户</h4>
                        <p>{{ currentCase.client }}</p>
                    </div>
                    <div class="overview-item" data-aos="fade-up" data-aos-delay="100">
                        <h4>类别</h4>
                        <p>{{ currentCase.category }}</p>
                    </div>
                    <div class="overview-item" data-aos="fade-up" data-aos-delay="200">
                        <h4>完成时间</h4>
                        <p>{{ currentCase.completionDate }}</p>
                    </div>
                    <!-- <div class="overview-item" data-aos="fade-up" data-aos-delay="300">
                        <h4>UI设计图</h4>
                        <p><a href="https://www.figma.com/design/1234567890/1234567890?node-id=1234567890-1234567890" target="_blank">点击查看</a></p>
                    </div> -->
                    <!-- <div class="overview-item services" data-aos="fade-up" data-aos-delay="300">
                        <h4>服务内容</h4>
                        <div class="services-list">
                            <span v-for="(service, index) in currentCase.services" :key="index" class="service-tag">
                                {{ service }}
                            </span>
                        </div>
                    </div> -->
                </div>
            </div>
        </section>

        <!-- 案例详情 -->
        <section class="case-content">
            <div class="container">
                <div class="content-grid">
                    <div class="content-main">
                        <div class="content-section" data-aos="fade-up">
                            <h3>项目挑战</h3>
                            <p>{{ currentCase.challenge }}</p>
                        </div>

                        <div class="content-section" data-aos="fade-up">
                            <h3>解决方案</h3>
                            <p>{{ currentCase.solution }}</p>
                        </div>

                        <div class="content-section" data-aos="fade-up">
                            <h3>项目成果</h3>
                            <p>{{ currentCase.results }}</p>
                        </div>
                    </div>

                    <div class="content-sidebar">
                        <div class="testimonial" data-aos="fade-left">
                            <div class="quote-icon">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <blockquote>
                                {{ currentCase.testimonial }}
                            </blockquote>
                            <div class="testimonial-author-wrapper">
                                <div class="testimonial-avatar">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div class="testimonial-author">
                                    {{ currentCase.testimonialAuthor }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目图库 -->
        <section class="case-gallery">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">项目展示</h2>
                <!-- 如果有富文本内容，则显示富文本 -->
                <div class="rich-text-content" v-if="currentCase.galleryContent" data-aos="fade-up" v-html="currentCase.galleryContent"></div>
                <!-- 如果没有富文本内容，则显示原有图库 -->
                <div class="gallery-grid" v-else>
                    <div v-for="(image, index) in currentCase.gallery" :key="index" class="gallery-item"
                        data-aos="fade-up" :data-aos-delay="index * 100">
                        <img :src="image" :alt="`${currentCase.title} - 图片 ${index + 1}`">
                    </div>
                </div>
            </div>
        </section>

        <!-- 相关案例 -->
        <section class="related-cases" v-if="relatedCases.length > 0">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">相关案例</h2>
                <div class="related-grid">
                    <CaseItem 
                        v-for="caseItem in relatedCases" 
                        :key="caseItem.id" 
                        :item="caseItem" 
                        :showCategory="true"
                        buttonType="button"
                        @view-details="viewRelatedCase"
                    />
                </div>
            </div>
        </section>

        <!-- CTA部分 -->
        <section class="cta-section" data-aos="fade-up">
            <div class="container">
                <div class="cta-content">
                    <div class="cta-icon" data-aos="zoom-in" data-aos-delay="200">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h2 data-aos="fade-up" data-aos-delay="300">有类似的项目需求？</h2>
                    <p data-aos="fade-up" data-aos-delay="400">我们的团队随时准备为您提供专业的技术支持和服务</p>
                    <div class="cta-buttons" data-aos="fade-up" data-aos-delay="500">
                        <a href="/contact" class="btn-primary">立即咨询 <i class="fas fa-arrow-right"></i></a>
                        <button @click="goBackToList" class="btn-outline">浏览更多案例</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<style lang="scss" scoped>
/* 导入全局SCSS变量 */
@use '../../assets/scss/main.scss' as *;
@use "sass:color";

/* 页面头部样式 */
.header-cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-3px);
    }
}

/* 案例概览样式 */
.case-overview {
    padding: 60px 0;
    background-color: $light-bg;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.overview-item {
    h4 {
        font-size: 1.1rem;
        color: $text-color;
        margin-bottom: 10px;
        font-weight: 600;
    }

    p {
        color: $text-light;
        font-size: 1rem;
    }

    &.services {
        grid-column: 1 / -1;
    }
}

.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-tag {
    display: inline-block;
    padding: 6px 15px;
    background: white;
    border-radius: 20px;
    font-size: 0.9rem;
    color: $text-color;
    box-shadow: $shadow-sm;
}

/* 案例内容样式 */
.case-content {
    padding: 80px 0;
    background-color: white;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}

.content-section {
    margin-bottom: 40px;

    h3 {
        font-size: 1.8rem;
        color: $text-color;
        margin-bottom: 20px;
        position: relative;
        padding-bottom: 15px;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: $primary-color;
        }
    }

    p {
        color: $text-light;
        line-height: 1.8;
        font-size: 1.05rem;
    }
}

.testimonial {
    background: white;
    padding: 40px 30px 30px;
    border-radius: 12px;
    position: relative;
    box-shadow: $shadow-lg;
    border-left: 4px solid $primary-color;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 25px;
    
    @media (max-width: 768px) {
        padding: 35px 25px 25px;
        margin-top: 40px;
    }
    
    &:hover {
        transform: translateY(-5px);
        box-shadow: $shadow-xl;
    }
    
    blockquote {
        font-style: italic;
        line-height: 1.8;
        font-size: 1.1rem;
        color: $text-color;
        margin: 0 0 20px 0;
        position: relative;
        z-index: 1;
        
        @media (max-width: 768px) {
            font-size: 1rem;
        }
    }
    
    &::before {
        content: '"';
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 120px;
        color: rgba($primary-color, 0.05);
        font-family: serif;
        line-height: 1;
        z-index: 0;
        
        @media (max-width: 768px) {
            font-size: 100px;
            top: 5px;
            right: 15px;
        }
    }
    
    .testimonial-author-wrapper {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba($text-light, 0.1);
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
    }
    
    .testimonial-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba($primary-color, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        
        i {
            color: $primary-color;
            font-size: 1.2rem;
        }
    }
    
    .testimonial-author {
        font-weight: 600;
        color: $primary-color;
        font-size: 1rem;
        line-height: 1.4;
    }
}

.quote-icon {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: $primary-color;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    
    i {
        color: white;
        font-size: 1.2rem;
    }
}

/* 相关案例样式 */
.related-cases {
    padding: 80px 0;
    background-color: $light-bg;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
    
    @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.2rem;
    color: $text-color;
    position: relative;
    padding-bottom: 15px;

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: $primary-color;
    }
}


/* CTA部分样式 */
.cta-section {
    background: linear-gradient(135deg, $primary-color, $secondary-color);
    background-size: 200% 200%;
    color: white;
    padding: 80px 0;
    text-align: center;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-icon {
    margin-bottom: 25px;

    i {
        font-size: 3.5rem;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            background: rgba(255, 255, 255, 0.2);
        }
    }
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.cta-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;

    @media (max-width: 576px) {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary {
        padding: 14px 32px;
        font-size: 1.1rem;
        font-weight: 600;
        background-color: #fff;
        color: $primary-color;
        border: none;
        border-radius: 30px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        text-decoration: none;

        i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);

            i {
                transform: translateX(5px);
            }
        }
    }

    .btn-outline {
        background: transparent;
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.6);
        padding: 14px 32px;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 30px;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
            transform: translateY(-3px);
        }
    }
}
</style>