fashion-ssr-vue3/components/common/loginAndDownload/comp/info/request.vue

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

const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep } = useLoginAndDownload()
const ruleFormRef = ref<FormInstance>()

const rules = ref<FormRules>({
  code: [
    { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
  ],
})
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px flex items-center">
      Request Successfully!👏
    </div>
    <div class="text-14px text-#1A1A1A lh-22px  ">
      Our product expert will contact you soon to send you the catalog. Please check your mailbox later.
    </div>
    <el-divider class="!my-30px">
      or
    </el-divider>
    <div class="text-14px text-#1A1A1A lh-22px mb-30px">
      Directly contact us now to talk about your product needs and sourcing requirements.
    </div>
    <div class="b-rd-200px bg-#fff b-1px py-14px px-46px text-#333 b-solid b-#D8D8D8   hover:b-#9B6CFF flex  items-center">
      <div class="p-14px b-rd-50% bg-#F2E5F2 mr-26px">
        <img src="@/assets/images/wechat.png" class="w-24px h-24px" alt="">
      </div>
      <div>
        <div class="text-18px fw-bold custom-title-font">
          WhatsApp
        </div>
        <div class="text-#9B6CFF lh-24px">
          +1 (234) 567-890
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
  &.error-txt{
    .el-input__wrapper{
      border: 1px solid red!important;
   }
  }
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>