ct/app/components/index/item5.vue

<template>
  <UPage>
    <UPageHero
        :description="page.description"
        :title="page.title"
        :ui="{
        title: '!mx-auto',
        description: '!mx-auto',
      }"
    />

    <UPageSection
        :ui="{
        container: '!pt-0 '
      }"
    >
      <Motion
          v-for="(product, index) in products"
          :key="index"
          :in-view-options="{ once: true }"
          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
          :transition="{ delay: 0.2 * index }"
          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
      >
        <UPageCard
            :description="product.description"
            :orientation="'horizontal'"
            :reverse="index % 2 !== 0"
            :title="product.title"
            :ui="{
            wrapper: 'max-sm:order-last'
          }"
            class="group"
            spotlight
            variant="naked"
        >
          <template #leading>
            <span class="text-sm text-muted">
              {{ product.category }}
            </span>
          </template>
          <template #footer>
            <ULink
                :to="product.url"
                class="text-sm text-primary flex items-center"
            >
              查看详情
              <UIcon
                  class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
                  name="i-lucide-arrow-right"
              />
            </ULink>
          </template>

          <img
              :alt="product.title"
              :src="product.image"
              class="object-cover w-96 h-96 rounded-lg "
          >


        </UPageCard>
      </Motion>
    </UPageSection>
  </UPage>
</template>

<script setup>
// 页面配置
const page = {
  title: '联网智能硬件',
  description: '专业智能锁具与联网控制器解决方案，为传统设备提供智能化升级服务'
}

// 产品数据
const products = [
  {
    title: '锁',
    category: '智能锁具',
    description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏(延伸)，远程授权自动开锁，支持应急开锁(延伸)，支持短信远程修改相关参数。',
    url: '/products/lock',
    image: 'https://ccttiot.com/storage/gongsi_img/20240625/4ac672b229c5275b943f718f87aeaf19.jpg'
  },
  {
    title: '联网控制器',
    category: '控制器设备',
    description: '通过改造传统传感器PLC/皮频器等实现快速联接(无需部署新设备)。通过灵活部署，快速形成各领域的物联网解决方案;有效降低用户改造、部署、维护成本。',
    url: '/products/controller',
    image: 'https://ccttiot.com/storage/gongsi_img/20240625/834f1561d26420f40225a9953d76f3dc.jpg'
  }
]
</script>

<style scoped>
/* 自定义样式调整 */
:deep(.u-page-card) {
  margin-bottom: 3rem;
}

:deep(.u-page-card__content) {
  padding: 2rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.u-page-card) {
    margin-bottom: 2rem;
  }

  :deep(.u-page-card__content) {
    padding: 1.5rem;
  }
}
</style>