效果：

代码：

<template>
    <div class="wrapper">
        <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" />
        <div class="wrapper__input">
            <input class="wrapper__input__content" placeholder="请输入手机号">
        </div>
        <div class="wrapper__input">
            <input class="wrapper__input__content" placeholder="请输入密码">
        </div>
        <div class="wrapper__login-button">登录</div>
        <div class="wrapper__login-link">立即注册</div>
    </div>
</template>

<script>

export default {
  name: 'Login',
  setup (props) {
    const test = '33'
    return { test }
  }
}

</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &__img {
      display: block;
      height: .66rem;
      width: .66rem;
      margin: 0 auto .4rem auto;
  }
  &__input {
    box-sizing: border-box;
    margin: 0 .4rem .16rem .4rem;
    padding: .16rem;
    height: .48rem;
    background: #F9F9F9;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 6px;
    border-radius: 6px;
    &__content {
      width: 100%;
      line-height: .48rem;
      border: none;
      outline: none;
      background: none;
      font-size: 0.16rem;
      &::placeholder {
        color: rgba(0,0,0,0.50);
      }
    }
  }
  &__login-button {
    margin: .32rem .4rem .16rem .4rem;
    font-size: .14rem;
    text-align: center;
    line-height: .48rem;
    background: #0091FF;
    box-shadow: 0 4px 8px 0 rgba(0,145,255,0.32);
    border-radius: 4px;
    border-radius: 4px;
  }
  &__login-link {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0,0,0,0.50);
    letter-spacing: 0;
    text-align: center;
  }

}
</style>