{"file":"products.vue2.mjs","mappings":";;;;;;;;;;AA0GM,UAAA,EAAE,EAAE,IAAI,QAAQ;AAGtB,UAAM,oBAAoB;AAAA,MACxB;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAEpB;AAGA,UAAM,WAAW;AAAA,MACf;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,EAAE,kCAAkC;AAAA,MAC/C;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,EAAE,iCAAiC;AAAA,MAC9C;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,EAAE,kCAAkC;AAAA,MAAA;AAAA,IAEjD;AAGA,UAAM,aAAa;AAAA,MACjB;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,MAAA;AAAA,IAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../../../pages/products.vue"],"sourcesContent":["<template>\r\n  <div>\r\n    <!-- 页面标题 -->\r\n    <HeroBanner \r\n      :title=\"$t('products.hero.title')\" \r\n      :subtitle=\"$t('products.hero.subtitle')\"\r\n    />\r\n\r\n    <!-- 产品分类 -->\r\n    <section class=\"section\">\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\">{{ $t('products.categories.title') }}</h2>\r\n          <p class=\"text-xl text-gray-600 leading-relaxed\">{{ $t('products.categories.subtitle') }}</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 productCategories\" :key=\"index\" class=\"bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1\">\r\n            <div class=\"w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6\">\r\n              <i :class=\"['text-secondary text-2xl', category.icon]\"></i>\r\n            </div>\r\n            <h3 class=\"text-xl font-semibold mb-4\">{{ $t(category.nameKey) }}</h3>\r\n            <p class=\"text-gray-600 leading-relaxed mb-6\">{{ $t(category.descriptionKey) }}</p>\r\n            <a href=\"#product-list\" class=\"inline-flex items-center text-secondary hover:text-secondary/90\">\r\n              {{ $t('products.categories.viewProducts') }}\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    <section id=\"product-list\" 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\">{{ $t('products.productList.title') }}</h2>\r\n          <p class=\"text-xl text-gray-600 leading-relaxed\">{{ $t('products.productList.subtitle') }}</p>\r\n        </div>\r\n\r\n        <div class=\"space-y-12\">\r\n          <div v-for=\"(product, index) in products\" :key=\"index\" class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\r\n            <div class=\"grid md:grid-cols-3\">\r\n              <div class=\"bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center p-8\">\r\n                <i :class=\"['text-8xl text-secondary', product.icon]\"></i>\r\n              </div>\r\n              <div class=\"md:col-span-2 p-8\">\r\n                <h3 class=\"text-2xl font-semibold mb-4\">{{ $t(product.nameKey) }}</h3>\r\n                <p class=\"text-gray-600 leading-relaxed mb-6\">{{ $t(product.descriptionKey) }}</p>\r\n                <div class=\"mb-6\">\r\n                  <h4 class=\"text-lg font-semibold mb-2\">{{ $t('products.productList.advantages') }}</h4>\r\n                  <ul class=\"space-y-2\">\r\n                    <li v-for=\"(feature, idx) in product.features\" :key=\"idx\" class=\"flex items-start\">\r\n                      <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"></i>\r\n                      <span class=\"text-gray-600\">{{ $t(feature) }}</span>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n                <div class=\"flex justify-between items-center\">\r\n                  <a href=\"#contact\" class=\"btn-primary\">{{ $t('products.productList.inquiry') }}</a>\r\n                  <span class=\"text-gray-500\">{{ $t('products.productList.pricing') }}: {{ product.pricing }}</span>\r\n                </div>\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\">{{ $t('products.advantages.title') }}</h2>\r\n          <p class=\"text-xl text-gray-600 leading-relaxed\">{{ $t('products.advantages.subtitle') }}</p>\r\n        </div>\r\n        \r\n        <div class=\"grid md:grid-cols-4 gap-8\">\r\n          <div v-for=\"(advantage, index) in advantages\" :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-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n              <i :class=\"['text-accent text-2xl', advantage.icon]\"></i>\r\n            </div>\r\n            <h3 class=\"text-xl font-semibold mb-4\">{{ $t(advantage.titleKey) }}</h3>\r\n            <p class=\"text-gray-600 leading-relaxed\">{{ $t(advantage.descriptionKey) }}</p>\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\">{{ $t('products.contact.title') }}</h2>\r\n        <p class=\"text-xl mb-8 max-w-2xl mx-auto leading-relaxed\">{{ $t('products.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('products.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 { useI18n } from 'vue-i18n';\r\n\r\nconst { t } = useI18n();\r\n\r\n// 产品分类\r\nconst productCategories = [\r\n  {\r\n    icon: 'fas fa-server',\r\n    nameKey: 'products.categories.compute.name',\r\n    descriptionKey: 'products.categories.compute.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-database',\r\n    nameKey: 'products.categories.storage.name',\r\n    descriptionKey: 'products.categories.storage.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-sitemap',\r\n    nameKey: 'products.categories.network.name',\r\n    descriptionKey: 'products.categories.network.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-shield-alt',\r\n    nameKey: 'products.categories.security.name',\r\n    descriptionKey: 'products.categories.security.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-chart-line',\r\n    nameKey: 'products.categories.monitoring.name',\r\n    descriptionKey: 'products.categories.monitoring.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-robot',\r\n    nameKey: 'products.categories.ai.name',\r\n    descriptionKey: 'products.categories.ai.description'\r\n  }\r\n];\r\n\r\n// 产品列表\r\nconst products = [\r\n  {\r\n    icon: 'fas fa-server',\r\n    nameKey: 'products.productList.ec2.name',\r\n    descriptionKey: 'products.productList.ec2.description',\r\n    features: [\r\n      'products.productList.ec2.features[0]',\r\n      'products.productList.ec2.features[1]',\r\n      'products.productList.ec2.features[2]',\r\n      'products.productList.ec2.features[3]'\r\n    ],\r\n    pricing: t('products.productList.ec2.pricing')\r\n  },\r\n  {\r\n    icon: 'fas fa-database',\r\n    nameKey: 'products.productList.s3.name',\r\n    descriptionKey: 'products.productList.s3.description',\r\n    features: [\r\n      'products.productList.s3.features[0]',\r\n      'products.productList.s3.features[1]',\r\n      'products.productList.s3.features[2]',\r\n      'products.productList.s3.features[3]'\r\n    ],\r\n    pricing: t('products.productList.s3.pricing')\r\n  },\r\n  {\r\n    icon: 'fas fa-table',\r\n    nameKey: 'products.productList.rds.name',\r\n    descriptionKey: 'products.productList.rds.description',\r\n    features: [\r\n      'products.productList.rds.features[0]',\r\n      'products.productList.rds.features[1]',\r\n      'products.productList.rds.features[2]',\r\n      'products.productList.rds.features[3]'\r\n    ],\r\n    pricing: t('products.productList.rds.pricing')\r\n  }\r\n];\r\n\r\n// 服务优势\r\nconst advantages = [\r\n  {\r\n    icon: 'fas fa-tachometer-alt',\r\n    titleKey: 'products.advantages.deployment.title',\r\n    descriptionKey: 'products.advantages.deployment.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-hand-holding-usd',\r\n    titleKey: 'products.advantages.cost.title',\r\n    descriptionKey: 'products.advantages.cost.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-lock',\r\n    titleKey: 'products.advantages.security.title',\r\n    descriptionKey: 'products.advantages.security.description'\r\n  },\r\n  {\r\n    icon: 'fas fa-headset',\r\n    titleKey: 'products.advantages.support.title',\r\n    descriptionKey: 'products.advantages.support.description'\r\n  }\r\n];\r\n</script> "],"version":3}