班级网站开发与设计,wordpress百度移动落地页,网站维护项目,创建网站的步骤是文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面#xff08;一#xff09; uni-app 微信小程序之好看的ui登录页面#xff08;二#xff09; uni-app 微信小程序之好看的ui登录页面#xff08;三#xff09; uni-app 微信小程… 文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面一 uni-app 微信小程序之好看的ui登录页面二 uni-app 微信小程序之好看的ui登录页面三 uni-app 微信小程序之好看的ui登录页面四 uni-app 微信小程序之好看的ui登录页面五
1. 页面效果 2. 页面样式代码
!-- 蓝色登录页面2 --
templateview styleheight:100vh;background: #fff;view classimg-aview classt-b您好br /欢迎使用XXX小程序/view/viewview classlogin-view styleview classt-loginform classclview classt-atext classtxt手机号/textinput typenumber namephone placeholder请输入您的手机号 maxlength11 v-modelphone //viewview classt-atext classtxt密码/textinput typepassword namecode maxlength18 placeholder请输入您的密码 v-modelpwd //viewbutton taplogin()登 录/buttonview classreg tapreg()注 册/view/formview classt-ftext—————— 第三方账号登录 ——————/text/viewview classt-e clview classt-g tapwxLogin()image srchttps://zhoukaiwen.com/img/loginImg/wx.png/image/viewview classt-g tapzfbLogin()image srchttps://zhoukaiwen.com/img/loginImg/qq.png/image/view/view/view/view/view
/template
script
export default {data() {return {phone: , //手机号码pwd: //密码};},onLoad() {},methods: {//当前登录按钮操作login() {var that this;if (!that.phone) {uni.showToast({ title: 请输入您的手机号, icon: none });return;}if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {uni.showToast({ title: 请输入正确手机号, icon: none });return;}if (!that.pwd) {uni.showToast({ title: 请输入您的密码, icon: none });return;}uni.showToast({ title: 登录成功, icon: none });},//注册按钮点击reg() {uni.showToast({ title: 注册跳转, icon: none });},//等三方微信登录wxLogin() {uni.showToast({ title: 微信登录, icon: none });},//第三方支付宝登录zfbLogin() {uni.showToast({ title: 支付宝登录, icon: none });}}
};
/script
style
.txt {font-size: 32rpx;font-weight: bold;color: #333333;
}
.img-a {width: 100%;height: 450rpx;background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);background-size: 100%;
}
.reg {font-size: 28rpx;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;background: #f5f6fa;color: #000000;text-align: center;margin-top: 30rpx;
}.login-view {width: 100%;position: relative;margin-top: -120rpx;background-color: #ffffff;border-radius: 8% 8% 0% 0;
}.t-login {width: 600rpx;margin: 0 auto;font-size: 28rpx;padding-top: 80rpx;
}.t-login button {font-size: 28rpx;background: #2796f2;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;
}.t-login input {height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;border-bottom: 1px solid #e9e9e9;font-size: 28rpx;
}.t-login .t-a {position: relative;
}.t-b {text-align: left;font-size: 42rpx;color: #ffffff;padding: 130rpx 0 0 70rpx;font-weight: bold;line-height: 70rpx;
}.t-login .t-c {position: absolute;right: 22rpx;top: 22rpx;background: #5677fc;color: #fff;font-size: 24rpx;border-radius: 50rpx;height: 50rpx;line-height: 50rpx;padding: 0 25rpx;
}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;
}.t-login .t-e {text-align: center;width: 250rpx;margin: 80rpx auto 0;
}.t-login .t-g {float: left;width: 50%;
}.t-login .t-e image {width: 50rpx;height: 50rpx;
}.t-login .t-f {text-align: center;margin: 150rpx 0 0 0;color: #666;
}.t-login .t-f text {margin-left: 20rpx;color: #aaaaaa;font-size: 27rpx;
}.t-login .uni-input-placeholder {color: #aeaeae;
}.cl {zoom: 1;
}.cl:after {clear: both;display: block;visibility: hidden;height: 0;content: \20;
}
/style
