yf_zd
/
second


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							{% 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="{% static '/lib/layui/css/layui.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/css/swiper.min.css' %}">
    <link rel="stylesheet" href="{% static '/css/common.css' %}">
    <link rel="stylesheet" href="{% static '/css/module.css' %}">
    <link rel="stylesheet" href="{% static '/css/hotelDetail.css' %}">
</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 href="dorm_list?page=1">民宿导览</a>
                        <a>
                            <cite>详情</cite>
                        </a>
                    </span>
                </div>
                <!-- 新闻列表 -->
                <div class="innerDiv">
                    <div class="detailTop">
                        <div class="floatDiv">
                            <div class="swiperDiv">
                                <!-- 图片集 -->
                                <div class="swiper-container photos">
                                    <div class="swiper-wrapper">
                                       {% if photos|length %} {% for photosItem in photos %}
                                        <div class="swiper-slide">
                                            <img src="{{photosItem.addr}}" alt="">
                                        </div>
                                        {% endfor %} {% else %}
                                        <div class="swiper-slide">
                                                <img src="{% static '/imgs/dorm/dorm2.jpg' %}" alt="">
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="magnifyDiv">
                                {% if photos|length %} {% for photosItem in photos %}
                                    {% if forloop.first %}
                                    <img src="{{photosItem.addr}}" alt="">
                                    {% endif %}
                                {% endfor %} {% else %}
                                {% endif %}
                            </div>
                            <div class="introduce">
                                <h2>{{hotel.name}}</h2>
                                <div class="txtColor price">￥<strong>{{hotel.price}}</strong>起</div>
                                <p>法人代表：{{hotel.person}}</p>
                                <p>联系电话：{{hotel.hotel_tel}}</p>
                                <p>酒店地址：{{hotel.addr}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="detailBottom">
                        <div class="cutTitle">基本介绍</div>
                        <div>{{hotel.intro}}</div>
                        <div></div>
                        <div class="cutTitle">详细说明</div>
                        <div id="map" class="currMap"></div>
                        <input type="hidden" value="{{hotel.location}}" id="location">
                        <div class="txtDescription">
                            {{hotel.name|safe}}
                        </div>
                    </div>
                </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>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/lib/js/swiper.min.js'%}"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Geocoder"></script>
    <script src="{% static '/js/newsList.js'%}"></script>
    <script src="{% static '/js/hotelDetail.js'%}"></script>

    <script>
    var map = new AMap.Map('map', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 5, //初始化地图层级
        center: [113.397428, 39.90923] //初始化地图中心点
    });
    // 创建点覆盖物
    var lng = $('#location').val().split(',');
    var marker = new AMap.Marker({
        position: new AMap.LngLat(lng[0],lng[1]),
        icon:  new AMap.Icon({            
            image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
            size: new AMap.Size(23, 35),  //图标大小
            imageSize: new AMap.Size(23, 35)
        }),
        offset: new AMap.Pixel(-13, -30)
    });
    map.add(marker);
    // 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_DROP');
    map.setFitView();

    console.log($('#location').val())
    </script>
</body>

</html>