588 lines
24 KiB
Vue
588 lines
24 KiB
Vue
<script lang="ts" setup>
|
||
// 物联网系统开发数据
|
||
const iotSystemDevelopment = {
|
||
title: '物联网系统开发',
|
||
subtitle: '一站式物联网解决方案提供，携手搭建物联网生态圈',
|
||
description: '专业的物联网系统开发团队，为企业提供全方位的物联网解决方案'
|
||
}
|
||
|
||
// APP/微信/小程序用户端功能
|
||
const userClientFeatures = [
|
||
{
|
||
id: 1,
|
||
title: '蓝牙连接',
|
||
icon: 'i-lucide-bluetooth',
|
||
description: '通过蓝牙连接完成APP与智能终端间的对接'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'GPS定位',
|
||
icon: 'i-lucide-map-pin',
|
||
description: '调用GPS定位，达到定位用户位置，记录用户运动'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '数据分享',
|
||
icon: 'i-lucide-share',
|
||
description: '将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '扫码使用',
|
||
icon: 'i-lucide-qr-code',
|
||
description: '扫码使用设备，流程简单、体验佳'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '硬件数据分析',
|
||
icon: 'i-lucide-bar-chart',
|
||
description: '实时分析硬件数据，提供智能决策支持'
|
||
}
|
||
]
|
||
|
||
// PC管理端功能
|
||
const pcManagementFeatures = [
|
||
{
|
||
id: 1,
|
||
title: '设备管理',
|
||
icon: 'i-lucide-settings',
|
||
description: '全面的设备管理功能，支持设备配置、监控和维护'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '设备监控',
|
||
icon: 'i-lucide-monitor',
|
||
description: '实时监控设备状态，及时发现和处理异常情况'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '生命周期管理',
|
||
icon: 'i-lucide-clock',
|
||
description: '完整的设备生命周期管理，从采购到报废全程跟踪'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '维修工单管理',
|
||
icon: 'i-lucide-wrench',
|
||
description: '高效的维修工单管理系统，提升维护效率'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '合同管理',
|
||
icon: 'i-lucide-file-text',
|
||
description: '完善的合同管理功能，确保合规运营'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '工单流程管理',
|
||
icon: 'i-lucide-workflow',
|
||
description: '灵活的工单流程管理，支持自定义业务流程'
|
||
}
|
||
]
|
||
|
||
// APP移动运维端功能
|
||
const mobileOandMFeatures = [
|
||
{
|
||
id: 1,
|
||
title: '实时监控',
|
||
icon: 'i-lucide-activity',
|
||
description: '监控所有设备位置、运行状态，实时掌握设备情况'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '权限分配',
|
||
icon: 'i-lucide-user-check',
|
||
description: '手机权限分配，支持厂家-经销商-合同能源管理企业-用户等角色管理'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '工单流转',
|
||
icon: 'i-lucide-arrow-right-left',
|
||
description: '手机工单流转，提升工作效率'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '扫码注册',
|
||
icon: 'i-lucide-scan',
|
||
description: '扫描二维码注册，识别当前设备所有参数、运行信息、维护人员及历史消息等'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '售后服务',
|
||
icon: 'i-lucide-headphones',
|
||
description: '售后拍照回传、信息录入、抄表，提供完善的售后服务支持'
|
||
}
|
||
]
|
||
|
||
// 系统特性
|
||
const systemFeatures = [
|
||
{
|
||
id: 1,
|
||
title: '模块化设计',
|
||
icon: 'i-lucide-package',
|
||
description: '采用模块化设计，简便易用，高度自定义，无需二次开发'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '高度自定义',
|
||
icon: 'i-lucide-settings-2',
|
||
description: '根据用户需求配置各种应用模块，灵活适应不同业务场景'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '无需二次开发',
|
||
icon: 'i-lucide-zap',
|
||
description: '开箱即用的解决方案，快速部署，降低开发成本'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<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 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||
<!-- 几何图案 -->
|
||
<div class="absolute inset-0 opacity-20">
|
||
<div class="absolute inset-0">
|
||
<!-- 网格图案 -->
|
||
<div
|
||
v-for="i in 20"
|
||
:key="i"
|
||
class="absolute w-4 h-4 border border-blue-400/30 rounded"
|
||
:style="{
|
||
left: Math.random() * 100 + '%',
|
||
top: Math.random() * 100 + '%',
|
||
transform: `rotate(${Math.random() * 360}deg)`
|
||
}"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发光圆形 -->
|
||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96">
|
||
<div class="w-full h-full rounded-full border-2 border-dashed border-blue-400/50 animate-pulse"></div>
|
||
<div class="absolute inset-8 rounded-full border border-dashed border-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
</div>
|
||
|
||
<!-- 曲线线条 -->
|
||
<div class="absolute bottom-0 right-0 w-64 h-64">
|
||
<svg class="w-full h-full text-blue-400/30" viewBox="0 0 100 100">
|
||
<path d="M0,80 Q30,20 60,40 T100,20" stroke="currentColor" stroke-width="2" fill="none" class="animate-pulse"/>
|
||
<path d="M0,60 Q20,10 50,30 T100,10" stroke="currentColor" stroke-width="1" fill="none" class="animate-pulse" style="animation-delay: 1s"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 手部线框 -->
|
||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-32 h-32">
|
||
<svg class="w-full h-full text-blue-400" viewBox="0 0 100 100">
|
||
<path d="M20,80 L30,70 L40,75 L50,65 L60,70 L70,60 L80,65 L85,55" stroke="currentColor" stroke-width="2" fill="none"/>
|
||
<circle cx="25" cy="75" r="3" fill="currentColor"/>
|
||
<circle cx="35" cy="70" r="3" fill="currentColor"/>
|
||
<circle cx="45" cy="75" r="3" fill="currentColor"/>
|
||
<circle cx="55" cy="65" r="3" fill="currentColor"/>
|
||
<circle cx="65" cy="70" r="3" fill="currentColor"/>
|
||
<circle cx="75" cy="60" r="3" fill="currentColor"/>
|
||
<circle cx="80" cy="65" r="3" fill="currentColor"/>
|
||
<circle cx="85" cy="55" r="3" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center text-white">
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||
{{ iotSystemDevelopment.title }}
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-blue-200 dark:text-blue-300 mb-8 max-w-4xl mx-auto leading-relaxed">
|
||
{{ iotSystemDevelopment.subtitle }}
|
||
</p>
|
||
<p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 max-w-2xl mx-auto">
|
||
{{ iotSystemDevelopment.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- APP/微信/小程序用户端 -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
APP/微信/小程序用户端
|
||
</h2>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 手机展示 -->
|
||
<div class="relative flex justify-center items-center">
|
||
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
|
||
<!-- 手机外壳 -->
|
||
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
|
||
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
|
||
<!-- 应用界面 -->
|
||
<div class="p-4 h-full">
|
||
<!-- 通知区域 -->
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-8 h-4 bg-pink-200 dark:bg-pink-800 rounded mr-2"></div>
|
||
<div class="w-12 h-4 bg-pink-200 dark:bg-pink-800 rounded"></div>
|
||
</div>
|
||
|
||
<!-- 用户信息 -->
|
||
<div class="text-center mb-6">
|
||
<div class="w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-2 flex items-center justify-center">
|
||
<UIcon name="i-lucide-user" class="w-8 h-8 text-gray-600 dark:text-gray-300" />
|
||
</div>
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
|
||
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto"></div>
|
||
</div>
|
||
|
||
<!-- 聊天区域 -->
|
||
<div class="flex justify-end mb-4">
|
||
<div class="w-20 h-12 bg-gray-900 dark:bg-gray-100 rounded-lg flex items-center justify-center">
|
||
<div class="w-6 h-4 bg-white dark:bg-gray-800 rounded"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能连接点 -->
|
||
<div class="absolute inset-0">
|
||
<!-- 蓝牙连接 -->
|
||
<div class="absolute -left-8 top-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
蓝牙连接
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GPS定位 -->
|
||
<div class="absolute -right-8 top-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
GPS定位
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 扫码使用 -->
|
||
<div class="absolute -right-8 bottom-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
扫码使用
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 硬件数据分析 -->
|
||
<div class="absolute -left-8 bottom-1/3">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
硬件数据分析
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 连接线 -->
|
||
<svg class="absolute inset-0 w-full h-full pointer-events-none">
|
||
<line x1="0" y1="25%" x2="20%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
|
||
<line x1="80%" y1="25%" x2="100%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
|
||
<line x1="80%" y1="75%" x2="100%" y2="75%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
|
||
<line x1="0" y1="66%" x2="20%" y2="66%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能列表 -->
|
||
<div class="space-y-6">
|
||
<div
|
||
v-for="feature in userClientFeatures"
|
||
:key="feature.id"
|
||
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
|
||
>
|
||
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
|
||
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ feature.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ feature.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PC管理端 -->
|
||
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
PC管理端
|
||
</h2>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 功能列表 -->
|
||
<div class="space-y-6">
|
||
<div
|
||
v-for="feature in pcManagementFeatures"
|
||
:key="feature.id"
|
||
class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
|
||
>
|
||
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
|
||
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ feature.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ feature.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 电脑展示 -->
|
||
<div class="relative flex justify-center items-center">
|
||
<div class="relative w-80 h-64 md:w-96 md:h-72">
|
||
<!-- 电脑外壳 -->
|
||
<div class="absolute inset-0 bg-gray-200 dark:bg-gray-600 rounded-lg shadow-2xl">
|
||
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
|
||
<!-- 屏幕内容 -->
|
||
<div class="p-4 h-full">
|
||
<!-- 顶部卡片 -->
|
||
<div class="flex space-x-2 mb-4">
|
||
<div class="w-16 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
|
||
<div class="w-20 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
|
||
</div>
|
||
|
||
<!-- 图表区域 -->
|
||
<div class="flex space-x-4 mb-4">
|
||
<!-- 饼图 -->
|
||
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-red-500 rounded-full"></div>
|
||
</div>
|
||
|
||
<!-- 柱状图 -->
|
||
<div class="flex-1 space-y-1">
|
||
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded"></div>
|
||
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
|
||
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部图表 -->
|
||
<div class="space-y-2">
|
||
<div class="h-2 bg-red-500 rounded"></div>
|
||
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded"></div>
|
||
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能标签 -->
|
||
<div class="absolute -top-4 -left-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
|
||
<div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
|
||
<UIcon name="i-lucide-wrench" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
|
||
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
|
||
<UIcon name="i-lucide-check-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- APP移动运维端 -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
APP移动运维端
|
||
</h2>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 手机展示 -->
|
||
<div class="relative flex justify-center items-center">
|
||
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
|
||
<!-- 手机外壳 -->
|
||
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
|
||
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
|
||
<!-- 应用界面 -->
|
||
<div class="p-4 h-full">
|
||
<!-- 进度环 -->
|
||
<div class="flex justify-center mb-6">
|
||
<div class="relative w-20 h-20">
|
||
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
|
||
<circle cx="50" cy="50" r="40" stroke="#ef4444" stroke-width="8" fill="none"
|
||
stroke-dasharray="251.2" stroke-dashoffset="105.5"/>
|
||
</svg>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<span class="text-sm font-bold text-gray-900 dark:text-white">58%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 列表项 -->
|
||
<div class="space-y-3">
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded"></div>
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-5/6"></div>
|
||
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-2/3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能连接点 -->
|
||
<div class="absolute inset-0">
|
||
<!-- 实时监控 -->
|
||
<div class="absolute -left-8 top-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
实时监控
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 权限分配 -->
|
||
<div class="absolute -right-8 top-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
权限分配
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工单流转 -->
|
||
<div class="absolute -left-8 top-1/2">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
工单流转
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 扫码注册 -->
|
||
<div class="absolute -left-8 bottom-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
扫码注册
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 售后服务 -->
|
||
<div class="absolute -right-8 bottom-1/4">
|
||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
售后服务
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 连接线 -->
|
||
<svg class="absolute inset-0 w-full h-full pointer-events-none">
|
||
<circle cx="50%" cy="50%" r="45%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能列表 -->
|
||
<div class="space-y-6">
|
||
<div
|
||
v-for="feature in mobileOandMFeatures"
|
||
:key="feature.id"
|
||
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
|
||
>
|
||
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
|
||
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
{{ feature.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ feature.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 系统特性 -->
|
||
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
系统特性
|
||
</h2>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
|
||
</div>
|
||
|
||
<!-- 特性展示 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="feature in systemFeatures"
|
||
:key="feature.id"
|
||
class="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
|
||
>
|
||
<div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
|
||
<UIcon :name="feature.icon" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
||
{{ feature.title }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ feature.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画 */
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.grid-cols-3 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |