<template>
  <div>
    <div class="tel">
      <el-input v-model="phone" placeholder="手机号码" class="myinput"></el-input>
    </div>
    <div class="codeBox">
      <div class="verificationCode">
        <el-input v-model="verificationCode" placeholder="手机号码" class="myinput"></el-input>
      </div>
      <div class="gain">获取验证码</div>
    </div>
    <div class="submit">提交</div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      phone: "",
      verificationCode: ""
    };
  }
};
</script>


<style lang="scss">
.myinput .el-input__inner {
  height: 2.25rem;
}
.tel {
  margin: 2.125rem 1.3125rem 1.0625rem 1.3125rem;
  height: 2.5rem;
}
.codeBox {
  height: 2.25rem;
  margin-left: 1.3125rem;
  margin-bottom: 1.0625rem;
  .verificationCode {
    float: left;
    width: 13rem;
    height: 2.5rem;
    margin-right: 0.75rem;
  }
  .gain {
    float: left;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 0.9375rem;
    line-height: 2.25rem;
    width: 7.125rem;
    height: 2.25rem;
    background: linear-gradient(
      90deg,
      rgba(114, 182, 253, 1),
      rgba(52, 119, 254, 1)
    );
    box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
    border-radius: 4px;
  }
}
.submit {
  width: 20.875rem;
  height: 2.5rem;
  background: linear-gradient(
    90deg,
    rgba(114, 182, 253, 1),
    rgba(52, 119, 254, 1)
  );
  box-shadow: 0px 4px 12px 0px rgba(60, 127, 254, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  text-align: center;
  line-height: 2.5rem;
  margin-left: 1.3125rem;
}
</style>
