From 3884974e68e835fb3a297518105d4aa0825894bc Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 23 Oct 2025 16:01:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ContactFloatingButton.vue | 97 ++++++++++++++++++++++++
 app/components/ScrollToTop.vue           |  5 +-
 app/layouts/default.vue                  |  1 +
 app/pages/index/index.vue                | 13 +---
 package.json                             |  1 -
 pnpm-lock.yaml                           | 29 -------
 6 files changed, 101 insertions(+), 45 deletions(-)
 create mode 100644 app/components/ContactFloatingButton.vue

diff --git a/app/components/ContactFloatingButton.vue b/app/components/ContactFloatingButton.vue
new file mode 100644
index 0000000..ab38385
--- /dev/null
+++ b/app/components/ContactFloatingButton.vue
@@ -0,0 +1,97 @@
+<!-- components/ContactFloatingButton.vue -->
+<template>
+  <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
+    <!-- 二维码面板 -->
+    <Transition name="fade-slide">
+      <div v-if="showQR" class="w-64 overflow-hidden transition-all duration-300 ease-out;">
+        <img
+            :alt="qrAltText"
+            :src="qrImage"
+            class="w-full h-auto border-4 border-white rounded-lg shadow-xl"
+        >
+      </div>
+    </Transition>
+
+    <!-- 客服按钮 -->
+    <button
+        :class="{ 'ml-2': showQR }"
+        class="bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
+        @click="onButtonClick"
+        @mouseenter="showQR = true"
+        @mouseleave="onMouseLeave"
+    >
+      <span class="button-text">{{ buttonText }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+const props = defineProps({
+  qrImage: {
+    type: String,
+    default: '/img/img.png'
+  },
+  qrAltText: {
+    type: String,
+    default: '客服二维码'
+  },
+  buttonText: {
+    type: String,
+    default: '联系客服'
+  },
+  hoverDelay: {
+    type: Number,
+    default: 300 // 延迟隐藏时间(ms)
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const showQR = ref(false)
+let hideTimer = null
+
+const onMouseLeave = () => {
+  hideTimer = setTimeout(() => {
+    showQR.value = false
+  }, props.hoverDelay)
+}
+
+const cancelHide = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+    hideTimer = null
+  }
+}
+
+const onButtonClick = () => {
+  emit('click')
+  // 点击后保持二维码显示
+  cancelHide()
+  showQR.value = true
+}
+</script>
+
+<style scoped>
+/* 按钮样式 */
+
+
+.writing-mode-vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+
+/* 动画效果 */
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+</style>
\ No newline at end of file
diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
index 986f40d..061b055 100644
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import {useThrottleFn} from '@vueuse/core'
 
 interface Props {
   threshold?: number
@@ -78,9 +77,9 @@ const buttonClasses = computed(() => [
   }
 ])
 
-const handleScroll = useThrottleFn(() => {
+const handleScroll = () => {
   isVisible.value = window.scrollY > props.threshold
-}, 100)
+}
 
 const handleClick = () => {
   if (props.smoothScroll) {
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1385871..cce3b6b 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -3,6 +3,7 @@
     <AppHeader/>
     <slot/>
     <AppFooter/>
+    <ContactFloatingButton/>
   </div>
 </template>
 
diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue
index d194e9b..4bc18e1 100644
--- a/app/pages/index/index.vue
+++ b/app/pages/index/index.vue
@@ -1,7 +1,3 @@
-<script lang="ts" setup>
-
-</script>
-
 <template>
   <UPage>
     <LandingHero/>
@@ -10,15 +6,8 @@
     <LandingOURSTRENGTHS/>
     <LandingPRODUCT_INTRODUCTION/>
     <LandingCaseFacts/>
-    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50">
-      <button class="bg-green-500 text-white px-4 py-3 rounded-l-lg shadow-lg writing-mode-vertical">
-        <span class="font-medium">联系客服</span>
-      </button>
-    </div>
+    <!--    <ScrollToTop/>-->
 
   </UPage>
 </template>
 
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/package.json b/package.json
index 11784a4..46ef320 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "@nuxt/eslint": "1.9.0",
     "@nuxt/image": "1.11.0",
     "@nuxt/ui": "4.0.1",
-    "@vueuse/core": "^14.0.0",
     "eslint": "^9.38.0",
     "nuxt": "^4.1.3",
     "typescript": "^5.9.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f0bd44..d611b41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
       '@nuxt/ui':
         specifier: 4.0.1
         version: 4.0.1(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.1)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.11(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
-      '@vueuse/core':
-        specifier: ^14.0.0
-        version: 14.0.0(vue@3.5.22(typescript@5.9.3))
       eslint:
         specifier: ^9.38.0
         version: 9.38.0(jiti@2.6.1)
@@ -1699,11 +1696,6 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@vueuse/core@14.0.0':
-    resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
-    peerDependencies:
-      vue: ^3.5.0
-
   '@vueuse/integrations@13.9.0':
     resolution: {integrity: sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==}
     peerDependencies:
@@ -1755,9 +1747,6 @@ packages:
   '@vueuse/metadata@13.9.0':
     resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
-  '@vueuse/metadata@14.0.0':
-    resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==}
-
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
@@ -1769,11 +1758,6 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@vueuse/shared@14.0.0':
-    resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
-    peerDependencies:
-      vue: ^3.5.0
-
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -6702,13 +6686,6 @@ snapshots:
       '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
 
-  '@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 14.0.0
-      '@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
-      vue: 3.5.22(typescript@5.9.3)
-
   '@vueuse/integrations@13.9.0(change-case@5.4.4)(fuse.js@7.1.0)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -6724,8 +6701,6 @@ snapshots:
 
   '@vueuse/metadata@13.9.0': {}
 
-  '@vueuse/metadata@14.0.0': {}
-
   '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -6743,10 +6718,6 @@ snapshots:
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
 
-  '@vueuse/shared@14.0.0(vue@3.5.22(typescript@5.9.3))':
-    dependencies:
-      vue: 3.5.22(typescript@5.9.3)
-
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0: