{% extends 'web/f_base.html' %}

{% block mycss%}
<script src="js2/jquery.min.js"></script>
<script src="js2/jquery.easing-1.3.min.js"></script>
<script src="js2/tooltip.js"></script>
<script src="js2/dropdown.js"></script>
<script src="js2/tinynav.min.js"></script>
<script src="js2/camera.min.js"></script>
<script src="js2/jquery.fancybox.js?v=2.0.6"></script>
<script src="js2/jquery.fancybox-media.js?v=1.0.3"></script>
<script src="js2/jquery.ui.totop.min.js"></script>
<script src="js2/ddaccordion.js"></script>
<script src="js2/jquery.twitter.js"></script>
<script src="js2/jflickrfeed.min.js"></script>
<script src="js2/faq-functions.js"></script>
<script src="js2/theme-functions.js"></script>
<script>
    $(document).ready(function () {
        //Camera Jquery
        $('#camera-slide').camera({
            thumbnails: false,
            hover: false,
            pagination: false,
        });
    });
</script>
{% endblock %}

{% block middle %}
<section id="banner">
    <div id="main-slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="/static/img1/slides/3.jpg"/>
                <div class="flex-caption">
                    <h3>分布式人工智能</h3>
                    <p>Distributed Artificial Intelligence</p>
                </div>
            </li>
            <li>
                <img src="/static/img1/slides/4.jpg"/>
                <div class="flex-caption">
                    <h3>联邦学习</h3>
                    <p>Federated Learning</p>
                </div>
            </li>
            <li>
                <img src="/static/img1/slides/4.jpg"/>
                <div class="flex-caption">
                    <h3>计算机视觉</h3>
                    <p>Computer Vision</p>
                </div>
            </li>
            <li>
                <img src="/static/img1/slides/4.jpg"/>
                <div class="flex-caption">
                    <h3>人工智能应用</h3>
                    <p>Artificial Intelligence Applications</p>
                </div>
            </li>
        </ul>
    </div>
</section>
<section class="jumbobox">
    <div class="container" style="text-align: left; margin-bottom: 20px">
        {{webinfo[2]}}
    </div>
</section>
<section id="content">
    <div class="container">
        <div class="skill-home" style="float: left; width: 60%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px">
            <div style="display: inline-block; float: left; width:80%;"><h4>研究课题 (Research Topics)</h4></div>
            <div style="display: inline-block; float: right; width:15%;"><a href="/projects"> more...</a></div>
            <div class="skill-home-solid clearfix">
                {%for row3 in researchtopic[0:6] %}
                <div class="col-md-4 text-center">
                    <div class="box" style="padding-top: 20px">
                        <div class="box-area"><img alt="" style="height:80px; width:160px" src="{{row3[5]}}"/>
                            <a class="" href="/projectinfo/{{row3[0]}}">{{row3[3] }}</a>
                            <span style="font-size:12px; line-height: 12px;">{{ row3[4] }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

        </div>
        <div class="skill-home2" style="float: right;width: 40%;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
            <div style="display: block; float: left; "><h4>研究成果 (Publications)</h4></div>
            <div style="float: right; width:18%;"><a class="a_more" href="/projects"> more...</a></div>
              <div class="skill-home-solid clearfix">
                <ul  style="margin: 0px 0px 0px 0px; padding: 5px 0px 0px 0px">
                    {% for row4 in paperlist[0:8] %}
                    <li class="box2">
                        <a href="/pubinfo/{{row4[0]}}">{{ row4[2]
                            }}</a>.
                        {{row4[9]}}
                    </li>
                    {% endfor %}
                </ul>
              </div>
        </div>
    </div>
    </div>
    </div>
</section>

<section id="clients" style="margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px">
    <div class="container">
        <div class="clients-slider">
            <h4>应用领域 (Applications)</h4>
            <div id="clients-slider" class="owl-carousel">
                {% for row5 in sponsorinfo%}
                {{row5[2]}}
                <img alt="" src="/static/img1/Sponsors/{{row5[3]}}">
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}