uni-app 微信小程序之好看的ui登录页面（五）

文章目录

更多登录ui页面

uni-app 微信小程序之好看的ui登录页面（一）
uni-app 微信小程序之好看的ui登录页面（二）
uni-app 微信小程序之好看的ui登录页面（三）
uni-app 微信小程序之好看的ui登录页面（四）
uni-app 微信小程序之好看的ui登录页面（五）

1. 页面效果

2. 页面样式代码

<!-- 顶部蓝色 --><template><viewclass="contaier"><viewclass="top-bg"><viewclass="text-white text-bold text-xxxl">前端铺子</view><viewclass="margin-top-xs text-white">欢迎使用，请先登录</view></view><viewclass="input-box padding-lr"><form><viewclass="cu-form-group margin-top"><viewclass="title">邮件</view><inputplaceholder="两字短标题"name="input"></input></view><viewclass="cu-form-group"><viewclass="title">输入框</view><inputplaceholder="三字标题"name="input"></input></view><viewclass="cu-form-group solid-bottom"><viewclass="title">验证码</view><inputplaceholder="输入框带个按钮"name="input"></input><buttonclass='cu-btn bg-login-zl shadow'>验证码</button></view></form></view><viewclass="padding margin-top-xs"><buttonclass="cu-btn block round bg-login-zl margin-tb-sm lg">立即登录</button><viewclass="text-gray flex justify-between padding-lr-sm"><text>注册账号</text><text>忘记密码</text></view></view></view></template><script>exportdefault{data(){return{};},onLoad(){},methods:{}};</script><stylelang="scss"scoped>.contaier{height: 100vh;background-color: #ffffff;}.top-bg{width: 750rpx;background-image:url(https://cdn.zhoukaiwen.com/head-bg.png);height: 480rpx;background-size: 100%;background-repeat: no-repeat;text-align: center;padding-top: 170rpx;}.bg-login-zl{background-image:linear-gradient(45deg, #727CFB, #46D0ED);color: #ffffff;}</style>