From 56d494ff85734404261c8aa040e1ee8366456725 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 4 Nov 2025 14:00:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=8F=8C=E7=AB=AF=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=8C=89=E9=92=AE=E7=9A=84=E4=B8=8D=E5=90=8C=E8=A1=A8?=
 =?UTF-8?q?=E7=8E=B0=EF=BC=8C=E5=BC=B9=E7=AA=97=E5=92=8C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ContactFloatingButton.vue | 57 +++++++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/app/components/ContactFloatingButton.vue b/app/components/ContactFloatingButton.vue
index 46fb344..d539f89 100644
--- a/app/components/ContactFloatingButton.vue
+++ b/app/components/ContactFloatingButton.vue
@@ -1,14 +1,22 @@
 <!-- components/ContactFloatingButton.vue -->
 <template>
   <div class="fixed  right-2 lg:right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
-    <UPopover arrow mode="click" :popper="{ placement: 'left-start'  }"    :content="{
-      align: 'center',
-      side: 'left',
-      sideOffset: 6
-    }" >
+    <!-- PC端：弹窗 -->
+    <UPopover 
+      v-if="isDesktop"
+      arrow 
+      mode="click" 
+      :popper="{ placement: 'left-start' }"    
+      :content="{
+        align: 'center',
+        side: 'left',
+        sideOffset: 6
+      }" 
+    >
       <UButton
           class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
-          color="neutral" label="商家加盟"
+          color="neutral" 
+          label="商家加盟"
           variant="subtle"/>
       <template #content>
         <div class="w-75 lg:w-100 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto">
@@ -110,16 +118,51 @@
         </div>
       </template>
     </UPopover>
+    
+    <!-- 移动端：跳转链接 -->
+    <NuxtLink 
+      v-else-if="isMounted"
+      to="/merchantFranchise"
+      class="block"
+    >
+      <UButton
+          class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
+          color="neutral" 
+          label="商家加盟"
+          variant="subtle"/>
+    </NuxtLink>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { submitMchApply, type MchApplyParams } from '~/config/api'
 
 const toast = useToast()
 const formRef = ref()
 const isSubmitting = ref(false)
+const windowWidth = ref(0)
+const isMounted = ref(false)
+
+// 检测是否为桌面端（lg断点：1024px）
+const isDesktop = computed(() => isMounted.value && windowWidth.value >= 1024)
+
+// 监听窗口大小变化
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  isMounted.value = true
+  updateWindowWidth()
+  window.addEventListener('resize', updateWindowWidth)
+})
+
+onUnmounted(() => {
+  if (process.client) {
+    window.removeEventListener('resize', updateWindowWidth)
+  }
+})
 
 const formState = reactive<MchApplyParams>({
   name: '',