1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"version":3,"file":"solutions.vue2.mjs","sources":["../../../../pages/solutions.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-20\">\r\n <div class=\"container\">\r\n <div class=\"max-w-4xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-4xl font-bold text-[#333333] mb-4\">AWS云解决方案</h2>\r\n <p class=\"text-xl text-gray-600 leading-relaxed\">基于AWS云服务，为不同行业提供专业解决方案</p>\r\n </div>\r\n \r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n <div v-for=\"(category, index) in solutionCategories\" :key=\"index\" class=\"bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center\">\r\n <div class=\"w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n <i :class=\"['text-secondary text-3xl', category.icon]\"></i>\r\n </div>\r\n <h3 class=\"text-xl font-semibold mb-4\">{{ category.title }}</h3>\r\n <p class=\"text-gray-600 leading-relaxed mb-6\">{{ category.description }}</p>\r\n <a :href=\"'#' + category.id\" class=\"inline-flex items-center text-secondary hover:text-secondary/90\">\r\n 查看详情\r\n <i class=\"fas fa-arrow-right ml-2\"></i>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- 解决方案详情 -->\r\n <div class=\"space-y-16\">\r\n <section v-for=\"(solution, index) in solutions\" :key=\"index\" :id=\"solution.id\" class=\"py-20\" :class=\"index % 2 === 0 ? 'bg-gray-50' : 'bg-white'\">\r\n <div class=\"container\">\r\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\r\n <div :class=\"index % 2 === 1 ? 'md:order-1' : ''\">\r\n <div class=\"bg-gradient-to-br from-secondary/20 to-secondary/10 h-80 rounded-lg flex items-center justify-center\">\r\n <i :class=\"['text-8xl text-secondary', solution.icon]\"></i>\r\n </div>\r\n </div>\r\n <div>\r\n <h2 class=\"text-4xl font-bold text-[#333333] mb-6\">{{ solution.title }}</h2>\r\n <p class=\"text-gray-600 leading-relaxed mb-6\">{{ solution.description }}</p>\r\n <div class=\"mb-8\">\r\n <h4 class=\"text-lg font-semibold mb-4\">解决方案优势</h4>\r\n <ul class=\"space-y-3\">\r\n <li v-for=\"(benefit, idx) in solution.benefits\" :key=\"idx\" class=\"flex items-start\">\r\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-3\"></i>\r\n <span class=\"text-gray-600\">{{ benefit }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"mb-8\">\r\n <h4 class=\"text-lg font-semibold mb-4\">适用行业</h4>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <span v-for=\"(industry, idx) in solution.industries\" :key=\"idx\" class=\"px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm\">\r\n {{ industry }}\r\n </span>\r\n </div>\r\n </div>\r\n <a href=\"#contact\" class=\"btn-primary\">咨询方案</a>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <!-- 实施流程 -->\r\n <section class=\"py-20 bg-gray-50\">\r\n <div class=\"container\">\r\n <div class=\"max-w-4xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-4xl font-bold text-[#333333] mb-4\">解决方案实施流程</h2>\r\n <p class=\"text-xl text-gray-600 leading-relaxed\">专业、高效的项目实施流程，确保方案平稳落地</p>\r\n </div>\r\n \r\n <div class=\"relative\">\r\n <!-- 流程连接线 -->\r\n <div class=\"absolute left-1/2 top-8 bottom-8 w-1 bg-secondary/20 -translate-x-1/2 hidden md:block\"></div>\r\n \r\n <div class=\"space-y-12\">\r\n <div v-for=\"(step, index) in implementationSteps\" :key=\"index\" class=\"flex flex-col md:flex-row md:items-center relative\">\r\n <!-- 步骤编号 -->\r\n <div class=\"md:absolute md:left-1/2 md:-translate-x-1/2 z-10 w-12 h-12 bg-white rounded-full border-4 border-secondary flex items-center justify-center font-bold text-secondary mb-4 md:mb-0 mx-auto md:mx-0\">\r\n {{ index + 1 }}\r\n </div>\r\n \r\n <!-- 步骤内容 -->\r\n <div :class=\"[\r\n 'bg-white p-6 rounded-lg shadow-md w-full md:w-5/12',\r\n index % 2 === 0 ? 'md:mr-auto' : 'md:ml-auto'\r\n ]\">\r\n <h3 class=\"text-xl font-semibold mb-2\">{{ step.title }}</h3>\r\n <p class=\"text-gray-600\">{{ step.description }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- 客户案例展示 -->\r\n <section class=\"py-20\">\r\n <div class=\"container\">\r\n <div class=\"max-w-4xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-4xl font-bold text-[#333333] mb-4\">客户成功案例</h2>\r\n <p class=\"text-xl text-gray-600 leading-relaxed\">我们的解决方案已成功应用于众多行业</p>\r\n </div>\r\n \r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n <div v-for=\"(case_item, index) in caseStudies\" :key=\"index\" class=\"bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1\">\r\n <div class=\"h-48 bg-gray-200\"></div>\r\n <div class=\"p-6\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-xl font-semibold\">{{ case_item.title }}</h3>\r\n <span class=\"px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full\">{{ case_item.industry }}</span>\r\n </div>\r\n <p class=\"text-gray-600 mb-6\">{{ case_item.description }}</p>\r\n <NuxtLink to=\"/cases\" class=\"inline-flex items-center text-secondary hover:text-secondary/90\">\r\n 查看详情\r\n <i class=\"fas fa-arrow-right ml-2\"></i>\r\n </NuxtLink>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- 联系我们 -->\r\n <section id=\"contact\" 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\n// 解决方案分类\r\nconst solutionCategories = [\r\n {\r\n id: 'web-hosting',\r\n icon: 'fas fa-globe',\r\n title: '网站托管',\r\n description: '高性能、高可用的网站托管解决方案，适用于各类网站和Web应用'\r\n },\r\n {\r\n id: 'cloud-migration',\r\n icon: 'fas fa-cloud-upload-alt',\r\n title: '企业上云',\r\n description: '安全、平稳的企业IT系统云迁移方案，最小化业务中断风险'\r\n },\r\n {\r\n id: 'disaster-recovery',\r\n icon: 'fas fa-shield-alt',\r\n title: '灾备方案',\r\n description: '构建可靠的灾难恢复系统，保障业务连续性和数据安全'\r\n },\r\n {\r\n id: 'big-data',\r\n icon: 'fas fa-chart-pie',\r\n title: '大数据分析',\r\n description: '基于AWS大数据服务的数据处理和分析解决方案'\r\n },\r\n {\r\n id: 'microservices',\r\n icon: 'fas fa-cubes',\r\n title: '微服务架构',\r\n description: '基于容器和无服务器技术的现代应用架构解决方案'\r\n },\r\n {\r\n id: 'ai-ml',\r\n icon: 'fas fa-brain',\r\n title: 'AI/机器学习',\r\n description: '利用AWS AI/ML服务快速构建智能应用的解决方案'\r\n }\r\n];\r\n\r\n// 解决方案详情\r\nconst solutions = [\r\n {\r\n id: 'web-hosting',\r\n icon: 'fas fa-globe',\r\n title: '网站托管解决方案',\r\n description: '基于AWS云服务的高性能、高可用、安全的网站托管解决方案，适用于企业官网、电子商务网站、内容管理系统等各类Web应用。利用AWS全球基础设施和CDN服务，为全球用户提供低延迟的访问体验。',\r\n benefits: [\r\n '高可用性架构，99.99%服务可用性保障',\r\n '自动扩展能力，应对流量峰值',\r\n 'CDN加速，全球用户低延迟访问',\r\n '完善的安全防护，包括WAF、DDoS防护等',\r\n '按需付费，降低运营成本'\r\n ],\r\n industries: ['电子商务', '媒体', '教育', '企业服务']\r\n },\r\n {\r\n id: 'cloud-migration',\r\n icon: 'fas fa-cloud-upload-alt',\r\n title: '企业上云解决方案',\r\n description: '为传统IT基础设施提供安全、可靠的云迁移路径，帮助企业实现从本地数据中心到AWS云的平稳过渡。我们的解决方案涵盖评估、规划、迁移和优化的全过程，最大限度地减少业务中断和迁移风险。',\r\n benefits: [\r\n '专业的迁移评估和规划服务',\r\n '多种迁移策略：重新托管、重新平台化、重构等',\r\n '数据安全迁移，确保零数据丢失',\r\n '迁移过程中的业务连续性保障',\r\n '迁移后的性能优化和成本控制'\r\n ],\r\n industries: ['金融', '制造', '零售', '医疗', '政府']\r\n },\r\n {\r\n id: 'disaster-recovery',\r\n icon: 'fas fa-shield-alt',\r\n title: '灾备解决方案',\r\n description: '基于AWS云服务构建可靠的灾难恢复系统，帮助企业应对各种灾难情况下的业务连续性挑战。我们提供从灾备规划到实施、测试和运维的一站式服务，保障企业数据安全和业务连续性。',\r\n benefits: [\r\n '多区域架构，提供地理级别的灾难恢复能力',\r\n '灵活的恢复点目标(RPO)和恢复时间目标(RTO)选项',\r\n '自动化的灾难恢复流程，减少人为错误',\r\n '定期的灾备演练和测试服务',\r\n '成本优化的灾备架构设计'\r\n ],\r\n industries: ['金融', '医疗', '能源', '电信', '政府']\r\n },\r\n {\r\n id: 'big-data',\r\n icon: 'fas fa-chart-pie',\r\n title: '大数据分析解决方案',\r\n description: '利用AWS丰富的大数据服务，构建高效、可扩展的数据处理和分析平台。我们的解决方案可以帮助企业从海量数据中提取价值，支持数据仓库、实时分析、机器学习等多种大数据应用场景。',\r\n benefits: [\r\n '高性能的数据处理能力，处理PB级数据',\r\n '灵活的存储选项，优化成本和性能',\r\n '实时数据处理和分析能力',\r\n '与机器学习服务的无缝集成',\r\n '可视化的数据分析工具'\r\n ],\r\n industries: ['金融', '零售', '医疗', '制造', '物流']\r\n }\r\n];\r\n\r\n// 实施流程\r\nconst implementationSteps = [\r\n {\r\n title: '需求分析',\r\n description: '深入了解客户业务需求和技术环境，确定解决方案目标和范围'\r\n },\r\n {\r\n title: '方案设计',\r\n description: '基于需求分析，设计适合的AWS云服务解决方案架构和实施计划'\r\n },\r\n {\r\n title: '方案实施',\r\n description: '按照实施计划，部署和配置AWS云服务资源，构建解决方案'\r\n },\r\n {\r\n title: '测试验证',\r\n description: '对实施的解决方案进行全面测试，确保功能、性能和安全满足要求'\r\n },\r\n {\r\n title: '上线部署',\r\n description: '解决方案正式上线，确保业务平稳过渡和系统稳定运行'\r\n },\r\n {\r\n title: '运维支持',\r\n description: '提供持续的技术支持和运维服务，保障解决方案长期稳定运行'\r\n }\r\n];\r\n\r\n// 客户案例\r\nconst caseStudies = [\r\n {\r\n title: '某电商平台',\r\n industry: '电子商务',\r\n description: '通过AWS云服务解决方案，成功应对销售高峰，提升了网站性能和用户体验，同时降低了运营成本。'\r\n },\r\n {\r\n title: '某金融机构',\r\n industry: '金融',\r\n description: '采用AWS灾备解决方案，构建了高可用的业务连续性系统，满足了金融行业严格的监管要求。'\r\n },\r\n {\r\n title: '某制造企业',\r\n industry: '制造',\r\n description: '通过企业上云解决方案，成功将IT系统迁移至AWS云平台，提高了系统灵活性，降低了IT维护成本。'\r\n }\r\n];\r\n</script>"],"names":[],"mappings":";;;;;;;;;AAiJA,UAAM,qBAAqB;AAAA,MACzB;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,IAEjB;AAGA,UAAM,YAAY;AAAA,MAChB;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,YAAY,CAAC,QAAQ,MAAM,MAAM,MAAM;AAAA,MACzC;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC3C;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC3C;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAE7C;AAGA,UAAM,sBAAsB;AAAA,MAC1B;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,IAEjB;AAGA,UAAM,cAAc;AAAA,MAClB;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,IAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} |