<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- META -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- TITLE -->
<title>Home</title>

<!-- Main StyleSheet -->
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="style-responsive.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/libs/animate.css">
<link rel="stylesheet" href="css/featureSection.css">
<link rel="stylesheet" href="css/serviceSection.css">
<link rel="stylesheet" href="css/main.css">

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />


<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="layerslider/css/layerslider.css" type="text/css">
<!-- External libraries: jQuery & GreenSock -->
<script src="layerslider/js/jquery.js" type="text/javascript"></script>
<script src="layerslider/js/greensock.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>


<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({				
	pager: false,
	controls: true,
	auto: true
	});
});
</script>



<link rel="stylesheet" type="text/css" href="lightbox/jquery.fancybox.css" media="screen" />
<script src="lightbox/jquery.fancybox.js"></script>
<script type="text/javascript">
		$(document).ready(function() {						   
			$('.fancybox').fancybox();
		});
</script>


<!-- GOTO TOP JQUERY -->
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#gotop').fadeIn();	
		} else {
			$('#gotop').fadeOut();
		}
	});
 
	$('#gotop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>
	


<!-- HEADER JQUERY -->
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() >= 200) {
			$('.header').addClass("header_fix");	
		} else {
		   $('.header').removeClass("header_fix");
		}
	});	
});
</script>


<script type="text/javascript">

if($(window).width() <= 900){
$(document).ready(function() {											
	$('.mobile .title').click(function() {								
		$(this).next("ul").slideToggle();
		$(this).toggleClass("minus");
	});
});
}
</script>
					
</head>

<body>

<div class="header">
<div class="container">

			<a href="#" class="logo"><img src="images/logo.png" alt="" /></a>
			
			<div class="nav mobile">
			<div class="title">Menu <span class="fa "></span></div>
			<ul>
			<!-- <li><a href="#faqs_part">FAQs</a></li> -->
			<li><a href="#features">平台特点</a></li>
			<li><a href="#services_part">计算服务</a></li>
			<li><a href="#news_part">新闻公告</a></li>
			<li><a href="#downloads_part">下载专区</a></li>
			<li><a href="#introduction_part">平台简介</a></li>
			<li><a href="#contact_part">联系我们</a></li>
			</ul>
			</div>

</div>
</div>




<div class="wrapper">
  <div class="slider_main">
    <div id="full-slider-wrapper">
      <div id="layerslider" style="width:100%;height:473px;">
	    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
	      <img src="images/slider/slide-bg.jpg" class="ls-bg" alt="Slide background"/>
	
	
	      <div class="ls-l videopreview" style="top:40px;left:40px;white-space: nowrap;" data-ls="offsetxin:-200;durationin:2000;offsetxout:-200;">
	        <img src="images/biglogo.png" alt="" style="width: 400px;"/>
	      </div>
	
	
		  <div class="ls-l" style="top:140px;left:638px;white-space: nowrap;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
		    <h2 class="l1">平台宗旨</h2>
		  </div>
	
	      <div class="ls-l" style="top:200px;left:583px;white-space: nowrap;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
	       <h2 class="l2">随着电力系统模型的复杂化，电力系统运行分析、优化和控制等与电力系统</h2>
	
	       <h2 class="l2">随着电力系统模型的复杂化，电力系统运行分析、优化和控制等与电力系统</h2>

	
	       </div>
	
	    </div><!--FIRST SLIDE-->
	
	
	
		<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
		<img src="images/slider/slide-bg.jpg" class="ls-bg" alt="Slide background"/>

	
	
		<div class="ls-l videopreview" style="top:40px;left:40px;white-space: nowrap;" data-ls="offsetxin:-200;durationin:2000;offsetxout:-200;">

			<img src="images/biglogo.png" alt="" style="width: 400px;" />
		</div>
	
	
		<div class="ls-l" style="top:140px;left:638px;white-space: nowrap;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
			<h2 class="l1">高性能计算平台</h2>
		</div>
	
		<div class="ls-l" style="top:200px;left:583px;white-space: nowrap;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
			<h2 class="l2">高效 地为您计算算例</h2>
		</div>
	

	
		<div class="ls-l" style="top:265px;left:598px;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
			<a href="#" class="button2">Learn More</a>
		</div>
	
	
		<div class="ls-l" style="top:265px;left:810px;" data-ls="offsetxin:0;delayin:1000;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;">
			<a href="#" class="button1">Start Now</a>
		</div>
	
   
		</div><!--FIRST SLIDE-->	
	  </div>
	</div> 
  </div>
</div>


