|
|
@@ -0,0 +1,373 @@
|
|
|
+{% 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>农场列表页</title>
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
|
|
|
+ <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css">
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/css/common.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/css/module.css' %}">
|
|
|
+ <!-- <link rel="stylesheet" href="{% static '/css/hotelList.css' %}"> -->
|
|
|
+ <style>
|
|
|
+ /* 内容模块 */
|
|
|
+ .hacienda .haciendaList{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaList{
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem{
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaImg{
|
|
|
+ width: 195px;
|
|
|
+ height: 165px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaImg .haciendaImg1{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaImg .haciendaImg2{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt{
|
|
|
+ width: 147px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt h2{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 33px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt .desc{
|
|
|
+ letter-spacing: 2px;
|
|
|
+ height: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button{
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 6px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button.btn1{
|
|
|
+ background-color: #00aeed;
|
|
|
+ }
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button.btn2{
|
|
|
+ background-color: #3bb852;
|
|
|
+ }
|
|
|
+ /* 弹出观光样式 */
|
|
|
+ .tourismShow{
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ opacity: 0;
|
|
|
+ display: none;
|
|
|
+ position: fixed;
|
|
|
+ top: 25%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -300px;
|
|
|
+ width: 600px;
|
|
|
+ min-height: 400px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #f1f1f1;
|
|
|
+ -webkit-box-shadow: 2px 4px 10px rgba(0,0,0,.15);
|
|
|
+ -moz-box-shadow: 2px 4px 10px rgba(0,0,0,.15);
|
|
|
+ -o-box-shadow: 2px 4px 10px rgba(0,0,0,.15);
|
|
|
+ box-shadow: 2px 4px 10px rgba(0,0,0,.15);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 12px;
|
|
|
+ z-index: 9;
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ cursor: default;
|
|
|
+ border-top-right-radius: 0;
|
|
|
+ transition: all .5s;
|
|
|
+ }
|
|
|
+ .tourismShow .title{
|
|
|
+ border-left: 3px solid #ff6a28;
|
|
|
+ padding-left: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .tourismShow .line{
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .tourismShow .content{
|
|
|
+ height: 430px;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .tourismShow .tourismShowCloseBtn{
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 11px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #ddd;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tourismShow .content .guideForm>input{
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ .tourismShow .content .guideForm>button{
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 6px;
|
|
|
+ border-radius: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #1eaeed;
|
|
|
+ }
|
|
|
+ .tourismShow .content .guideForm>button{
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 6px;
|
|
|
+ border-radius: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #1eaeed;
|
|
|
+ }
|
|
|
+ .tourismShow .content #map{
|
|
|
+ height: 373px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .tourismShow .loadDiv{
|
|
|
+ position: absolute;
|
|
|
+ left: 45%;
|
|
|
+ top: 45%;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="header">
|
|
|
+ <div class="headerTxt">
|
|
|
+ <div class="wrapper">
|
|
|
+ <p class="logoNameCn">休闲农业旅游网</p>
|
|
|
+ <p class="logoNameEn">Leisure agricultural tourism network</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 广告 -->
|
|
|
+ <div class="bjColor advImg"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 主体部分 -->
|
|
|
+ <div class="content">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="newsDiv">
|
|
|
+ <!-- 面包屑导航 -->
|
|
|
+ <div class="breadcrumb">
|
|
|
+ <span class="layui-breadcrumb">
|
|
|
+ <a href="home">首页</a>
|
|
|
+ <a>
|
|
|
+ <cite>农场导览</cite>
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ <div class="searchDiv">
|
|
|
+ <input type="text" id="searchTitlt" value="{{con|default:''}}" placeholder="请输入标题" autocomplete="off" class="layui-input" >
|
|
|
+ <button type="button" onclick="searchCon()" class="layui-btn layui-btn-ms"><i class="layui-icon"></i></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 新闻列表 -->
|
|
|
+ <div class="innerDiv">
|
|
|
+ <div class="hacienda">
|
|
|
+ <ul class="haciendaList">
|
|
|
+ {% if hotel|length %} {% for hotelItem in hotel %}
|
|
|
+ <li class="haciendaItem">
|
|
|
+ <div class="haciendaImg">
|
|
|
+ <img class="haciendaImg1" src="{% static 'imgs/1.jpg'%}" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="haciendaTxt">
|
|
|
+ <h2>云飞农场</h2>
|
|
|
+ <div class="desc">位于和南沙鞥周三水电费，杀敌欧福布斯后撒粉红色的。阿时候发货萨芬，是大法师。</div>
|
|
|
+ <div>
|
|
|
+ <button class="btn1">观光路线</button>
|
|
|
+ <button class="btn2">导游导览</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ {% endfor %} {% else %}
|
|
|
+ <li class="videoItem" style=" width: 100%;">
|
|
|
+ <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
|
|
|
+ </li>
|
|
|
+ {% endif %}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {% if hotel|length %}
|
|
|
+ <div id="page"></div>
|
|
|
+ <input type="hidden" value="{{nums}}" id="nums">
|
|
|
+ <input type="hidden" value="{{page}}" id="currPage">
|
|
|
+ {% else %}
|
|
|
+ {% endif %}
|
|
|
+ </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 class="tourismShow">
|
|
|
+ <div class="title">
|
|
|
+ <span>观光路线</span>
|
|
|
+ <div class="tourismShowCloseBtn"><i class="layui-icon layui-icon-close"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="content"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
|
|
|
+ <script src="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Driving"></script>
|
|
|
+ <script src="{% static '/lib/layui/layui.js'%}"></script>
|
|
|
+ <script>
|
|
|
+ //注意：导航 依赖 element 模块，否则无法进行功能性操作
|
|
|
+ layui.use(['element', 'laypage'], function () {
|
|
|
+ var element = layui.element;
|
|
|
+
|
|
|
+ //…
|
|
|
+ var laypage = layui.laypage;
|
|
|
+ var currPage = $('#currPage').val();
|
|
|
+ //执行一个laypage实例
|
|
|
+ laypage.render({
|
|
|
+ elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
|
|
|
+ , count: $('#nums').val() //数据总数，从服务端得到
|
|
|
+ // , limit: 5
|
|
|
+ , curr: currPage
|
|
|
+ , jump: function (obj, first) {
|
|
|
+ //obj包含了当前分页的所有参数，比如：
|
|
|
+ console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
|
|
|
+ console.log(obj.limit); //得到每页显示的条数
|
|
|
+ var searchTitlt = $('#searchTitlt').val();
|
|
|
+ //首次不执行
|
|
|
+ if (!first) {
|
|
|
+ window.location.href = 'farm_list?page=' + obj.curr + '&condition=' + searchTitlt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ $('#searchTitlt').on('keypress', function (e) {
|
|
|
+ if (e && e.keyCode == 13) { // 按 Esc
|
|
|
+ searchCon()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function searchCon() {
|
|
|
+ var searchTitlt = $('#searchTitlt').val();
|
|
|
+ window.location.href = 'farm_list?page=1' + '&condition=' + searchTitlt;
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.haciendaTxt .btn1').on('click',function(){
|
|
|
+ $('.tourismShow .title span').html('观光路线')
|
|
|
+ $('.tourismShow .content').html('<div style="text-align:center;width:100%;height:100%"><img style="width:100%;height:100%" src="http://127.0.0.1:8000/static/imgs/banner2.jpg">')
|
|
|
+ $('.tourismShow').show();
|
|
|
+ $('.tourismShow').css('opacity',1)
|
|
|
+ })
|
|
|
+ $('.tourismShowCloseBtn').on('click',function(){
|
|
|
+ $('.tourismShow .content').html('')
|
|
|
+ $('.tourismShow').css('opacity',0)
|
|
|
+ setTimeout(function(){
|
|
|
+ $('.tourismShow').hide();
|
|
|
+ },500)
|
|
|
+ })
|
|
|
+ var map;
|
|
|
+ $('.haciendaTxt .btn2').on('click',function(){
|
|
|
+ $('.tourismShow .title span').html('导游导览');
|
|
|
+ var html = '<div class="">'+
|
|
|
+ '<div class="guideForm">起始地点：<input type="text" id="startPath"><button onclick="searchWay()">确定</button></div>'+
|
|
|
+ '<div id="map">地图</div>'+
|
|
|
+ '</div>'
|
|
|
+ $('.tourismShow .content').html(html);
|
|
|
+ map = new AMap.Map('map', {
|
|
|
+ resizeEnable: true, //是否监控地图容器尺寸变化
|
|
|
+ zoom: 11, //初始化地图层级
|
|
|
+ center: [113.397428, 39.90923] //初始化地图中心点
|
|
|
+ });
|
|
|
+ var startIcon = new AMap.Icon({
|
|
|
+ // 图标尺寸
|
|
|
+ size: new AMap.Size(25, 34),
|
|
|
+ // 图标的取图地址
|
|
|
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
|
|
|
+ // 图标所用图片大小
|
|
|
+ imageSize: new AMap.Size(135, 40),
|
|
|
+ // 图标取图偏移量
|
|
|
+ imageOffset: new AMap.Pixel(-9, -3)
|
|
|
+ });
|
|
|
+ var endIcon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(25, 34),
|
|
|
+ image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
|
|
|
+ imageSize: new AMap.Size(135, 40),
|
|
|
+ imageOffset: new AMap.Pixel(-95, -3)
|
|
|
+ });
|
|
|
+ var marker = new AMap.Marker({
|
|
|
+ icon:endIcon,
|
|
|
+ position: new AMap.LngLat(113.397428, 39.90923), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ title: '北京'
|
|
|
+ });
|
|
|
+ map.add(marker);
|
|
|
+ $('.tourismShow').show();
|
|
|
+ $('.tourismShow').css('opacity',1)
|
|
|
+ })
|
|
|
+ function searchWay() {
|
|
|
+ map.clearMap();
|
|
|
+ var startPath = $("#startPath").val();
|
|
|
+ var endPath = '北京';
|
|
|
+
|
|
|
+ if (!startPath) {
|
|
|
+ $("#startPath").focus();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $('.tourismShow .content').append('<div class="loadDiv"><img src="../static/imgs/timg.gif" /></div>')
|
|
|
+ //构造路线导航类
|
|
|
+ var driving = new AMap.Driving({
|
|
|
+ map: map,
|
|
|
+ // panel: "panel"
|
|
|
+ });
|
|
|
+ // 根据起终点名称规划驾车导航路线
|
|
|
+ driving.search([
|
|
|
+ { keyword: startPath, city: '' },
|
|
|
+ { keyword: endPath, city: '' }
|
|
|
+ ], function (status, result) {
|
|
|
+ if (status === 'complete') {
|
|
|
+ // log.success('绘制驾车路线完成');
|
|
|
+ $('.loadDiv').remove();
|
|
|
+ } else {
|
|
|
+ alert('获取驾车数据失败：' + result)
|
|
|
+ $('.loadDiv').remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
