onecric_h5/recruit/3.vue

<template>
  <div class="section">
    <img class="img" src="/static/image/recruit/3.jpg" alt="">
    <div class="input-box">
      <u--input
        :class="{'active': email}"
        placeholder=""
        v-model="email"
        border="none"
      ></u--input>
      <u-button text="Submit to" @click="submit"></u-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      email: ''
    }
  },
  methods: {
    submit() {
      if (!this.email.trim()) {
        uni.$u.toast('Please enter the what APP account');
        return
      }
      uni.showLoading({
        title: this.$t('login.lab18')
      })
      uni.$u.http.post('api/live_streaming/submit_email', {
        email: this.email.trim()
      }).then(res => {
        uni.showToast({
          title: this.$t('login.lab13'),
          icon: "success"
        })
        this.email = ''
      }).finally(() => {
        uni.hideLoading();
      });
    }
  }
}
</script>
<style lang="scss">
.section {
  position: relative;
}
.img {
  width: 100%;
  display: block;
}
.input-box {
  position: absolute;
  bottom: 6.66vw;
  left: 13.33vw;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  .u-input {
    height: 7.2vw;
    width: 40vw;
    &.active {
      background-color: #fff;
    }
  }
  .u-button {
    width: 20vw;
    height: 7.2vw;
    opacity: 0 !important;
  }
}
</style>