<!-- 平台特点 -->

<div class="feature_section" id="features">
<div class="feature_container">
	<div class="row"></div>
	<div class="sectionTitle"><h2>值得信赖的电力系统高性能计算平台</h2></div>
	
    <div class="feature_grid">

        <figure class="effect-ruby">
            <img src="images/2_03.png" alt="img15"/>
            <figcaption>
                <h2><span class="glyphicon glyphicon-search" aria-hidden="true"></span></h2>
                <h3><span>成熟框架</span></h3>
                <h3><p>采用成熟的protobuf数据存储格式和gRPC通信框架，轻便快捷，可扩张能力强不受语音限制</p></h3>
                <p class="checkDetail"><span class="plink">查看详情</span></p>
                <a href="http://baidu.com/" target="_blank">View more</a>
            </figcaption>           
        </figure>

        <figure class="effect-ruby">
            <img src="images/2_03.png" alt="img15"/>
            <figcaption>
                <h2><i class="fa fa-paper-plane fa-2x"></i></h2>
                <h2><span>成熟框架</span></h2>
                <p>采用成熟的数据存储格式</p>
                <p class="plink">查看详情</p>
                <a href="http://baidu.com/" target="_blank">View more</a>
            </figcaption>           
        </figure>

        <figure class="effect-ruby">
            <img src="images/2_03.png" alt="img15"/>
            <figcaption>
                <h2><i class="fa fa-paper-plane fa-2x"></i></h2>
                <h2><span>成熟框架</span></h2>
                <p>采用成熟的数据存储格式</p>
                <p class="plink">查看详情</p>
                <a href="http://baidu.com/" target="_blank">View more</a>
            </figcaption>           
        </figure>

        <figure class="effect-ruby">
            <img src="images/2_03.png" alt="img15"/>
            <figcaption>
                <h2><i class="fa fa-paper-plane fa-2x"></i></h2>
                <h2><span>成熟框架</span></h2>
                <p>采用成熟的数据存储格式</p>
                <p class="plink">查看详情</p>
                <a href="http://baidu.com/" target="_blank">View more</a>
            </figcaption>           
        </figure>

        <figure class="effect-ruby">
            <img src="images/2_03.png" alt="img15"/>
            <figcaption>
                <h2><i class="fa fa-paper-plane fa-2x"></i></h2>
                <h2><span>成熟框架</span></h2>
                <p>采用成熟的数据存储格式</p>
                <p class="plink">查看详情</p>
                <a href="http://baidu.com/" target="_blank">View more</a>
            </figcaption>           
        </figure>
    </div>

</div>
</div>

<!-- 新闻公告 -->

<div class="common_section">
<div class="container">
	<h2>最新公告</h2>
	<section class="posts">
	<% var count = 0 %>
	<% site.pages.each(function (post) { %>
   	<% if (post.categories == "news") { %>
   	<% count += 1%>
    <div class="article" style="display:none">
      	<div class="article-title row">
      		<div class="article-title-left">
      			<a class="article-readmore" href="<%- url_for(post.path) %>"><%- post.title %></a>
      		</div>
      		<div>
      			<p><%- date(post.date, "YYYY-MM-DD") %></p>
      		</div>
      	</div>
      	<div class="article-content">
        	<%- post.excerpt %>
      	</div>
    </div>
    
<% } }) %>

    <nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="previous">
      <a href="#previous" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>

    <% for (var i = 1; i <= Math.floor(count/4); i++) { %>
    	<li id="pageList<%= i %>" ><a href="#<%= i %>" flag='listPage'> 
    		<%= i %></a></li>

	<% } %>    
    <li class="next">
      <a href="#next" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

</section>

<%- partial('_partial/paginator') %>

			

</div>
</div>

<div class="pricing_table_section" id="pricing_part">
<div class="container">

			<h2>平台提供的服务</h2>
			<h4>我们会逐步优化算法，并添加更多的计算服务</h4>
			
			
		
		<ul class="bxslider">

		   <li>	
		   	<div class="insider">
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>
				<li><a href="#" class="button5">使用说明</a> <a href="#" class="button5">测试案例</a></li>
				</ul>
				</div>
				
				
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>

				<li><a href="#" class="button6">使用说明</a> <a href="#" class="button6">测试案例</a></li>
				</ul>
				</div>
				
				
				
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>

				<li><a href="#" class="button5">使用说明</a> <a href="#" class="button5">测试案例</a></li>
				</ul>
				</div>

			</div>

			</li>

			<li>
						   	<div class="insider">
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>
	
				<li><a href="#" class="button5">使用说明</a> <a href="#" class="button5">测试案例</a></li>
				</ul>
				</div>
				
				
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>
			
				<li><a href="#" class="button6">使用说明</a> <a href="#" class="button6">测试案例</a></li>
				</ul>
				</div>
				
				
				
				<div class="block">
				<div class="head">
				<h2>配电网N-1可装容量计算</h2>
				<p>Author:XXX</p>
				</div>
				<ul>
				<li>此服务用于配电网N-1可装容量计算。原始算例数据来自文献[1]。</li>
				<li>调用次数<span>10</span></li>

				<li><a href="#" class="button5">使用说明</a> <a href="#" class="button5">测试案例</a></li>
				</ul>
				</div>

			</div>

			</li>	
		</ul>

			

