ct/app/pages/yuxi/industry-solutions/index.vue

<script lang="ts" setup>
/**
 * 行业解决方案页面
 * 基于玉犀科技官网的行业解决方案内容
 */

// 页面SEO配置
useSeoMeta({
  title: '行业解决方案 - 玉犀科技',
  description: '玉犀科技提供智能电动车、智能换电柜等行业解决方案，助力各行业数字化转型',
  keywords: '智能电动车,智能换电柜,行业解决方案,数字化转型,物联网',
  robots: 'index, follow'
})

// 行业解决方案数据
const industrySolutions = ref([
  {
    id: 'smart-ebike',
    title: '智能电动车',
    subtitle: '打造智能电动车时代!方便用户的出行,让骑车出行便捷',
    description: '智能电动车解决方案集成了GPS定位、智能锁车、远程控制等功能，为用户提供便捷、安全的出行体验。通过物联网技术，实现车辆的智能化管理和运营。',
    features: [
      'GPS实时定位追踪',
      '智能锁车系统',
      '远程控制功能',
      '电池状态监控',
      '用户行为分析',
      '运营数据统计'
    ],
    image: 'https://picsum.photos/800/600?random=smart-ebike',
    applications: [
      '共享电动车运营',
      '企业通勤服务',
      '景区游览车辆',
      '校园出行服务'
    ]
  },
  {
    id: 'smart-battery-cabinet',
    title: '智能换电柜',
    subtitle: '智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题',
    description: '智能换电柜系统通过集中式电池管理，为用户提供快速、便捷的电池更换服务。系统支持多种电池规格，具备智能识别、安全防护、远程监控等功能。',
    features: [
      '智能电池识别',
      '快速换电服务',
      '电池状态监控',
      '安全防护系统',
      '远程运维管理',
      '用户数据分析'
    ],
    image: 'https://picsum.photos/800/600?random=battery-cabinet',
    applications: [
      '电动车换电服务',
      '物流配送车辆',
      '外卖配送车辆',
      '共享出行平台'
    ]
  }
])

// 行业应用场景
const industryScenarios = ref([
  {
    id: 'smart-restaurant',
    title: '智慧餐饮',
    description: '为餐饮行业提供智能点餐、排队管理、会员系统等解决方案',
    icon: 'i-lucide-utensils',
    features: ['智能点餐系统', '排队管理', '会员管理', '数据分析']
  },
  {
    id: 'smart-apartment',
    title: '智慧公寓',
    description: '为公寓管理提供智能门锁、水电管理、租户服务等解决方案',
    icon: 'i-lucide-building',
    features: ['智能门锁', '水电管理', '租户服务', '物业管理']
  },
  {
    id: 'smart-park',
    title: '智慧园区',
    description: '为园区提供智能停车、访客管理、设备监控等解决方案',
    icon: 'i-lucide-map-pin',
    features: ['智能停车', '访客管理', '设备监控', '园区服务']
  },
  {
    id: 'smart-hospital',
    title: '智慧医疗',
    description: '为医疗机构提供智能设备管理、患者服务、数据统计等解决方案',
    icon: 'i-lucide-heart',
    features: ['设备管理', '患者服务', '数据统计', '医疗安全']
  }
])

// 技术架构
const technicalArchitecture = ref([
  {
    title: '硬件层',
    description: '智能硬件设备，支持多种通信协议',
    icon: 'i-lucide-cpu',
    color: 'bg-blue-100 text-blue-600'
  },
  {
    title: '通信层',
    description: '4G/5G、WiFi、蓝牙等多种通信方式',
    icon: 'i-lucide-wifi',
    color: 'bg-green-100 text-green-600'
  },
  {
    title: '平台层',
    description: '云端管理平台，统一设备管理',
    icon: 'i-lucide-cloud',
    color: 'bg-purple-100 text-purple-600'
  },
  {
    title: '应用层',
    description: '用户端APP，管理端系统',
    icon: 'i-lucide-smartphone',
    color: 'bg-orange-100 text-orange-600'
  }
])

