mui支付密码页面

j12598

于 2019-06-14 15:29:46 发布

阅读量1k

点赞数 1

分类专栏： mui 文章标签： mui 支付密码六位

本文链接：https://blog.csdn.net/j12598/article/details/91978233

版权

这篇博客介绍了如何在移动端使用mui框架构建一个输入六位支付密码的界面。通过透明度为0的input元素，结合js检测输入长度来同步更新密码框样式，适用于需要自定义支付或提现页面的App，而微信、支付宝等可直接调用其提供的接口，无需手动创建支付页面。

摘要由CSDN通过智能技术生成

移动端支付输入六位密码界面（mui项目）

话不多说，直接上代码

css部分

	body {
		background-color: rgba(255, 255, 255, .99);
	}
	#header {
		box-shadow: 0px 0px 1px 0px rgba(204, 204, 204, 1);
	}
	
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.mui-content {
		background-color: rgba(255, 255, 255, .99);
		box-sizing: border-box;
		margin-top: 44px;
		text-align: center;
		/*padding-top: 1px;*/
		padding: 10px 15px;
	}
	
	.mui-icon-back:before,
	.mui-icon-left-nav:before,
	.mui-icon-arrowright {
		color: rgba(166, 166, 166, .99);
	}
	
	.title {
		text-align: left;
		color: dimgray;
		font-size: 15px;
		padding-top: 10px;
		margin-bottom: 10px;
	}
	
	.mui-input-row,
	.mui-table-view-cell {
		padding: 10px 0;
		display: flex;
		align-items: center;
		padding-left: 15px;
		justify-content: space-between;
		border-bottom: 1px solid rgba(204, 204, 204, 1);
	}
	
	.mui-input-row img,
	.mui-table-view-cell img {
		width: 45px;
	}
	
	.mui-table-view-cell:after {
		height: 0;
	}
	
	.result {
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bank {
		margin: 0 20px;
	}
	
	.good {
		color: darkgray;
	}
	
	input[type='text'] {
		border: none;
		margin: 0;
		padding: 15px 15px 2px 15px;
		font-size: 17px;
	}
	
	.mui-input-row {
		padding: 20px 15px;
	}
	
	.mui-input-row .renminbi {
		position: relative;
		left: 4px;
	}
	
	.extra_money {
		margin-top: 5px;
		text-align: left;
		font-size: 13px;
		color: darkgray;
	}
	
	.extra_money>span:nth-child(2) {
		color: cornflowerblue;
	}
	
	.botton {
		margin-top: 15%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 45px;
		background-color: rgba(231, 231, 231, .99);
		color: white;
		border-radius: 20px;
	}
	
	.botton_active {
		background-color: rgba(24, 144, 255, .99);
	}
	
	a:active {
		color: white;
	}
	/*支付页面*/
	
	#pay {
		background-color: rgba(255, 255, 255, .99);
		position: fixed;
		top: 20%;
		height: 35%;
		width: 90%;
		margin-left: 5%;
		text-align: center;
		display: flex;
		justify-content: center;
	}
	
	#pay .mui-popover-close {
		width: 25px;
		height: 25px;
		position: absolute;
		top: 5px;
		left: 5px;
	}
	
	#pay .title {
		display: inline-block;
		margin-top: 8px;
		font-size: 20px;
	}
	
	.number {
		color: black;
		font-size: 18px;
		font-weight: bold;
	}
	
	.type {
		margin-top: 20px;
	}
	
	.number {
		margin-bottom: 20px;
	}
	
	.zfinput {
		opacity: 0;
		z-index: 2;
		position: relative;
		top: -50px;
	}
	
	.table {
		margin-top: 30px;
		display: inline-block;
		height: 40px;
		display: flex;
		justify-content: center;
	}
	
	.table>div {
		text-align: center;
		line-height: 40px;
		display: inline-block;
		width: 40px;
		height: 40px;
		border: 1px solid rgba(187, 187, 187, .99);
		border-right: none;
	}
	
	.table>div:last-child {
		border-right: 1px solid rgba(187, 187, 187, .99);
	}
	
	#pay input[type='number'] {
		width: 68%;
		margin: 0;
		padding: 0;
		height: 50px;
	}
	
	.blackpwd {
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: black;
		border-radius: 50%;
		opacity: 0;
	}

html部分

<header id="header" class="mui-bar mui-bar-transparent">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">提现</h1>
</header>
<div class="mui-content">
	<div class="title"><span>提现到银行卡</span></div>
	<div class="mui-table-view-cell">
		<div class="result">
			<img src="../images/yinhangka2.png" />
			<span class="bank">中国银行(

最低0.47元/天解锁文章