</div>
</div>





<div class="common_section" id="testimonials_part">
<div class="container">

			<h2>平台简介</h2>
		   
			<br clear="all" />
			
	
			<div class="testimonial_box">
			<div class="quote_button"><img src="images/icons/i7.png" alt="" /></div>
			<p>
                              科学研究中，重现已有论文中的方法是一项必要的工作，是科研训练的一部分。目前高校和科研机构的科研人员做重现工作时，普遍感受到一些困难。第一，数据不易获得，期刊论文受篇幅限制，一些论文的公开数据不足以重现其方法；第二，编程工作量大，原创者使用的语言和工具不一定是重现者熟悉的，而不同语言，不同工具实现的难度是不一样的，即使一样，其工作量也很繁重；第三，缺乏客观性，由于编程者的水平不一样，没有充分调优的程序，即使算法原理一样，其最终效果也会有很大差异。本平台的总策划人从事科研活动十余年，深切了解研究生或科研人员所遇到的上述困难，因此萌生了提供一个电力系统方向的公共计算平台的想法，希望部分减轻上述困难。</p>
                              <p class="collapse" id="collapseExample">
                              首先，本平台将收集整理标准算例的数据，并提供下载，也会将电力系统网络分析以及运行与优化领域常用的算例数据收集整理，减轻科研人员搜索数据的难度，也欢迎科研人员将自己发表论文的算例数据通过邮件发给我们，通过平台分享给广大科研人员。 其次，我们将会把课题组多年来积累的、最新的算法成果通过服务的方式开放，供广大同行和研究生调用、验证、比较。另外，我们也会将研究中经常用来对比研究的经典算法、常见方法做成服务来分享。通过我们持续的努力，希望可以减轻科研人员的编程工作量。 最后，平台开发组由浙江大学优秀的研究生和高年级本科生组成，由平台的总策划人负责指导，本平台的总策划人从事电力系统自动化专业方向研究，并有十几年实际软件系统开发经验和近十年的编程教学经历，我们力争提供充分调优的算法服务。特别指出的是，对于非本课题组研究成果，我们的实现的效率将不低于文献公布的指标，此为最低标准。 最最后，平台后面是一群对电力系统方向充满科研热情、有活力的青年，我们将尽最大努力，提供客观、高效的算法实现，并用大量测试算例保证服务的准确性和鲁棒性，为科研提供一份贡献。
                              </p> 
                              <a class="collapsed" data-parent="#testimonials_part" data-toggle=collapse href="#collapseExample" aria-controls="collapseExample" style="float:right">More</a>
                              <br/>
			</div>	
</div>
</div>



<div class="common_section" id="faicons" style="background:#f7f7f7;">
<div class="container">

			<h2>下载专区</h2>
			<h4 style="margin:0 0 40px 0;">One machine can do the work of fifty ordinary men. No machine can do the work of one extraordinary man</h4>
			
			
			
			<div class="insider">
			
				<a href="http://www.baidu.com"><div class="iconblock">
				<span class="fa fa-calculator"></span> &nbsp; 配电网N-1可装容量计算
				</div></a>
				
				<div class="iconblock">
				<span class="fa fa-bus"></span> &nbsp;  Bus Icon
				</div>
				
				<div class="iconblock">
				<span class="fa fa-tachometer "></span> &nbsp;  Tachometer 
				</div>

				<br clear="all" />
				
				<div class="iconblock">
				<span class="fa fa-tachometer "></span> &nbsp;  Tachometer 
				</div>
				
				<div class="iconblock">
				<span class="fa fa-folder-open"></span> &nbsp;  Folder Icon
				</div>
				
				<div class="iconblock">
				<span class="fa fa-shopping-cart "></span> &nbsp;  Shop Icon
				</div>

				
			</div>
						

