表单间隔和按钮大小调整
This commit is contained in:
WindowBird
parent
56d494ff85
commit
30a780a854
|
|
@ -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',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user