优化首页联网智能硬件布局
This commit is contained in:
WindowBird
parent
fe130e0971
commit
7c8cc6a87d
|
|
@ -13,6 +13,12 @@ const items = computed<NavigationMenuItem[]>(() => [
|
|||
label: '共享解决方案',
|
||||
active: route.path.startsWith('/sharedSolutions'),
|
||||
children: [
|
||||
{
|
||||
label: '共享电动车',
|
||||
icon: 'i-lucide-car',
|
||||
description: '通过扫码开锁，循环共享',
|
||||
to: '/sharedSolutions/eBike',
|
||||
},
|
||||
{
|
||||
label: '共享单车',
|
||||
icon: 'i-lucide-bike',
|
||||
|
|
@ -37,12 +43,7 @@ const items = computed<NavigationMenuItem[]>(() => [
|
|||
description: '立足医院民生需求而诞生，解决医患家属的休息问题',
|
||||
to: '/sharedSolutions/bed',
|
||||
},
|
||||
{
|
||||
label: '共享电动车',
|
||||
icon: 'i-lucide-car',
|
||||
description: '通过扫码开锁，循环共享',
|
||||
to: '/sharedSolutions/eBike',
|
||||
},
|
||||
|
||||
{
|
||||
label: '共享充电宝',
|
||||
icon: 'i-lucide-battery',
|
||||
|
|
@ -73,23 +74,25 @@ const items = computed<NavigationMenuItem[]>(() => [
|
|||
label: '软件应用开发',
|
||||
active: route.path.startsWith('/softwareDevelopment'),
|
||||
children: [
|
||||
{
|
||||
label: '微信开发',
|
||||
icon: 'i-lucide-message-circle',
|
||||
description: '定制开发可使您的微信公众平台更突出价值',
|
||||
to: '/softwareDevelopment/wechat',
|
||||
},
|
||||
{
|
||||
label: 'APP开发',
|
||||
icon: 'i-lucide-smartphone',
|
||||
description: '小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验',
|
||||
to: '/softwareDevelopment/app',
|
||||
|
||||
},
|
||||
{
|
||||
label: '小程序开发',
|
||||
icon: 'i-lucide-zap',
|
||||
description: '提供高效的APP开发、手机APP制作与APP管理等服务',
|
||||
to: '/softwareDevelopment/miniprogram',
|
||||
|
||||
},
|
||||
{
|
||||
label: '微信开发',
|
||||
icon: 'i-lucide-message-circle',
|
||||
description: '定制开发可使您的微信公众平台更突出价值',
|
||||
to: '/softwareDevelopment/wechat',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,114 +1,208 @@
|
|||
<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"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<img
|
||||
:alt="product.title"
|
||||
:src="product.image"
|
||||
class="object-cover w-96 h-96 rounded-lg "
|
||||
>
|
||||
<!-- 产品展示区域 -->
|
||||
<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>
|
||||
|
||||
</UPageCard>
|
||||
</Motion>
|
||||
</UPageSection>
|
||||
</UPage>
|
||||
<!-- 产品描述 -->
|
||||
<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 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'
|
||||
// 页面数据配置
|
||||
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>
|
||||
/* 自定义样式调整 */
|
||||
:deep(.u-page-card) {
|
||||
margin-bottom: 3rem;
|
||||
/* 响应式图片调整 */
|
||||
@media (max-width: 640px) {
|
||||
.object-contain {
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.u-page-card__content) {
|
||||
padding: 2rem;
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.object-contain {
|
||||
height: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.u-page-card) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
/* 悬停效果增强 */
|
||||
.group:hover .group-hover\:scale-105 {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
:deep(.u-page-card__content) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
/* 平滑过渡 */
|
||||
* {
|
||||
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>
|
||||
|
|
@ -55,7 +55,7 @@ const solutionsArticles = [
|
|||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '玉屏无人售货机系统软硬件一体化方案',
|
||||
title: '创特无人售货机系统软硬件一体化方案',
|
||||
date: '2019-05-21',
|
||||
link: '/news/unmanned-vending-machine-solution'
|
||||
},
|
||||
|
|
@ -67,9 +67,9 @@ const solutionsArticles = [
|
|||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '玉犀无人售货机系统软硬件一体化方案',
|
||||
title: '创特无人售货机系统软硬件一体化方案',
|
||||
date: '2019-05-19',
|
||||
link: '/news/yuxi-unmanned-vending-machine'
|
||||
link: '/news/CHAUNGTE-unmanned-vending-machine'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
|
|
@ -177,7 +177,7 @@ const industryTrendsArticles = [
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '玉犀科技浅析共享碾米机方案开发的发展潜力',
|
||||
title: '创特科技浅析共享碾米机方案开发的发展潜力',
|
||||
date: '2019-05-21',
|
||||
link: '/news/shared-rice-mill-development-potential'
|
||||
},
|
||||
|
|
@ -238,8 +238,8 @@ const pagination = {
|
|||
link: '/news/why-shared-charging-cable-popular'
|
||||
},
|
||||
next: {
|
||||
title: '玉犀无人售货机系统软硬件一体化方案',
|
||||
link: '/news/yuxi-unmanned-vending-machine'
|
||||
title: '创特无人售货机系统软硬件一体化方案',
|
||||
link: '/news/CHAUNGTE-unmanned-vending-machine'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
const contactUs = () => {
|
||||
// 这里可以集成实际的联系逻辑
|
||||
console.log('联系客服')
|
||||
alert('请联系：400-123-4567')
|
||||
alert('请联系：133-7697-0966')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user