huijia-website/app/components/consultation-modal.vue

<template>
  <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
        v-if="modelValue"
        class="fixed inset-0 z-[999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
        @click.self="close"
      >
        <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>
            </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">
                      <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.phone"
                      placeholder="请输入您的手机号码"
                      class="custom-input w-full"
                    />
                  </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>

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

                <!-- 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>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
  import type { FormInstance, FormRules } from 'element-plus'

  const props = defineProps<{
    modelValue: boolean
  }>()

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const _ = props

  const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  const formRef = ref<FormInstance>()
  const loading = ref(false)

  const form = reactive({
    name: '',
    gender: 'mr',
    phone: '',
    company: '',
    desc: '',
  })

  const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入您的称谓', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入您的手机号码', trigger: 'blur' }],
    company: [{ required: true, message: '请输入公司名称或项目地址', trigger: 'blur' }],
  })

  const close = () => {
    formRef.value?.resetFields()
    formRef.value?.clearValidate()
    emit('update:modelValue', false)
  }

  const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate((valid) => {
      if (valid) {
        close()
      }
    })
  }
</script>

<style scoped lang="scss">
  .form-label {
    @apply font-s-16px text-#334155 mb-14px;
    @apply lt-sm:font-s-26px lt-sm:mb-14px;
  }

  /* Custom Input Styles to match design */
  :deep(.custom-input .el-input__wrapper) {
    @apply lt-sm:h-82px lt-sm:rounded-8px lt-sm:px-24px;
    height: 52px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #e2e8f0; /* border-gray-200 */
    padding: 0 16px;
    background-color: white;
    transition: all 0.2s;
  }

  :deep(.custom-input .el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #cbd5e1;
  }

  :deep(.custom-input .el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #0f67f8 !important; /* border-#0F67F8 */
    outline: 2px solid rgba(219, 234, 254, 0.5);
  }

  :deep(.custom-input .el-input__inner) {
    @apply h-52px lt-sm:h-82px;
    font-size: 14px;
    color: #0f172a;
  }

  :deep(.custom-textarea .el-textarea__inner) {
    @apply min-h-127px lt-sm:min-h-166px;
    @apply lt-sm:rounded-8px lt-sm:p-24px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #e2e8f0;
    padding: 12px 16px;
    font-size: 14px;
    color: #0f172a;
    transition: all 0.2s;
  }

  :deep(.custom-textarea .el-textarea__inner:focus) {
    box-shadow: 0 0 0 1px #0f67f8 !important;
    outline: 2px solid rgba(219, 234, 254, 0.5);
  }

  /* Custom Button Styles */
  .custom-button {
    background-color: #0f67f8;
    border: none;
    transition: background-color 0.2s;

    &:hover {
      background-color: #0a50ff;
    }
  }

  /* Remove default el-form-item margin-bottom to control gap via flex gap */
  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-zoom-in {
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .right-info {
    background-image: url('@/assets/images/bg-4.png');
    background-size: 100% 100%;
  }
</style>