liuxue
/
payoffline


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name=viewport
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>支付完成</title>
    <script type="text/javascript">

    </script>

</head>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function adapter() {
        const dpWidth = document.documentElement.clientWidth
        const rootFonstSize = (dpWidth * 100) / 750
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            document.documentElement.style.fontSize = rootFonstSize + 'px'
        } else {
            document.documentElement.style.fontSize = dpWidth
        }
    }
    adapter()
    window.onresize = adapter
</script>

<body>
    <div id="Paytocomplete">
        <div class="Paytocomplete_header">
            <div class="Paytocomplete-header-nei">
                <div class="Paytocomplete-header-nei-left">
                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018150019704.png" alt="">
                </div>
                <div class="Paytocomplete-header-nei-in">支付完成</div>
            </div>
        </div>
        <div class="Paytocomplete-digital">
            <span>￥</span>
            <text>7.00</text>
        </div>
        <div class="Paytocomplete-yes">支付成功</div>
        <div class="Paytocomplete-fanhui">返回商户首页</div>
        <div class="Paytocomplete-neirong">
            <div class="Paytocomplete-neirong-yi">
                <div class="Paytocomplete-neirong-yi-left">商户名称11111</div>
                <div class="Paytocomplete-neirong-yi-left">商户名称商户名称</div>
            </div>
            <div class="Paytocomplete-neirong-yi">
                <div class="Paytocomplete-neirong-yi-left">订单状态</div>
                <div class="Paytocomplete-neirong-yi-left">支付成功</div>
            </div>
            <div class="Paytocomplete-neirong-yi">
                <div class="Paytocomplete-neirong-yi-left">订单号</div>
                <div class="Paytocomplete-neirong-yi-left">23456723456</div>
            </div>
            <div class="Paytocomplete-neirong-yi">
                <div class="Paytocomplete-neirong-yi-left">养老金</div>
                <div class="Paytocomplete-neirong-yi-left">¥234</div>
            </div>
            <div class="Paytocomplete-neirong-yi">
                <div class="Paytocomplete-neirong-yi-left">交易时间</div>
                <div class="Paytocomplete-neirong-yi-left">2022-5-21 13:32:42</div>
            </div>

        </div>
    </div>
</body>

</html>
<style>
    body {

        background: #F8F8F8;
    }

    * {
        margin: 0;
        padding: 0;
    }

    #Paytocomplete {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .Paytocomplete_header {
        width: 100%;
        height: 1.76rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFFFFF;
    }

    .Paytocomplete-header-nei {
        width: 6.86rem;
        height: 100%;
        display: flex;
    }

    .Paytocomplete-header-nei-in {
        margin-top: 1.07rem;
        font-size: 0.36rem;
        font-weight: 500;
        color: #333333;
        text-align: center;
        margin-left: 2.17rem;
    }

    .Paytocomplete-header-nei-left {
        width: 0.36rem;
        height: 0.36rem;
        margin-top: 1.17rem;
    }

    .Paytocomplete-header-nei-left img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .Paytocomplete-digital {
        height: 1.01rem;
        margin: 0.8rem 0 0 0;
        display: flex;
        align-items: center;
        height: 1.01rem;
    }

    .Paytocomplete-digital span {
        font-size: 0.64rem;
        font-weight: 600;
        color: #333333;
        margin-top: 0.27rem;
    }

    .Paytocomplete-digital text {
        font-size: 1.01rem;
        font-weight: bold;
        color: #333333;
    }

    .Paytocomplete-yes {
        font-size: 0.32rem;
        font-weight: 500;
        color: #1B1B1B;
        margin: 0.12rem 0 0 0;
    }

    .Paytocomplete-fanhui {
        margin: 0.34rem 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.9rem;
        height: 0.58rem;
        border-radius: 0.3rem;
        border: 0.01rem solid #FE0032;
        font-size: 0.24rem;
        font-weight: 400;
        color: #FE0032;
    }

    .Paytocomplete-neirong {
        width: 6.86rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: 0.87rem 0 0 0;
    }

    .Paytocomplete-neirong-yi {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.26rem;
    }

    .Paytocomplete-neirong-yi-left {
        font-size: 0.28rem;
        font-weight: 400;
        color: #333333;
    }
</style>