</div>
</div>







<section class="book_section">
    <div class="container">
        <h5 class="section-title h1">已出版书籍</h5>
        <div class="row">
            <!-- Team member -->
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                    <div class="mainflip">
                        <div class="frontside">
                            <div class="card text-center">
                            	<div class="bookimg">
                  				<img  style="width:360px;" class="rounded align-middle" alt="..." src="images/books/数据结构2.jpg"/>
                                </div>
                  				<h3 id="selfname" class="bookname">数据结构(c语言版)</h3>
                  				<p class="card-author">董树锋 郭创新 著</p>
                            </div>
                        </div>
                        <div class="backside">
                            <div class="card">
                            	
                              
                                    <h4 class="card-title text-center">图书简介</h4>
                                    <p class="card-text description">本书是为“数据结构”课程编著的教材，第1章和第2章介绍数学基础和算法相关预备知识，第3～第10章介绍常见数据结构的抽象数据类型、算法实现、性能分析及其应用。本书注重用具体案例介绍如何运用数据结构知识解决实际问题，同时穿插程序设计技巧的讲解。全书采用C语言作为数据结构和算法的描述语言，提供了大量设计精良的代码，且不乏对算法所蕴含的数学原理的精彩介绍，使读者不仅能够开发出高效、精致的程序，而且能够达到“知其然，也知其所以然”的效果。</p>
                           

                     
                                    <div class="purchase text-center"><a href="#" class="button3">购买链接</a></div>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ./Team member -->
            <!-- Team member -->
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                    <div class="mainflip">
                        <div class="frontside">
                            <div class="card text-center">
                            	<div class="bookimg">
                  				<img  style="width:360px;" class="rounded align-middle" alt="..." src="images/books/电力系统风险评估与风险调度2.jpg"/>
                                </div>
                  				<h3 id="selfname" class="bookname">电力系统风险评估与风险调度</h3>
                  				<p class="card-author">郭创新，丁一，张金江，董树锋 著</p>
                            </div>
                        </div>
                        <div class="backside">
                            <div class="card">
                                <div class="card-body mt-4">
                                    <h4 class="card-title text-center">图书简介</h4>
                                    <p class="card-text description">本书针对现代电力系统处于源、网、荷以及环境等多重不确定性因素作用下运行风险不断加大的现状，在传统电力系统确定性调度理论的基础上综合考虑系统运行过程中所面临的不确定性，提出系统运行风险预测和防控理论，通过量化各种不确定性风险因素，研究电力系统风险评估和风险调度方法，构建电力系统的风险防控体系，尽可能全面、客观地量化系统再遭受各类不确定因素下发生灾难性事件的概率严重程度。本书内容包括电力系统风险评估与风险调度模型与基本理论、电力系统风险评估与风险调度方法、电力系统风险评估与风险调度事件等内容，形成一套从模型构建、评估调度方法、事件应用等风险评估与调度理论方法应用体系，支撑电力系统风险经济运行优化控制。</p>

                                    <div class="purchase text-center"><a href="#" class="button3">购买链接</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ./Team member -->
            <!-- Team member -->
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                    <div class="mainflip">
                        <div class="frontside">
                            <div class="card text-center">
                            	<div class="bookimg">
                  				<img  style="width:360px;" class="rounded align-middle" alt="..." src="images/books/电力信息技术2.jpg"/>
                                </div>
                  				<h3 id="selfname" class="bookname">电力信息技术</h3>
                  				<p class="card-author">郭创新，董树锋，张金江 著</p>
                            </div>
                        </div>
                        <div class="backside">
                            <div class="card">
                                <div class="card-body mt-4">
                                    <h4 class="card-title text-center">图书简介</h4>
                                    <p class="card-text description">本书分为9章，前面5章详细介绍信息系统概念和基础知识，包括信息系统的主要概念和阶段论模型、电力信息系统的结构和分类、电力实时和非实时信息系统的功能和特点，后面4章介绍最新电力信息标准和技术，并结合具体案例进行讲解，有利于读者对内容的理解，包括电力信息相关标准 （IEC 60870、IEC 61850、IEC 61970、IEC 61968）及其应用、电力信息集成技术等。各章均配有一定数量的思考练习题。

        本书适合作为高等院校电气类、信息类专业高年级本科生的教材，也适合作为从事电力信息相关行业的工作者自学的参考书。</p>

                                   <div class="purchase text-center"><a href="#" class="button3">购买链接</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          
            <!-- ./Team member -->

        </div>
    </div>
</section>


<!-- 

