{"version":3,"file":"cases.vue2.mjs","sources":["../../../../pages/cases.vue"],"sourcesContent":["<template>\r\n  <div>\r\n    <!-- 页面标题 -->\r\n    <HeroBanner \r\n      :title=\"$t('cases.hero.title')\" \r\n      :subtitle=\"$t('cases.hero.subtitle')\"\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\">{{ $t('cases.filter.byIndustry') }}</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                  {{ $t('cases.filter.all') }}\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\">{{ $t('cases.filter.sortBy') }}</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\">{{ $t('cases.filter.latest') }}</option>\r\n                <option value=\"default\">{{ $t('cases.filter.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\">{{ $t('cases.noResults.text') }}</p>\r\n          <button @click=\"clearIndustryFilters\" class=\"mt-4 text-secondary hover:text-secondary/90\">\r\n            {{ $t('cases.noResults.clearFilters') }}\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                {{ $t(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\">{{ $t(case_item.titleKey) }}</h3>\r\n              <p class=\"text-gray-600 mb-6\">{{ $t(case_item.summaryKey) }}</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                  {{ $t('cases.caseDetail.readDetails') }}\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\">{{ $t(selectedCase.titleKey) }}</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              {{ $t(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\">{{ $t('cases.caseDetail.background') }}</h4>\r\n          <p class=\"text-gray-600 mb-6\">{{ $t(selectedCase.backgroundKey) }}</p>\r\n          \r\n          <h4 class=\"text-xl font-semibold mb-4\">{{ $t('cases.caseDetail.challenges') }}</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              {{ $t(challenge) }}\r\n            </li>\r\n          </ul>\r\n          \r\n          <h4 class=\"text-xl font-semibold mb-4\">{{ $t('cases.caseDetail.solution') }}</h4>\r\n          <p class=\"text-gray-600 mb-4\">{{ $t(selectedCase.solutionKey) }}</p>\r\n          \r\n          <h4 class=\"text-xl font-semibold mb-4\">{{ $t('cases.caseDetail.results') }}</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              {{ $t(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              {{ $t('cases.caseDetail.close') }}\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\">{{ $t('cases.contact.title') }}</h2>\r\n        <p class=\"text-xl mb-8 max-w-2xl mx-auto leading-relaxed\">{{ $t('cases.contact.subtitle') }}</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          {{ $t('cases.contact.button') }}\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\nimport { useI18n } from 'vue-i18n';\r\n\r\nconst { t } = useI18n();\r\n\r\n// 所有行业标签\r\nconst industries = [\r\n  t('cases.industries.finance'), \r\n  t('cases.industries.ecommerce'), \r\n  t('cases.industries.manufacturing'), \r\n  t('cases.industries.healthcare'), \r\n  t('cases.industries.education'), \r\n  t('cases.industries.government'), \r\n  t('cases.industries.media'), \r\n  t('cases.industries.logistics')\r\n];\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    titleKey: 'cases.caseStudies.ecommerce.title',\r\n    industry: 'cases.caseStudies.ecommerce.industry',\r\n    date: '2023-05-15',\r\n    summaryKey: 'cases.caseStudies.ecommerce.summary',\r\n    backgroundKey: 'cases.caseStudies.ecommerce.background',\r\n    challenges: [\r\n      'cases.caseStudies.ecommerce.challenges[0]',\r\n      'cases.caseStudies.ecommerce.challenges[1]',\r\n      'cases.caseStudies.ecommerce.challenges[2]',\r\n      'cases.caseStudies.ecommerce.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.ecommerce.solution',\r\n    results: [\r\n      'cases.caseStudies.ecommerce.results[0]',\r\n      'cases.caseStudies.ecommerce.results[1]',\r\n      'cases.caseStudies.ecommerce.results[2]',\r\n      'cases.caseStudies.ecommerce.results[3]',\r\n      'cases.caseStudies.ecommerce.results[4]'\r\n    ]\r\n  },\r\n  {\r\n    titleKey: 'cases.caseStudies.finance.title',\r\n    industry: 'cases.caseStudies.finance.industry',\r\n    date: '2023-03-20',\r\n    summaryKey: 'cases.caseStudies.finance.summary',\r\n    backgroundKey: 'cases.caseStudies.finance.background',\r\n    challenges: [\r\n      'cases.caseStudies.finance.challenges[0]',\r\n      'cases.caseStudies.finance.challenges[1]',\r\n      'cases.caseStudies.finance.challenges[2]',\r\n      'cases.caseStudies.finance.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.finance.solution',\r\n    results: [\r\n      'cases.caseStudies.finance.results[0]',\r\n      'cases.caseStudies.finance.results[1]',\r\n      'cases.caseStudies.finance.results[2]',\r\n      'cases.caseStudies.finance.results[3]',\r\n      'cases.caseStudies.finance.results[4]'\r\n    ]\r\n  },\r\n  {\r\n    titleKey: 'cases.caseStudies.healthcare.title',\r\n    industry: 'cases.caseStudies.healthcare.industry',\r\n    date: '2022-11-10',\r\n    summaryKey: 'cases.caseStudies.healthcare.summary',\r\n    backgroundKey: 'cases.caseStudies.healthcare.background',\r\n    challenges: [\r\n      'cases.caseStudies.healthcare.challenges[0]',\r\n      'cases.caseStudies.healthcare.challenges[1]',\r\n      'cases.caseStudies.healthcare.challenges[2]',\r\n      'cases.caseStudies.healthcare.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.healthcare.solution',\r\n    results: [\r\n      'cases.caseStudies.healthcare.results[0]',\r\n      'cases.caseStudies.healthcare.results[1]',\r\n      'cases.caseStudies.healthcare.results[2]',\r\n      'cases.caseStudies.healthcare.results[3]',\r\n      'cases.caseStudies.healthcare.results[4]'\r\n    ]\r\n  },\r\n  {\r\n    titleKey: 'cases.caseStudies.manufacturing.title',\r\n    industry: 'cases.caseStudies.manufacturing.industry',\r\n    date: '2022-09-05',\r\n    summaryKey: 'cases.caseStudies.manufacturing.summary',\r\n    backgroundKey: 'cases.caseStudies.manufacturing.background',\r\n    challenges: [\r\n      'cases.caseStudies.manufacturing.challenges[0]',\r\n      'cases.caseStudies.manufacturing.challenges[1]',\r\n      'cases.caseStudies.manufacturing.challenges[2]',\r\n      'cases.caseStudies.manufacturing.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.manufacturing.solution',\r\n    results: [\r\n      'cases.caseStudies.manufacturing.results[0]',\r\n      'cases.caseStudies.manufacturing.results[1]',\r\n      'cases.caseStudies.manufacturing.results[2]',\r\n      'cases.caseStudies.manufacturing.results[3]',\r\n      'cases.caseStudies.manufacturing.results[4]'\r\n    ]\r\n  },\r\n  {\r\n    titleKey: 'cases.caseStudies.logistics.title',\r\n    industry: 'cases.caseStudies.logistics.industry',\r\n    date: '2022-07-15',\r\n    summaryKey: 'cases.caseStudies.logistics.summary',\r\n    backgroundKey: 'cases.caseStudies.logistics.background',\r\n    challenges: [\r\n      'cases.caseStudies.logistics.challenges[0]',\r\n      'cases.caseStudies.logistics.challenges[1]',\r\n      'cases.caseStudies.logistics.challenges[2]',\r\n      'cases.caseStudies.logistics.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.logistics.solution',\r\n    results: [\r\n      'cases.caseStudies.logistics.results[0]',\r\n      'cases.caseStudies.logistics.results[1]',\r\n      'cases.caseStudies.logistics.results[2]',\r\n      'cases.caseStudies.logistics.results[3]',\r\n      'cases.caseStudies.logistics.results[4]'\r\n    ]\r\n  },\r\n  {\r\n    titleKey: 'cases.caseStudies.education.title',\r\n    industry: 'cases.caseStudies.education.industry',\r\n    date: '2022-05-08',\r\n    summaryKey: 'cases.caseStudies.education.summary',\r\n    backgroundKey: 'cases.caseStudies.education.background',\r\n    challenges: [\r\n      'cases.caseStudies.education.challenges[0]',\r\n      'cases.caseStudies.education.challenges[1]',\r\n      'cases.caseStudies.education.challenges[2]',\r\n      'cases.caseStudies.education.challenges[3]'\r\n    ],\r\n    solutionKey: 'cases.caseStudies.education.solution',\r\n    results: [\r\n      'cases.caseStudies.education.results[0]',\r\n      'cases.caseStudies.education.results[1]',\r\n      'cases.caseStudies.education.results[2]',\r\n      'cases.caseStudies.education.results[3]',\r\n      'cases.caseStudies.education.results[4]'\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>"],"names":[],"mappings":"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"}