{extend name="layout/layout_sign" /}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
    html,body {background:rgba(0,0,0,0);}
    .head_tit_box{
        background-color: #feedbe;
    }
    .u_h_ltext,
    .u_h_rtext{
        float: left;
        padding-top: .1rem;
        width: 50%;
        height: .34rem;
        font-size: .13rem;
        line-height: .24rem;
        box-sizing: border-box;
    }
    .u_h_ltext{
        text-align: right;
        padding-right: .1rem;
        color: #5e6a94;
    }
    .u_h_rtext{
        text-align: left;
        padding-left: .1rem;
        color: #5e6a94;
    }

    .u_head_txt .btn {
        display: inline-block;
        padding: 6px 40px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }
    .u_list_ul a {
        display: block;
        padding: 0 .15rem;
        height: .64rem;
        background: white;
    }
    .sign-main{
        background: rgba(252,242,222,1);
    }
    .pop{
        position: fixed;
        z-index: 22;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,0);
    }
    .box{
        position: relative;
        width: 6.78rem;
        min-height: 8rem;
        border-radius: 0.24rem;
        background:rgba(255,249,235,1);
        left: 0.2rem;
        top: 2.5rem;
        /*transform: translate(-50%,-50%);*/
        /*-webkit-transform: translate(-50%,-50%);*/
        /*-moz-transform: translate(-50%,-50%);*/
        /*-ms-transform: translate(-50%,-50%);*/
        /*-o-transform: translate(-50%,-50%);*/
    }
    .close{
        position: absolute;
        width: 0.44rem;
        height: 0.44rem;
        background:url({:asset('/img/close.png')}) no-repeat center center;
        background-size: 100% 100%;
        right: 0;
        top: -0.31rem;
    }
    .title{
        width: 100%;
        text-align: center;
        font-family:宋体,STSongti-SC-Black;
        font-weight:900;
        color:rgba(34,40,49,1);
        font-size: 0.48rem;
        padding-top: 0.36rem;
    }
    .title .sign-success{
        display: block;
        color: rgba(237, 56, 63, 1);
    }
    .sign-already{
        display: none;
    }
    .sign-list{
        margin-top: 0.42rem;
        font-size: 0;
        text-align: center;
    }
    .sign-item{
        width: 1.42rem;
        height: 1.68rem;
        box-sizing: border-box;
        background:rgba(255,255,255,1);
        border-radius:  0.12rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        font-size: 0.26rem;
        text-align: center;
        margin: 0 0 0.32rem 0.21rem;
        display: inline-block;
    }
    .sign-item:first-of-type{
        margin-left: 0;
    }
    .sign-item-tip{
        width: 100%;
        height: 0.48rem;
        line-height: 0.48rem;
        color: #fff;
        background:rgba(207,210,216,1);
        border-radius: 0.12rem 0.12rem 0 0;
        font-weight: bold;
    }
    .sign-item-img{
        width: 0.6rem;
        height: 0.6rem;
        margin: 0.06rem 0 0.025rem 0.39rem
    }
    .sign-item-price{
        color: rgba(134, 139, 149, 1);
    }
    .signed-active .sign-item {
        background: rgba(255, 241, 242, 1);
    }
    .signed-active .sign-item-tip{
        background: rgba(248, 111, 116, 1);
    }
    .signed-active .sign-item-price{
        color: rgba(248, 111, 116, 1);
    }

    .text-tip{
        width: 100%;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        background:rgba(252,242,222,1);
        font-family: 宋体,STSongti-SC-Bold;
        font-weight:bold;
        color:rgba(69,59,37,1);
        font-size: 0.34rem;
    }
    .text-tip span{
        color: rgba(248, 111, 116, 1);
    }
    .rule{
        width: 100%;
        height: 2.15rem;
        border-radius: 0.24rem;
        background: #fff;
        padding: 0.27rem 0.33rem;
        box-sizing: border-box;
        font-size: 0.24rem;
        font-family:PingFangSC-Semibold;
        color:rgba(34,40,49,1);
        letter-spacing: 0.01rem;
        line-height: 0.33rem;
    }
    .rule-title{
        font-weight: 600;
    }
    .rule .rule-text{
        margin-top: 0.1rem;
    }
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}签到{/block}
{block name="main"}
<!--<input type="hidden" id="hid_userdata_json" value="{$userdata_json}"/>-->
<div style="display: none">
    <textarea type="hidden" id="hid_userdata_json">{$userdata_json}</textarea>
</div>

<!-- 这是正文 body_sytle_girl -->
<div class="body_sytle">
    <!-- 签到弹窗 -->
    <div class="pop" style="display: block">
        <div class="box">
            <div class="close"></div>
            <div class="title">
                {if condition="$isTodaySign eq 1"}
                    <span class="sign-success" style="display: block; color: #000000;">您今天已签过到啦</span>
                {else}
                    <span class="sign-success">签到成功</span>
                {/if}
            </div>
            <div class="sign-list">
                {for start="1" end="$total_days+1"}
                    {if condition="$i lt $continue_days"}
                        <div class="sign-item signed-active">
                            <div class="sign-item-tip">已签到</div>
                            <img class='sign-item-img' src="{:asset('/img/sign.png')}" alt="">
                            <div class="sign-item-price">{$i*5 + $basenum }书币</div>
                        </div>
                    {elseif condition="$i eq $continue_days"/}
                        <div class="sign-item signed-active">
                            <div class="sign-item-tip">今日已签</div>
                            <img class='sign-item-img' src="{:asset('/img/sign.png')}" alt="">
                            <div class="sign-item-price">{$i*5 + $basenum }书币</div>
                        </div>
                    {else}
                        <div class="sign-item">
                            <div class="sign-item-tip">第{$days_arr[$i]}天</div>
                            <img class='sign-item-img' src="{:asset('/img/unsign.png')}" alt="">
                            <div class="sign-item-price">{$i*5 + $basenum }书币</div>
                        </div>
                    {/if}
                {/for}
            </div>
            <div class="text-tip">
                连续签到<span>7天</span>合计得<span>350个</span>书币
            </div>
            <div class="rule">
                <div class="rule-title">签到说明:</div>
                <div class="rule-text">1、本签到为累积签到，用户若中途中断签到，签到记录自动从新开始。<br></div>
                <div class="rule-text">2、签到周期为7天。</div>
                <div class="rule-text">3、签到领取的书币有效期为3天。</div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="footer"}
{/block}
{block name="js"}
<!-- 这里引入js -->
<script>
    var hid_userdata_json = $("#hid_userdata_json").val();
    //调用Android ，关闭弹窗
    window.cps.synchronizeTodaySigned("{userinfo:"+hid_userdata_json+"}");
    $('.close').click(function(){
        window.cps.dismissDialogWebView();
    });

</script>
{/block}