|
|
@@ -1,158 +1,160 @@
|
|
|
<template>
|
|
|
- <Transition
|
|
|
- enter-active-class="transition duration-300 ease-out"
|
|
|
- enter-from-class="opacity-0"
|
|
|
- enter-to-class="opacity-100"
|
|
|
- leave-active-class="transition duration-200 ease-in"
|
|
|
- leave-from-class="opacity-100"
|
|
|
- leave-to-class="opacity-0"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-if="modelValue"
|
|
|
- class="fixed inset-0 z-[999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
|
|
- @click.self="close"
|
|
|
+ <Teleport to="body">
|
|
|
+ <Transition
|
|
|
+ enter-active-class="transition duration-300 ease-out"
|
|
|
+ enter-from-class="opacity-0"
|
|
|
+ enter-to-class="opacity-100"
|
|
|
+ leave-active-class="transition duration-200 ease-in"
|
|
|
+ leave-from-class="opacity-100"
|
|
|
+ leave-to-class="opacity-0"
|
|
|
>
|
|
|
<div
|
|
|
- class="relative w-1200px bg-white rounded-8px shadow-2xl overflow-hidden animate-zoom-in lt-sm:w-[calc(100vw-35px)] lt-sm:max-h-[90vh] lt-sm:overflow-y-auto"
|
|
|
+ v-if="modelValue"
|
|
|
+ class="fixed inset-0 z-[999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
|
|
+ @click.self="close"
|
|
|
>
|
|
|
- <!-- Close Button -->
|
|
|
- <i
|
|
|
- class="i-ep-close wh-22px font-semibold absolute top-20px right-20px text-gray-500 cursor-pointer lt-sm:top-16px lt-sm:right-16px"
|
|
|
- @click="close"
|
|
|
- ></i>
|
|
|
+ <div
|
|
|
+ class="relative w-1200px bg-white rounded-8px shadow-2xl overflow-hidden animate-zoom-in lt-sm:w-[calc(100vw-35px)] lt-sm:max-h-[90vh] lt-sm:overflow-y-auto"
|
|
|
+ >
|
|
|
+ <!-- Close Button -->
|
|
|
+ <i
|
|
|
+ class="i-ep-close wh-22px font-semibold absolute top-20px right-20px text-gray-500 cursor-pointer lt-sm:top-16px lt-sm:right-16px"
|
|
|
+ @click="close"
|
|
|
+ ></i>
|
|
|
|
|
|
- <div class="py-46px px-36px lt-sm:px-40px lt-sm:py-60px">
|
|
|
- <!-- Header -->
|
|
|
- <div class="text-center mb-45px lt-sm:mb-24px">
|
|
|
- <div class="font-s-36px pf-sc-semibold text-#000000 mb-4px lt-sm:font-s-48px">
|
|
|
- 开启您的智慧社区转型之旅
|
|
|
- </div>
|
|
|
- <div class="font-s-16px text-#091221/70 lh-30px pf-sc-regular lt-sm:font-s-26px">
|
|
|
- 提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
|
|
|
+ <div class="py-46px px-36px lt-sm:px-40px lt-sm:py-60px">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="text-center mb-45px lt-sm:mb-24px">
|
|
|
+ <div class="font-s-36px pf-sc-semibold text-#000000 mb-4px lt-sm:font-s-48px">
|
|
|
+ 开启您的智慧社区转型之旅
|
|
|
+ </div>
|
|
|
+ <div class="font-s-16px text-#091221/70 lh-30px pf-sc-regular lt-sm:font-s-26px">
|
|
|
+ 提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="flex gap-60px lt-sm:flex-col lt-sm:gap-0">
|
|
|
- <!-- Left Form -->
|
|
|
- <div class="flex-1">
|
|
|
- <el-form
|
|
|
- ref="formRef"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-position="top"
|
|
|
- class="flex flex-col gap-24px lt-sm:gap-32px"
|
|
|
- :hide-required-asterisk="true"
|
|
|
- @submit.prevent="handleSubmit"
|
|
|
- >
|
|
|
- <!-- Name -->
|
|
|
- <el-form-item prop="name" class="custom-form-item">
|
|
|
- <template #label>
|
|
|
- <span class="form-label">
|
|
|
- 您的称谓
|
|
|
- <span class="text-red-500">*</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <div class="flex gap-28px w-full lt-sm:flex-col lt-sm:gap-12px">
|
|
|
+ <div class="flex gap-60px lt-sm:flex-col lt-sm:gap-0">
|
|
|
+ <!-- Left Form -->
|
|
|
+ <div class="flex-1">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-position="top"
|
|
|
+ class="flex flex-col gap-24px lt-sm:gap-32px"
|
|
|
+ :hide-required-asterisk="true"
|
|
|
+ @submit.prevent="handleSubmit"
|
|
|
+ >
|
|
|
+ <!-- Name -->
|
|
|
+ <el-form-item prop="name" class="custom-form-item">
|
|
|
+ <template #label>
|
|
|
+ <span class="form-label">
|
|
|
+ 您的称谓
|
|
|
+ <span class="text-red-500">*</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <div class="flex gap-28px w-full lt-sm:flex-col lt-sm:gap-12px">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入您的称谓"
|
|
|
+ class="custom-input flex-1 lt-sm:w-full"
|
|
|
+ />
|
|
|
+ <el-radio-group
|
|
|
+ v-model="form.gender"
|
|
|
+ class="shrink-0 flex-1 lt-sm:w-full lt-sm:justify-start"
|
|
|
+ >
|
|
|
+ <el-radio value="mr">先生</el-radio>
|
|
|
+ <el-radio value="ms">女士</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- Phone -->
|
|
|
+ <el-form-item prop="phone" class="custom-form-item">
|
|
|
+ <template #label>
|
|
|
+ <span class="form-label">
|
|
|
+ 手机号码
|
|
|
+ <span class="text-red-500">*</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
<el-input
|
|
|
- v-model="form.name"
|
|
|
- placeholder="请输入您的称谓"
|
|
|
- class="custom-input flex-1 lt-sm:w-full"
|
|
|
+ v-model="form.phone"
|
|
|
+ placeholder="请输入您的手机号码"
|
|
|
+ class="custom-input w-full"
|
|
|
/>
|
|
|
- <el-radio-group
|
|
|
- v-model="form.gender"
|
|
|
- class="shrink-0 flex-1 lt-sm:w-full lt-sm:justify-start"
|
|
|
- >
|
|
|
- <el-radio value="mr">先生</el-radio>
|
|
|
- <el-radio value="ms">女士</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- Phone -->
|
|
|
- <el-form-item prop="phone" class="custom-form-item">
|
|
|
- <template #label>
|
|
|
- <span class="form-label">
|
|
|
- 手机号码
|
|
|
- <span class="text-red-500">*</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <el-input
|
|
|
- v-model="form.phone"
|
|
|
- placeholder="请输入您的手机号码"
|
|
|
- class="custom-input w-full"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <!-- Company/Address -->
|
|
|
- <el-form-item prop="company" class="custom-form-item">
|
|
|
- <template #label>
|
|
|
- <span class="form-label">
|
|
|
- 公司名称或项目地址
|
|
|
- <span class="text-red-500">*</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <el-input
|
|
|
- v-model="form.company"
|
|
|
- placeholder="请输入公司名称或项目地址"
|
|
|
- class="custom-input w-full"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <!-- Description -->
|
|
|
- <el-form-item prop="desc" class="custom-form-item">
|
|
|
- <el-input
|
|
|
- v-model="form.desc"
|
|
|
- type="textarea"
|
|
|
- placeholder="简要描述您的需求 (可选)"
|
|
|
- class="custom-textarea w-full"
|
|
|
- :rows="3"
|
|
|
- resize="none"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- Submit Button -->
|
|
|
- <button
|
|
|
- v-loading="loading"
|
|
|
- class="mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 lt-sm:w-453px lt-sm:m-auto lt-sm:rounded-16px lt-sm:h-84px lt-sm:mt-60px lt-sm:justify-between lt-sm:gap-8px"
|
|
|
- @click="handleSubmit"
|
|
|
- >
|
|
|
- <span class="font-s-16px lt-sm:hidden">立即咨询</span>
|
|
|
- <span class="hidden lt-sm:block lt-sm:font-s-26px">提交需求，获取专属方案</span>
|
|
|
- <i class="i-custom-arrow-right wh-18px lt-sm:wh-21px"></i>
|
|
|
- </button>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ <!-- Company/Address -->
|
|
|
+ <el-form-item prop="company" class="custom-form-item">
|
|
|
+ <template #label>
|
|
|
+ <span class="form-label">
|
|
|
+ 公司名称或项目地址
|
|
|
+ <span class="text-red-500">*</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <el-input
|
|
|
+ v-model="form.company"
|
|
|
+ placeholder="请输入公司名称或项目地址"
|
|
|
+ class="custom-input w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- Description -->
|
|
|
+ <el-form-item prop="desc" class="custom-form-item">
|
|
|
+ <el-input
|
|
|
+ v-model="form.desc"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="简要描述您的需求 (可选)"
|
|
|
+ class="custom-textarea w-full"
|
|
|
+ :rows="3"
|
|
|
+ resize="none"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <!-- Right Info -->
|
|
|
- <div
|
|
|
- class="w-390px rounded-8px p-40px flex flex-col overflow-hidden right-info lt-sm:hidden"
|
|
|
- >
|
|
|
- <div class="relative flex flex-col items-start">
|
|
|
- <div class="wh-40px bg-white rounded-10px flex-center">
|
|
|
- <i class="i-custom-phone wh-23px"></i>
|
|
|
- </div>
|
|
|
- <div class="mt-14px font-s-16px text-#091221/70">
|
|
|
- 即刻拨打400官方热线，7x24h为您服务
|
|
|
- </div>
|
|
|
- <div class="font-s-40px text-#0F67F8 d-din-pro-700-bold">400-600-7709</div>
|
|
|
+ <!-- Submit Button -->
|
|
|
+ <button
|
|
|
+ v-loading="loading"
|
|
|
+ class="mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 lt-sm:w-453px lt-sm:m-auto lt-sm:rounded-16px lt-sm:h-84px lt-sm:mt-60px lt-sm:justify-between lt-sm:gap-8px"
|
|
|
+ @click="handleSubmit"
|
|
|
+ >
|
|
|
+ <span class="font-s-16px lt-sm:hidden">立即咨询</span>
|
|
|
+ <span class="hidden lt-sm:block lt-sm:font-s-26px">提交需求，获取专属方案</span>
|
|
|
+ <i class="i-custom-arrow-right wh-18px lt-sm:wh-21px"></i>
|
|
|
+ </button>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
|
|
|
- <!-- QR Code Section -->
|
|
|
- <div class="relative mt-48px flex flex-col gap-13px">
|
|
|
- <div class="wh-40px bg-white rounded-10px flex-center">
|
|
|
- <i class="i-custom-wx wh-28px"></i>
|
|
|
+ <!-- Right Info -->
|
|
|
+ <div
|
|
|
+ class="w-390px rounded-8px p-40px flex flex-col overflow-hidden right-info lt-sm:hidden"
|
|
|
+ >
|
|
|
+ <div class="relative flex flex-col items-start">
|
|
|
+ <div class="wh-40px bg-white rounded-10px flex-center">
|
|
|
+ <i class="i-custom-phone wh-23px"></i>
|
|
|
+ </div>
|
|
|
+ <div class="mt-14px font-s-16px text-#091221/70">
|
|
|
+ 即刻拨打400官方热线，7x24h为您服务
|
|
|
+ </div>
|
|
|
+ <div class="font-s-40px text-#0F67F8 d-din-pro-700-bold">400-600-7709</div>
|
|
|
</div>
|
|
|
- <div class="font-s-16px text-#091221/70 pf-sc-regular">
|
|
|
- 微信扫码关注“绘家科技”微信公众号
|
|
|
+
|
|
|
+ <!-- QR Code Section -->
|
|
|
+ <div class="relative mt-48px flex flex-col gap-13px">
|
|
|
+ <div class="wh-40px bg-white rounded-10px flex-center">
|
|
|
+ <i class="i-custom-wx wh-28px"></i>
|
|
|
+ </div>
|
|
|
+ <div class="font-s-16px text-#091221/70 pf-sc-regular">
|
|
|
+ 微信扫码关注“绘家科技”微信公众号
|
|
|
+ </div>
|
|
|
+ <div class="text-#0F67F8 font-s-28px">扫码了解绘家</div>
|
|
|
+ <i class="i-custom-qrcode wh-136px"></i>
|
|
|
</div>
|
|
|
- <div class="text-#0F67F8 font-s-28px">扫码了解绘家</div>
|
|
|
- <i class="i-custom-qrcode wh-136px"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Transition>
|
|
|
+ </Transition>
|
|
|
+ </Teleport>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -231,7 +233,6 @@
|
|
|
|
|
|
:deep(.custom-input .el-input__wrapper.is-focus) {
|
|
|
box-shadow: 0 0 0 1px #0f67f8 !important; /* border-#0F67F8 */
|
|
|
- // ring-2 ring-blue-100 simulation
|
|
|
outline: 2px solid rgba(219, 234, 254, 0.5);
|
|
|
}
|
|
|
|
Lee