{include file="layout/header" /}
<!-- banner -->
<div class="product-banner">
    <div class="container">
        <ul class="rslides">
            <li>
                <div class="slider-info" style="text-align: left !important; margin-top: 7%" >
                    <p style="font-size: 2.3vw; text-align: center; line-height:2px">
                        足球数据
                    </p>
                    <p style="font-size: 1vw; text-align: center; margin-bottom:3%">
                        football data
                    </p>
                    <!--<div class="product-banner-button">
                        <button type="button" style="border:1px solid rgb(91, 120, 249); background-color: rgb(91, 120, 249)">
                            免费使用
                        </button>
                        <button type="button" style = "background-color: transparent; border: 1px solid ;">
                            购买咨询
                        </button>
                    </div>-->
                </div>
            </li>
        </ul>
    </div>
</div>

<section class="wthree-row" id="pricing">
    <input style="display: none" id="id" value="{$id}">
    <div class="container">
        <div class="row pb-5">
            <div class="col-lg-2 col-md-6 text-center  pb-0 pt-3 px-3 agile-pricegrid">
                <ul class="list-group-flush">
                    <li class="list-group-item" style="font-size: 16px; text-align: right;">产品与服务</li>
                    {volist name="fatherProduct" id="value"}
                    <li onclick="showCurrent('{$value.product_id}')" id="li-{$value.product_id}" class="list-group-item product-group">{$value.product_name}</li>
                    {/volist}
                </ul>
            </div>
            <div class="col-lg-10 col-md-6 text-center  pb-0 pt-3 px-3 agile-pricegrid">
                {volist name="product" id="value"}
                <div style="display: flex;">
                    <div class="col-lg-5 col-md-6" style="text-align: left">
                        <div style="font-size: 16px; height: 40px; border-bottom: 2px solid #777;">
                            {$value.product_name}
                        </div>
                        <div style="margin-top: 10px; height: 120px; font-size: 14px; color: #3e3e3e;">
                            {$value.product_content}
                        </div>
                        <div style="text-align: right; margin-bottom: 50px; color: #3e3e3e;">
                            <span style="cursor:pointer;" onclick="goInfo('{$value.product_id}')">查看详情</span>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-6">
                        <img src="{$Think.UPLOADS_ROOT}{$value.product_img}" style="width: 550px">
                    </div>
                </div>
                {/volist}
            </div>
        </div>
    </div>
</section>
<script>
    const myHost = "http://" + window.location.host;
    let current = $("#id").val();
    $("#li-"+current).attr("style","background: #E6F5FF")
    function showCurrent(id) {
        window.location.href = myHost + "/home/product/product.html?id=" + id;
    }
    function goInfo(id) {
        window.location.href = myHost + "/home/product/details.html?id=" + id;
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{include file="layout/footer" /}