<%
var newsType = parameter.newsType;
if(isEmpty(newsType)){
newsType = 'news_info';
}
var page = parameter.page;
if(isEmpty(page)){
page = 1;
}
page = parseInt(page);
var newsFolder = temp.folderSon("news",session.site.siteId);
var newsList = temp.articlePageNoCache(page,3,newsType,session.site.siteId);
var orders = temp.getOrders(1,3);
%>

<%
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>
    ${orders.list}
    <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 class="demand-table">
                <tr>
                    <th width="100px">货主</th>
                    <th width="100px">运输距离(Km)</th>
                    <th width="120px">运输方式</th>
                    <th width="200px">出发地</th>
                    <th width="200px">目的地</th>
                    <th width="120px">货物类型</th>
                    <th width="100px">重量(吨)</th>
                    <th width="100px">状态</th>
                    <th width="160px">提交时间</th>
                </tr>
                <tr class="row">
                    <td>张三</td>
                    <td>船运</td>
                    <td>车运</td>
                    <td>重庆(港口)</td>
                    <td>宜昌(港口)</td>
                    <td>煤炭</td>
                    <td>300</td>
                    <td>已发布</td>
                    <td>2021-01-27 09:15:46</td>
                </tr>
                <tr class="row">
                    <td>李四</td>
                    <td>船运</td>
                    <td>车运</td>
                    <td>重庆(港口)</td>
                    <td>宜昌(港口)</td>
                    <td>煤炭</td>
                    <td>300</td>
                    <td>已发布</td>
                    <td>2021-01-27 09:15:46</td>
                </tr>
            </table>

            <% if(newsList.totalPage > 1){
            var currentPage = newsList.pageNumber;
            var totalPage = newsList.totalPage;
            var previousPage = currentPage - 1;
            if (previousPage < 1) {
            previousPage = 1;
            }
            var nextPage = currentPage + 1;
            if (nextPage > totalPage) {
            nextPage = totalPage;
            }
            %>
            <div class="pagination">
                <a class="first-page page-button" href="${BASE_PATH}news.html?newsType=${newsType}&page=1">
                    首页
                </a>
                <a class="previous page-button" href="${BASE_PATH}news.html?newsType=${newsType}&page=${previousPage}">
                    上一页
                </a>

                <%if (currentPage - 2 >= 1) {%>
                <a class="page" href="${BASE_PATH}news.html?newsType=${newsType}&page=${currentPage-2}">${currentPage - 2}</a>
                <%}%>

                <%if (currentPage - 1 >= 1) {%>
                <a class="page" href="${BASE_PATH}news.html?newsType=${newsType}&page=${currentPage-1}">${currentPage - 1}</a>
                <%}%>

                <a class="page current-page" href="${BASE_PATH}news.html?newsType=${newsType}&page=${currentPage}">${currentPage}</a>

                <%if (currentPage + 1 <= totalPage) {%>
                <a class="page" href="${BASE_PATH}news.html?newsType=${newsType}&page=${currentPage+1}">${currentPage + 1}</a>
                <% }%>

                <%if (currentPage + 2 <= totalPage) {%>
                <a class="page" href="${BASE_PATH}news.html?newsType=${newsType}&page=${currentPage+2}">${currentPage + 2}</a>
                <%}%>

                <a class="next page-button" href="${BASE_PATH}news.html?newsType=${newsType}&page=${nextPage}">
                    下一页
                </a>

                <a class="last-page page-button" href="${BASE_PATH}news.html?newsType=${newsType}&page=${totalPage}">
                    尾页
                </a>
            </div>
            <%}%>
        </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">
                            南阳港务集团拥有船舶29艘，运力28万吨。公司旨在通过打造“公、铁、水”一站式物流平台，以唐河港为依托，
                            整合“水路、公路、铁路”多式联运物流运输资源，服务唐河经济，拓展长江黄金、汉江生态经济带水道乃至远洋物流运输业务。
                            <br>
                            下一步，公司将立足丰富的长江水系运输资源，依托自身信息平台优势，以高效务实的团队和先进的管理经营理念，
                            着力推进“公路、铁路、水路”多联物流发展战略，以智能管理，不断提高公司竞争力，力争成为多式联运物流龙头示范企业。
                        </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">
                            南阳港务集团拥有船舶29艘，运力28万吨。公司旨在通过打造“公、铁、水”一站式物流平台，以唐河港为依托，
                            整合“水路、公路、铁路”多式联运物流运输资源，服务唐河经济，拓展长江黄金、汉江生态经济带水道乃至远洋物流运输业务。
                            <br>
                            下一步，公司将立足丰富的长江水系运输资源，依托自身信息平台优势，以高效务实的团队和先进的管理经营理念，
                            着力推进“公路、铁路、水路”多联物流发展战略，以智能管理，不断提高公司竞争力，力争成为多式联运物流龙头示范企业。
                        </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">
                            南阳港务集团拥有船舶29艘，运力28万吨。公司旨在通过打造“公、铁、水”一站式物流平台，以唐河港为依托，
                            整合“水路、公路、铁路”多式联运物流运输资源，服务唐河经济，拓展长江黄金、汉江生态经济带水道乃至远洋物流运输业务。
                            <br>
                            下一步，公司将立足丰富的长江水系运输资源，依托自身信息平台优势，以高效务实的团队和先进的管理经营理念，
                            着力推进“公路、铁路、水路”多联物流发展战略，以智能管理，不断提高公司竞争力，力争成为多式联运物流龙头示范企业。
                        </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">
                            南阳港务集团拥有船舶29艘，运力28万吨。公司旨在通过打造“公、铁、水”一站式物流平台，以唐河港为依托，
                            整合“水路、公路、铁路”多式联运物流运输资源，服务唐河经济，拓展长江黄金、汉江生态经济带水道乃至远洋物流运输业务。
                            <br>
                            下一步，公司将立足丰富的长江水系运输资源，依托自身信息平台优势，以高效务实的团队和先进的管理经营理念，
                            着力推进“公路、铁路、水路”多联物流发展战略，以智能管理，不断提高公司竞争力，力争成为多式联运物流龙头示范企业。
                        </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>
            <div class="advantage-item">
                <img src="${ctx}template/web/static/image/service_ad_3.png">
                <div class="title"><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>
        </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>
    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}){ %>
<%} %>