xlqx/app/components/ContactFloatingButton.vue

<!-- 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端：弹窗 - 使用 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 overflow-y-auto hidden lg:block">
          <MerchantForm container-class="p-4 bg-white rounded-lg shadow-xl" />
        </div>
      </template>
      </UPopover>
    </div>
    
    <!-- 移动端：跳转链接 - 使用 CSS 媒体查询，只在 lg 以下显示 -->
    <NuxtLink 
      to="/merchantFranchise"
      class="block lg:hidden"
    >
      <UButton
          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"/>
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
// 表单逻辑已抽离到 MerchantForm 组件
</script>