pc_shop_site/components/Subscription.vue

<template>
  <div class="wrap">
    <div class="wrap-title">
      <img src="@/assets/img/e-mail@2x.png" />
      <span >Get the latest sales and new product annoucements right to your inbox</span>
    </div>
      <el-form :inline="true" ref="emailForm" :model="emailForm" method="post" action="https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=210&cid=1413118&lid=11002" :rules="rules" @submit.native="submit($event)">
        <el-form-item prop="email">
          <el-input v-model="emailForm.email" name="data[email]" placeholder="E-MAIL" clearable></el-input>
        </el-form-item>
        <el-form-item prop="fname">
          <el-input v-model="emailForm.fname"  name="data[fname]"  placeholder="FIRST NAME" clearable></el-input>
        </el-form-item>
        <el-form-item prop="lname">
          <el-input v-model="emailForm.lname"  name="data[lname]"  placeholder="LAST NAME" clearable></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="emailForm.phone"  name="data[phone]"  placeholder="PHONE" clearable></el-input>
        </el-form-item>
        <el-form-item prop="business">
          <el-input v-model="emailForm.business"  name="data[business]" placeholder="BUSINES" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="submit" value="Submit" class="sumbitBtn"></el-input>
          <!-- <el-button type="primary" @click="onSubmit">Submit</el-button> -->
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emailForm: {
        email: "",
        fname: "",
        lname: "",
        phone: "",
        business: "",
      },
      rules:{
        email: [{ required: true, message: "Please enter the correct format", pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,trigger: "blur" }],
        fname: [{ required: true, message: "Please enter", trigger: "blur" }],
        lname: [{ required: true, message: "Please enter", trigger: "blur" }],
        phone: [{ required: true, message: "Please enter the correct format",  pattern:/^1[0-9]{10}$/, trigger: "blur" }],
        business: [{ required: true, message: "Please enter", trigger: "blur" }],
      },
    };
  },
  methods: {
    submit(e) {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return  e.preventDefault();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #f2f2f2;
  padding: 15px 30px 0;
  .wrap-title {
    margin-bottom: 10px;
    img, span {
      vertical-align: middle;
    }
    span {
      display: inline-block;
      color: #999;
      margin-left: 20px;
    }
  }
  .el-input{
      width: 220px;
    }
  .el-button{
      width: 140px !important;
  }
  .sumbitBtn{
    width: 140px !important;
    :deep(.el-input__inner){
      cursor: pointer;
      background-color: #E90000;
      color: #fff;
      border-color: #E90000;
      &:hover {
      opacity: 0.7;
    }
    }
  }
   //显示时按钮样式 
  .el-button--primary { //需要更改的按钮类型 type='primary'
    background: #E90000 !important;
    border-color: #E90000 !important;
  }
  //移入时按钮样式 type='primary'
  .el-button--primary:hover {
    background: #E90000 !important;
    border-color: #E90000 !important;
    opacity: 0.7;
  }
}
</style>