From 30a780a854ea21c46344c593942046d37e0398b8 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 4 Nov 2025 15:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=97=B4=E9=9A=94=E5=92=8C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ContactFloatingButton.vue | 95 +++++++++---------------
 app/pages/merchantFranchise/index.vue    | 21 +++---
 2 files changed, 45 insertions(+), 71 deletions(-)

diff --git a/app/components/ContactFloatingButton.vue b/app/components/ContactFloatingButton.vue
index d539f89..4c78e68 100644
--- a/app/components/ContactFloatingButton.vue
+++ b/app/components/ContactFloatingButton.vue
@@ -1,39 +1,40 @@
 <!-- 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">
-    <!-- PC端：弹窗 -->
-    <UPopover 
-      v-if="isDesktop"
-      arrow 
-      mode="click" 
-      :popper="{ placement: 'left-start' }"    
-      :content="{
-        align: 'center',
-        side: 'left',
-        sideOffset: 6
-      }" 
-    >
+  <div class="fixed right-2 lg:right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
+    <!-- PC端：弹窗 - 使用 CSS 媒体查询，只在 lg 及以上显示 -->
+    <div class="hidden lg:block">
+      <UPopover 
+        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="商家加盟"
           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">
+        <div class="w-75 lg:w-100 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto hidden lg:block">
           <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
-          <h3 class="text-lg font-semibold mb-1 text-gray-800">商家加盟申请</h3>
+          <h3 class="text-lg font-semibold my-4 text-gray-800">商家加盟申请</h3>
           <UForm 
             ref="formRef"
             :state="formState" 
             class="space-y-4 w-full"
             @submit="onSubmit"
+
           >
             <UFormGroup label="姓名" name="name" required>
               <UInput 
                 v-model="formState.name" 
                 placeholder="请输入您的姓名"
                 size="md"
-                class="w-full mb-2"
+                class="w-full mb-5"
               />
             </UFormGroup>
 
@@ -43,7 +44,7 @@
                 type="tel"
                 placeholder="请输入您的手机号"
                 size="md"
-                class="w-full mb-2"
+                class="w-full mb-5"
               />
             </UFormGroup>
 
@@ -52,12 +53,12 @@
                 v-model="formState.city" 
                 placeholder="请输入您的意向合作城市"
                 size="md"
-                class="w-full mb-2"
+                class="w-full mb-5"
               />
             </UFormGroup>
 
             <UFormGroup label="是否有设备" name="hasDevice">
-              <div class="flex gap-4">
+              <div class="flex gap-4 mb-5">
                 <label class="flex items-center gap-2 cursor-pointer">
                   <input 
                     type="radio" 
@@ -85,29 +86,24 @@
                 placeholder="请输入您想要了解的信息"
                 :rows="3"
                 size="md"
-                class="w-full mt-1"
+                class="w-full mb-5"
               />
             </UFormGroup>
 
 
-            <div class="flex gap-2 pt-2 ">
-              <UButton 
+            <div class="flex gap-2  ">
+              <UButton
+
                 type="submit" 
                 :loading="isSubmitting"
                 :disabled="isSubmitting"
-                class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center"
-                size="md"
+                class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
+                size="xl"
+
               >
                 {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
               </UButton>
-              <UButton 
-                type="button"
-                variant="outline"
-                @click="resetForm"
-                size="md"
-              >
-                重置
-              </UButton>
+
             </div>
           </UForm>
 
@@ -117,16 +113,16 @@
           <img src="https://api.ccttiot.com/image-1762158699504.png" alt="">
         </div>
       </template>
-    </UPopover>
+      </UPopover>
+    </div>
     
-    <!-- 移动端：跳转链接 -->
+    <!-- 移动端：跳转链接 - 使用 CSS 媒体查询，只在 lg 以下显示 -->
     <NuxtLink 
-      v-else-if="isMounted"
       to="/merchantFranchise"
-      class="block"
+      class="block lg:hidden"
     >
       <UButton
-          class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
+          class="bg-primary hover:bg-primary-600 text-white px-4 py-2 rounded-l-lg shadow-lg transition-all duration-300 "
           color="neutral" 
           label="商家加盟"
           variant="subtle"/>
@@ -135,34 +131,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive } 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: '',
@@ -177,7 +151,6 @@ const showToast = (title: string, type: 'success' | 'error' = 'success') => {
     title,
     color: type === 'success' ? 'success' : 'error',
     icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',
-
   })
 }
 
diff --git a/app/pages/merchantFranchise/index.vue b/app/pages/merchantFranchise/index.vue
index e8b48fd..cf43cdd 100644
--- a/app/pages/merchantFranchise/index.vue
+++ b/app/pages/merchantFranchise/index.vue
@@ -84,21 +84,22 @@ const onSubmit = async () => {
 </script>
 
 <template>
-  <div class="w-full   p-4 bg-white rounded-lg shadow-xl ">
+  <div class="w-full   p-4 bg-white rounded-lg shadow-xl mb-16">
     <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
-    <h3 class="text-lg font-semibold mb-1 text-gray-800">商家加盟申请</h3>
+    <h3 class="text-lg font-semibold my-4 text-gray-800">商家加盟申请</h3>
     <UForm
         ref="formRef"
         :state="formState"
         class="space-y-4 w-full"
         @submit="onSubmit"
+
     >
       <UFormGroup label="姓名" name="name" required>
         <UInput
             v-model="formState.name"
             placeholder="请输入您的姓名"
             size="md"
-            class="w-full mb-2"
+            class="w-full mb-5"
         />
       </UFormGroup>
 
@@ -108,7 +109,7 @@ const onSubmit = async () => {
             type="tel"
             placeholder="请输入您的手机号"
             size="md"
-            class="w-full mb-2"
+            class="w-full mb-5"
         />
       </UFormGroup>
 
@@ -117,12 +118,12 @@ const onSubmit = async () => {
             v-model="formState.city"
             placeholder="请输入您的意向合作城市"
             size="md"
-            class="w-full mb-2"
+            class="w-full mb-5"
         />
       </UFormGroup>
 
       <UFormGroup label="是否有设备" name="hasDevice">
-        <div class="flex gap-4">
+        <div class="flex gap-4 mb-5">
           <label class="flex items-center gap-2 cursor-pointer">
             <input
                 type="radio"
@@ -150,18 +151,18 @@ const onSubmit = async () => {
             placeholder="请输入您想要了解的信息"
             :rows="3"
             size="md"
-            class="w-full mt-1"
+            class="w-full mb-5"
         />
       </UFormGroup>
 
 
-      <div class="flex gap-2 pt-2 ">
+      <div class="flex gap-2  ">
         <UButton
             type="submit"
             :loading="isSubmitting"
             :disabled="isSubmitting"
-            class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center"
-            size="md"
+            class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
+            size="xl"
         >
           {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
         </UButton>