103 lines
3.3 KiB
Vue
103 lines
3.3 KiB
Vue
<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">
|
||
|
||
<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> |