网站功能插件,vs2010网站开发实例,深圳宝安区天气,中国建设银行陕西分行官方网站文章目录 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. 页面样式代码
!-- 简洁登录页面 --
templateview classlogin-bgbr /br /br /br /br /br /br /view classt-loginform classclview classt-aimage srchttps://zhoukaiwen.com/img/loginImg/user.png/imageinput typenumber namephone placeholder请输入手机号码 maxlength11 v-modelphone //viewview classt-aimage srchttps://zhoukaiwen.com/img/loginImg/pwd.png/imageinput typepassword namecode maxlength6 placeholder请输入密码 v-modelpwd //viewbutton taplogin()登 录/buttonview classt-ctext classt-c-txt tapreg()注册账号/texttext返回首页/text/view/formview classt-ftext—————— 其他登录方式 ——————/text/viewview classt-e clview classt-g tapwxLogin()image srchttps://zhoukaiwen.com/img/loginImg/wx2.png/image/viewview classt-g tapzfbLogin()image srchttps://zhoukaiwen.com/img/loginImg/qq2.png/image/viewview classt-g tapzfbLogin()image srchttps://zhoukaiwen.com/img/loginImg/wb.png/image/view/view/viewimage classimg-a srchttps://zhoukaiwen.com/img/loginImg/bg1.png/image/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 });}}
};
/script
style
.img-a {width: 100%;position: absolute;bottom: 0;
}
.login-bg {height: 100vh;padding-top: 300rpx;background-image: url(https://zhoukaiwen.com/img/loginImg/bg3.png);
}.t-login {width: 700rpx;padding: 55rpx;margin: 0 auto;font-size: 28rpx;background-color: #ffffff;border-radius: 20rpx;box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);z-index: 9;
}
.t-login button {font-size: 28rpx;background: linear-gradient(to right, #ff8f77, #fe519f);color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;
}.t-login input {padding: 0 20rpx 0 120rpx;height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;background: #f6f6f6;border: 1px solid #f6f6f6;font-size: 28rpx;border-radius: 50rpx;
}.t-login .t-a {position: relative;
}.t-login .t-a image {width: 40rpx;height: 40rpx;position: absolute;left: 40rpx;top: 28rpx;
}.t-login .t-b {text-align: left;font-size: 46rpx;color: #000;padding: 300rpx 0 120rpx 0;font-weight: bold;
}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;
}.t-login .t-c {text-align: right;color: #666666;margin: 30rpx 30rpx 40rpx 0;
}.t-login .t-c .t-c-txt {margin-right: 300rpx;
}.t-login .t-e {text-align: center;width: 600rpx;margin: 40rpx auto 0;
}.t-login .t-g {float: left;width: 33.33%;
}.t-login .t-e image {width: 70rpx;height: 70rpx;
}.t-login .t-f {text-align: center;margin: 80rpx 0 0 0;color: #999;
}.t-login .t-f text {margin-left: 20rpx;color: #b9b9b9;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
