{% extends "base.html" %}
{% load static %}
{% block title %}
    首页
{% endblock %}
{% block content %}
    <link href="{% static 'css/home.css' %}" rel="stylesheet">
    <script src="{% static 'js/jqthumb.min.js' %}"></script>
    <!-- 广告横幅 -->
    <div id="ad" class="carousel slide" data-ride="carousel" data-interval="5000">
        <ol class="carousel-indicators">
            <li data-target="#ad" data-slide-to="0" class="active"></li>
            <li data-target="#ad" data-slide-to="1"></li>
            <li data-target="#ad" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="{% static 'img/banner1.jpg' %}" alt="广告横幅1">
            </div>
            <div class="item">
                <img src="{% static 'img/banner2.jpg' %}" alt="广告横幅2">
            </div>
            <div class="item">
                <img src="{% static 'img/banner3.jpg' %}" alt="广告横幅3">
            </div>
        </div>
        <a class="left carousel-control" href="#ad" data-slide="prev"><span
                class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#ad" data-slide="next"><span
                class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <!-- 主体内容 -->
    <div class="container">
        <div class="row row-3">

            <div class="col-md-4">
                <!-- 企业概况 -->
                <span class="part1">
        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
      </span>
                <span class="part1 en">
        &nbsp;&nbsp;/ About Us
      </span>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div style="margin-top:20px;">
                    <img class="img-responsive" src="{% static 'img/aboutCompany.jpg' %}">
                    <p class="text1">
                        桂电科技有限企业，位于中国某高新技术产业开发区,
                        以社会公共安全领域为主要应用方向，提供极速、准确和防伪装的人脸识别产品。
                    </p>
                </div>
            </div>

            <div class="col-md-8">
                <!-- 新闻动态 -->
                <span class="part1">
        <a href="#">新闻动态</a>
      </span>
                <span class="part1 en">
        &nbsp;&nbsp;/ News
      </span>
                <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'company' %}">
                    +&nbsp;更多
                </a>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div class="col-md-5">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators nav-point">
                            {% for post in postList %}
                                <li data-target="#myCarousel" data-slide-to="{{ forloop.counter0 }}"
                                        {% if forloop.first %} class="active"
                                        {% endif %}>
                                </li>
                            {% endfor %}
                        </ol>
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner" style="margin-top:15px;">
                            {% for post in postList %}
                                <div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}
                                                            style="background-size:cover;">
                                    <a href="{% url 'newsApp:newDetail' post.id %}">
                                        <img src="{{ post.photo.url }}" class="img-responsive" onload="DrawImage(this)"></a>
                                    <div class="carousel-caption nav-title">{{ post.title }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <ul class="list-unstyled list-new">
                        {% for mynew in newList %}
                            <li>
                                <a href="{% url 'newsApp:newDetail' mynew.id %}">
                                    {{ mynew.title|truncatechars:"15" }}</a>
                                <span>【{{ mynew.publishDate|date:"Y-m-d" }}】</span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

        </div>

        <div class="row row-3">

            <div class="col-md-4">
                <!-- 通知公告 -->
                <span class="part1">
        <a href="#">通知公告</a>
      </span>
                <span class="part1 en">
        &nbsp;&nbsp;/ Public Release
      </span>
                <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'notice' %}">
                    +&nbsp;更多
                </a>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <img class="img-responsive" src="{% static 'img/note.jpg' %}">
                    <ul class="list-unstyled list-new">
                        {% for note in noteList %}
                            <li>
                                <a href="{% url 'newsApp:newDetail' note.id %}">
                                    {{ note.title|truncatechars:"25" }}
                                </a>
                                <a href="{% url 'newsApp:newDetail' note.id %}" class="public-detail">
                                    查看详情>>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>


            </div>

            <div class="col-md-4">
                <!-- 科研基地 -->
                <span class="part1">
        <a href="{% url 'scienceApp:science' %}">科研基地</a>
      </span>
                <span class="part1 en">
        &nbsp;&nbsp;/ Technology Center
      </span>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <a href="{% url 'scienceApp:science' %}">
                        <img class="img-responsive" src="{% static 'img/ky.jpg' %}">
                    </a>
                    <p class="text1">
                        <font color="#d30a1c">桂电科技科研基地</font>
                        桂电科研基地分为计算机视觉、 机器人和视觉深度学习三个事业部，共拥有高级研发人员近30名，
                        以各领域高级工程师和知名院校博士为主体的多层次研发梯队。当前，科研基地优秀的技术团队
                        已为桂电在人脸识别、物联网平台搭建、机器人导航等 领域打下了坚实基础
                    </p>
                </div>

            </div>

            <div class="col-md-4">
                <!-- 联系我们 -->
                <span class="part1">
        <a href="{% url 'contactApp:contact' %}">联系我们</a>
      </span>
                <span class="part1 en">
        &nbsp;&nbsp;/ Contact us
      </span>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <ul class="list-unstyled procurement-li">
                        <li>业务咨询一：1900300307宋宇恬</li>
                        <li>业务咨询二：1900300401黄慧贤</li>
                        <li>咨询电话：1900300335杨朝俊</li>
                        <li>企业传真：2000300625卢崇竣</li>
                        <li>地址：桂林电子科技大学python开发技术(2021688)</li>
                        <li>邮编：2000301022李宗和</li>
                        <li>网址：1900300327王若新</li>
                    </ul>
                    <div class="platform"><a href="{% url 'contactApp:contact' %}">详情</a></div>
                </div>

            </div>

        </div>

        {#  <div class="row row-3">#}
        {#    <!-- 产品中心 -->#}
        {#    <div class="col-md-12 col-pro">#}
        {##}
        {#      <span class="part1">#}
        {#        <a href="{% url 'productsApp:products' 'robot' %}">产品中心</a>#}
        {#      </span>#}
        {#      <span class="part1 en">#}
        {#        &nbsp;&nbsp;/ Products#}
        {#      </span>#}
        {#      <a class="btn btn-default btn-xs more-btn" href="{% url 'productsApp:products' 'robot' %}">#}
        {#        +&nbsp;更多#}
        {#      </a>#}
        {#      <div class="line1" style="margin-bottom:5px;">#}
        {#        <div class="line2 theme"></div>#}
        {#      </div>#}
        {#      <div class="col-md-12 col-pro">#}
        {#        <div id="Carousel" class="carousel slide" style="margin-bottom:30px">#}
        {#          <ol class="carousel-indicators" style="display:none;">#}
        {#            <li data-target="#Carousel" data-slide-to="0" class="active"></li>#}
        {#          </ol>#}
        {#          <div class="carousel-inner">#}
        {#            <div class="item active">#}
        {#              <div class="row">#}
        {#                {% for product in productList %}#}
        {#                <div class="col-md-3 pro-images">#}
        {#                  <a href="{% url 'productsApp:productDetail' product.id %}" class="thumbnail">#}
        {#                    {% for img in product.productImgs.all %}#}
        {#                    {% if forloop.first %}#}
        {#                    <img src="{{img.photo.url}}" alt="产品图片" class="img-responsive" onload="DrawImage(this)">#}
        {#                    {% endif %}#}
        {#                    {% endfor %}#}
        {#                  </a>#}
        {#                  <div class="carousel-caption nav-title">{{product.title}}</div>#}
        {#                </div>#}
        {#                {% endfor %}#}
        {#              </div>#}
        {#            </div>#}
        {#          </div>#}
        {#        </div>#}
        {#      </div>#}
        {##}
        {#    </div>#}
        {#  </div>#}

        <div class="row row-3">
            <!-- 友情链接 -->
            <div class="col-md-12">
            </div>
        </div>

    </div>

    <script>
        //处理缩略图
        function DrawImage(hotimg) {
            $(hotimg).jqthumb({
                width: '100%', // 宽度
                height: '220px', // 高度
                zoom: '1', // 缩放比例
                method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
            });
        }
    </script>
{% endblock %}