1 line
19 KiB
JSON
1 line
19 KiB
JSON
{"file":"cases.vue2.mjs","mappings":"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","names":[],"sources":["../../../../pages/cases.vue"],"sourcesContent":["<template>\r\n <div>\r\n <!-- 页面标题 -->\r\n <HeroBanner \r\n title=\"客户案例\" \r\n subtitle=\"看看其他企业如何利用AWS云服务提升业务价值\"\r\n />\r\n\r\n <!-- 案例筛选 -->\r\n <section class=\"py-10\">\r\n <div class=\"container\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\r\n <div class=\"flex flex-wrap items-center justify-between gap-4\">\r\n <div class=\"flex flex-wrap items-center gap-4\">\r\n <span class=\"text-gray-700 font-medium\">按行业筛选：</span>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <button \r\n v-for=\"industry in industries\" \r\n :key=\"industry\"\r\n @click=\"toggleIndustryFilter(industry)\"\r\n :class=\"[\r\n 'px-4 py-2 rounded-full text-sm',\r\n selectedIndustries.includes(industry) \r\n ? 'bg-secondary text-white' \r\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\r\n ]\"\r\n >\r\n {{ industry }}\r\n </button>\r\n <button \r\n @click=\"clearIndustryFilters\"\r\n class=\"px-4 py-2 rounded-full text-sm bg-gray-100 text-gray-700 hover:bg-gray-200\"\r\n >\r\n 全部\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"flex items-center\">\r\n <span class=\"text-gray-700 font-medium mr-4\">排序方式：</span>\r\n <select \r\n v-model=\"sortBy\"\r\n class=\"px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-secondary focus:border-transparent\"\r\n >\r\n <option value=\"latest\">最新案例</option>\r\n <option value=\"default\">默认排序</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- 案例列表 -->\r\n <section class=\"py-12\">\r\n <div class=\"container\">\r\n <div v-if=\"filteredCases.length === 0\" class=\"text-center py-16\">\r\n <i class=\"fas fa-search text-4xl text-gray-300 mb-4\"></i>\r\n <p class=\"text-xl text-gray-500\">没有找到符合条件的案例</p>\r\n <button @click=\"clearIndustryFilters\" class=\"mt-4 text-secondary hover:text-secondary/90\">\r\n 清除筛选条件\r\n </button>\r\n </div>\r\n \r\n <div v-else class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n <div \r\n v-for=\"(case_item, index) in filteredCases\" \r\n :key=\"index\" \r\n class=\"bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1\"\r\n >\r\n <div class=\"h-48 bg-gray-200 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 bg-secondary text-white px-3 py-1 text-sm\">\r\n {{ case_item.industry }}\r\n </div>\r\n </div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-2xl font-semibold mb-4\">{{ case_item.title }}</h3>\r\n <p class=\"text-gray-600 mb-6\">{{ case_item.summary }}</p>\r\n <div class=\"flex justify-between items-center\">\r\n <button @click=\"openCaseDetail(case_item)\" class=\"text-secondary hover:text-secondary/90 flex items-center\">\r\n 阅读详情\r\n <i class=\"fas fa-arrow-right ml-2\"></i>\r\n </button>\r\n <span class=\"text-sm text-gray-500\">{{ case_item.date }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- 案例详情弹窗 -->\r\n <div v-if=\"selectedCase\" class=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4\">\r\n <div class=\"bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto\">\r\n <div class=\"p-6 border-b\">\r\n <div class=\"flex justify-between items-center\">\r\n <h3 class=\"text-2xl font-bold\">{{ selectedCase.title }}</h3>\r\n <button @click=\"selectedCase = null\" class=\"text-gray-500 hover:text-gray-700\">\r\n <i class=\"fas fa-times text-xl\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"p-6\">\r\n <div class=\"flex flex-wrap gap-2 mb-6\">\r\n <span class=\"px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full\">\r\n {{ selectedCase.industry }}\r\n </span>\r\n <span class=\"px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full\">\r\n {{ selectedCase.date }}\r\n </span>\r\n </div>\r\n \r\n <h4 class=\"text-xl font-semibold mb-4\">客户背景</h4>\r\n <p class=\"text-gray-600 mb-6\">{{ selectedCase.background }}</p>\r\n \r\n <h4 class=\"text-xl font-semibold mb-4\">面临挑战</h4>\r\n <ul class=\"list-disc pl-5 mb-6 space-y-2\">\r\n <li v-for=\"(challenge, idx) in selectedCase.challenges\" :key=\"idx\" class=\"text-gray-600\">\r\n {{ challenge }}\r\n </li>\r\n </ul>\r\n \r\n <h4 class=\"text-xl font-semibold mb-4\">解决方案</h4>\r\n <p class=\"text-gray-600 mb-4\">{{ selectedCase.solution }}</p>\r\n \r\n <h4 class=\"text-xl font-semibold mb-4\">业务成果</h4>\r\n <ul class=\"list-disc pl-5 mb-6 space-y-2\">\r\n <li v-for=\"(result, idx) in selectedCase.results\" :key=\"idx\" class=\"text-gray-600\">\r\n {{ result }}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"p-6 border-t bg-gray-50\">\r\n <div class=\"flex justify-end\">\r\n <button @click=\"selectedCase = null\" class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300\">\r\n 关闭\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- 联系我们 -->\r\n <section class=\"py-16 bg-primary text-white\">\r\n <div class=\"container text-center\">\r\n <h2 class=\"text-4xl font-bold mb-6\">想了解更多客户案例?</h2>\r\n <p class=\"text-xl mb-8 max-w-2xl mx-auto leading-relaxed\">联系我们获取更多行业相关的AWS云服务成功案例</p>\r\n <NuxtLink to=\"/contact\" class=\"inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold\">\r\n 联系我们\r\n <i class=\"fas fa-arrow-right ml-2\"></i>\r\n </NuxtLink>\r\n </div>\r\n </section>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from 'vue';\r\n\r\n// 所有行业标签\r\nconst industries = ['金融', '电子商务', '制造', '医疗', '教育', '政府', '媒体', '物流'];\r\n\r\n// 筛选和排序状态\r\nconst selectedIndustries = ref<string[]>([]);\r\nconst sortBy = ref('default');\r\nconst selectedCase = ref<any>(null);\r\n\r\n// 客户案例数据\r\nconst caseStudies = [\r\n {\r\n title: '某大型电商平台',\r\n industry: '电子商务',\r\n date: '2023-05-15',\r\n summary: '通过AWS云服务，成功应对每年双11销售高峰，提升了网站性能和用户体验，同时降低了运营成本。',\r\n background: '该客户是中国领先的电子商务平台，年交易额超过100亿元，拥有超过1000万注册用户。随着业务快速发展，特别是在促销活动期间，其传统IT架构难以应对流量峰值。',\r\n challenges: [\r\n '传统IT基础设施难以应对促销期间10倍以上的流量峰值',\r\n '系统扩容周期长，难以快速响应业务需求',\r\n '运维成本高，人力资源紧张',\r\n '数据安全和合规要求严格'\r\n ],\r\n solution: '我们为客户设计并实施了基于AWS的弹性扩展解决方案。使用EC2弹性计算实例和Auto Scaling自动扩展服务，实现了基于流量的自动扩缩容；采用Amazon RDS提供高可用数据库服务；利用ElastiCache加速数据访问；通过CloudFront CDN加速全国内容分发。',\r\n results: [\r\n '成功应对促销期间20倍的流量增长，系统零宕机',\r\n '页面加载时间减少40%，用户体验显著提升',\r\n '运维工作量减少60%，IT团队可以更专注于业务创新',\r\n '总体IT成本降低30%，特别是在非促销期间',\r\n '系统可靠性提升到99.99%'\r\n ]\r\n },\r\n {\r\n title: '某股份制银行',\r\n industry: '金融',\r\n date: '2023-03-20',\r\n summary: '采用AWS金融云解决方案，构建了高安全、高可用的核心业务系统，满足了严格的金融监管要求。',\r\n background: '该客户是一家拥有50多家分支机构的全国性股份制银行，为了适应数字化转型战略，需要升级其核心业务系统，以提高业务敏捷性和客户体验。',\r\n challenges: [\r\n '金融系统对安全性和可用性要求极高',\r\n '需要满足严格的金融监管合规要求',\r\n '大量敏感数据需要高级别的保护',\r\n '系统升级不能影响正常业务运营'\r\n ],\r\n solution: '我们为客户提供了基于AWS金融云的整体解决方案，包括多区域高可用架构设计、全面的安全防护体系、数据加密和访问控制、灾备和业务连续性方案等。通过与客户IT团队的紧密协作，分阶段实施了系统迁移和升级。',\r\n results: [\r\n '成功构建满足CBRC监管要求的高合规云平台',\r\n '系统可用性达到99.999%，满足金融业务连续性要求',\r\n '数据安全问题零发生，通过了多次安全审计',\r\n '业务处理能力提升3倍，支持快速创新',\r\n '新业务上线时间从月级缩短到周级'\r\n ]\r\n },\r\n {\r\n title: '某医疗健康机构',\r\n industry: '医疗',\r\n date: '2022-11-10',\r\n summary: '利用AWS的AI/ML服务，构建了智能医疗影像分析系统，提高了诊断效率和准确性。',\r\n background: '该客户是一家拥有多家医院的医疗集团，面临医疗影像数据激增、专业放射科医师短缺的挑战，希望通过AI技术提高医疗影像诊断的效率和准确性。',\r\n challenges: [\r\n '每天产生海量医疗影像数据，存储和处理压力大',\r\n '专业放射科医师资源有限，工作负担重',\r\n '传统诊断方法耗时长，难以满足快速增长的需求',\r\n '医疗数据安全和患者隐私保护要求高'\r\n ],\r\n solution: '我们基于AWS的医疗解决方案，构建了云端医疗影像存储和AI辅助诊断系统。使用S3存储海量影像数据，通过SageMaker构建和部署AI诊断模型，结合医疗专用的安全和合规措施，确保数据安全和患者隐私。',\r\n results: [\r\n '医疗影像诊断效率提升60%，大幅减轻医师工作负担',\r\n 'AI辅助诊断系统准确率达到95%以上，优于行业平均水平',\r\n '患者等待时间从平均24小时减少到6小时',\r\n '医疗数据安全得到全面保障，符合国家相关法规要求',\r\n '建立了可持续的医疗AI创新平台，持续改进诊断能力'\r\n ]\r\n },\r\n {\r\n title: '某制造业巨头',\r\n industry: '制造',\r\n date: '2022-09-05',\r\n summary: '通过AWS工业互联网解决方案，实现了生产设备智能监控和预测性维护，提高了生产效率，降低了设备故障率。',\r\n background: '该客户是一家大型制造企业，拥有多个生产基地和数千台生产设备。传统的设备维护模式效率低下，难以预防突发故障，导致生产线停机和效率损失。',\r\n challenges: [\r\n '设备分散在多个地区，管理和监控困难',\r\n '缺乏有效的设备健康状态监测手段',\r\n '计划外停机造成巨大的生产损失',\r\n '海量设备数据无法有效收集和分析'\r\n ],\r\n solution: '我们基于AWS IoT服务构建了工业互联网平台，实现设备数据实时收集和分析。通过AWS IoT Core连接设备，利用Kinesis处理实时数据流，结合SageMaker构建预测性维护模型，最终通过可视化仪表板展示设备健康状态和预警信息。',\r\n results: [\r\n '实现了5000多台设备的实时监控和健康管理',\r\n '设备计划外停机时间减少70%，生产效率提升25%',\r\n '维护成本降低40%，设备使用寿命延长15%',\r\n '通过预测性维护，每年节约维修成本数百万元',\r\n '建立了数据驱动的智能制造基础，支持企业数字化转型'\r\n ]\r\n },\r\n {\r\n title: '某大型物流企业',\r\n industry: '物流',\r\n date: '2022-07-15',\r\n summary: '利用AWS的大数据和机器学习服务，优化了配送路线和资源调度，提高了配送效率，降低了运营成本。',\r\n background: '该客户是一家覆盖全国的综合物流服务提供商，日处理订单量超过100万单。随着业务规模扩大，传统的人工调度方式难以应对复杂多变的配送需求，效率低下且成本高昂。',\r\n challenges: [\r\n '配送路线规划复杂，人工调度效率低',\r\n '车辆和人力资源分配不均衡，利用率低',\r\n '无法根据实时路况和订单变化做出快速调整',\r\n '缺乏数据支持的决策机制，难以持续优化'\r\n ],\r\n solution: '我们为客户构建了基于AWS的智能物流调度平台。利用AWS的大数据服务处理和分析海量订单和位置数据，通过机器学习算法建立智能路径规划和资源调度模型，并结合地图服务实现实时路况感知和动态调整。',\r\n results: [\r\n '配送效率提升30%，平均配送时间缩短1.5小时',\r\n '车辆利用率提高40%，每年节约燃油成本数百万元',\r\n '客户满意度提升25%，准时送达率达到98%',\r\n '系统自动化程度高，调度人员需求减少50%',\r\n '建立了数据驱动的持续优化机制，物流成本逐年下降'\r\n ]\r\n },\r\n {\r\n title: '某在线教育平台',\r\n industry: '教育',\r\n date: '2022-05-08',\r\n summary: '通过AWS云服务，构建了高可靠、低延迟的在线教育直播和点播平台，支持百万级学生同时在线学习。',\r\n background: '该客户是一家专注K12领域的在线教育平台，提供直播和点播课程服务。随着用户规模快速增长，特别是在疫情期间，平台面临巨大的并发访问压力和用户体验挑战。',\r\n challenges: [\r\n '高峰期需支持百万级用户同时在线学习',\r\n '直播课程对系统稳定性和延迟要求高',\r\n '教学视频存储和分发成本高',\r\n '用户分布广泛，跨地区服务质量难以保证'\r\n ],\r\n solution: '我们基于AWS设计了可弹性扩展的在线教育平台解决方案。使用EC2和Auto Scaling服务支持高并发访问，通过MediaLive和MediaPackage提供低延迟直播服务，利用S3和CloudFront实现视频内容的高效存储和分发，同时通过多区域部署确保全国范围内的服务质量。',\r\n results: [\r\n '成功支持200万+用户同时在线学习，系统稳定无卡顿',\r\n '直播延迟控制在2秒以内，大幅提升师生互动体验',\r\n '通过内容分发网络，全国各地用户访问速度提升60%',\r\n '视频存储和分发成本降低50%，支持业务快速扩张',\r\n '平台可用性达到99.99%，赢得用户信赖'\r\n ]\r\n }\r\n];\r\n\r\n// 行业筛选方法\r\nconst toggleIndustryFilter = (industry: string) => {\r\n if (selectedIndustries.value.includes(industry)) {\r\n selectedIndustries.value = selectedIndustries.value.filter(item => item !== industry);\r\n } else {\r\n selectedIndustries.value.push(industry);\r\n }\r\n};\r\n\r\n// 清除筛选条件\r\nconst clearIndustryFilters = () => {\r\n selectedIndustries.value = [];\r\n};\r\n\r\n// 打开案例详情\r\nconst openCaseDetail = (case_item: any) => {\r\n selectedCase.value = case_item;\r\n};\r\n\r\n// 根据筛选条件和排序获取案例列表\r\nconst filteredCases = computed(() => {\r\n let result = [...caseStudies];\r\n \r\n // 应用行业筛选\r\n if (selectedIndustries.value.length > 0) {\r\n result = result.filter(item => selectedIndustries.value.includes(item.industry));\r\n }\r\n \r\n // 应用排序\r\n if (sortBy.value === 'latest') {\r\n result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());\r\n }\r\n \r\n return result;\r\n});\r\n</script>"],"version":3} |