<%
var newsType = parameter.newsType;
if(isEmpty(newsType)){
newsType = 'news_info';
}
var page = parameter.page;
if(isEmpty(page)){
page = 1;
}
page = parseInt(page);
var orderList = temp.getOrders(page,100);
%>

<%
var headContent = {
%>
<% include("/template/web/base/header.html"){} %>
<link href="${ctx}template/web/static/css/product.css" rel="stylesheet" type="text/css"/>

<%
};
%>

<%
var bodyContent = {
%>

<%  include("/template/web/base/header_menu.html"){} %>

<div class="page-container">
    <!--轮播图-->
    <div class="banner">
        <img src="${ctx}template/web/static/image/product_banner.jpg" alt="">
    </div>

    <div class="demand-panel">
        <div class="title-container">
            <img src="${ctx}template/web/static/image/title_left.png" class="title-left">
            <div class="title">
                <div class="ch">
                    货运需求
                </div>
                <div class="en">
                    Freight Demand
                </div>
            </div>
            <img src="${ctx}template/web/static/image/title_right.png" class="title-right">
        </div>

        <div class="demand-container">
            <table id="table" class="demand-table">
                <thead>
                    <tr>
                        <th width="100px">货主</th>
                        <th width="100px">运输距离(Km)</th>
                        <th width="120px">运输方式</th>
                        <th width="250px">出发地</th>
                        <th width="250px">目的地</th>
                        <th width="120px">货物类型</th>
                        <th width="100px">重量(吨)</th>
                        <th width="160px">发布时间</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                    list = orderList.list;
                    if(!isEmpty(list)){
                    for(item in list){ %>
                    <tr class="row">
                        <td width="100px">${item.user_name}</td>
                        <td width="100px">${item.distance}</td>
                        <td width="120px">${item.type}</td>
                        <td width="250px">${item.source_address}</td>
                        <td width="250px">${item.target_address}</td>
                        <td width="120px">${item.goods_category}</td>
                        <td width="100px">${item.goods_weight}</td>
                        <td width="160px">${item.created_date}</td>
                    </tr>
                    <% }} %>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel">
        <div class="title-container">
            <img src="${ctx}template/web/static/image/title_left.png" class="title-left">
            <div class="title">
                <div class="ch">
                    产品与服务
                </div>
                <div class="en">
                    Products and Service
                </div>
            </div>
            <img src="${ctx}template/web/static/image/title_right.png" class="title-right">
        </div>

        <div class="content-container">
            <div class="service-tab">
                <div id="tab1" class="tab tab-active" onclick="changeTab(1)">
                    <img src="${ctx}template/web/static/image/service_icon1.png" class="image">
                    <img src="${ctx}template/web/static/image/service_icon1_active.png" class="image-active">
                    <span>航运管理</span>
                </div>
                <div id="tab2" class="tab" onclick="changeTab(2)">
                    <img src="${ctx}template/web/static/image/service_icon2.png" class="image">
                    <img src="${ctx}template/web/static/image/service_icon2_active.png" class="image-active">
                    <span>船舶运输</span>
                </div>
                <div id="tab3" class="tab" onclick="changeTab(3)">
                    <img src="${ctx}template/web/static/image/service_icon3.png" class="image">
                    <img src="${ctx}template/web/static/image/service_icon3_active.png" class="image-active">
                    <span>多式联运</span>
                </div>
                <div id="tab4" class="tab" onclick="changeTab(4)">
                    <img src="${ctx}template/web/static/image/service_icon4.png" class="image">
                    <img src="${ctx}template/web/static/image/service_icon4_active.png" class="image-active">
                    <span>船舶修造</span>
                </div>
            </div>
            <div class="service-content">
                <div id="content1" class="content content-active">
                    <div class="left">
                        <img src="${ctx}template/web/static/image/service_card1.jpg" class="title-right">
                    </div>
                    <div class="right">
                        <div class="title">
                            航运管理
                        </div>
                        <div class="desc">
                            南阳港务集团作为重点招商引资企业，注册地位于南阳市唐河县产业集聚区盛居东路17号，注册资金5000万元。
                            公司从事航运管理、船舶运输、船舶修造等工作近30年，同时也是中国国际商会航运专业委员会会长单位，从业经验丰富是河南航运的龙头企业。
                            集团公司现有设有董事会、财务部、人力资源部、法务部、安全生产部、航运业务部、公路储运业务部、航运交易所、能源部等，
                            拥有船舶29艘，运力28万吨。公司旨在通过打造“公、铁、水”一站式物流平台，整合多式联运物流运输资源，服务中国经济，
                            拓展长江黄金水道、汉江生态经济带乃至近海远洋物流运输业务。
                        </div>
                    </div>
                </div>

                <div id="content2" class="content">
                    <div class="left">
                        <img src="${ctx}template/web/static/image/service_card2.jpg" class="title-right">
                    </div>
                    <div class="right">
                        <div class="title">
                            船舶运输
                        </div>
                        <div class="desc">
                            南阳港务物流有限公司是以唐河为总部的集团公司，具有较强软硬件基础、成果转化能力和健全的业务网络系统。
                            核心业务为物流运输，业务遍布国内多个省份，输运方式主要以航道运输、公路输运为主，目前公司拥有船舶40艘，
                            运力28万吨，船运主要依托长江水道，在上海、南京、武汉、宜昌、重庆等地设有办事处、港口设有核心物流存储、
                            中转基地，通过水、陆相结合方式，把客户货物运输到全国各地。
                        </div>
                    </div>
                </div>

                <div id="content3" class="content">
                    <div class="left">
                        <img src="${ctx}template/web/static/image/service_card3.jpg" class="title-right">
                    </div>
                    <div class="right">
                        <div class="title">
                            多式联运
                        </div>
                        <div class="desc">
                            南阳港务集团与武汉大学国家网络安全学院、北京牡丹电子集团有限责任公司武汉分公司合作开发智慧物流信息平台，
                            以信息化平台为核心运营纽带，整合和依托公司原有水运资源优势，构建多联式现代物流运营服务系统。以企业多元化物品流通需求为中心，
                            系统整合承运商和货运公司、司机、船主、物流公司，通过物联网平台与移动互联网终端为广大发货企业提供一站式、
                            全方位透明化门到门物流O2O服务的物流信息化交易服务平台。
                        </div>
                    </div>
                </div>

                <div id="content4" class="content">
                    <div class="left">
                        <img src="${ctx}template/web/static/image/service_card4.jpg" class="title-right">
                    </div>
                    <div class="right">
                        <div class="title">
                            船舶修造
                        </div>
                        <div class="desc">
                            公司从事航运经营三十余年，船舶修造经验丰富，早在2014年便斥资1800多万打造了河南籍船舶在长江干线吨位最大的货轮，
                            该船长130米，宽23米，深9米，载重1.8万吨，这艘巨轮的下水结束了南阳籍无万吨货轮的历史，标志着南阳船舶发展从小规模、
                            家庭式向大型化、标准化迈进，也将推进南阳乃至河南船舶业的发展。2020年公司响应交通部的号召，投资2亿元在浙江舟山建造并打造一支江海直达船队，
                            目前在建的新型江海直达船舶单船造价约4200万，首批船舶将于2021年上半年下海航行，公司推进江海直达运输发展，
                            是响应国家深化水运供给侧结构性改革的重要举措，对于提升长江黄金水道功能和完善综合运输体系具有重要作用。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel advantage">
        <div class="title-container">
            <img src="${ctx}template/web/static/image/title_left.png" class="title-left">
            <div class="title">
                <div class="ch">
                    服务优势
                </div>
                <div class="en">
                    Service Advantages
                </div>
            </div>
            <img src="${ctx}template/web/static/image/title_right.png" class="title-right">
        </div>

        <div class="content advantage-items">
            <div class="advantage-item">
                <img src="${ctx}template/web/static/image/service_ad_1.png">
                <div class="title"><div>信息流</div></div>
                <div class="info">
                    <div>通过系统自动筛选、状态的触发、使信息能快速准确的传达给不同的角色</div>
                </div>
            </div>
            <div class="advantage-item">
                <img src="${ctx}template/web/static/image/service_ad_2.png">
                <div class="title"><div>物流</div></div>
                <div class="info">
                    <div>在线发布货运需求、在线接单、在线查询船舶等，打通了智慧物流的各个环节</div>
                </div>
            </div>
            <div class="advantage-item">
                <img src="${ctx}template/web/static/image/service_ad_3.png">
                <div class="title"><div>证据流</div></div>
                <div class="info">
                    <div>船舶位置实时查询、数据实时上传留证，为交易过程提供依据，确保业务真实性</div>
                </div>
            </div>
            <div class="advantage-item">
                <img src="${ctx}template/web/static/image/service_ad_4.png">
                <div class="title"><div>票据流</div></div>
                <div class="info">
                    <div>通过电子合同、电子运单等数据验证技术；建立认证中心，验证承运资质</div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel shape-content">
        <div class="title-container">
            <img src="${ctx}template/web/static/image/title_left.png" class="title-left">
            <div class="title">
                <div class="ch">
                    产品形态
                </div>
                <div class="en">
                    Product Form
                </div>
            </div>
            <img src="${ctx}template/web/static/image/title_right.png" class="title-right">
        </div>

        <div class="content shape-items">
            <div class="shape-item">
                <img src="${ctx}template/web/static/image/service_shape1.png">
                <div class="title">管理端（PC+小程序)</div>
                <div class="desc">
                    管理端可以进行基础管理、信息审
                    核、车船管理、订单管理、财务管
                    理、数据看板、投诉处理等
                </div>
            </div>
            <div class="shape-item">
                <img src="${ctx}template/web/static/image/service_shape2.png">
                <div class="title">货主端(小程序)</div>
                <div class="desc">
                    货主端主要包含发布货运需求、订单中心、我的信息等
                </div>
            </div>
            <div class="shape-item">
                <img src="${ctx}template/web/static/image/service_shape3.png">
                <div class="title">承运端(小程序)</div>
                <div class="desc">
                    承运端主要包含发布航运需求、订单中心、我的信息等
                </div>
            </div>
        </div>
    </div>

