huijia-website/app/components/ConsultationModal.vue

<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"
    >
      <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>
</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 = () => {
    emit('update:modelValue', false)
  }

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

    await formRef.value.validate((valid) => {
      if (valid) {
        loading.value = true
        // TODO: Implement submission logic
        setTimeout(() => {
          console.log('Form submitted:', form)
          ElMessage.success('需求已提交，我们会尽快联系您！')
          loading.value = false
          close()
        }, 1000)
      }
    })
  }
</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 */
    // ring-2 ring-blue-100 simulation
    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>