// 成功案例
const successCases = ref([
  {
    title: '某大型园区智能停车项目',
    description: '部署智能停车系统，提升停车效率30%，用户满意度95%',
    result: '效率提升30%',
    image: 'https://picsum.photos/400/300?random=parking'
  },
  {
    title: '共享电动车运营平台',
    description: '为某城市提供共享电动车解决方案，日活用户超过10万',
    result: '日活10万+',
    image: 'https://picsum.photos/400/300?random=ebike-platform'
  },
  {
    title: '智能换电柜网络',
    description: '建设覆盖全市的智能换电柜网络，服务用户超过50万',
    result: '服务50万+',
    image: 'https://picsum.photos/400/300?random=battery-network'
  }
])
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面头部 -->
    <section class="bg-gradient-to-br from-green-600 to-emerald-700 text-white py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-6">行业解决方案</h1>
        <p class="text-xl md:text-2xl text-green-100 max-w-3xl mx-auto">
          为各行业提供专业的物联网解决方案，助力数字化转型
        </p>
      </div>
    </section>

    <!-- 主要解决方案 -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">核心解决方案</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            基于物联网技术的行业解决方案，为各行业提供智能化升级服务
          </p>
        </div>

        <div class="space-y-20">
          <div
            v-for="(solution, index) in industrySolutions"
            :key="solution.id"
            class="group"
          >
            <div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 lg:space-x-12"
                 :class="{ 'lg:flex-row-reverse lg:space-x-reverse': index % 2 === 1 }">
              <!-- 图片 -->
              <div class="flex-shrink-0">
                <div class="relative overflow-hidden rounded-2xl shadow-xl">
                  <img 
                    :src="solution.image" 
                    :alt="solution.title"
                    class="w-96 h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
                </div>
              </div>

              <!-- 内容 -->
              <div class="flex-1">
                <h3 class="text-3xl font-bold text-gray-900 mb-4">{{ solution.title }}</h3>
                <p class="text-xl text-green-600 font-medium mb-6">{{ solution.subtitle }}</p>
                <p class="text-gray-600 mb-8 leading-relaxed">{{ solution.description }}</p>
                
                <!-- 特性列表 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                  <div
                    v-for="feature in solution.features"
                    :key="feature"
                    class="flex items-center text-gray-600"
                  >
                    <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" />
                    {{ feature }}
                  </div>
                </div>

                <!-- 应用场景 -->
                <div class="mb-8">
                  <h4 class="text-lg font-semibold text-gray-900 mb-3">应用场景：</h4>
                  <div class="flex flex-wrap gap-2">
                    <span
                      v-for="app in solution.applications"
                      :key="app"
                      class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm"
                    >
                      {{ app }}
                    </span>
                  </div>
                </div>

                <NuxtLink 
                  :to="`/yuxi/industry-solutions/${solution.id}`"
                  class="inline-flex items-center px-8 py-4 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
                >
                  了解更多
                  <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行业应用场景 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">多行业应用</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            覆盖多个行业领域，为不同场景提供专业的解决方案
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="scenario in industryScenarios"
            :key="scenario.id"
            class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
          >
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <UIcon :name="scenario.icon" class="w-8 h-8 text-green-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3 text-center">{{ scenario.title }}</h3>
            <p class="text-gray-600 mb-4 text-center">{{ scenario.description }}</p>
            <ul class="space-y-2">
              <li
                v-for="feature in scenario.features"
                :key="feature"
                class="text-sm text-gray-500 flex items-center"
              >
                <UIcon name="i-lucide-check" class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
                {{ feature }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术架构 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">技术架构</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            基于分层架构设计，确保系统的稳定性和可扩展性
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(layer, index) in technicalArchitecture"
            :key="layer.title"
            class="text-center group"
          >
            <div class="relative">
              <!-- 连接线 -->
              <div 
                v-if="index < technicalArchitecture.length - 1"
                class="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gray-300 z-0"
              ></div>
              
              <div class="relative z-10">
                <div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"
                     :class="layer.color">
                  <UIcon :name="layer.icon" class="w-10 h-10" />
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ layer.title }}</h3>
                <p class="text-gray-600">{{ layer.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">成功案例</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            丰富的项目经验，为各行业客户提供优质服务
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="caseItem in successCases"
            :key="caseItem.title"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow group"
          >
            <div class="relative h-48 overflow-hidden">
              <img 
                :src="caseItem.image" 
                :alt="caseItem.title"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
                {{ caseItem.result }}
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ caseItem.title }}</h3>
              <p class="text-gray-600">{{ caseItem.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-green-600 text-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">需要行业解决方案？</h2>
        <p class="text-xl text-green-100 mb-8">
          我们的专业团队将为您提供最适合的行业解决方案
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <NuxtLink 
            to="/yuxi/contact"
            class="px-8 py-4 bg-white hover:bg-gray-100 text-green-600 font-semibold rounded-lg transition-colors"
          >
            联系我们
          </NuxtLink>
          <NuxtLink 
            to="/yuxi/shared-solutions"
            class="px-8 py-4 bg-green-500 hover:bg-green-400 text-white font-semibold rounded-lg transition-colors"
          >
            查看共享方案
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
</style>