lizhen
/
tken


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
    <link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
    <title>充值</title>
    <style>
        .page {
            height: 100vh;
            width: 100%;
            overflow: hidden;
         }
        .content{
            padding-top: 0.40rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            margin:0 auto;
            width: 8.00rem;
            background-color: #f8f8f8;
        }
        .phone-wrap {
            width: 7.50rem;
            padding:0 0.15rem 0.15rem;
        }
        .phone-item {
            width: 100%;
            height: 0.35rem;
            border-bottom: 2px solid #eee;
            justify-content: space-between;
          
        }
        .phone-item input {
            flex:1;
            font-size: 0.16rem;
            background-color: #f8f8f8;
        }
        .phone-item .phone-nick{
            color:#999999;
            font-size: 0.13rem;
        }
        .recharge-wrap {
            width: 7.50rem;
            padding: 0.15rem;
            padding-top: 0rpx;
            padding-bottom: 0rpx;

        }
        .recharge-title {
            font-size: 0.16rem;
            font-weight: bold;
        }        

        .exchange-section {
            margin-top: 0.10rem;
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
        }
        .exchange-box {
            width: 1.25rem;
            height: 0.71rem;
            border: 0.01rem solid #7D73DC;
            border-radius: 0.10rem;
            margin-bottom: 0.15rem;
            color: #999999;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 0.40rem;
        }
        .exchange-box:nth-child(4n){
            margin-right: 0;
        }

        .exchange-top {
            display: flex;
            align-items: center;
        }

        .exchange-pic {
            height: auto;
            width: 0.18rem;
            margin-right: 0.07rem;
        }

        .diamonds-num {
            font-size: 0.16rem;
            color: #261A00;
        }
        

        /* .actvie {
            color: #FFFFFF;
        } */

        .diamonds-name {
            font-size: 0.12rem;
            margin-left: 0.04rem;
        }

        .exchange-price {
            font-size: 0.12rem;
            margin-top: 0.10rem;
        }

        .current {
            background: linear-gradient(90deg, #629CFF, #7870F1);
            box-shadow: 0px 3px 5px 0px rgba(126, 114, 220, 0.59);
            color: #FFFFFF !important;
        }
        .current .diamonds-num{
            color: #FFFFFF;
        }
        .mode-wrap{
            width: 7.50rem;
            height: 1.15rem;
            padding: 0.15rem;
            padding-top:0rpx;
           
        }
        .mode-wrap .mode-title{
            font-size: 0.16rem;
            font-weight: bold;
        }
        .mode-item{
            width: 7.50rem;
            height: 0.20rem;
            justify-content: space-between;
            margin-top: 0.10rem;
            cursor: pointer;
          
        }
        .mode-left{
            font-size: 0.14rem;
           
        }
        .mode-left  .zicon-weixin{
            font-size: 0.27rem;
            color: #46BB36;
            margin-right: 0.07rem;
        }
        .mode-left  .zicon-alipay{
            color:#02A9F1;
            font-size: 0.27rem;
            margin-right: 0.07rem;
        }
        .pay-ic{
            font-size: 0.20rem;
        }
        .zicon-xuanze{
            color: #46BB36;
        }
        .zicon-xuanze1{
            color: #999;
        }
        .mode-tips{
            width: 7.50rem;
            align-items: flex-start;
            margin-top: 0.20rem;
           
        }
        .mode-tips .zicon-tishi{
                font-size: 0.14rem;
                color: #FFCE00;
                margin-top: 8rpx;
            }
        .mode-tips    .mode-txt{
            /* width: 2.25rem; */
            margin-left: 0.05rem;
            color: #999999;
            font-size: 0.12rem;
        }

        .recharge-btn{
            width: 2.90rem;
            height: 0.40rem;
            background: #EEEEEE;
            border-radius: 0.20rem;
            margin: 0.50rem auto 0.10rem;
            font-size: 0.15rem;
            font-family: PingFang SC;
            font-weight: 500;
            cursor: pointer;
        }
        .recharge-btn.active{
            background: linear-gradient(90deg, #629CFF, #7870F1);
            color: #FFFFFF;
        }
        @media(max-width: 500px) {
             .content{
                width: 100%;
             }
             .phone-wrap{
                width: 100%;
             }
             .recharge-wrap{
                width: 100%;
             }
            .mode-wrap{
                width: 100%;

             }
            .mode-item{
                width: 100%;
            }
        }

    </style>
    <script>
        !(function(win, doc) {
            function setFontSize() {
            var docEl = doc.documentElement;
            var winWidth = docEl.clientWidth;
            doc.documentElement.style.fontSize = (winWidth / 1920) * 100 + "px";
            }
            var userAgent = navigator.userAgent;
            win.addEventListener("resize", function() {
            if (navigator.userAgent !== userAgent) {
                location.reload();
            }
            });
            setFontSize();
        })(window, document);
    </script>
</head>
<body>
    <div class="page">

        <div class="content">
            <form method="post" action="/index/recharge/recharge_pc">
            <div class="phone-wrap row">
                <div class="phone-item row">
                    <input type="text" name="mobile" placeholder="请输入注册手机号" autofocus="true"/>
                    <!--<span class="phone-nick" >昵称: 李大娃</span>-->
                </div>
            </div>
            <div class="recharge-wrap">
                <div class="recharge-title">充值金额</div>
                <div class="exchange-section">
                    <!-- current为激活状态 @click="clickBox(index)"-->
                    {volist name='conf_list' id='vo'}
                    <div class="exchange-box column <?php if($i==1){echo 'current';}?>" data-id="{$vo.id}">
                        <div class="exchange-top">
                            <img class="exchange-pic" src="/assets/frontend/recharge/images/b-b.png"></img>
                            <div class="diamonds-num" >{$vo.gold}</div>
                            <div class="diamonds-name">金币</div>
                        </div>
                        <div class="exchange-price">￥{$vo.money}</div>
                    </div>
                    {/volist}


                </div>
            </div>
            <div class="mode-wrap" >
                <div class="mode-title">充值方式</div>
                <!--<div class="mode-item row" data-type="wechat">
                    <div class="mode-left row">
                        <div class="zicon zicon-weixin"></div>
                        <div>微信充值</div>
                    </div>
                    <div class="zicon pay-ic zicon-xuanze1"></div>
                </div>-->
                <div class="mode-item row" data-type="alipay">
                    <div class="mode-left row">
                        <div class="zicon zicon-alipay"></div>
                        <div>支付宝充值</div>
                    </div>
                    <!-- <div class="zicon" :class="choosed ? 'zicon-xuanze' : 'zicon-xuanze1'" @click="changeIcon"></div> -->
                    <div class="zicon pay-ic zicon-xuanze"></div>
                </div>
                <div class="mode-tips row">
                    <div class="zicon zicon-tishi"></div>
                    <div class="mode-txt">说明：充值前请确认您已满18周岁，金币充值成功后无法退款，不可提现。</div>
                </div>
            </div>
            <input type="submit" class="recharge-btn center active" value="立即充值" />
            <input type="hidden" name="pay_type" value="alipay" class="payType">
            <input type="hidden" name="rc_id" value="1" class="rcId">
            <!--<div class="recharge-btn center active">立即充值</div>-->
            </form>
        </div>

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

<script src="/assets/frontend/recharge/jquery.min.js"></script>
<script>
    $(".mode-item").click(function (e) {
        $(this).find(".pay-ic").removeClass("zicon-xuanze1").addClass("zicon-xuanze");
        $(this).siblings().find(".pay-ic").removeClass("zicon-xuanze").addClass("zicon-xuanze1");
        var type = $(this).data("type");
        $(".payType").val(type);
        console.log($(".payType").val());
    });
    $(".exchange-box").click(function (e) {
        $(this).addClass("current").siblings().removeClass("current")
        var id = $(this).data("id");
        $(".rcId").val(id);
        console.log($(".rcId").val());
    });

</script>
<script>
    !(function(win, doc) {
        function $_getDevice() {
            var docEl = doc.documentElement;
            const winWidth = docEl.clientWidth;
            if(winWidth - 1 < 750){
                return 'mobile'
            }else if(winWidth - 1 < 1400){
                return 'book'
            }else {
                return 'pc'
            }
        }

        function setFontSize() {
            var docEl = doc.documentElement;
            var winWidth = docEl.clientWidth;
            var device = $_getDevice();
            var designSize =  device == 'mobile' ? 750 : (device == 'book' ? 1400 : 1920);
            var scaleV = 100;
            if(device == 'mobile'){
                scaleV = 200
            }
            doc.documentElement.style.fontSize = (winWidth / designSize) * scaleV + "px";
        }
        var userAgent = navigator.userAgent;
        win.addEventListener("resize", function() {
            if (navigator.userAgent !== userAgent) {
                location.reload();
            }
        });
        setFontSize();
    })(window, document);
</script>