• uniapp余额银行卡支付密码界面实现(直接复制)

    示例：

    插件地址：自定义数字/身份证/密码输入框，键盘密码框可分离使 - DCloud 插件市场

    1.下载插件并导入HBuilderX，找到文件夹，copy number-keyboard.vue一份为number-keyboard2.vue（number-keyboard.vue是键盘，password-input.vue是密码输入框）

    、

    2.修改插件键盘和密码框样式，已写好，直接copy下面代码

    password-input.vue

    2.  
    3. <script>
    4.   export default {
    5.     props: {
    6.       //是否明文 默认密文
    7.       plaintext: {
    8.         type: Boolean,
    9.         default: true
    10.       },
    11.       //键盘输入的val
    12.       numLng: {
    13.         type: [String, Number],
    14.         default: ''
    15.       },
    16.       //密码框的个数
    17.       psdIptNum: {
    18.         type: [String, Number],
    19.         default: 6
    20.       }
    21.     },
    22.     data() {
    23.       return {}
    24.     },
    25.     created() {},
    26.     methods: {
    27.     }
    28.   }
    29. script>
    30.  
    31. <style scoped>
    32.   .psdIptBx {
    33.     display: flex;
    34.     justify-content: space-between;
    35.     width: 100%;
    36.     text-align: center;
    37.     box-sizing: border-box;
    38.   }
    39.  
    40.   .psdTtem {
    41.     width: 86rpx;
    42.     height: 86rpx;
    43.     background: #F2F2F2;
    44.     border-radius: 20rpx 20rpx 20rpx 20rpx;
    45.   }
    46.  
    47.   .psdTtemTxt {
    48.     text-align: center;
    49.     line-height: 80rpx;
    50.     font-size: 30rpx;
    51.   }
    52.  
    53.   .focus_move {
    54.     /* color: #E6240F; */
    55.     font-size: 30rpx;
    56.     line-height: 80rpx;
    57.     animation: focus 0.8s infinite;
    58.   }
    59.  
    60.   @keyframes focus {
    61.     from {
    62.       opacity: 1;
    63.     }
    64.  
    65.     to {
    66.       opacity: 0;
    67.     }
    68.   }
    69. style>

    number-keyboard.vue

    2.  
    3. <script>
    4. 	export default {
    5. 		props: {
    6. 			//限制输入框的长度 空值不限制
    7. 			psdLength: {
    8. 				type: [Number, String],
    9. 				default: ''
    10. 			},
    11. 			//键盘码
    12. 			keyboardNum: {
    13. 				type: [Array, Object],
    14. 				default: () => {
    15. 					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
    16. 				}
    17. 			},
    18. 			//特殊键盘码 .或者X  默空
    19. 			otherNum: {
    20. 				type: String,
    21. 				default: ''
    22. 			},
    23. 			//是否显示完成按钮
    24. 			confirmBtn:{
    25. 				type: Boolean,
    26. 				default: false
    27. 			},
    28. 			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
    29. 			tabBar: {
    30. 				type: Boolean,
    31. 				default: false
    32. 			},
    33. 			value: {
    34. 				type: String,
    35. 				default: ''
    36. 			}
    37. 		},
    38. 		data() {
    39. 			return {
    40. 				bodMove: '',
    41. 				password: '', //要返回的结果
    42. 				iptNum: [], //输入的内容
    43. 				KeyboarHid: false, //键盘影藏和显示
    44. 			}
    45. 		},
    46. 		watch: {
    47. 			iptNum(newVal, oldVal) {
    48. 				this.$emit('input', newVal.join(''))
    49. 			},
    50. 			value(newVal, oldVal) {
    51. 				this.iptNum = newVal.split('')
    52. 			}
    53. 		},
    54. 		created() {
    55.  
    56. 		},
    57. 		methods: {
    58. 			open() {
    59. 				this.KeyboarHid = true;
    60. 				if (this.tabBar) {
    61. 					uni.hideTabBar()
    62. 				}
    63. 				this.$nextTick(() => {
    64. 					setTimeout(() => {
    65. 						this.bodMove = 'moveShow'
    66. 					}, 30)
    67. 				})
    68. 			},
    69. 			close() {
    70. 				if (this.tabBar) {
    71. 					uni.showTabBar()
    72. 				}
    73. 				this.bodMove = '';
    74. 				this.$nextTick(() => {
    75. 					setTimeout(() => {
    76. 						this.KeyboarHid = false
    77. 					}, 300)
    78. 				})
    79. 			},
    80. 			// 密码框
    81. 			clickBoard(num) {
    82. 				if (num == '') return;
    83. 				let iptNum = this.iptNum.filter(item => item != '');
    84. 				//判断是否限制长度
    85. 				if (this.psdLength != '') {
    86. 					if (iptNum.length >= this.psdLength) {
    87. 						return
    88. 					};
    89. 					this.iptNum.push(num);
    90. 				} else {
    91. 					this.iptNum.push(num);
    92. 				}
    93. 			},
    94. 			//完成
    95. 			complete(){
    96. 				this.$emit('confirm', this.iptNum.join(''))
    97. 			},
    98. 			//重置 清空
    99. 			reset() {
    100. 				this.iptNum = [];
    101. 			},
    102. 			//删除
    103. 			deleteKeyboar() {
    104. 				this.iptNum.pop();
    105. 			}
    106. 		}
    107. 	}
    108. script>
    109.  
    110. <style scoped>
    111. 	.bodMove {
    112. 		transition: all .3s
    113. 	}
    114.  
    115. 	.bottomMove {
    116. 		bottom: 0;
    117. 		left: 0;
    118. 		width: 100%;
    119. 		transform: translateY(100%)
    120. 	}
    121.  
    122. 	.moveShow {
    123. 		transform: translateY(0)
    124. 	}
    125.  
    126. 	.KeyboarBody {
    127. 		position: fixed;
    128. 		bottom: 0;
    129. 		left: 0;
    130. 		right: 0;
    131. 		z-index: 99;
    132. 		background-color: #FFFFFF;
    133. 	}
    134.  
    135. 	.KeyboarBx {
    136. 		display: flex;
    137. 		flex-wrap: wrap;
    138. 		text-align: center;
    139. 		background-color: rgba(3, 3, 3, 0.1);
    140. 		padding: 10rpx 6rpx 0rpx 6rpx;
    141. 		margin-left: -12rpx;
    142. 	}
    143.  
    144.  
    145. 	.keyboar {
    146. 		width: 20%;
    147. 		flex-grow: 1;
    148. 		padding: 3%;
    149. 		font-size: 40rpx;
    150. 		background-color: #FFFFFF;
    151. 		border-radius: 10rpx;
    152. 		margin-left: 12rpx;
    153. 		margin-bottom: 10rpx;
    154. 	}
    155.  
    156. 	.dian {
    157. 		margin-top: -10rpx;
    158. 	}
    159.  
    160. 	.keyboarBtn {
    161. 		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
    162. 		color: #fff;
    163. 	}
    164.  
    165. 	.hover {
    166. 		background: #ebedf0;
    167. 	}
    168.  
    169.  
    170. 	.bot {
    171. 		bottom: 0;
    172. 	}
    173.  
    174. 	.empty {
    175. 		background-color: #EEEEEE;
    176. 	}
    177.  
    178. 	.dowmImgBx {
    179. 		display: flex;
    180. 		justify-content: center;
    181. 		align-items: center;
    182. 		width: 100%;
    183. 		position: relative;
    184. 	}
    185.  
    186. 	.complete {
    187. 		position: absolute;
    188. 		right: 0rpx;
    189. 		bottom: 5rpx;
    190. 		font-size: 28rpx;
    191. 		padding-right: 30rpx;
    192. 		padding-left: 20rpx;
    193. 	}
    194.  
    195. 	.dowmImg {
    196. 		width: 35rpx;
    197. 		height: 35rpx;
    198. 		margin-bottom: 10rpx;
    199. 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
    200. 		background-repeat: no-repeat;
    201. 		background-position: center center;
    202. 		background-size: 100%;
    203. 	}
    204.  
    205. 	.keyboarDel {
    206. 		width: 50rpx;
    207. 		height: 36rpx;
    208. 		margin-bottom: 10rpx;
    209. 		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
    210. 		background-repeat: no-repeat;
    211. 		background-position: center center;
    212. 		background-size: 100%;
    213. 		margin-top: 11rpx;
    214.  
    215. 	}
    216.  
    217. 	.keyboarflex {
    218. 		display: flex;
    219. 		justify-content: center;
    220. 		align-items: center;
    221. 	}
    222. style>

    number-keyboard2.vue

    2.  
    3. <script>
    4. 	export default {
    5. 		props: {
    6. 			//限制输入框的长度 空值不限制
    7. 			psdLength: {
    8. 				type: [Number, String],
    9. 				default: ''
    10. 			},
    11. 			//键盘码
    12. 			keyboardNum: {
    13. 				type: [Array, Object],
    14. 				default: () => {
    15. 					return [1, 2, 3, 4, 5, 6, 7, 8, 9]
    16. 				}
    17. 			},
    18. 			//特殊键盘码 .或者X  默空
    19. 			otherNum: {
    20. 				type: String,
    21. 				default: ''
    22. 			},
    23. 			//是否显示完成按钮
    24. 			confirmBtn:{
    25. 				type: Boolean,
    26. 				default: false
    27. 			},
    28. 			//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
    29. 			tabBar: {
    30. 				type: Boolean,
    31. 				default: false
    32. 			},
    33. 			value: {
    34. 				type: String,
    35. 				default: ''
    36. 			}
    37. 		},
    38. 		data() {
    39. 			return {
    40. 				bodMove: '',
    41. 				password: '', //要返回的结果
    42. 				iptNum: [], //输入的内容
    43. 				KeyboarHid: false, //键盘影藏和显示
    44. 			}
    45. 		},
    46. 		watch: {
    47. 			iptNum(newVal, oldVal) {
    48. 				this.$emit('input', newVal.join(''))
    49. 			},
    50. 			value(newVal, oldVal) {
    51. 				this.iptNum = newVal.split('')
    52. 			}
    53. 		},
    54. 		created() {
    55.  
    56. 		},
    57. 		methods: {
    58. 			open() {
    59. 				this.KeyboarHid = true;
    60. 				if (this.tabBar) {
    61. 					uni.hideTabBar()
    62. 				}
    63. 				this.$nextTick(() => {
    64. 					setTimeout(() => {
    65. 						this.bodMove = 'moveShow'
    66. 					}, 30)
    67. 				})
    68. 			},
    69. 			close() {
    70. 				if (this.tabBar) {
    71. 					uni.showTabBar()
    72. 				}
    73. 				this.bodMove = '';
    74. 				this.$nextTick(() => {
    75. 					setTimeout(() => {
    76. 						this.KeyboarHid = false
    77. 					}, 300)
    78. 				})
    79. 			},
    80. 			// 密码框
    81. 			clickBoard(num) {
    82. 				if (num == '') return;
    83. 				let iptNum = this.iptNum.filter(item => item != '');
    84. 				//判断是否限制长度
    85. 				if (this.psdLength != '') {
    86. 					if (iptNum.length >= this.psdLength) {
    87. 						return
    88. 					};
    89. 					this.iptNum.push(num);
    90. 				} else {
    91. 					this.iptNum.push(num);
    92. 				}
    93. 			},
    94. 			//完成
    95. 			complete(){
    96. 				this.$emit('confirm', this.iptNum.join(''))
    97. 			},
    98. 			//重置 清空
    99. 			reset() {
    100. 				this.iptNum = [];
    101. 			},
    102. 			//删除
    103. 			deleteKeyboar() {
    104. 				this.iptNum.pop();
    105. 			}
    106. 		}
    107. 	}
    108. script>
    109.  
    110. <style scoped>
    111. 	.bodMove {
    112. 		transition: all .3s
    113. 	}
    114.  
    115. 	.bottomMove {
    116. 		bottom: 0;
    117. 		left: 0;
    118. 		width: 100%;
    119. 		transform: translateY(100%)
    120. 	}
    121.  
    122. 	.moveShow {
    123. 		transform: translateY(0)
    124. 	}
    125.  
    126. 	.KeyboarBody {
    127. 		background-color: #FFFFFF;
    128. 	}
    129.  
    130. 	.KeyboarBx {
    131. 		display: flex;
    132. 		flex-wrap: wrap;
    133. 		text-align: center;
    134. 		background-color: rgba(3, 3, 3, 0.1);
    135. 		padding: 10rpx 6rpx 0rpx 6rpx;
    136. 		margin-left: -12rpx;
    137. 	}
    138.  
    139.  
    140. 	.keyboar {
    141. 		width: 20%;
    142. 		flex-grow: 1;
    143. 		padding: 3%;
    144. 		font-size: 40rpx;
    145. 		background-color: #FFFFFF;
    146. 		border-radius: 10rpx;
    147. 		margin-left: 12rpx;
    148. 		margin-bottom: 10rpx;
    149. 	}
    150.  
    151. 	.dian {
    152. 		margin-top: -10rpx;
    153. 	}
    154.  
    155. 	.keyboarBtn {
    156. 		background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
    157. 		color: #fff;
    158. 	}
    159.  
    160. 	.hover {
    161. 		background: #ebedf0;
    162. 	}
    163.  
    164.  
    165. 	.bot {
    166. 		bottom: 0;
    167. 	}
    168.  
    169. 	.empty {
    170. 		background-color: #EEEEEE;
    171. 	}
    172.  
    173. 	.dowmImgBx {
    174. 		display: flex;
    175. 		justify-content: center;
    176. 		align-items: center;
    177. 		width: 100%;
    178. 		position: relative;
    179. 	}
    180.  
    181. 	.complete {
    182. 		position: absolute;
    183. 		right: 0rpx;
    184. 		bottom: 5rpx;
    185. 		font-size: 28rpx;
    186. 		padding-right: 30rpx;
    187. 		padding-left: 20rpx;
    188. 	}
    189.  
    190. 	.dowmImg {
    191. 		width: 35rpx;
    192. 		height: 35rpx;
    193. 		margin-bottom: 10rpx;
    194. 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
    195. 		background-repeat: no-repeat;
    196. 		background-position: center center;
    197. 		background-size: 100%;
    198. 	}
    199.  
    200. 	.keyboarDel {
    201. 		width: 50rpx;
    202. 		height: 36rpx;
    203. 		margin-bottom: 10rpx;
    204. 		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
    205. 		background-repeat: no-repeat;
    206. 		background-position: center center;
    207. 		background-size: 100%;
    208. 		margin-top: 11rpx;
    209.  
    210. 	}
    211.  
    212. 	.keyboarflex {
    213. 		display: flex;
    214. 		justify-content: center;
    215. 		align-items: center;
    216. 	}
    217. style>

    3.这里我用uview 2.0中的Popup弹出层写的弹窗,没用过的小伙伴，先安装uview
    Popup 弹出层 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

    4.写一个弹出层，按钮demo

    2.  
    3. <script>
    4. import numberKeyboard from '@/components/number-keyboard/number-keyboard2.vue';
    5. import passwordInput from '@/components/password-input/password-input.vue';
    6. export default {
    7.   data () {
    8.     return {
    9.         money: '10',
    10.         show: false,
    11.         password: '',
    12.         errMsg: '', //错误提示
    13.         selectObj: {
    14.             bank_logo_img: '', //银行图片路径，自己写
    15.             bank_name: '' //银行名称，自己写
    16.         },
    17.     }
    18.   },
    19.   components: {
    20.     numberKeyboard,
    21.     passwordInput,
    22.   },
    23.   async onLoad(){
    24.   },
    25.   async onShow(){
    26.     this.selectObj = {}
    27.   },
    28.   watch:{
    29.     errMsg(newVal,oldVal){
    30.       if(newVal){
    31.         setTimeout(()=>{
    32.           this.errMsg = ''
    33.         },2000)
    34.       }
    35.     },
    36.   },
    37.   methods:{
    38.     KeyboarOpen(e) {
    39.       this.$refs.KeyboarHid.open();
    40.     },
    41.     //输入的值
    42.     async onInput(val) {
    43.         this.password = val;
    44.         if(this.password.length == 6){
    45.             // this.errMsg = '支付密码错误，请重新输入'
    46.             console.log('当前输入的密码是',this.password);
    47.             try{
    48.                 //这里写输入完正确密码后，调接口逻辑
    49.             }catch(err){
    50.                 console.log('err',err);
    51.                 this.errMsg = err.msg // 错误提示可以根据接口返回的，也可以自己写 '密码错误等...'
    52.                 this.password = ''
    53.                 this.show = false
    54.             }
    55.         }
    56.     },
    57.     submitTX(){
    58.         this.show = true
    59.         setTimeout(()=>{
    60.             this.$refs.KeyboarHid.open();
    61.         },50)
    62.     },
    63.     close(){
    64.         this.show = false
    65.         this.password = ''
    66.     },
    67.     open(){
    68.  
    69.     },
    70.     closeWindow(){
    71.         this.show = false
    72.         this.password = ''
    73.         this.errMsg = ''
    74.     },
    75.   }
    76. }
    77. script>
    78.  
    79. <style lang='scss' scoped>
    80. .withdrawal{
    81.     min-height: 100vh;
    82.     background-color: #f7f7f7;
    83.     .foot{
    84.         position: fixed;
    85.         left: 0;
    86.         bottom: 0;
    87.         padding: 8rpx 26rpx 74rpx;
    88.         box-sizing: border-box;
    89.         background-color: #ffffff;
    90.         .submit{
    91.             width: 698rpx;
    92.             height: 86rpx;
    93.             line-height: 86rpx;
    94.             text-align: center;
    95.             background: #FF843E;
    96.             border-radius: 44rpx 44rpx 44rpx 44rpx;
    97.             font-weight: 500;
    98.             font-size: 30rpx;
    99.             color: #FFFFFF;
    100.         }
    101.     }
    102. }
    103.  
    104. .windowBox{
    105.     position: relative;
    106.     background-color: #fff;
    107.     border-radius: 24rpx 24rpx 0rpx 0rpx;
    108.     z-index: 200000000000;
    109.     // padding: 50rpx 46rpx;
    110.     .closeIcon{
    111.         position: absolute;
    112.         left: 46rpx;
    113.         top: 50rpx;
    114.         width: 30rpx;
    115.         height: 30rpx;
    116.     }
    117.     .windowtitle{
    118.         font-weight: normal;
    119.         font-size: 28rpx;
    120.         color: #111111;
    121.         text-align: center;
    122.         margin-top: 42rpx
    123.     }
    124.     .txmoney{
    125.         margin-top: 56rpx;
    126.         text-align: center;
    127.         font-weight: normal;
    128.         font-size: 32rpx;
    129.         color: #707070;
    130.     }
    131.     .pricesss{
    132.         display: flex;
    133.         align-items: center;
    134.         justify-content: center;
    135.         margin-bottom: 36rpx;
    136.         font-weight: 400;
    137.         font-size: 76rpx;
    138.         color: #111111;
    139.         .rmb{
    140.             font-weight: normal;
    141.             font-size: 46rpx;
    142.             color: #111111;
    143.             margin-right: 10rpx;
    144.         }
    145.     }
    146.     .windowLine{
    147.         width: 658rpx;
    148.         height: 2rpx;
    149.         background: #EEEEEE;
    150.         margin: 0 auto;
    151.         margin-bottom: 32rpx;
    152.     }
    153.     .windowWX{
    154.         display: flex;
    155.         align-items: center;
    156.         justify-content: space-between;
    157.         padding: 0 46rpx;
    158.         box-sizing: border-box;
    159.         margin-bottom: 46rpx;
    160.         .xtz{
    161.             font-weight: normal;
    162.             font-size: 26rpx;
    163.             color: #707070;
    164.         }
    165.         .bankNameBox{
    166.             display: flex;
    167.             align-items: center;
    168.             .bankLogo{
    169.                 width: 36rpx;
    170.                 height: 36rpx;
    171.                 border-radius: 50%;
    172.                 margin-right: 10rpx;
    173.             }
    174.             .bankName{
    175.                 font-weight: normal;
    176.                 font-size: 26rpx;
    177.                 color: #707070;
    178.             }
    179.         }
    180.     }
    181. }
    182. .main {
    183.   padding: 0rpx 40rpx;
    184. }
    185. .ipt {
    186.   border-bottom: 1rpx solid #CCCCCC;
    187. }
    188. .item {
    189.   position: relative;
    190.   padding: 10rpx 78rpx;
    191.   margin-bottom: 60rpx;
    192.   .errMsg{
    193.     position: absolute;
    194.     left: 50%;
    195.     bottom: -40rpx;
    196.     transform: translate(-50%,0);
    197.     font-weight: normal;
    198.     font-size: 22rpx;
    199.     color: #F72323;
    200.   }
    201. }
    202. .title {
    203.   margin: 30rpx 0;
    204. }
    205. style>

  • 相关阅读:
    农村电力供应，这件事必须重视！
    自动驾驶中的决策规划
    毕业设计opencv 图像识别 指纹识别 - python
    5.RabbitMQ高级特性
    【趣味实践】自动化抠图工具——XMem的使用
    [蓝桥杯 2019 省 A] 填空问题 E
    spring boot 自定义 starter
    tvm交叉编译android opencl
    利用R语言进行聚类分析实战（数据+代码+可视化+详细分析）
    java计算机毕业设计ssm高校工资管理系统
  • 原文地址：https://blog.csdn.net/Rio_Gaven/article/details/139341853