From c84fc5e6e6ab66399af800eaf25ffc811231285f Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 29 Sep 2025 16:38:44 +0800
Subject: [PATCH] index-item1

---
 app/components/AppHeader.vue          |   2 +-
 app/components/{ => index}/Logo.vue   |   2 +-
 app/components/index/YuxiSolution.vue | 138 ++++++++++++++++++++++++++
 app/pages/index.vue                   |   2 +-
 4 files changed, 141 insertions(+), 3 deletions(-)
 rename app/components/{ => index}/Logo.vue (84%)
 create mode 100644 app/components/index/YuxiSolution.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 41ad10f..2abea8a 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -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"/>
diff --git a/app/components/Logo.vue b/app/components/index/Logo.vue
similarity index 84%
rename from app/components/Logo.vue
rename to app/components/index/Logo.vue
index 9a58eed..fd2c7c0 100644
--- a/app/components/Logo.vue
+++ b/app/components/index/Logo.vue
@@ -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"
diff --git a/app/components/index/YuxiSolution.vue b/app/components/index/YuxiSolution.vue
new file mode 100644
index 0000000..0e88495
--- /dev/null
+++ b/app/components/index/YuxiSolution.vue
@@ -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">
+            <!--            &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>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2ddf58e..6785fcd 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <text>1</text>
+  <IndexYuxiSolution/>
 </template>
 
 <style scoped>