WindowBird/xlqx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表单间隔和按钮大小调整

Browse Source
This commit is contained in:
WindowBird 2025-11-04 15:25:51 +08:00
parent 56d494ff85
commit 30a780a854
2 changed files with 45 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/components/ContactFloatingButton.vue
View File

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

21
app/pages/merchantFranchise/index.vue
View File

@ -84,21 +84,22 @@ const onSubmit = async () => {
</script> </script>
<template> <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=""> <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 <UForm
ref="formRef" ref="formRef"
:state="formState" :state="formState"
class="space-y-4 w-full" class="space-y-4 w-full"
@submit="onSubmit" @submit="onSubmit"
> >
<UFormGroup label="姓名" name="name" required> <UFormGroup label="姓名" name="name" required>
<UInput <UInput
v-model="formState.name" v-model="formState.name"
placeholder="请输入您的姓名" placeholder="请输入您的姓名"
size="md" size="md"
class="w-full mb-2" class="w-full mb-5"
/> />
</UFormGroup> </UFormGroup>
@ -108,7 +109,7 @@ const onSubmit = async () => {
type="tel" type="tel"
placeholder="请输入您的手机号" placeholder="请输入您的手机号"
size="md" size="md"
class="w-full mb-2" class="w-full mb-5"
/> />
</UFormGroup> </UFormGroup>
@ -117,12 +118,12 @@ const onSubmit = async () => {
v-model="formState.city" v-model="formState.city"
placeholder="请输入您的意向合作城市" placeholder="请输入您的意向合作城市"
size="md" size="md"
class="w-full mb-2" class="w-full mb-5"
/> />
</UFormGroup> </UFormGroup>
<UFormGroup label="是否有设备" name="hasDevice"> <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"> <label class="flex items-center gap-2 cursor-pointer">
<input <input
type="radio" type="radio"
@ -150,18 +151,18 @@ const onSubmit = async () => {
placeholder="请输入您想要了解的信息" placeholder="请输入您想要了解的信息"
:rows="3" :rows="3"
size="md" size="md"
class="w-full mt-1" class="w-full mb-5"
/> />
</UFormGroup> </UFormGroup>
<div class="flex gap-2 pt-2 "> <div class="flex gap-2 ">
<UButton <UButton
type="submit" type="submit"
:loading="isSubmitting" :loading="isSubmitting"
:disabled="isSubmitting" :disabled="isSubmitting"
class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center" class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
size="md" size="xl"
> >
{{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }} {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
</UButton> </UButton>