ct/app/components/index/YuxiSolution.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">
            <!--            &lt;!&ndash; 电动车SVG &ndash;&gt;-->
            <!--            <div class="w-full max-w-md mx-auto">-->
            <!--              <svg class="w-full h-auto" viewBox="0 0 400 300">-->
            <!--                &lt;!&ndash; 车架 &ndash;&gt;-->
            <!--                <path-->
            <!--                    class="fill-yellow-500 stroke-gray-900 stroke-2"-->
            <!--                    d="M150,200 L250,200 L260,150 L240,100 L160,100 L140,150 Z"/>-->

            <!--                &lt;!&ndash; 车轮 &ndash;&gt;-->
            <!--                <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"/>-->

            <!--                &lt;!&ndash; 车把 &ndash;&gt;-->
            <!--                <path-->
            <!--                    class="stroke-gray-900 stroke-4"-->
            <!--                    d="M250,150 L280,120 M250,150 L280,180"/>-->

            <!--                &lt;!&ndash; 车座 &ndash;&gt;-->
            <!--                <path-->
            <!--                    class="stroke-gray-900 stroke-4 fill-none"-->
            <!--                    d="M180,100 Q200,80 220,100"/>-->

            <!--                &lt;!&ndash; 电池 &ndash;&gt;-->
            <!--                <rect-->
            <!--                    class="fill-green-500 stroke-gray-900 stroke-1" height="30" rx="5" width="60" x="170"-->
            <!--                    y="120"/>-->

            <!--                &lt;!&ndash; 智能设备 &ndash;&gt;-->
            <!--                <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>