kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" >
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>开通新手包</title>
    <style>

        .FlexColumn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .FlexRow {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .container {
            width:100%;
            padding: 0;
            margin: auto 0;
            background-color: #f8f8f8;
        }
        .img1{
            width:100%;
        }
        .img2{
            width:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .imgPanel{
            width:100%;
            height:345px;
            background-image: linear-gradient(180deg, #5539B2 0%, #3D343D 100%);
        }


        .imgPanel0{
            width:355px;
            height:350px;
            position: relative;
            justify-content: flex-start;
            align-items: flex-start;
            background-image: linear-gradient(141deg, #56C45B 0%, #00A87C 15%, #008988 44%, #00687A 74%, #2D4757 100%);
            border-radius: 20px;
        }

        .Number{
            color:#fff;
            z-index: 10;
            text-align: center;
        }

        .Number1{
            font-size:48px;
        }
        .Number2{
            font-size:36px;
        }
        .Number3{
            font-size:36px;
        }


        .imgPanel1{
            width:100%;
            height:40px;
        }
        .imgPanel2{
            width:100%;
            height:71px;
            justify-content: flex-start;
        }
        .Avatar{
            width:60px;
            height:60px;
            background-color: #fff;
            margin-left: 30px;
        }
        .Avatar1{
            width:50px;
            height:50px;
            background-color: #aaa;
        }


        .bm_weblink_data_01{
            width:90px;
            height:50px;
            margin-left: 12px;
        }

        .imgPanel3{
            width:100%;
            height:72px;
            justify-content: flex-start;
        }
        .bm_weblink_data_02{
            width:127px;
            height:72px;
            margin-left: 30px;
        }
        .imgPanel31{
            width:110px;
            height:72px;
            justify-content: flex-start;
        }
        .bm_weblink_data_03{
            width:105px;
            height:8px;
        }

        .bm_weblink_data_04{
            width:70px;
            height:72px;
        }

        .imgPanel4{
            width:100%;
            height:58px;
            justify-content: flex-start;
        }

        .bm_weblink_data_05{
            width:74px;
            height:58px;
            margin-left: 30px;
        }
        .imgPanel41{
            width:86px;
            height:58px;
            justify-content: flex-start;
        }

        .bm_weblink_data_06{
            width:92px;
            height:7px;
        }
        .bm_weblink_data_07{
            width:77px;
            height:58px;
        }


        .imgPanel5{
            width:100%;
            height:59px;
            justify-content: flex-start;
        }

        .bm_weblink_data_08{
            width:134px;
            height:59px;
            margin-left: 30px;
        }
        .imgPanel51{
            width:113px;
            height:59px;
            justify-content: flex-start;
        }

        .bm_weblink_data_09{
            width:106px;
            height:8px;
        }

        .imgPanel6{
            width:100%;
            height:24px;
            justify-content: flex-start;
        }

        .imgPanel61{
            width:134px;
            height:24px;
            margin-left: 30px;
        }
        .bm_weblink_data_10{
            width:113px;
            height:24px;
        }

        .imgPanel7{
            width:100%;
            height:30px;
        }

        .bm_weblink_prize{
            width:64px;
            height:125px;
            position: absolute;
            bottom:-5px;
            right:10px;
        }

        .panel2{
            width:100%;
            background: #3D343D;
            justify-content: flex-start;
        }
        .panel21{
            width:355px;
            background: #F2F2F2;
            border-radius: 20px;
            margin-top: 15px;
        }

        .bm_weblink_02{
            width:100%;
            margin-top: 40px;
        }
        .qrcode{
            width:130px;
            height:130px;
            background-color: #fff;
            border-radius: 10px;
        }

        .qrcode1{
            width:120px;
            height:120px;
            background-color: #fff;
        }

        .panel211{
            font-size: 12px;
            color: #1E1E1E;
            margin: 20px 0 38px 0;
        }

        .panel3{
            width:100%;
            height:50px;
            background: #3D343D;
        }

    </style>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var userID=1;


            $.get("../apiData/[链接1]", function (data) {
                $("#dayNum").text(data.result.Column2.总练习天数);
                $("#cardNum").text(data.result.Column2.总题卡数);
                $("#timeNum").text(data.result.Column2.总练习时长);
                $("#Avatar").attr("src",data.result.Column0.小程序头像);

                $.get('../apiData/[链接2]', function (data) {
                    setTimeout(function(){
                        $("#QRCode").attr("src","https://miaguo-1253256735.file.myqcloud.com/MiaoguoUser[UserID].png");
                    },5000);
                });
            });
        });
    </script>
</head>
<body class="container FlexColumn">
    <div class="main FlexColumn">
        <img class="img1" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_01.png?0" />
        <div class="imgPanel FlexColumn">
            <div class="imgPanel0 FlexColumn">
                <div class="imgPanel1"></div>
                <div class="imgPanel2 FlexRow">
                    <div class="Avatar FlexRow">
                        <img id="Avatar" class="Avatar1" src="" />
                    </div>
                    <img class="bm_weblink_data_01" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_01.png" />
                </div>
                <div class="imgPanel3 FlexRow">
                    <img class="bm_weblink_data_02" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_02.png" />
                    <div class="imgPanel31 FlexColumn">
                        <div id="dayNum" class="Number1 Number">0000</div>
                        <img class="bm_weblink_data_03" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_03_1.png" />
                    </div>
                    <img class="bm_weblink_data_04" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_04.png" />
                </div>
                <div class="imgPanel4 FlexRow">
                    <img class="bm_weblink_data_05" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_05.png" />
                    <div class="imgPanel41 FlexColumn">
                        <div id="cardNum" class="Number2 Number">0000</div>
                        <img class="bm_weblink_data_06" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_06_1.png" />
                    </div>
                    <img class="bm_weblink_data_07" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_07.png" />
                </div>
                <div class="imgPanel5 FlexRow">
                    <img class="bm_weblink_data_08" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_08.png" />
                    <div class="imgPanel51 FlexColumn">
                        <div id="timeNum" class="Number3 Number">0000</div>
                        <img class="bm_weblink_data_09" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_09_1.png" />
                    </div>
                </div>
                <div class="imgPanel6 FlexRow">
                    <div class="imgPanel61 FlexColumn">
                    </div>
                    <img class="bm_weblink_data_10" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_data_10.png" />

                </div>
                <img class="bm_weblink_prize" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_prize.png" />

            </div>
        </div>

        <div class="panel2 FlexColumn">
            <div class="panel21 FlexColumn">

                <img class="bm_weblink_02" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_02.png?5" />
                <div class="qrcode FlexColumn" >
                    <img id="QRCode" class="qrcode1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_04.png" />
                </div>
                <div class="panel211">长按扫码打开小程序</div>

            </div>
        </div>
        <div class="panel3"></div>
        <img class="img1" src="http://miaguo-1253256735.file.myqcloud.com/web/bm_weblink_03.png?0" />
    </div>
</body>
</html>