ct/app/components/index/item5.vue

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Hero Section -->
    <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
      <!-- 背景图片 -->
      <div class="absolute inset-0">
        <img 
          src="https://picsum.photos/1920/1080?random=tech-background" 
          alt="技术背景"
          class="w-full h-full object-cover opacity-20 dark:opacity-10"
        >
        <div class="absolute inset-0 bg-gradient-to-br from-blue-50/80 to-indigo-100/80 dark:from-gray-900/80 dark:to-gray-800/80"></div>
      </div>
      
      <!-- 内容 -->
      <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
            {{ pageData.mainTitle }}
          </h1>
          <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
            {{ pageData.subtitle }}
          </p>
        </div>
      </div>
    </section>

    <!-- 产品展示区域 -->
    <section class="py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
          <!-- 主内容卡片 -->
          <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden">
            <div class="p-8 md:p-12 lg:p-16">
              
              <!-- 产品列表 -->
              <div class="space-y-16 md:space-y-20">
                <div 
                  v-for="(product, index) in pageData.products" 
                  :key="product.id"
                  class="group"
                >
                  <!-- 产品项目 -->
                  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center"
                       :class="{ 'lg:grid-flow-col-dense': index % 2 === 1 }">
                    
                    <!-- 产品图片 -->
                    <div 
                      class="relative order-2 lg:order-1"
                      :class="{ 'lg:order-2': index % 2 === 1 }"
                    >
                      <div class="relative overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-700 p-8">
                        <img 
                          :src="product.image.src" 
                          :alt="product.image.alt"
                          class="w-full h-64 md:h-80 object-contain transition-transform duration-300 group-hover:scale-105"
                        >
                        <!-- 装饰性背景 -->
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-100/50 to-indigo-200/50 dark:from-blue-900/30 dark:to-indigo-800/30 rounded-2xl"></div>
                      </div>
                    </div>

                    <!-- 产品信息 -->
                    <div 
                      class="order-1 lg:order-2"
                      :class="{ 'lg:order-1': index % 2 === 1 }"
                    >
                      <div class="space-y-6">
                        <!-- 产品标题 -->
                        <h3 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
                          {{ product.title }}
                        </h3>

                        <!-- 产品描述 -->
                        <div class="space-y-4">
                          <p 
                            v-for="(paragraph, pIndex) in product.description" 
                            :key="pIndex"
                            class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed"
                          >
                            {{ paragraph }}
                          </p>
                        </div>

                        <!-- 产品特性 -->
                        <div v-if="product.features" class="space-y-3">
                          <h4 class="text-lg font-semibold text-gray-900 dark:text-white">主要特性：</h4>
                          <ul class="space-y-2">
                            <li 
                              v-for="feature in product.features" 
                              :key="feature"
                              class="flex items-start space-x-3"
                            >
                              <UIcon 
                                name="i-lucide-check-circle" 
                                class="w-5 h-5 text-green-500 dark:text-green-400 mt-0.5 flex-shrink-0"
                              />
                              <span class="text-gray-600 dark:text-gray-300">{{ feature }}</span>
                            </li>
                          </ul>
                        </div>

                        <!-- 了解更多按钮 -->
                        <div class="pt-4">
                          <NuxtLink 
                            :to="pageData.learnMoreButton.link"
                            class="inline-flex items-center space-x-2 px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-semibold rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl"
                          >
                            <span>{{ pageData.learnMoreButton.text }}</span>
                            <UIcon 
                              name="i-lucide-arrow-right" 
                              class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1"
                            />
                          </NuxtLink>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 页面数据配置
const pageData = {
  mainTitle: '联网智能硬件',
  subtitle: '专业智能锁具与联网控制器解决方案，为传统设备提供智能化升级服务',
  products: [
    {
      id: 'smart-lock',
      title: '锁',
      image: {
        src: 'https://picsum.photos/600/400?random=smart-lock',
        alt: '智能锁'
      },
      description: [
        'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。',
        'GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏(延伸)，远程授权自动开锁，支持应急开锁(延伸)，支持短信远程修改相关参数。'
      ],
      features: [
        '蓝牙4.0通讯技术，秒连接秒解锁',
        'GPS+移动基站LBS多重精准定位',
        '蓝牙低功耗待机，延长电池寿命',
        '轨迹记录，电子围栏功能',
        '远程授权自动开锁',
        '支持应急开锁和短信远程修改参数'
      ]
    },
    {
      id: 'network-controller',
      title: '联网控制器',
      image: {
        src: 'https://picsum.photos/600/400?random=network-controller',
        alt: '联网控制器'
      },
      description: [
        '通过改造传统传感器/PLC/变频器等实现快速联接(无需部署新设备)。',
        '通过灵活部署，快速形成各领域的物联网解决方案;有效降低用户改造、部署、维护成本。'
      ],
      features: [
        '快速联接传统传感器/PLC/变频器',
        '无需部署新设备，降低改造成本',
        '灵活部署，适应各种应用场景',
        '快速形成物联网解决方案',
        '有效降低部署和维护成本',
        '支持多种工业设备接入'
      ]
    }
  ],
  learnMoreButton: {
    text: '了解更多',
    link: '/products/smart-hardware'
  }
}
</script>

<style scoped>
/* 响应式图片调整 */
@media (max-width: 640px) {
  .object-contain {
    height: 12rem;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .object-contain {
    height: 16rem;
  }
}

/* 悬停效果增强 */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* 平滑过渡 */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
</style>