<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>超级签购买界面</title>
    <link href="__CSS__/ssg/common.css" rel="stylesheet" type="text/css">
    <script src="__JS__/ssg/flexible.min.js" type="text/javascript"></script>
</head>
<style>
    body {
        background-color: #F5F5F5;
    }

    .flexitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .title {
        display: flex;
        height: .9rem;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background-color: #21B1EB;
        color: white;
        font-size: .28rem;
    }

    .title img {
        width: .3rem;
        height: .3rem;
    }

    .borderitem::after {
        /* margin-left: .24rem; */
        height: 1px;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        background-image: -webkit-linear-gradient(bottom, #ececec 50%, transparent 0);
        background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
    }

    .shaddowbox {
        background-color: #fff;
        border-radius: .24rem;
        box-shadow: 0px 0px 6px 0px rgba(89, 40, 8, 0.15);
    }

    input {
        background-color: #F5F5F5;
    }
</style>

<body>

    <div class="title">
        <div class="flexitem">
            <img class="logout" src="__IMG__/ssg/index/logout.png" style="margin-left:.29rem;">
            <div style="margin-left: 5px;">退出登入</div>
        </div>
        <div style="font-size: .32rem;font-weight: 600;">至尊版购买</div>
        <div class="flexitem" style="margin-right:.29rem;">
            <img class="order" src="__IMG__/ssg/index/order.png">
            <div style="margin-left: 5px;">订单查询</div>
        </div>
    </div>
    <div style="padding: .3rem;">
        <div class="shaddowbox">
            <div style="width: 6.9rem;font-size: .28rem;color:#292929;position: relative;">
                <div class="borderitem"
                    style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
                    <div style="font-size: .32rem;">苹果超级签</div>
                    <div class="flexitem" style="color: #A9A9A9;">
                        <div style="margin-right: 5px;">至尊版说明</div>
                        <img src="__IMG__/ssg/index/back.png" style="width:.3rem;height:.3rem;">
                    </div>
                </div>
            </div>
            <div class="flexitem" style="height: 2.6rem;justify-content:center;">
                <img class="order" src="__IMG__/ssg/index/ad.png" style="width: 6.3rem;height: 2rem;">
            </div>
        </div>
        <div class="shaddowbox" style="margin-top: .3rem;">
            <div style="width: 6.9rem;font-size: .24rem;color:#292929;position: relative;">
                <p style="padding: .3rem;">
                    1.选择游戏产品时,即选择购买超级签游戏下载链接和对应
                    的游戏礼包,无法退换哦~
                </p>
                <p style="padding:0 .3rem .3rem;">
                    2.同个账号多个设备需要去找客服那边购买。
                </p>
            </div>
        </div>
        <div class="shaddowbox" style="margin-top: .3rem;">
            <div style="width: 6.9rem;font-size: .28rem;color:#292929;position: relative;">
                <div class="borderitem"
                    style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
                    <div style="font-size: .32rem;">选择产品</div>
                    <div class="flexitem"
                        style="color: #A9A9A9;width: 4.1rem;height: .6rem;background-color: #F5F5F5;border-radius: .3rem;">
                        <img src="__IMG__/ssg/index/select.png" style="width:.4rem;height: .4rem;margin-left: .17rem;">
                        <input id="copyVal" type="text" value=""
                            style="border: 0px;width: 3rem;height: .6rem;font-size: .24rem;margin-left: .2rem;">
                    </div>
                </div>

            </div>
            <!--游戏列表-->
            <div style=" padding:0 .3rem .3rem;">
                <div class="flexitem" style="padding-top:.3rem ;justify-content: space-between;">
                    <img src="__IMG__/ssg/detail/gamebg.png" style="width: .7rem;height: .7rem;">
                    <div style="margin-left: .2rem;flex-grow: 1;">
                        <div class="flexitem">
                            <div style="font-size: .28rem;">落梦星辰-超级签</div>
                            <img src="__IMG__/ssg/index/gif.png"
                                style="width: .27rem;height: .27rem;margin-left: .2rem;">
                        </div>
                        <div style="color:#A9A9A9;font-size: .2rem;">
                            至尊特权礼包(限量)
                        </div>
                    </div>
                    <img src="__IMG__/ssg/index/check.png" style="width: .3rem;height: .3rem;">
                </div>
                <div class="flexitem" style="padding-top:.3rem ;justify-content: space-between;">
                    <img src="__IMG__/ssg/detail/gamebg.png" style="width: .7rem;height: .7rem;">
                    <div style="margin-left: .2rem;flex-grow: 1;">
                        <div class="flexitem">
                            <div style="font-size: .28rem;">落梦星辰-超级签</div>
                            <img src="__IMG__/ssg/index/gif.png"
                                style="width: .27rem;height: .27rem;margin-left: .2rem;">
                        </div>
                        <div style="color:#A9A9A9;font-size: .2rem;">
                            至尊特权礼包(限量)
                        </div>
                    </div>
                    <img src="__IMG__/ssg/index/nocheck.png" style="width: .3rem;height: .3rem;">
                </div>

            </div>
        </div>
            <!---button--->
            <div class="shaddowbox" style="margin-top: .3rem;">
                <div style="width: 6.9rem;font-size: .28rem;color:#292929;position: relative;">
                    <div class="borderitem"
                        style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
                        <div style="font-size: .32rem;">支付未到账?</div>
                        <div class="flexitem" style="color: #A9A9A9;">
                            <div style="margin-right: 5px;">充值帮助</div>
                            <img src="__IMG__/ssg/index/back.png" style="width:.3rem;height:.3rem;">
                        </div>
                    </div>
                </div>
                <div style="width: 6.9rem;font-size: .28rem;color:#292929;position: relative;">
                        <div style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
                            <div style="font-size: .32rem;">联系客服</div>
                            <div class="flexitem" style="color: #A9A9A9;">
                                <!-- <div style="margin-right: 5px;">至尊版说明</div> -->
                                <img src="__IMG__/ssg/index/back.png" style="width:.3rem;height:.3rem;">
                            </div>
                        </div>
                    </div>
                <!-- <div class="flexitem" style="height: 2.6rem;justify-content:center;">
                    <img class="order" src="__IMG__/ssg/index/ad.png" style="width: 6.3rem;height: 2rem;">
                </div> -->
            </div>
    
    <script src="__JS__/jquery-1.11.1.min.js" type="text/javascript"></script>

</body>

</html>