index-item1
This commit is contained in:
WindowBird
parent
a886f64efa
commit
c84fc5e6e6
|
|
@ -30,7 +30,7 @@ const items = computed<NavigationMenuItem[]>(() => [
|
|||
<template>
|
||||
<UHeader>
|
||||
<template #title>
|
||||
<Logo class="h-6 w-auto"/>
|
||||
<IndexLogo class="h-6 w-auto"/>
|
||||
</template>
|
||||
|
||||
<UNavigationMenu :items="items"/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NuxtLink class="flex items-center" to="/">
|
||||
<NuxtLink class="flex items-center" to="/public">
|
||||
<NuxtImg
|
||||
alt="创特物联"
|
||||
class="h-12 w-auto dark:invert"
|
||||
138
app/components/index/YuxiSolution.vue
Normal file
138
app/components/index/YuxiSolution.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<section class=" bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="container mx-auto px-4 py-12 lg:py-24">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 内容区域 -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-4xl lg:text-6xl font-black text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
玉犀共享电动车
|
||||
<span class="block text-yellow-600 dark:text-yellow-400">整体解决方案提供商</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl lg:text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-8">
|
||||
专业提供"共享电动车+智能硬件+多平台开发+运维管理"一站式服务
|
||||
</p>
|
||||
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-10 max-w-2xl">
|
||||
专注于智慧出行，打造"共享出行"顶级方案。现已面向共享电动车、共享电池行业提供包含智能硬件+APP+云存储的全套解决方案。
|
||||
</p>
|
||||
|
||||
|
||||
<!-- 行动按钮 -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
class="px-8 py-4 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-semibold hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors flex items-center justify-center space-x-2"
|
||||
@click="contactUs">
|
||||
<i class="i-lucide-phone"/>
|
||||
<span>立即咨询</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 电动车展示区域 -->
|
||||
<div class="relative">
|
||||
<div class="relative z-10">
|
||||
<img alt="车" src="https://api.ccttiot.com/smartmeter/img/static/u1FoIt3IRUOer3uGOOTI">
|
||||
<!-- <!– 电动车SVG –>-->
|
||||
<!-- <div class="w-full max-w-md mx-auto">-->
|
||||
<!-- <svg class="w-full h-auto" viewBox="0 0 400 300">-->
|
||||
<!-- <!– 车架 –>-->
|
||||
<!-- <path-->
|
||||
<!-- class="fill-yellow-500 stroke-gray-900 stroke-2"-->
|
||||
<!-- d="M150,200 L250,200 L260,150 L240,100 L160,100 L140,150 Z"/>-->
|
||||
|
||||
<!-- <!– 车轮 –>-->
|
||||
<!-- <circle class="fill-gray-800 stroke-gray-900 stroke-2" cx="120" cy="200" r="25"/>-->
|
||||
<!-- <circle class="fill-gray-600" cx="120" cy="200" r="15"/>-->
|
||||
<!-- <circle class="fill-gray-800 stroke-gray-900 stroke-2" cx="280" cy="200" r="25"/>-->
|
||||
<!-- <circle class="fill-gray-600" cx="280" cy="200" r="15"/>-->
|
||||
|
||||
<!-- <!– 车把 –>-->
|
||||
<!-- <path-->
|
||||
<!-- class="stroke-gray-900 stroke-4"-->
|
||||
<!-- d="M250,150 L280,120 M250,150 L280,180"/>-->
|
||||
|
||||
<!-- <!– 车座 –>-->
|
||||
<!-- <path-->
|
||||
<!-- class="stroke-gray-900 stroke-4 fill-none"-->
|
||||
<!-- d="M180,100 Q200,80 220,100"/>-->
|
||||
|
||||
<!-- <!– 电池 –>-->
|
||||
<!-- <rect-->
|
||||
<!-- class="fill-green-500 stroke-gray-900 stroke-1" height="30" rx="5" width="60" x="170"-->
|
||||
<!-- y="120"/>-->
|
||||
|
||||
<!-- <!– 智能设备 –>-->
|
||||
<!-- <circle class="fill-blue-500 stroke-gray-900 stroke-1" cx="200" cy="80" r="15"/>-->
|
||||
<!-- <path class="stroke-white stroke-2" d="M195,75 L205,85 M205,75 L195,85"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 浮动元素 -->
|
||||
<div
|
||||
class="absolute top-10 left-10 w-20 h-20 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-20 animate-pulse"/>
|
||||
<div
|
||||
class="absolute top-32 right-20 w-16 h-16 bg-green-400 dark:bg-green-600 rounded-full opacity-30 animate-bounce"/>
|
||||
<div
|
||||
class="absolute bottom-20 left-32 w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full opacity-40 animate-ping"/>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white dark:bg-gray-700 rounded-full opacity-10"/>
|
||||
<div
|
||||
class="absolute bottom-1/3 right-1/3 w-24 h-24 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
const contactUs = () => {
|
||||
// 这里可以集成实际的联系逻辑
|
||||
console.log('联系客服')
|
||||
alert('请联系：400-123-4567')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<text>1</text>
|
||||
<IndexYuxiSolution/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user