index页面
This commit is contained in:
WindowBird
parent
c84fc5e6e6
commit
b014394916
|
|
@ -1,45 +1,48 @@
|
|||
export default defineAppConfig({
|
||||
global: {
|
||||
picture: {
|
||||
dark: 'https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg',
|
||||
light: 'https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg',
|
||||
alt: 'My profile picture'
|
||||
global: {
|
||||
picture: {
|
||||
dark: 'https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg',
|
||||
light: 'https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg',
|
||||
alt: 'My profile picture'
|
||||
},
|
||||
meetingLink: 'https://chuangtewulian.1688.com/page/index.html',
|
||||
email: 'ui-pro@nuxt.com',
|
||||
available: true
|
||||
},
|
||||
meetingLink: 'https://chuangtewulian.1688.com/page/index.html',
|
||||
email: 'ui-pro@nuxt.com',
|
||||
available: true
|
||||
},
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'neutral'
|
||||
ui: {
|
||||
container: {
|
||||
base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
|
||||
},
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'neutral'
|
||||
},
|
||||
pageHero: {
|
||||
slots: {
|
||||
container: 'py-18 sm:py-24 lg:py-32',
|
||||
title: 'mx-auto max-w-xl text-pretty text-3xl sm:text-4xl lg:text-5xl',
|
||||
description: 'mt-2 text-md mx-auto max-w-2xl text-pretty sm:text-md text-muted'
|
||||
}
|
||||
}
|
||||
},
|
||||
pageHero: {
|
||||
slots: {
|
||||
container: 'py-18 sm:py-24 lg:py-32',
|
||||
title: 'mx-auto max-w-xl text-pretty text-3xl sm:text-4xl lg:text-5xl',
|
||||
description: 'mt-2 text-md mx-auto max-w-2xl text-pretty sm:text-md text-muted'
|
||||
}
|
||||
footer: {
|
||||
credits: `Built with Nuxt UI • © ${new Date().getFullYear()}`,
|
||||
colorMode: false,
|
||||
links: [{
|
||||
'icon': 'i-simple-icons-discord',
|
||||
'to': 'https://www.douyin.com/user/MS4wLjABAAAAdPkGyADnJFLrZBwDM9U7faUJs-wmmyEU9L34SS0CKhs',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt on Discord'
|
||||
}, {
|
||||
'icon': 'i-simple-icons-x',
|
||||
'to': 'https://chuangtewulian.1688.com/page/index.html',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt on X'
|
||||
}, {
|
||||
'icon': 'i-simple-icons-github',
|
||||
'to': 'https://chuangtewulian.1688.com/page/index.html',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt UI on GitHub'
|
||||
}]
|
||||
}
|
||||
},
|
||||
footer: {
|
||||
credits: `Built with Nuxt UI • © ${new Date().getFullYear()}`,
|
||||
colorMode: false,
|
||||
links: [{
|
||||
'icon': 'i-simple-icons-discord',
|
||||
'to': 'https://www.douyin.com/user/MS4wLjABAAAAdPkGyADnJFLrZBwDM9U7faUJs-wmmyEU9L34SS0CKhs',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt on Discord'
|
||||
}, {
|
||||
'icon': 'i-simple-icons-x',
|
||||
'to': 'https://chuangtewulian.1688.com/page/index.html',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt on X'
|
||||
}, {
|
||||
'icon': 'i-simple-icons-github',
|
||||
'to': 'https://chuangtewulian.1688.com/page/index.html',
|
||||
'target': '_blank',
|
||||
'aria-label': 'Nuxt UI on GitHub'
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@
|
|||
@source "../../../content/**/*";
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
--font-serif: 'Instrument Serif', serif;
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
--font-serif: 'Instrument Serif', serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ui-container: var(--container-4xl);
|
||||
--ui-container: var(--container-max-width);
|
||||
|
||||
::selection {
|
||||
color: #282a30;
|
||||
background-color: #c8c8c8;
|
||||
}
|
||||
::selection {
|
||||
color: #282a30;
|
||||
background-color: #c8c8c8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dark {
|
||||
::selection {
|
||||
color: #ffffff;
|
||||
background-color: #474747;
|
||||
}
|
||||
::selection {
|
||||
color: #ffffff;
|
||||
background-color: #474747;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,30 +5,45 @@ const route = useRoute()
|
|||
|
||||
const items = computed<NavigationMenuItem[]>(() => [
|
||||
{
|
||||
label: 'Docs',
|
||||
label: '首页',
|
||||
to: '/docs/getting-started',
|
||||
active: route.path.startsWith('/docs/getting-started')
|
||||
},
|
||||
{
|
||||
label: 'Components',
|
||||
label: '共享解决方案',
|
||||
to: '/docs/components',
|
||||
active: route.path.startsWith('/docs/components')
|
||||
},
|
||||
{
|
||||
label: 'Figma',
|
||||
label: '行业解决方案',
|
||||
to: 'https://go.nuxt.com/figma-ui',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
label: 'Releases',
|
||||
label: '软件应用开发',
|
||||
to: 'https://github.com/nuxt/ui/releases',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
label: '物联网解决方案',
|
||||
to: 'https://github.com/nuxt/ui/releases',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
label: '关于创特',
|
||||
to: 'https://github.com/nuxt/ui/releases',
|
||||
target: '_blank'
|
||||
}, {
|
||||
label: '13888555777',
|
||||
to: 'https://github.com/nuxt/ui/releases',
|
||||
target: '_blank'
|
||||
}
|
||||
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader>
|
||||
<UHeader class="min-w-full">
|
||||
<template #title>
|
||||
<IndexLogo class="h-6 w-auto"/>
|
||||
</template>
|
||||
|
|
@ -37,7 +52,6 @@ const items = computed<NavigationMenuItem[]>(() => [
|
|||
|
||||
<template #right>
|
||||
<ColorModeButton/>
|
||||
|
||||
<!-- <UTooltip :kbds="['meta', 'G']" text="Open on GitHub">-->
|
||||
<!-- <UButton-->
|
||||
<!-- aria-label="GitHub"-->
|
||||
|
|
|
|||
187
app/components/BottomNavigation.vue
Normal file
187
app/components/BottomNavigation.vue
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gray-900 text-white">
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="border-b border-gray-700">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex space-x-8 overflow-x-auto">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="[
|
||||
'py-4 px-2 font-medium text-sm whitespace-nowrap border-b-2 transition-colors',
|
||||
activeTab === tab.id
|
||||
? 'border-blue-500 text-blue-400'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300'
|
||||
]"
|
||||
@click="activeTab = tab.id"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<!-- 解决方案 -->
|
||||
<div v-show="activeTab === 'solutions'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div
|
||||
v-for="service in solutions" :key="service"
|
||||
class="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 transition-colors">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
<h3 class="text-lg font-medium">{{ service }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 行业方案 -->
|
||||
<div v-show="activeTab === 'industry'" class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div
|
||||
v-for="service in industrySolutions" :key="service"
|
||||
class="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 transition-colors">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<h3 class="text-lg font-medium">{{ service }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 软件开发 -->
|
||||
<div v-show="activeTab === 'software'" class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div
|
||||
v-for="service in softwareDevelopment" :key="service"
|
||||
class="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 transition-colors">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-purple-500 rounded-full"/>
|
||||
<h3 class="text-lg font-medium">{{ service }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能硬件 -->
|
||||
<div v-show="activeTab === 'hardware'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div
|
||||
v-for="service in smartHardware" :key="service"
|
||||
class="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 transition-colors">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-orange-500 rounded-full"/>
|
||||
<h3 class="text-lg font-medium">{{ service }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<div v-show="activeTab === 'contact'" class="max-w-2xl mx-auto">
|
||||
<div class="bg-gray-800 rounded-lg p-8">
|
||||
<h2 class="text-2xl font-bold mb-6">联系我们</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-400">客服电话</p>
|
||||
<p class="text-lg font-medium">400-XXX-XXXX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-400">商务合作</p>
|
||||
<p class="text-lg font-medium">XXX-XXXX-XXXX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-400">反馈邮箱</p>
|
||||
<p class="text-lg font-medium">feedback@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
const activeTab = ref('solutions')
|
||||
|
||||
const tabs = [
|
||||
{id: 'solutions', title: '解决方案'},
|
||||
{id: 'industry', title: '行业方案'},
|
||||
{id: 'software', title: '软件开发'},
|
||||
{id: 'hardware', title: '智能硬件'},
|
||||
{id: 'contact', title: '联系我们'}
|
||||
]
|
||||
|
||||
const solutions = [
|
||||
'共享单车',
|
||||
'共享滑板车',
|
||||
'共享陪护床',
|
||||
'共享电动车',
|
||||
'共享充电宝'
|
||||
]
|
||||
|
||||
const industrySolutions = [
|
||||
'智慧餐饮',
|
||||
'智慧公寓',
|
||||
'智能电动车'
|
||||
]
|
||||
|
||||
const softwareDevelopment = [
|
||||
'微信开发',
|
||||
'APP开发',
|
||||
'小程序开发'
|
||||
]
|
||||
|
||||
const smartHardware = [
|
||||
'物联网应用定制',
|
||||
'物联网智能硬件',
|
||||
'物联网IOT云平台'
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-gray-750 {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
nav::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
nav::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
nav::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
nav::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
}
|
||||
</style>
|
||||
140
app/components/News.vue
Normal file
140
app/components/News.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-white dark:bg-gray-900 py-12">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
开发资讯
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">NEWS</p>
|
||||
</div>
|
||||
|
||||
<!-- 三栏资讯布局 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- 解决方案栏目 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="p-6 border-b border-gray-100 dark:border-gray-600">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">解决方案</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2 line-clamp-2">
|
||||
玉犀景区SaaS平台 打造专业景区共享出行综合解决方案
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2025-07-08 12:40</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
|
||||
为什么说景区共享代步车的未来发展空间巨大?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2023-05-08 11:25</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开发知识栏目 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="p-6 border-b border-gray-100 dark:border-gray-600">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">开发知识</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
|
||||
共享电动车为何能在共享经济中独树一帜?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2023-06-29 12:26</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
|
||||
景区共享智能代步车运营方案有哪些?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2023-05-10 10:23</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 行业动态栏目 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="p-6 border-b border-gray-100 dark:border-gray-600">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">行业动态</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
|
||||
景区共享电动代步车如何引领景区发展趋势?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2024-12-11 23:53</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
|
||||
景区共享观光代步车为何如此火爆?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">2023-07-13 15:42</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多按钮 -->
|
||||
<div class="text-center mt-12">
|
||||
<button
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-300">
|
||||
加载更多资讯
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加数据获取和交互逻辑
|
||||
const articles = {
|
||||
solutions: [
|
||||
{
|
||||
title: "玉犀景区SaaS平台 打造专业景区共享出行综合解决方案",
|
||||
date: "2025-07-08 12:40"
|
||||
},
|
||||
{
|
||||
title: "为什么说景区共享代步车的未来发展空间巨大?",
|
||||
date: "2023-05-08 11:25"
|
||||
}
|
||||
],
|
||||
knowledge: [
|
||||
{
|
||||
title: "共享电动车为何能在共享经济中独树一帜?",
|
||||
date: "2023-06-29 12:26"
|
||||
},
|
||||
{
|
||||
title: "景区共享智能代步车运营方案有哪些?",
|
||||
date: "2023-05-10 10:23"
|
||||
}
|
||||
],
|
||||
trends: [
|
||||
{
|
||||
title: "景区共享电动代步车如何引领景区发展趋势?",
|
||||
date: "2024-12-11 23:53"
|
||||
},
|
||||
{
|
||||
title: "景区共享观光代步车为何如此火爆?",
|
||||
date: "2023-07-13 15:42"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<NuxtLink class="flex items-center" to="/public">
|
||||
|
||||
<NuxtImg
|
||||
alt="创特物联"
|
||||
class="h-12 w-auto dark:invert"
|
||||
|
|
|
|||
201
app/components/index/item2.vue
Normal file
201
app/components/index/item2.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<section class=" bg-white dark:bg-gray-900 py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- 主标题 -->
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
共享电动车解决方案
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
一站式解决方案，从硬件定制到软件平台，助力共享出行业务快速发展
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 解决方案网格 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
<!-- 定制化共享电动车 -->
|
||||
<div
|
||||
class="group relative bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-yellow-600/5 dark:from-yellow-500/10 dark:to-yellow-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-yellow-500 dark:bg-yellow-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">定制化共享电动车</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
专为共享场景设计的电动车，具备耐用性、安全性和智能化特性，满足不同运营需求
|
||||
</p>
|
||||
|
||||
<!-- 电动车示意图 -->
|
||||
<div class="mt-6 relative h-32">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-24 h-16 bg-yellow-400 dark:bg-yellow-600 rounded-lg relative">
|
||||
<!-- 车架 -->
|
||||
<div class="absolute top-2 left-2 w-20 h-8 bg-yellow-300 dark:bg-yellow-500 rounded"/>
|
||||
<!-- 车轮 -->
|
||||
<div class="absolute bottom-0 left-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
|
||||
<div class="absolute bottom-0 right-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
|
||||
<!-- 车把 -->
|
||||
<div class="absolute top-1 -left-2 w-2 h-4 bg-gray-800 dark:bg-gray-700 rounded"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业级IOT物联网设备 -->
|
||||
<div
|
||||
class="group relative bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-blue-600/5 dark:from-blue-500/10 dark:to-blue-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-blue-500 dark:bg-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级IOT物联网设备</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
高精度定位、实时数据传输、远程控制，确保车辆管理和用户服务的可靠性
|
||||
</p>
|
||||
|
||||
<!-- IOT设备示意图 -->
|
||||
<div class="mt-6 relative h-32">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-12 bg-gray-800 dark:bg-gray-700 rounded-lg relative">
|
||||
<!-- 指示灯 -->
|
||||
<div class="absolute top-2 left-2 w-2 h-2 bg-green-500 rounded-full animate-pulse"/>
|
||||
<!-- 接口 -->
|
||||
<div class="absolute bottom-2 left-4 w-8 h-1 bg-gray-600 dark:bg-gray-500 rounded"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多平台APP快速开发 -->
|
||||
<div
|
||||
class="group relative bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-green-600/5 dark:from-green-500/10 dark:to-green-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-green-500 dark:bg-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v край 2a2 2 0 002 2z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">多平台APP快速开发</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
支持iOS、Android、小程序多端开发，提供完整的用户端和运维端应用解决方案
|
||||
</p>
|
||||
|
||||
<!-- 手机示意图 -->
|
||||
<div class="mt-6 relative h-32">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
class="w-12 h-20 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-xl relative">
|
||||
<!-- 屏幕内容 -->
|
||||
<div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
|
||||
<!-- 地图示意 -->
|
||||
<div class="absolute top-1 left-1 right-1 h-8 bg-blue-200 dark:bg-blue-800 rounded"/>
|
||||
<!-- 按钮 -->
|
||||
<div
|
||||
class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-blue-500 dark:bg-blue-600 rounded-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业级运营管理平台 -->
|
||||
<div
|
||||
class="group relative bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-purple-600/5 dark:from-purple-500/10 dark:to-purple-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-purple-500 dark:bg-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级运营管理平台</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
实时监控、数据分析、智能调度、财务管理，全方位支撑运营决策和业务管理
|
||||
</p>
|
||||
|
||||
<!-- 电脑示意图 -->
|
||||
<div class="mt-6 relative h-32">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-20 h-16 bg-gray-800 dark:bg-gray-700 rounded-t-lg relative">
|
||||
<!-- 屏幕 -->
|
||||
<div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
|
||||
<!-- 数据图表示意 -->
|
||||
<div class="absolute top-1 left-1 right-1 h-2 bg-blue-300 dark:bg-blue-700 rounded"/>
|
||||
<div class="absolute top-4 left-1 right-1 h-2 bg-blue-400 dark:bg-blue-600 rounded"/>
|
||||
<div class="absolute top-7 left-1 right-1 h-2 bg-blue-500 dark:bg-blue-500 rounded"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底座 -->
|
||||
<div class="absolute -bottom-4 w-24 h-2 bg-gray-700 dark:bg-gray-600 rounded-b-lg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
app/components/index/item3.vue
Normal file
321
app/components/index/item3.vue
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
<template>
|
||||
<div class=" bg-white dark:bg-gray-900">
|
||||
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
共享电动车 + 物联网设备
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
智能物联技术，打造安全高效的共享出行体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 功能特性网格 -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
|
||||
<!-- 物联网设备数据传输 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
物联网设备数据传输
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
通过联网中控及车载控制器设备实现实时数据传输，确保车辆状态实时监控
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备示意图 -->
|
||||
<div
|
||||
class="mt-6 relative h-32 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-lg p-4">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="flex space-x-4">
|
||||
<!-- 中控设备 -->
|
||||
<div class="w-12 h-8 bg-blue-500 rounded-lg relative">
|
||||
<div class="absolute top-1 left-1 w-2 h-2 bg-green-400 rounded-full animate-pulse"/>
|
||||
</div>
|
||||
<!-- 数据传输示意 -->
|
||||
<div class="flex items-center space-x-1">
|
||||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0s"/>
|
||||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"/>
|
||||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.4s"/>
|
||||
</div>
|
||||
<!-- 车载控制器 -->
|
||||
<div class="w-10 h-6 bg-gray-800 rounded relative">
|
||||
<div class="absolute top-1 left-1 w-1 h-1 bg-yellow-400 rounded-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 防水防盗防高温 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-16 h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
防水防盗防高温
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
车辆及设备采用防水式设计、材料采用防高温材料，并加载智能防盗系统
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 防护示意图 -->
|
||||
<div
|
||||
class="mt-6 relative h-32 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-lg p-4">
|
||||
<div class="flex items-center justify-center h-full space-x-6">
|
||||
<!-- 防水图标 -->
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">防水设计</span>
|
||||
</div>
|
||||
|
||||
<!-- 防盗图标 -->
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-red-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">智能防盗</span>
|
||||
</div>
|
||||
|
||||
<!-- 防高温图标 -->
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-orange-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">防高温</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 出骑行区提醒 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-16 h-16 bg-yellow-100 dark:bg-yellow-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
出骑行区提醒
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
车辆出骑行区，车辆喇叭自动发出语音提醒，若不按语音要求返回则车辆自动断电
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提醒示意图 -->
|
||||
<div
|
||||
class="mt-6 relative h-32 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-lg p-4">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2 animate-pulse">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">超出骑行区域</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在线寻车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
<path
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
在线寻车
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
根据车辆定位及电量信息，可在线查找最合适的可骑行车辆
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 寻车示意图 -->
|
||||
<div
|
||||
class="mt-6 relative h-32 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg p-4">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="relative">
|
||||
<!-- 地图背景 -->
|
||||
<div class="w-24 h-16 bg-blue-100 dark:bg-blue-900 rounded-lg relative">
|
||||
<!-- 车辆标记 -->
|
||||
<div class="absolute top-4 left-6 w-3 h-3 bg-green-500 rounded-full animate-bounce"/>
|
||||
<div class="absolute top-8 left-10 w-3 h-3 bg-yellow-500 rounded-full"/>
|
||||
<div class="absolute top-2 left-14 w-3 h-3 bg-red-500 rounded-full"/>
|
||||
</div>
|
||||
<!-- 定位图标 -->
|
||||
<div
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
||||
fill-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 规范停车区 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<!-- 图标区域 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-16 h-16 bg-indigo-100 dark:bg-indigo-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
规范停车区
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
通过运营管理平台设置停车区，若用户不在停车区内停车，则需额外支付车辆调度费
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 停车区示意图 -->
|
||||
<div
|
||||
class="mt-6 relative h-32 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/10 rounded-lg p-4">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="relative">
|
||||
<!-- 停车区域 -->
|
||||
<div
|
||||
class="w-20 h-12 bg-green-100 dark:bg-green-900 border-2 border-green-400 dark:border-green-600 rounded-lg relative">
|
||||
<!-- 停车标记 -->
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-6 bg-green-400 dark:bg-green-600 rounded flex items-center justify-center">
|
||||
<span class="text-white text-xs font-bold">P</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 车辆图标 -->
|
||||
<div
|
||||
class="absolute -right-4 top-1/2 transform -translate-y-1/2 w-8 h-4 bg-gray-600 rounded-sm"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 自定义动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
291
app/components/index/item4.vue
Normal file
291
app/components/index/item4.vue
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-white dark:bg-gray-900">
|
||||
<!-- 头部区域 -->
|
||||
<header class="bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-yellow-600 dark:to-yellow-700 py-16">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
|
||||
共享电动车APP/小程序
|
||||
</h1>
|
||||
<p class="text-xl text-white opacity-90">
|
||||
轻松出行，智能骑行体验
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- 左侧：手机界面展示 -->
|
||||
<div class="relative">
|
||||
<!-- 手机设备 -->
|
||||
<div class="relative mx-auto w-80">
|
||||
<!-- 手机外壳 -->
|
||||
<div class="bg-gray-800 rounded-[40px] p-4 shadow-2xl">
|
||||
<!-- 手机屏幕 -->
|
||||
<div class="bg-white rounded-[32px] overflow-hidden h-[600px] relative">
|
||||
|
||||
<!-- 顶部状态栏 -->
|
||||
<div class="bg-yellow-400 h-12 flex items-center justify-between px-6">
|
||||
<span class="text-lg font-bold text-gray-800">玖玖出行</span>
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="h-48 bg-gradient-to-br from-blue-100 to-green-100 relative">
|
||||
<!-- 地图网格 -->
|
||||
<div class="absolute inset-0 opacity-30">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-gray-400"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 定位点 -->
|
||||
<div class="absolute top-1/3 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/2 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-3/4 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 当前位置标记 -->
|
||||
<div class="absolute bottom-4 left-4 bg-white rounded-lg px-3 py-1 shadow">
|
||||
<span class="text-sm font-medium">当前位置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="bg-yellow-100 hover:bg-yellow-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-yellow-600 font-semibold">实时路况</div>
|
||||
</button>
|
||||
<button class="bg-green-100 hover:bg-green-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-green-600 font-semibold">地图更新</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 扫码用车按钮 -->
|
||||
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-4/5">
|
||||
<button
|
||||
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 rounded-full w-full shadow-lg transition-colors">
|
||||
扫码用车
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：功能特性列表 -->
|
||||
<div class="space-y-8">
|
||||
<!-- 功能网格 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 gap-6">
|
||||
|
||||
<!-- 实名认证用车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">实名认证用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键预约用车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键预约用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">选择合适车辆，一键预约车辆</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 免押金卡骑行 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">免押金卡骑行</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用车前确认续航里程 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">用车前确认续航里程</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间+里程精准计费 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">时间+里程精准计费</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">根据用车时间及车辆能耗里程计算费用</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 临时停车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">临时停车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键关锁结算 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键关锁结算</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">手机一键锁，系统自动结账</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多种支付方式 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">多种支付方式</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">支持微信、支付宝等多种支付方式</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
app/components/index/item5.vue
Normal file
285
app/components/index/item5.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<!-- 顶部背景和标题 -->
|
||||
<header
|
||||
class="relative bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-900 text-white py-20 overflow-hidden">
|
||||
<!-- 共享单车背景图案 -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-10 left-10 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-20 right-20 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-10 left-1/4 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-20 right-1/3 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-16 h-8 bg-white rounded-full"/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 text-center relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">
|
||||
运营管理平台
|
||||
</h1>
|
||||
<p class="text-xl opacity-90">
|
||||
共享出行车辆智能运营管理系统
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 笔记本电脑展示区域 -->
|
||||
<section class="py-16 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 笔记本电脑容器 -->
|
||||
<div class="relative">
|
||||
<!-- 笔记本电脑底座 -->
|
||||
<div class="w-full max-w-2xl mx-auto bg-gray-300 dark:bg-gray-600 h-6 rounded-b-lg"/>
|
||||
|
||||
<!-- 笔记本电脑屏幕 -->
|
||||
<div class="w-full max-w-3xl mx-auto bg-gray-800 rounded-t-lg p-1">
|
||||
<div class="bg-blue-100 dark:bg-blue-900 rounded-t-lg h-64 lg:h-80 relative overflow-hidden">
|
||||
<!-- 地图界面 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-700">
|
||||
<!-- 地图网格线 -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
<div class="grid grid-rows-6 gap-4 h-full">
|
||||
<div v-for="i in 6" :key="i" class="border-b border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆标记点 -->
|
||||
<div class="absolute top-1/4 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-1/2 left-1/3 w-3 h-3 bg-yellow-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-2/3 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 道路线条 -->
|
||||
<div class="absolute top-1/2 left-1/4 w-1/2 h-1 bg-gray-600 transform -translate-y-1/2"/>
|
||||
<div class="absolute top-1/3 left-1/4 w-1 h-16 bg-gray-600 transform -translate-x-1/2"/>
|
||||
</div>
|
||||
|
||||
<!-- 界面控件 -->
|
||||
<div class="absolute top-4 left-4 bg-white dark:bg-gray-800 rounded-lg px-3 py-1 text-sm font-medium">
|
||||
实时监控地图
|
||||
</div>
|
||||
<div class="absolute bottom-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm">
|
||||
在线车辆: 613
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能模块网格 -->
|
||||
<section class="py-20 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- 实时车辆监控 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<!-- 红色图标 -->
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">实时车辆监控</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营平台大屏幕展示车辆的分布及状态
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能异常报警 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">智能异常报警</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
车辆发生异常问题，运营平台发生警报
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 规范骑行、停车区域 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">规范骑行、停车区域</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
设置规范骑行和停车区域，提升管理效率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运维数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运维数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运维数据实时上报，绩效考核有依据
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速签署代理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">快速签署代理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
加盟商、代理商快速进入系统
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">财务管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
财务报表实时统计咨询，财务清单有记录
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运营数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运营数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营数据云保存，百万量级数据实时查询
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权限管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">权限管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
根据公司员工岗位职责，自定义设置系统权限
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,10 +3,11 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<UContainer>
|
||||
<AppHeader :links="navLinks"/>
|
||||
<slot/>
|
||||
<AppFooter/>
|
||||
|
||||
<AppHeader :links="navLinks"/>
|
||||
<slot/>
|
||||
<AppFooter/>
|
||||
|
||||
</ucontainer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
import BottomNavigation from "~/components/BottomNavigation.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IndexYuxiSolution/>
|
||||
<view>
|
||||
<IndexItem1/>
|
||||
<IndexItem2/>
|
||||
<IndexItem3/>
|
||||
<IndexItem4/>
|
||||
<IndexItem5/>
|
||||
<news/>
|
||||
<BottomNavigation/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: {enabled: true},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user