小程序账户密码+一键授权页面效果
2021/11/5 12:09:54
本文主要是介绍小程序账户密码+一键授权页面效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.页面效果
2.login.wxml
<view class="login-container"> <view class="title">微信小程序App</view> <view class="login-box"> <label>用户名</label> <input placeholder="请输入用户名"/> <label>密码</label> <input placeholder="请输入密码"/> <button class="login-btn">立即登录</button> <view class="three-line">一一一一一第三方登录一一一一一</view> <button class="login-btn" style="background-color:green;">微信登录</button> </view> </view>
3. login.wxss
/* pages/login/login.wxss */ page{ height: 100%; /* 使用page的height可以使页面占全屏 */ background-color: #fafafa; } .login-container{ padding: 0 10%; height: 100%; } .title{ font-size: large; text-align: center; padding-top: 10%; font-weight: bold; } .login-box{ margin-top: 10%; padding: 10% 5%; background-color: white; border-radius: 10px; box-shadow: 0 4px 4px #888888; } .login-box>input{ margin: 5% 0 8% 0; border-bottom: 1rpx solid lightgray; } .login-btn{ width: 100%!important; background-color: #2f6afd; color: white; font-weight: normal; } .three-line{ margin: 8% 0; text-align: center; font-size: 12px; color: gray; }
这篇关于小程序账户密码+一键授权页面效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享
- 2024-10-30微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享
- 2024-10-29小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享
- 2024-10-29小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享
- 2024-10-29小程序的点击事件页面如何写-icode9专业技术文章分享
- 2024-10-25微信小程序如何使用echarts的折线图-icode9专业技术文章分享
- 2024-10-21微信小程序 如何获取页面路径-icode9专业技术文章分享