mint-ui实现移动端手机端添加银行卡城市三级选择表单效果代码
代码语言:html
所属分类:表单美化
代码描述:mint-ui实现移动端手机端添加银行卡城市三级选择表单效果代码
代码标签: 端 手机 端 添加 银行卡 城市 三级 选择 表单 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mintui.min.css"> <style> /* css reset */ body, div, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, a, input, button, textarea, table, th, tr, td { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; width: 100%; } body { color: #333; font-family: "微软雅黑"; width: 100%; font-size: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } input, textarea{ outline: none; } a { color: #555; text-decoration: none; } a:hover { text-decoration: none; } img { border: none; } ol, ul, li { list-style: none; } .vueBox{ width: 100%; } /* placeholder 字体颜色*/ ::-webkit-input-placeholder { /* WebKit browsers */ color:#B0B0B0; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#B0B0B0; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#B0B0B0; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:#B0B0B0; } .vueBox { padding-left: .3rem } .down_arrow { position: relative; width: 0.3rem; height: 0.3rem; } .down_arrow:after { content: ''; position: absolute; top: 0.08rem ; left:0.08rem ; border: 0.1rem solid transparent; border-top: 0.12rem solid #999; } .msg-box { width: 100%; height: .85rem; border-bottom: 1px solid #E2E2E2; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: .35rem; padding-right: .24rem; } .msg-item { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; } .msg-item-tit { width: 2rem; white-space: nowrap; font-size: .32rem; color: #2B2B2B; } .input-right { height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .input-right img { width: .14rem; height: .08rem; margin-left: .1rem } .input-right input { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; text-align: right; font-size: .28rem; outline: none } .div-btn { width: 100%; padding-right: .3rem; margin-top: .8rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .btn-submit { width: 6.3rem; height: .9rem; font-size: .36rem; color: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; background-color: #26A2FF; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; } .mint-popup { width: 100%; } .mint-popup-head { /* position: absolute; top: 0; left: 0; */ width: 100%; height: .8rem; font-size: .28rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #999; } .mint-popup-head li { width: 50%; height: 100%; padding: 0 .3rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .mint-popup-head li:last-child { color: #26A2FF; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .picker-item { font-size: .24rem; color: #999; } .picker-selected { font-size: .32rem; height: 1rem; line-height: 1rem; } </style> </head> <body style="background-color: #fff"> <div class="vueBox"> <div class="msg-box"> <div class="msg-item"> <span class="msg-item-tit">收款银行</span> <div class="input-right" @click="showBankName"> <input type="text" :value="bank_name" readonly="" placeholder="请选择收款银行"> <div class="down_arrow"></div> </div> </div> </div> <div class="msg-box"> <div class="msg-item"> <span class="msg-item-tit">收款银行支行</span> <div class="input-right"> <input type="text" placeholder="请输入收款银行支行"> </div> </div> </div> <div class="msg-box"> <div class="msg-item"> <span class="msg-item-tit">银行卡</span> <div class="input-right"> <input type="number" placeholder="请输入银行卡号"> </div> </div> </div> <div class="msg-box"> <div class="msg-item"> <span class="msg-item-tit">收款户名</span> <div class="input-right"> <input type="text" placeholder="请输入收款户名"> </div> </div> </div> <div class="msg-box"> <div class="msg-item"> <span class="msg-item-tit">收款地区</span> <div class="input-right" @click="showCitys"> <input type="text" :value="city_name" readonly="" placeholder="请选择收款地区"> <div class="down_arrow"></div> </div> </div> </div> <div class="div-btn"> <div class="btn-sub.........完整代码请登录后点击上方下载按钮下载查看
网友评论0