ydui实现移动端手机端证件照信息上传页面效果代码
代码语言:html
所属分类:布局界面
代码描述:ydui实现移动端手机端证件照信息上传页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>证件上传模板</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ydui.css"> <style> body { background: #F3F6F8; color: #171819; } h1, h2, h3, h4, h5, h6, p, span { font-weight: normal; margin: 0; padding: 0; } .m-cell { margin-bottom: .3rem; } .btn-block { height: .88rem; line-height: .88rem; } .mar_b0 { margin-bottom: 0; } .mar_tb0 { margin-bottom: 0; margin-top: 0 !important; } .mar_t30 { margin-top: .3rem; } .mar_t20 { margin-top: .2rem; } .n_padding { padding-top: 0 !important; } .nlr_padding { padding-left: 0 !important; padding-right: 0 !important; } .navbar-item { font-size: .4rem; color: #52b66d; } /* header */ .headp_t { padding-top: .9rem; } .m-navbar { background: #f9f9f9; } .m-navbar_ngb { background: url(../images/Mask.png) no-repeat top; background-size: 100%; } .m-navbar_ngb .m-navbar:after { display: none; } .m-navbar_ngb .navbar-title { color: #FFFFFF; } .m-navbar_ngb .back-ico:before { color: #FFFFFF; } .navbar-center .navbar-title { font-size: .36rem } /* end */ .bgfff { background: #fff !important; } .bgf3f { background: #F3F6F8 !important; } .g-flexview { height: auto; min-height: 100%; background: url(../images/Mask.png) no-repeat top; background-size: 100%; } .btn-bule { background: #4089f1; color: #fff; } .btn { height: .96rem; line-height: .96rem; padding: 0 .2rem; border-radius: 3px; font-size: .32rem; } .btn-primary { background: #4A90E2; } .header { padding: .34rem 0; display: block; } .header .headphoto { width: 1.5rem; margin: 0 auto; text-align: center; } .header .headphoto img { width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; } .header .headphoto span { margin-top: .2rem; font-size: .32rem; line-height: 100%; color: #FFFFFF; display: block; } .tabbar-icon i { width: .52rem; height: .52rem; } .tabbar-icon i.ico_home { background: url(../images/home.png) no-repeat; background-size: .52rem; } .tabbar-icon i.ico_sxdh { background: url(../images/sxdh.png) no-repeat; background-size: .52rem; } .tabbar-icon i.ico_my { background: url(../images/my.png) no-repeat; background-size: .52rem; } .tabbar-item.tabbar-active i.ico_home { background: url(../images/home_h.png) no-repeat; background-size: .52rem; } .tabbar-item.tabbar-active i.ico_sxdh { background: url(../images/sxdh_h.png) no-repeat; background-size: .52rem; } .tabbar-item.tabbar-active i.ico_my { background: url(../images/my_h.png) no-repeat; background-size: .52rem; } .m-tabbar { padding: .25rem 0 .25rem; background-color: rgba(255,255,255, 1); } .tabbar-item.tabbar-active { color: #4A90E2; } .tabbar-item .tabbar-txt { padding-top: .05rem; } .center_00 { padding: 0; display: block; } .center_30 { padding: 0 .3rem; width: 100%; } .boxfff { background: #FFFFFF; border-radius: .14rem; display: block; position: relative; box-shadow: 0 4px 16px rgba(219, 224, 230, .4); } .boxfff .grids-item:after { display: none; } .boxfff .grids-item:not(:nth-child(4n)):before { display: none; } .boxfff .m-grids-4 { background: none; } .boxfff .m-grids-4:before { display: none; } .boxfff .grids-icon i { height: .54rem; } .boxfff .grids-icon i img { height: .54rem; } .boxfff .grids-txt { padding-top: .16rem; padding-left: 0; padding-right: 0; } .boxfff .grids-item { padding-top: .46rem; padding-bottom: .46rem; } .boxfff .title { padding: .24rem .3rem; color: #9AA0A3; position: relative; display: block; } .boxfff .title:after { content: ''; position: absolute; z-index: 0; bottom: 0; right: 0; height: 1px; width: 100%; border-bottom: 1px solid #BEBEBE; opacity: .2; } .boxfff .title .leimg { width: .44rem; margin-right: .15rem; display: inline-block; align-items: center; box-sizing: border-box; } .boxfff .title .leimg img { width: .44rem; margin-top: 1px; } .boxfff .title .rig_con { text-align: right; font-size: .26rem; color: #9AA0A3; } .boxfff .title .grids-item { padding: 0; } .boxfff .title .grids-item.titsize { display: flex; } .boxfff .title .m-grids-2:before { display: none; } .boxfff .listbox { padding: .2rem 0 .3rem 0; } .boxfff .listbox li { color: #4A90E2; width: 50%; box-sizing: border-box; position: relative; padding-right: .1rem; padding-left: .3rem; font-size: .28rem; padding-top: .15rem; padding-bottom: .15rem; line-height: .46rem; display: inline-block; vertical-align: top; } .boxfff .listbox li:nth-child(odd):before { content: ''; position: absolute; z-index: 0; top: .26rem; right: 0; height: .24rem; width: 1px; border-right: 1px solid #BEBEBE; opacity: .6; } .boxfff .listbox.man li { width: 100%; } .boxfff .listbox.man li:before { display: none; } /*事项daoh*/ .sxdh_map { display: block; margin-top: .4rem; position: relative; } .sxdh_map img { width: 100%; } .sxdh_box { padding: .3rem .3rem; display: block; width: 100%; box-sizing: border-box; background: #fff; } .sxdh_box.nopad { padding: 0; } .sxdh_box .search { height: .96rem; line-height: .96rem; border-radius: .08rem; box-sizing: border-box; border: 1px solid rgba(151, 151, 151, .2); background: rgba(216, 216, 216, .1); } .sxdh_box .cell-item { padding-left: 0; } .sxdh_box .cell-item .cell-input { height: .92rem; font-size: .32rem; } .sxdh_box .cell-item .cell-ico { margin: auto .15rem auto .2rem; width: .45rem; height: .45rem; background: url(../images/sousuo-3.png) no-repeat center; background-size: .45rem .45rem; } .sxdh_box .cell-item .cell-right { height: .92rem; min-height: .92rem; } .sxdh_box .m-grids-4:before { display: none; } .sxdh_box .grids-item:after { display: none; } .sxdh_box .m-grids-4 .grids-item:not(:nth-child(4n)):before { display: none; } .sxdh_box .grids-styh { align-items: center; display: flex; align-items: flex-start; font-size: .3rem; line-height: .32rem; padding: .2rem 0; } .sxdh_box .grids-styh i { width: .32rem; margin-right: .15rem; } .sxdh_box .grids-styh i img { width: .32rem; } .sxdh_box.nopad .cell-left { padding-left: .3rem; font-size: .3rem; color: #E95F5F; } .sxdh_box.nopad .cell-left i { width: .24rem; margin-right: .15rem; } .sxdh_box.nopad .cell-left i img { width: .24rem; } .sxdh_box.nopad .m-cell:after { display: none; } .sxdh_box.nopad .m-cell { margin-bottom: .2rem; } .sxdh_box.nopad .cell-item .cell-right { height: .76rem; min-height: .76rem; } .sxdh .tab-panel-item { padding: .3rem; } .sxdh .tab-nav-item.tab-active:before { display: none; } .sxdh .tab-nav-item.tab-active { color: #4A90E2; } .sxdh .tab-nav-item a { font-size: .3rem } .sxdh .xiangqing { padding-top: .1rem; } .sxdh .xiangqing h3 { font-size: .42rem; } .sxdh .xiangqing h3 .badge-blue { font-size: .32rem; margin-left: .1rem; background: none; position: relative; top: -.02rem; padding: 3px 6px; color: #4A90E2; } .sxdh .xiangqing h3 .badge:after { background: rgba(74, 144, 226, .2); border: none; border-radius: .1rem; top: -.02rem; } .sxdh .xiangqing p { font-size: .28rem; color: #666666; line-height: .5rem; margin-top: .1rem; } .sxdh .xiangqing p b { color: #171819; font-weight: normal; margin-right: .1rem; padding-right: .1rem; border-right: 1px solid #666; } .sxdh .xiangqing p i { display: inline-block; margin-left: .1rem; height: .24rem; position: relative; } .sxdh .xiangqing p i img { width: .22rem; } .sxdh .xiangqing p.pt24 { padding-top: .24rem; margin-top: 0; } .sxdh .xiangqing .pingfen { padding-top: .24rem; color: #BEBEBE; font-size: .26rem; display: block; } .sxdh .xiangqing .pingfen img { height: .29rem; display: inline-block; } .sxdh .xiangqing .pingfen h5 { display: inline-block; height: .29rem; line-height: .28rem; margin-top: .02rem; margin-left: .15rem; font-size: .26rem; } .sxdh .fengexian { border-top: 1px solid #e9e9e9; margin-top: .3rem; } .sxdh .sxdh_box { padding-bottom: 0; } /* 协议 */ .xieyi { margin: .3rem .3rem 2.3rem .3rem; padding: .3rem; box-sizing: border-box; border-radius: .16rem; background: #fff; } .xieyi h3 { font-size: .38rem; line-height: 100%; padding: .12rem 0; color: #171819; } .xieyi p { margin-top: .3rem; line-height: 180%; font-size: .28rem; color: #656C74; } .xieyi_bt { background: #fff; width: 100%; position: fixed; bottom: 0; padding-bottom: .4rem; z-index: 999; box-shadow: 10px 2px 10px rgba(0, 0, 0, .2); } .xieyi_bt .shenmin { padding: .4rem .3rem; font-size: .26rem; color: #171819; } .xieyi_bt .shenmin input.dxk { width: .3rem; height: .3rem; outline: none; margin-right: .1rem; background-color: transparent; left: 0; border-radius: .05rem; appearance: checkbox !important; -moz-appearance: checkbox; /* Firefox */ -webkit-appearance: checkbox; /* Safari and Chrome */ } .xieyi_bt .btnbox { display: block; padding: 0 .3rem; } .xieyi_bt .btnbox a { display: block; } .xieyi_bt .shenmin a { color: #4A90E2; } .frambox { padding: .46rem .3rem 0 .3rem; } .frambox h2 { font-size: .36rem; line-height: .5rem; color: #171819; } .frambox .font_box { display: block; margin: .2rem 0 0 0; border-radius: .14rem; background: #FFFFFF; box-shadow: 0 4px 16px rgba(219, 224, 230, .4); } .frambox .font_box .m-grids-2:before { display: none; } .frambox .font_box .m-grids-2 .grids-item:not(:nth-child(2n)):before { display: none; } .frambox .font_box .grids-icon img { width: 1.5rem; height: auto; margin-top: .2rem; } .frambox .font_box .grids-icon { height: 1rem; } .frambox .font_box .grids-txt { color: #BEBEBE; font-size: .26rem; margin-top: .3rem; } .frambox .font_box .m-grids-2 { background: none !important; } .frambox .list_box { display: block; margin: .2rem 0 0 0; border-radius: .14rem; background: #FFFFFF; box-shadow: 0 4px 16px rgba(219, 224, 230, .4); } .frambox .list_box .cell-item { display: block; } .frambox .list_box .cell-left { color: #9B9B9B; font-size: .28rem; white-space: nowrap; display: block; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: .3rem; } .frambox .list_box .m-cell { background: none; } .frambox .list_box .cell-input { -webkit-box-flex: 1; height: .5rem; border: none; font-size: .3rem; } .frambox .list_box .cell-right { min-height: .5rem; padding-bottom: .3rem; } .frambox .m-cell { margin-bottom: 0; } .frambox .m-cell:after { display: none; } .frambox .list_box .cell-right .cell-input { color: #171819; } .btn_mian { display: block; padding: .42rem .3rem; } .btn_mian a { display: block; } .frambox .list_box_t { display: block; margin: .2rem 0 0 0; border-radius: .14rem; background: #FFFFFF; box-shadow: 0 4px 16px rgba(219, 224, 230, .4); } .frambox .list_box_t .m-cell { background: none; } .frambox .list_box_t .m-cell a { background: none; } .dingwei { position: absolute; right: .15rem; bottom: 2.25rem; width: 1.02rem; height: 1.02rem; background: url(../images/dingwei.png) no-repeat; background-size: contain; } .dingwei a { width: .86rem; height: .86rem; border-radius: 1rem; display: block; margin: .06rem auto auto auto; } .dingwei a:hover { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0