|
|
@@ -15,41 +15,49 @@
|
|
|
<link rel="stylesheet" href="{% static '/css/module.css' %}">
|
|
|
<!-- <link rel="stylesheet" href="{% static '/css/hotelList.css' %}"> -->
|
|
|
<style>
|
|
|
- .advImg{
|
|
|
+ .advImg {
|
|
|
background: url(../static/imgs/farmAdv.jpg) no-repeat center;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
+
|
|
|
/* 内容模块 */
|
|
|
- .hacienda .haciendaList{
|
|
|
+ .hacienda .haciendaList {
|
|
|
display: flex;
|
|
|
flex-flow: wrap;
|
|
|
}
|
|
|
- .hacienda .haciendaList{
|
|
|
+
|
|
|
+ .hacienda .haciendaList {
|
|
|
padding: 20px 20px 0 20px;
|
|
|
}
|
|
|
- .hacienda .haciendaItem{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem {
|
|
|
display: flex;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
- .hacienda .haciendaImg{
|
|
|
+
|
|
|
+ .hacienda .haciendaImg {
|
|
|
width: 195px;
|
|
|
height: 165px;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .hacienda .haciendaImg .haciendaImg1{
|
|
|
+
|
|
|
+ .hacienda .haciendaImg .haciendaImg1 {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .hacienda .haciendaImg .haciendaImg2{
|
|
|
+
|
|
|
+ .hacienda .haciendaImg .haciendaImg2 {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 10px;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt {
|
|
|
width: 147px;
|
|
|
padding: 10px 10px;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt h2{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt h2 {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
line-height: 33px;
|
|
|
@@ -57,24 +65,29 @@
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt .desc{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt .desc {
|
|
|
letter-spacing: 2px;
|
|
|
height: 100px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt button{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button {
|
|
|
color: #fff;
|
|
|
padding: 5px 6px;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt button.btn1{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button.btn1 {
|
|
|
background-color: #00aeed;
|
|
|
}
|
|
|
- .hacienda .haciendaItem .haciendaTxt button.btn2{
|
|
|
+
|
|
|
+ .hacienda .haciendaItem .haciendaTxt button.btn2 {
|
|
|
background-color: #3bb852;
|
|
|
}
|
|
|
+
|
|
|
/* 弹出观光样式 */
|
|
|
- .tourismShow{
|
|
|
+ .tourismShow {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
opacity: 0;
|
|
|
@@ -87,10 +100,10 @@
|
|
|
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);
|
|
|
+ -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;
|
|
|
@@ -99,20 +112,24 @@
|
|
|
border-top-right-radius: 0;
|
|
|
transition: all .5s;
|
|
|
}
|
|
|
- .tourismShow .title{
|
|
|
+
|
|
|
+ .tourismShow .title {
|
|
|
border-left: 3px solid #ff6a28;
|
|
|
padding-left: 8px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
- .tourismShow .line{
|
|
|
+
|
|
|
+ .tourismShow .line {
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
- .tourismShow .content{
|
|
|
+
|
|
|
+ .tourismShow .content {
|
|
|
height: 430px;
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
- .tourismShow .tourismShowCloseBtn{
|
|
|
+
|
|
|
+ .tourismShow .tourismShowCloseBtn {
|
|
|
position: absolute;
|
|
|
right: 15px;
|
|
|
top: 11px;
|
|
|
@@ -124,10 +141,12 @@
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .tourismShow .content .guideForm>input{
|
|
|
+
|
|
|
+ .tourismShow .content .guideForm>input {
|
|
|
width: 40%;
|
|
|
}
|
|
|
- .tourismShow .content .guideForm>button{
|
|
|
+
|
|
|
+ .tourismShow .content .guideForm>button {
|
|
|
color: #fff;
|
|
|
padding: 5px 6px;
|
|
|
border-radius: 5px;
|
|
|
@@ -135,7 +154,8 @@
|
|
|
margin-left: 10px;
|
|
|
background: #1eaeed;
|
|
|
}
|
|
|
- .tourismShow .content .guideForm>button{
|
|
|
+
|
|
|
+ .tourismShow .content .guideForm>button {
|
|
|
color: #fff;
|
|
|
padding: 5px 6px;
|
|
|
border-radius: 5px;
|
|
|
@@ -143,11 +163,13 @@
|
|
|
margin-left: 10px;
|
|
|
background: #1eaeed;
|
|
|
}
|
|
|
- .tourismShow .content #map{
|
|
|
+
|
|
|
+ .tourismShow .content #map {
|
|
|
height: 373px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
- .tourismShow .loadDiv{
|
|
|
+
|
|
|
+ .tourismShow .loadDiv {
|
|
|
position: absolute;
|
|
|
left: 45%;
|
|
|
top: 45%;
|
|
|
@@ -180,37 +202,45 @@
|
|
|
</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>
|
|
|
+ <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 %}
|
|
|
+ {% if garden_list|length %} {% for gardenItem in garden_list %}
|
|
|
<li class="haciendaItem">
|
|
|
<div class="haciendaImg">
|
|
|
- <img class="haciendaImg1" src="{% static 'imgs/1.jpg'%}" alt="">
|
|
|
+ <img class="haciendaImg1" src="http://127.0.0.1:8000/{{gardenItem.img_1}}" alt="">
|
|
|
</div>
|
|
|
<div class="haciendaTxt">
|
|
|
- <h2>云飞农场</h2>
|
|
|
- <div class="desc">位于和南沙鞥周三水电费，杀敌欧福布斯后撒粉红色的。阿时候发货萨芬，是大法师。</div>
|
|
|
+ <h2>{{gardenItem.name}}</h2>
|
|
|
+ <div class="desc">{{gardenItem.desc|default:''}}</div>
|
|
|
<div>
|
|
|
- <button class="btn1">观光路线</button>
|
|
|
- <button class="btn2">导游导览</button>
|
|
|
+ <button class="btn1">
|
|
|
+ <input type="hidden" name="" value="{{gardenItem.guide_img}}" id="">
|
|
|
+ 观光路线
|
|
|
+ </button>
|
|
|
+ <button class="btn2">
|
|
|
+ <input type="hidden" name="" value="{{gardenItem.location}}" id="">
|
|
|
+ 导游导览
|
|
|
+ </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>
|
|
|
+ <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 %}
|
|
|
+
|
|
|
+ {% if garden_list|length %}
|
|
|
<div id="page"></div>
|
|
|
<input type="hidden" value="{{nums}}" id="nums">
|
|
|
<input type="hidden" value="{{page}}" id="currPage">
|
|
|
@@ -250,7 +280,7 @@
|
|
|
</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="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Driving&plugin=AMap.Geocoder"></script>
|
|
|
<script src="{% static '/lib/layui/layui.js'%}"></script>
|
|
|
<script>
|
|
|
//注意：导航 依赖 element 模块，否则无法进行功能性操作
|
|
|
@@ -291,31 +321,38 @@
|
|
|
window.location.href = 'farm_list?page=1' + '&condition=' + searchTitlt;
|
|
|
}
|
|
|
|
|
|
- $('.haciendaTxt .btn1').on('click',function(){
|
|
|
+ $('.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">')
|
|
|
+ var img = $(this).find('input').val();
|
|
|
+ $('.tourismShow .content').html('<div style="text-align:center;width:100%;height:100%"><img style="width:100%;height:100%" src="' + img + '">')
|
|
|
$('.tourismShow').show();
|
|
|
- $('.tourismShow').css('opacity',1)
|
|
|
+ $('.tourismShow').css('opacity', 1)
|
|
|
})
|
|
|
- $('.tourismShowCloseBtn').on('click',function(){
|
|
|
+ $('.tourismShowCloseBtn').on('click', function () {
|
|
|
$('.tourismShow .content').html('')
|
|
|
- $('.tourismShow').css('opacity',0)
|
|
|
- setTimeout(function(){
|
|
|
+ $('.tourismShow').css('opacity', 0)
|
|
|
+ setTimeout(function () {
|
|
|
$('.tourismShow').hide();
|
|
|
- },500)
|
|
|
+ }, 500)
|
|
|
})
|
|
|
var map;
|
|
|
- $('.haciendaTxt .btn2').on('click',function(){
|
|
|
+ $('.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>'
|
|
|
+ var lng = $(this).find('input').val().split(',')[0];
|
|
|
+ var lat = $(this).find('input').val().split(',')[1];
|
|
|
+ var html = '<div class="">' +
|
|
|
+ '<div class="guideForm">起始地点：<input type="text" id="startPath"><button onclick="searchWay(\'' + lng + '\',\'' + lat + '\')">确定</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] //初始化地图中心点
|
|
|
+ center: [lng, lat] //初始化地图中心点
|
|
|
+ });
|
|
|
+ geocoder = new AMap.Geocoder({
|
|
|
+ city: "010", //城市设为北京，默认：“全国”
|
|
|
+ radius: 1000 //范围，默认：500
|
|
|
});
|
|
|
var startIcon = new AMap.Icon({
|
|
|
// 图标尺寸
|
|
|
@@ -334,18 +371,22 @@
|
|
|
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: '北京'
|
|
|
+ icon: endIcon,
|
|
|
+ position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
});
|
|
|
- map.add(marker);
|
|
|
+ map.add(marker);
|
|
|
$('.tourismShow').show();
|
|
|
- $('.tourismShow').css('opacity',1)
|
|
|
+ $('.tourismShow').css('opacity', 1);
|
|
|
+ geocoder = new AMap.Geocoder({
|
|
|
+ city: "010", //城市设为北京，默认：“全国”
|
|
|
+ radius: 1000 //范围，默认：500
|
|
|
+ });
|
|
|
})
|
|
|
- function searchWay() {
|
|
|
+ function searchWay(lng,lat) {
|
|
|
map.clearMap();
|
|
|
var startPath = $("#startPath").val();
|
|
|
var endPath = '北京';
|
|
|
+
|
|
|
|
|
|
if (!startPath) {
|
|
|
$("#startPath").focus();
|
|
|
@@ -357,19 +398,27 @@
|
|
|
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();
|
|
|
+ geocoder.getAddress([lng,lat], function(status, result) {
|
|
|
+ if (status === 'complete'&&result.regeocode) {
|
|
|
+ var address = result.regeocode.formattedAddress;
|
|
|
+ // 根据起终点名称规划驾车导航路线
|
|
|
+ driving.search([
|
|
|
+ { keyword: startPath, city: '' },
|
|
|
+ { keyword: address, city: '' }
|
|
|
+ ], function (status, result) {
|
|
|
+ if (status === 'complete') {
|
|
|
+ // log.success('绘制驾车路线完成');
|
|
|
+ $('.loadDiv').remove();
|
|
|
+ } else {
|
|
|
+ alert('获取驾车数据失败：' + result)
|
|
|
+ $('.loadDiv').remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ log.error('根据经纬度查询地址失败')
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
