<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>红包风云榜</title>
    <style type="text/css">
        html,
        body,
        span,
        img {
            margin: 0;
            padding: 0;
        }
        html {
            background: #fff;
            font-size: 12px;
            color: #454545;
            font-family: "Roboto" ,sans-serif;
        }
        img {
            width: 3.5rem;
            border: none;
            vertical-align: middle;
            border-radius: 5px;
        }
        .maincontent {
            width: 100%;
            height: 100%;
        }
        .relative_li {
            position: relative;
        }
        .relative_li:after {
            content: '';
            display: block;
            position: absolute;
            width: 93%;
            left: 0;
            bottom: 0;
            height: 1px;
            background-color: #EBEBEB;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .first {
            color: #FF4E4E;
        }
        .list_ul {
            font-size: 1.17rem;
        }
        .list_ul .list_li,.msg {
            line-height: 58px;
        }
        .float_l {
            float: left;
        }
        .float_r {
            float: right;
        }
        .text_c {
            text-align: center;
        }
        .text_l {
            text-align: left;
        }
        .text_r {
            text-align: right;
        }
        .overflow {
            overflow: hidden;
        }
        .w-8 {
            width: 8%;
        }
        .w-12 {
            width: 12%;
        }
        .w-80 {
            width: 77%;
        }
        .w-45 {
            width: 45%;
            height: 58px;
        }
        .w-35 {
            width: 35%;
        }
        .w-20 {
            width: 20%;
        }
        .concern_box {
            background: url("<?php echo RESOURCE_SITE_URL; ?>/mobile/bonus/imgaes/noconcern.png") no-repeat center 85%;
            background-size: 0.96rem 0.81rem;
            font-size: 1rem;
            height: 58px;
            position: relative;
            bottom: 8px;
        }
        .concern_box_active {
            background: url("<?php echo RESOURCE_SITE_URL; ?>/mobile/bonus/imgaes/concern.png") no-repeat center 85%;
            background-size: 0.96rem 0.81rem;
        }
        .margin-r-1 {
            margin-right: 3%;
        }
        .br {
            height: 10px;
            background: #EBEBEB;
        }
    </style>
</head>
<body>
<div class="maincontent">
    <div class="content">
        <div class="list_ul text_c">
            <?php
                $item = $output['mine'];
                $mid = $item['member_id'];
                bonus_output_rankitem($output['mine'],$output['mem_desc'],$mid);
            ?>
        </div>
        <input type="hidden" id="list_sn" value="<?php echo ($output['mine']['list_sn']); ?>"/>
        <input type="hidden" id="rank_title" value="<?php echo ($output['rank_title']); ?>"/>
        <div class="br"></div>
        <div class="list_ul text_c">
            <?php
                $mem_desc = $output['mem_desc'];
                $list_infos = $output['list_infos'];
                $item = $output['mine'];
                $mid = $item['member_id'];
                foreach ($list_infos as $info) {
                    bonus_output_rankitem($info,$mem_desc,$mid);
                }
            ?>
        </div>
    </div>
</div>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/bonus/js/zepto.min.js<?php echo bonus_version(); ?>"></script>
<script type="text/javascript">
    $(function()
    {
        var concern={
            init:function(){
                var that=this;
                that.number('.concern_box');
            },
            number:function(id)
            {
                var that=this;
                $(id).live('touchstart',function(){
                    var  datas=$(this).siblings('.list_sn').val();
                    var number=parseInt($(this).text());
                    if($(this).hasClass('concern_box_active')){
                        var num=number-1;
                        if($(this).hasClass('mine')) {
                            $('.mine').removeClass('concern_box_active');
                            $('.mine').text(num);
                        }
                        $(this).removeClass('concern_box_active');
                        $(this).text(num);
                        that.ajax(datas);
                    }
                    else {
                        var num=number+1;
                        if($(this).hasClass('mine')) {
                            $('.mine').addClass('concern_box_active');
                            $('.mine').text(num);
                        }
                        $(this).addClass('concern_box_active');
                        $(this).text(num);
                        that.ajax(datas);
                    }
                })
            },
            ajax:function(data){
                $.ajax({
                    url:'/mobile/index.php?act=rank_list&op=support&client_type=wap',
                    dataType:'jsonp',
                    jsonp:'callback',
                    data:{
                        list_sn:data
                    },
                    success:function(){
                        return true;
                    }
                })
            }
        };
        $('.number').eq(1).addClass('first');
        concern.init();
    })
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js<?php echo bonus_version(); ?>"></script>
<script src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/wx_share.js<?php echo bonus_version(); ?>"></script>
<script>
    var list_sn = $('#list_sn').val();
    var rank_title = $('#rank_title').val();
    var url = "/mobile/index.php?act=rank_list&op=index&client_type=wap&list_sn=" + list_sn;
    var img_url = "/panda.png";

    weiXinShare.init({
        title:rank_title,
        desc:rank_title,
        link:url,
        imgUrl:img_url
    });
</script>
</body>
</html>