yf_zd
/
second


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{garden.name}}</title>
    <link rel="stylesheet" href="{% static '/lib/css/swiper.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/video-js.min.css' %}">
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/css/common.css' %}">
    <link rel="stylesheet" href="{% static '/css/farmHomePage.css' %}">
</head>

<body>
    <div class="header">
        <div class="headerTxt">
            <div class="wrapper">
                <p class="logoNameCn">{{garden.name}}</p>
                <p class="logoNameEn">Leisure agricultural tourism network</p>
            </div>

        </div>
        <!-- 轮播 -->
        <div class="sliderBox advImg">
            <div class="swiper-container banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slider1"></div>
                    <div class="swiper-slide slider2"></div>
                    <div class="swiper-slide slider3"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

    </div>
    <!-- 主体部分 -->
    <div class="content">
        <div class="wrapper">
            <!-- 新闻资讯、登录 -->
            <div class="floatDiv">
                <div class="baseInfo">
                    <div class="captionBox">
                        <h2 class="captionTxt txtColor">
                            <span>农场基地信息</span>
                        </h2>
                        <p class="captionTxtEn txtColor">FARM BASIC INFORMATION</p>
                    </div>
                    <!-- 农场基地简介 -->
                    <div class="">
                        <div class="farmInfo">
                            <p>联系方式：{{garden.mobile}}</p>
                            <p>负责人：{{garden.manage}}</p>
                            <p>农场占地：{{garden.area}}亩</p>
                            <p>农场地址：{{garden.addr}}</p>
                        </div>
                        <div class="farmSite">
                            <div id="map"></div>
                        </div>
                        <input type="hidden" id="gardenLocation" value="{{garden.location}}">
                    </div>
                </div>
                <!-- 农场介绍 -->
                <div class="farmShow">
                    <div class="captionBox">
                        <h2 class="captionTxt txtColor">
                            <span>农场简介</span>
                        </h2>
                        <p class="captionTxtEn txtColor">FARM PROFILES</p>
                    </div>
                    <!-- 介绍 -->
                    <div>
                        <div class="floatDiv intro">
                            <div class="swiperDiv">
                                <!-- 图片集 -->
                                <input type="hidden" id="gardenImgs" value="{{garden.img}}">
                                <div class="swiper-container photos">
                                    <div class="swiper-wrapper" id="gardenSwiper">
                                            <!-- <div class="swiper-slide">
                                                <img src="{% static '/imgs/dorm/dorm1.jpg' %}" alt="">
                                            </div> -->
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="magnifyDiv"></div>
                            <div class="introTxt">{{garden.desc}}</div>

                        </div>

                    </div>
                </div>
            </div>
            <!-- 农场公告+视频公告 -->
            <div class="floatDiv">
                <!-- 农场公告 -->
                <div class="farmNewsNotice">
                    <div class="captionBox">
                        <h2 class="captionTxt txtColor">
                            <span>农场公告</span>
                        </h2>
                        <p class="captionTxtEn txtColor">FARM PROFILES</p>
                    </div>
                    <div class="floatDiv">
                        <!-- 滚动 -->
                        <div class="newsListDiv" id="newsListDiv">
                            <ul class="newsList">
                                {% if news|length %} {% for newsitem in news %}
                                <li>
                                    <div class="date">
                                        {{newsitem.upl_time|date:"Y-m-d"}}
                                    </div>
                                    <div class="describe">
                                        <a href="news_view?id={{newsitem.id}}" target="_blank">{{newsitem.title}}</a>
                                    </div>
                                </li>
                                {% endfor %} {% else %}
                                <li>
                                   <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="farmVideoNotice">
                    <div class="captionBox">
                        <h2 class="captionTxt txtColor">
                            <span>视频公告</span>
                        </h2>
                        <p class="captionTxtEn txtColor">FARM PROFILES</p>
                    </div>
                    <div>
                        <div class="floatDiv">
                            {% if video|length %}
                            {% for videoitem in video %}
                            {% if forloop.first%}
                            <div class="videoBox">
                                <video id="my-video" class="video-js" preload="auto" controls width="360" height="233" poster="{{videoitem.video_img}}"
                                    data-setup="{}">
                                    <!--preload="auto"-->
                                    <source src="{{videoitem.video_url}}" type="video/mp4">
                                    <source src="{{videoitem.video_url}}" type="video/webm">
                                    <source src="{{videoitem.video_url}}" type="video/ogg">
                                    <p class="vjs-no-js">要查看此视频，请启用JavaScript，并考虑升级到一个web浏览器
                                        <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                                    </p>
                                </video>
                            </div>
                            <div class="videoBoxTxt">
                                <h2>{{videoitem.title}}</h2>
                                <div>{{videoitem.intro}}</div>
                                <div class="moreBtn">
                                    <a target="_blank" href="video_list?page=1">MORE &gt;</a>
                                </div>
                            </div>
                            {% endif %}{% endfor %}{% else %}
                            <p style="text-align:center;line-height:200px;font-size:18px">暂无数据</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 产品展厅 -->
            <div>
                <div class="captionBox">
                    <h2 class="captionTxt">
                        <span>产品</span>
                        <span class="txtColor">展厅</span>
                    </h2>
                    <p class="captionTxtEn">EXHIBITION HALL THE PRODUCTS</p>
                    <div class="captionCutLine"></div>
                    <div class="moreBtn">
                        <a href="equip_show_list?page=1" target="_blank">MORE ></a>
                    </div>
                </div>
                <div class="productShow">
                    <ul class="productShowUl">
                        {% if product|length %}
                        {% for etp in product %}
                        {% if forloop.counter < 9 %}
                        <li>
                            <a href="equip_show_detail?id={{etp.id}}" target="_black">
                                <div class="productItem">
                                    <img src="{{ etp.head_img }}" alt="">
                                    <div class="maskBox">
                                        <p>产品名称：{{ etp.title}}</p>
                                        <p>生产企业：{{ etp.intro}}</p>
                                        <p>联系电话：{{ etp.mobile}}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        {% endif %}{% endfor %}{% else %}
                        <li style="width:100%">
                            <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
                        </li>
                        {% endif %}
                        <!-- <li>
                            <div class="productItem">
                                <img src="{% static '/imgs/fruit/fruit2.jpg' %}" alt="">
                                <div class="maskBox">
                                    <p>产品名称：苹果</p>
                                    <p>产品介绍：苹果，是水果中的一种，是蔷薇科苹果亚科苹果属植物，其树为落叶乔木。</p>
                                    <p>生产企业：XXXX有限公司</p>
                                    <p>联系电话：13811111111</p>
                                </div>
                            </div>
                        </li> -->
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部版权 -->
    <div class="footer bjColor">
        <div class="wrapper">
            <div class="floatDiv">
                <div class="copyrightTxt">
                    <div>休闲农业旅游网</div>
                    <div>联系人：李四　　联系电话：13811111111</div>
                    <div>地址：河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                </div>
                <div class="WeChatCode">
                    <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
                    <p>关注公众号</p>
                </div>
            </div>
            <div class="copyright">
                版权所有XXXXXXXXXXXXXXXXXXXXXX
            </div>
        </div>
    </div>
    <!-- 返回顶部 -->
    <div id="back2top" class="back2top" style="display: block;">
        <a href="javascript:void(0);" onclick="goUp()" title="返回顶部">&nbsp;</a>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/js/swiper.min.js'%}"></script>
    <script src="{% static '/lib/js/video.min.js'%}"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
    <!-- <script src="{% static '/js/index.js'%}"></script> -->
    <script>
        // 轮播
        var banner = new Swiper('.banner', {
            autoplay: true,//可选选项，自动滑动
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })

        var gardenImg = $('#gardenImgs').val();
        if(gardenImg){
            var gardenImgArr = gardenImg.split(',');
        }else{
            var gardenImgArr = [];
        }
        if(gardenImgArr.length){
            $('.magnifyDiv').append('<img />')
            var html = '';
            for(var i = 0;i<gardenImgArr.length;i++){
                html += '<div class="swiper-slide"><img src="http://127.0.0.1:8000/'+gardenImgArr[i]+'" alt=""></div>';
                if(i == gardenImgArr.length-1){
                    $('#gardenSwiper').html(html);
                    // console.log(html)
                     var swiper = new Swiper('.photos', {
                        direction: 'vertical',
                        slidesPerView: 3,
                        // centeredSlides: true,
                        // loop: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        on: {
                            slideChange: function () {
                                // console.log(this)
                            },
                            click: function () {
                                console.log(this);
                                console.log(this.clickedSlide);
                                if(this.clickedSlide){
                                    var path = $(this.clickedSlide).find('img').attr('src');
                                    $('.magnifyDiv img').attr('src', path);
                                    $('.swiper-slide').find('img').css('border', 'none');
                                    $(this.clickedSlide).find('img').css('border', '4px solid #3eb04f');
                                }
                                
                            },
                        },
                    });
                    $('#gardenSwiper .swiper-slide').eq(0).find('img').css('border', '4px solid #3eb04f');   
                    $('.magnifyDiv img').attr('src', $('#gardenSwiper .swiper-slide').eq(0).find('img').attr('src'));               
                }
            }
        }

       

        // 百度地图API功能
        var map = new BMap.Map("map", { minZoom: 5 });  //BMAP_SATELLITE_MAP  卫星地图
        map.centerAndZoom(new BMap.Point(113.43797, 34.164943), 14);
        map.enableScrollWheelZoom(true);
        var geoc = new BMap.Geocoder();

        var gardenLocation = $('#gardenLocation').val();
        var locationArr = gardenLocation.split(',');
        getMapSite(locationArr[0], locationArr[1]);
       
        function getMapSite(lng, lat) {
            map.clearOverlays();
            var point = new BMap.Point(lng, lat);
            var marker = new BMap.Marker(point);  // 创建标注
            map.centerAndZoom(point);
            map.centerAndZoom(point, 14);
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        // 返回顶部
        function goUp() {
            $('body,html').animate({ scrollTop: 0 }, 300)
        }

        function show() {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back2top").fadeIn(100);
                } else {
                    $("#back2top").fadeOut(100);
                }
            });
        }
        show();

        // 新闻资讯滚动

        function Roll(ele, time) {
            var obj = document.getElementById(ele);
            var ul = obj.children;
            var li = ul[0].children;
            console.log(li)
            var t;
            if (time) {
                var time = time;
            } else {
                var time = 2500;
            }
            t = setInterval(function () {
                $(li).eq(0).slideUp(function () {
                    $(ul).append($(li).eq(0));
                });
                $(li).show();
            }, time);
            $(ul).on('mouseenter', 'li', function () {
                clearInterval(t)
            })
            $(ul).on('mouseleave', 'li', function () {
                t = setInterval(function () {
                    $(li).eq(0).slideUp(function () {
                        $(ul).append($(li).eq(0));
                    });
                    $(li).show();
                }, time);
            })
        }
    Roll('newsListDiv', 2000)
    </script>
</body>

</html>