小程序账户密码+一键授权页面效果
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-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具