47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
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>
|
||
|