</div>

<%  include("/template/web/base/footer.html"){} %>

<script>
    // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
    tableScroll('table', 500, 30, 8)
    var MyMarhq;

    function tableScroll(tableid, hei, speed, len) {
        clearTimeout(MyMarhq);
        $('#' + tableid).parent().find('.tableid_').remove()
        $('#' + tableid).parent().prepend(
            '<table class="tableid_ demand-table"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
        ).css({
            'position': 'relative',
            'overflow': 'hidden',
            'height': hei + 'px'
        })
        $(".tableid_").find('th').each(function(i) {
            $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
        });
        $(".tableid_").css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'z-index': 9
        })
        $('#' + tableid).css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'z-index': 1
        })

        if ($('#' + tableid).find('tbody tr').length > len) {
            $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
            $(".tableid_").css('top', 0);
            $('#' + tableid).css('top', 0);
            var tblTop = 0;
            var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();

            function Marqueehq() {
                if ((tblTop - (hei - 52)) <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
                    $('#' + tableid).css({
                        'position': 'absolute',
                        'top': 0,
                        'left': 0,
                        'z-index': 1,
                        'transition':'top 0s ease'
                    })
                    tblTop = 0;
                } else {
                    $('#' + tableid).css({
                        'position': 'absolute',
                        'top': 0,
                        'left': 0,
                        'z-index': 1,
                        'transition':'top 1s ease'
                    })
                    tblTop -= 1.5;
                }
                $('#' + tableid).css('top', tblTop + 'px');
                clearTimeout(MyMarhq);
                MyMarhq = setTimeout(function() {
                    Marqueehq()
                }, speed);
            }

            MyMarhq = setTimeout(Marqueehq, speed);
            $('#' + tableid).find('tbody').hover(function() {
                clearTimeout(MyMarhq);
            }, function() {
                clearTimeout(MyMarhq);
                if ($('#' + tableid).find('tbody tr').length > len) {
                    MyMarhq = setTimeout(Marqueehq, speed);
                }
            })
        }
    }
</script>
<script>
    function changeTab(index) {
        console.log('changeTab', index)
        for(var i = 1; i <= 4; i++) {
            if (i === index) {
                $('#tab'+ i).addClass('tab-active');
                $('#content'+ i).addClass('content-active');
            } else {
                $('#tab'+ i).removeClass('tab-active');
                $('#content'+ i).removeClass('content-active');
            }
        }
    }
</script>
<%}; %>

<% layout("/pages/template/_layout.html",{head:headContent,body:bodyContent}){ %>
<%} %>