<div class="common_section" id="contact_part">
<div class="container">

			<h2>Get in touch with us</h2>
			<h4>term sheet convertible note colluding bootstrapping</h4>
			
		   
			<br clear="all" />
			
			
			<form method="post" class="hpform">
			<input type="text" placeholder="Name" />
			<input type="email" placeholder="Email" />
			<textarea placeholder="Message"></textarea>
			<input type="submit" value="SEND" />
			</form>
			
		   
			

</div>
</div> -->

<div class="subscribe_section">
<div class="container">
			<div class="footer-center">

				<div>
					<i class="fa fa-map-marker"></i>
					<p>浙江省杭州市浙江大学玉泉校区电机工程楼311室</p>
				</div>

				<div>
					<i class="fa fa-phone"></i>
					<p>13600543680(董树锋)</p>
				</div>

				<div>
					<i class="fa fa-envelope"></i>
					<p><a href="mailto:support@company.com">dongshufeng@zju.edu.cn </a></p>
				</div>

			</div>

			<div class="footer-right">

				<p class="footer-company-about">
					<span>关于实验室</span>
					智能电网运行与优化实验室（SGOOL）于清华大学电机系（2009年）与浙江大学电气工程学院（2013年）分别成立，致力于促进中国智能电网与可再生能源的发展，专注于电力系统优化运行与控制、智能电网、可再生能源、电力市场、能源互联网等研究领域，现已成为一支在国际上具有一定影响力的研究团队。
				</p>



			</div>
			
		   
			

</div>
</div>




<div class="common_section">
<div class="container">

	
		
		   
			<div class="copyright">Copyright &copy; 2018.SGOOL all rights reserved.</div>                    

</div>
</div>


</div><!--wrapper-->


<script>
	jQuery("#layerslider").layerSlider({
		responsive: false,
		responsiveUnder: 1100,
		layersContainer: 1100,
		skin: 'fullwidth',
		hoverPrevNext: false,
		skinsPath: 'layerslider/skins/'
	});


</script>

<!-- <script src="js/wow.js"></script>
<script>
wow = new WOW(
  {
	animateClass: 'animated',
	offset:       100
  }
);
wow.init();
document.getElementById('moar').onclick = function() {
  	var section = document.createElement('section');
  	section.className = 'section--purple wow fadeInDown';
  	this.parentNode.insertBefore(section, this);
};
</script> -->







<script type="text/javascript">

var pt = 0;
var articles = $(".article");
var lastPage = $("li#pageList1");
lastPage.addClass('active');


var len = articles.length;
var step = 4;
var maxpt = Math.ceil(len/step);
var currentPage = 1;
for (var i=0;i<step;i++){
	articles.eq(i).css("display","");
}





$(function() {
function prev(){
	if (currentPage == 1 ) return false;
	currentPage -= 1;	
	jumpPage(currentPage);
}
function next(){
	if (currentPage == maxpt) return false;
	currentPage += 1;
	jumpPage(currentPage);

}

	function jumpPage(p){
		lastPage.removeClass("active");
		lastPage = $("li#pageList"+p);
		lastPage.addClass("active");
		for (var i=0;i<len;i++){
			articles.eq(i).css("display","None");
		}
		for (var i = (p-1) * 4;i<p*4;i++){
			articles.eq(i).css("display","");
		}

	}

jumpPage(1);
	// $("a[data-toggle=collapse]").click(function()
	// {
	// 		$('#collapseExample').collapse('toggle');
	// 		return false;
	// });
	$('a[href*=#]:not([href=#])').click(function() {	
		if ($(this).attr('data-toggle')=='collapse'){
				$('#collapseExample').collapse('toggle');
				return false;
		}

		if ($(this).attr('aria-label')=='Next'){
			next();
			return false;

		}
		if ($(this).attr('aria-label')=='Previous'){
			prev();
			return false;
		}

		if ($(this).attr('flag')=='listPage'){
			currentPage = parseInt($(this).text().trim());
			jumpPage(currentPage);
			return false;
		}


		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html,body').animate({scrollTop: target.offset().top - 132}, 2000);
				return false;
			}
		}
	});
});
</script>


<script type="text/javascript">


$(document).ready(function() {

if($(window).width() <= 1200){
	$(function() {
		$('a[href*=#]:not([href=#])').click(function() {
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
				var target = $(this.hash);
				target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
				if (target.length) {
					$('html,body').animate({
						scrollTop: target.offset().top - 132
					}, 2000);
					return false;
				}
			}
		});
	});
}

});


</script> 
	 


</body>
</html>
