效果如图所示:

代码如下：

<div class="login__form"><div style="margin-top:10%;text-align:center"><el-input style="width:80%" v-model="login.name" prefix-icon="el-icon-user" placeholder="请输入您的账号"></el-input></div><div style="margin-top:6%;text-align:center"><el-input style="width:80%" v-model="login.password" type="password" show-password prefix-icon="el-icon-lock" placeholder="请输入您的密码"></el-input></div><div style="margin-top:8%;text-align:center"><el-button@click="toLogin()" style="width:80%"><span>登录</span></el-button></div></div>

<style lang="less" scoped>login__form {/deep/ .el-input__inner {border: none;border-radius: 0;border-bottom: 1px solid #C0C4CC;}/deep/ .el-input__inner:hover {border-bottom: 1px solid #409EFF;}/deep/ .el-icon-user:before{-webkit-line-clamp: 2;font-size: 25px;background-image: -webkit-linear-gradient(bottom, #59C2FD,#3F79F4);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}/deep/ .el-icon-lock:before {-webkit-line-clamp: 2;font-size: 25px;background-image: -webkit-linear-gradient(bottom, #59C2FD,#3F79F4);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}/deep/ .el-button {background:-webkit-gradient(linear, 100% 0%, 0% 0%,from(#59C2FD), to(#2B99FF));border-radius: 20px;color: #fff;}}</style>