114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
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> |