xlqx/app/components/ContactFloatingButton.vue
2025-11-04 15:32:40 +08:00

47 lines
1.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 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>