208 lines
8.1 KiB
Vue
208 lines
8.1 KiB
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> |