fashion-ssr-vue3/pages/blog/index.vue

<script lang='ts' setup>
import { submitSubscribeApi } from '~/api/model/common'

const form = ref<any>({
  mail: '',
})
async function submitSubscribe() {
  try {
    await submitSubscribeApi(form.value)
    ElMessage.success(`You've subscribed successfully.`)
    form.value.mail = ''
  }
  catch (error) {
    console.log(error)
  }
}
const validateEmail = computed(() => {
  const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
  if (!form.value.mail)
    return true
  return emailReg.test(form.value.mail)
})
</script>

<template>
  <div>
    <div class="pt-184px pb-50px bg-#F3F4FB text-center">
      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative">
        EJET Spark  <span class="custom-title-bg">Blog</span>
        <img src="@/assets/images/blog_icon05.png" class="w-90px h-90px pos-absolute top--10px left--120px" alt="" srcset="">
        <img src="@/assets/images/blog_icon06.png" class="w-70px h-70px pos-absolute top--20px right--100px" alt="" srcset="">
      </h2>
      <div class="pos-relative w-500px mx-auto mb-60px mt-40px">
        <el-input v-model.trim="form.mail" class="custom-input h-46px !b-rd-200px overflow-hidden" placeholder="Please enter your email address" />
        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-140px !text-16px !b-rd-150px" @click="submitSubscribe">
          Subscribe
        </el-button>
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
.custom-title-bg{
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg03.png);
  background-repeat: no-repeat;
  background-position: 88% 150%;
  background-size: 94% auto;
}
::v-deep(.custom-input){
  .el-input__wrapper{
    border-radius:4px!important;
    padding: 7px 10px!important;
    color: #999;
    font-size: 16px;
    box-shadow: unset!important;
  }
}
</style>