css布局实现移动端手机购票订单支付输入密码键盘效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现移动端手机购票订单支付输入密码键盘效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
    <meta charset="UTF-8">

    <style>

@font-face {
        font-family: 'iconfont';
        src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAToAA0AAAAACnAAAASTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCWhEICod8hmILFAABNgIkAyQEIAWFCAdiG9sIEZWjdZB9kWCbmi34JxC1yhRZSJH9qywM7YcGZ+Lh//f7tc+9FxGJoquT8YgnyCQi/TcY8+RxJtRpszppRDzE9/Nt6iOhBq3HaD1VVT6kqnqbmZ7ETxuKbJiOJz35D/gXAP///UrfnTheZXPuBA/YKN2fgdMbVEGV9MfWSmDPAhV10wItUAGtruoua0scGNFY+b7MeyHg6baxLODN2WNK2nsHWtGPJGSNQkFClApsXB3pTHoA4BLz8/Eb7JIFSV0G4yLrKLAAfL5iX21ye7U9bgeSI7AyWKM52DaCe0sxj2aNkvSN+1X1m/ibTQV8w+LPqg/1j/pCvQCMMRL1INAOEpCgf09gSqICI6zJ73SjlVgEiJcAoDR9vKRIkhiTwShKEEap8OTdq9Ds7vb0/AKfLnBLZnb2hAxdMre0KEAMV9HHq/JCHmSsJ9M0mPDihZVsT3z5MjmU/Pp1siPp1Su34QnFGAyNDmQMVartklrYWMQ8FjGx9yASE6ZnSHKIGkEMXge1hOhGA+vgaBxybsLutwRJs0LvOX7izJAw2dvccyZ3Qk6YlMbMdRwO8gqahgf32y/eNHQR6muPicbBXQGa7RAyc3tkQ1JyUoLJEscmJzLTxGC/EuqYG+olhwbyZyksXAdywMwM1Hiay3C9fVxSGn0vyc2oGNld+sSUCTJw+Ojnj0xNTBX5/R8dxhgTSWVQ82N8HKXq7/exeiqCi23g+jFXuAiWlg66q02SZZxmNDJilGac9ZQnjyJKUrbzU3Gygr/Hx2i9OPFpi7yxTU160eK404gQRStSdq0fLclwSnVwSHXKeAsEBJT0fitepOTaZ5ZV4XGicNwFx7tzANcB9P4EL7EUcFkMmkOl0Q1PC+LwMAkrFtfp6Y2N2yvaj4/rqdSJoYrNMk6fOUuHJywd0js/oezeb+vl9dfin/l/ajA7O2Dv3O5u7sEOuO2D+lQvpS+KXYeOO+fV740arFLnm1aVXK6dvXfXXDM6Wvog0COKl1EZiz+JEf0tdtkBt+RlK6/d8VzLNMk1K2tk7Aps3OI9kuh4k1CT4GAH/2JpnD8zhQnIOnlxjsstUjo3iBfewNaBhD+dbhcLAIHg1K6bl63k8V+WxGG3eorqe5Tb0SjpIOwKa+ofVjDrBSOrqcANYgegcBuHWMCBAjKFhVyTq1BKE5o1OxV0dXuHW33mYgyNtjFpcIhZo2MowQdYp8UTrNfoIzabze/0Fj3NyqLIATMwGDotYNJuH7NOR1CCl7FOv0dYr9MpNtuFn4e3mIgqBYJ/JZ1b7ZYW6OY1lEvyy0rRNtUEIO798Ptg/h8B3tDIBvrpAHE0U1OcWwlf+Ftt/dVL5Ul0ZZVkrq6tlQ1cG9i6rZVNWwjWS9t7bnNSVS1jRwlVoxqqhOES3aA+anSxOVimW07/SiGdX20Fj5UmVtUydtXV6GoC/ww1f0ovf226AcAO31/uZs16oYEbVvlTWnCpZ6HW/NGSA4ffIFEJQO5YDKdptTvd3nlhWcePWgZkK0vyLE9vJsnls3Qpw5TZR3IL6GKyjpbUS0obWQmqAQA=') format('woff2'),
        url('data:font/woff;charset=utf-8;base64,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') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }



        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-rmb-full:before {
            content: "\e603";
        }

        .icon-del:before {
            content: "\e622";
        }

        .icon-weixinzhifu:before {
            content: "\e630";
        }

        .icon-chenggong:before {
            content: "\e612";
        }

        .icon-Close:before {
            content: "\e601";
        }

        .icon-left:before {
            content: "\e602";
        }



        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
            text-decoration: none;
            color: inherit;
            font-weight: normal;
            font-family: "微软雅黑";
            box-sizing: border-box;
            font-style: normal;
        }
        body {
            width: 100%;
            overflow-x: hidden;
        }
        img {
            vertical-align: middle;
            max-width: 100%;
        }
        .bg-orange {
            background: #ec7043;
        }
        .bg-blue {
            background: #499de3;
        }
        .bg-gary {
            background: #ededed;
        }
        .btn {
            color: #FFFFFF;
            height: .8rem;
            font-size: .28rem;
            border-radius: .05rem;
            outline: none;
        }
        .wfull {
            width: 100%;
        }
        /*影片信息*/
        .movie-info {
            width: 90%;
            margin: 0 auto;
            padding: .6rem 0;
        }
        .thumb {
            text-align: center;
        }
        .thumb img {
            display: inline-block;
            width: 2.8rem;
            height: 3.85rem;
            box-shadow: 0px 0px .3rem .1rem rgba(0,0,0,.1)
        }
        .info {
            text-align: center;
            padding-top: .75rem;
        }
        .info h1 {
            font-size: .4rem;
            color: #000;
            font-weight: 650;
        }
        .info p {
            font-size: .26rem;
            color: #a4a4a4;
            margin-top: .18rem;
        }
        .fare {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .85rem;
        }
        .fare .pirce {
            font-size: .55rem;
            color: #ec7043;
        }
        .fare .tip {
            font-size: .27rem;
            margin-left: .2rem;
            color: #a4a4a4;
        }
        .fare .tip i {
            text-decoration: line-through;
        }
        .buy {
            width: 100%;
        }
        .buy .btn {
            border-radius: .8rem;
            margin-bottom: .28rem;
        }
        .buy p {
            font-size: .30rem;
            color: #a4a4a4;
            text-align: center;
        }
        /*对话框*/
        .dialog {
            width: 90%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #FFFFFF;
            border-radius: .1rem;
        }
        .dialog .title {
            font-size: .38rem;
            text-align: center;
            padding: .3rem 0;
            border-bottom: .01rem solid #e0e0e0;
            position: relative;
        }
        .dialog .title .close {
            display: inline-block;
            position: absolute;
            left: .35rem;
            top: .35rem;
            font-size: .4rem;
        }
        .dialog .content {
            padding: 0 .35rem .35rem .35rem;
        }
        /*支付方式*/
        .pay-type {
            display: none;
        }
        .pay-type .dialog {
            z-index: 2;
        }
        .pay-type .mask {
            position: fixed;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(0,0,0,.5);
            top: 0;
            left: 0;
            z-index: 1;
        }
        .pay-type .dialog .content p.name {
            font-size: .28rem;
            text-align: center;
            padding-top: .3rem;
        }
        .pay-type .dialog .content p.price {
            font-size: .7rem;
            text-align: center;
            padding-top: .1rem;
        }
        .pay-type .dialog .content .wx-pay {
            font-size: .35rem;
            padding: .1rem 0;
            border-bottom: .01rem solid #e5e5e6;
            border-top: .01rem solid #e5e5e6;
            margin-top: .3rem;
            display: flex;
            align-items: center;
        }
        .pay-type .dialog .content .wx-pay i {
            font-size: .8rem;
            margin-right: .3rem;
            margin-left: .3rem;
            color: #5ac53a;
        }
        .pay-type .dialog .content .btn {
            margin-top: .3rem;
        }
        /*支付密码弹窗*/
        .pay-password {
            display: none;
        }
        .pay-password .dialog {
            width: 80%;
            position: absolute;
            top: 1.3rem;
            left: 50%;
            transform: translateX(-50%);
            background: #FFFFFF;
            border-radius: .1rem;
            z-index: 4;
        }
        .pay-password .mask {
            position: fixed;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(0,0,0,.5);
            top: 0;
            left: 0;
            z-index: 2;
        }
        .pay-password .dialog .title {
            border: none;
        }
        .pay-password .dialog .content p.name {
            font-size: .34rem;
            text-align: center;
            padding-top: .2rem;
        }
        .pay-password .dialog .content p.price {
            font-size: .7rem;
            text-align: center;
            padding-top: .1rem;
        }
        .pay-password .dialog .content .pay-type {
            display: flex;
            justify-content: space-between;
            align-ite.........完整代码请登录后点击上方下载按钮下载查看