[#escape x as (x)!?html]
<!doctype html>
<html lang="zh-CN">

<head>
    [#if site.url != site.urlMobile]
    <script>
        //生成静态HTML时，需要使用js判断是否为手机端访问，并跳转到手机端地址
        var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid;
        if (isMobile) location.href = "${site.urlMobile}";
    </script>
    [/#if]
    <meta charset="utf-8" />
    <title>${site.fullNameOrName}${global.customs['poweredby']}</title>
    <meta name="keywords" content="${node.keywords}" />
    <meta name="description" content="${node.description}" />
    <link href="_files/global.css" rel="stylesheet" />
    <link href="_files/style.css" rel="stylesheet" />
    <script type="text/javascript" src="${ctx}/static/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=6b465ac418edfa7160ccdfc75b092b81"></script>

    <link href="${ctx}/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="_files/tzs-footer.css" rel="stylesheet" />
    <link href="_files/tzs-center.css" rel="stylesheet" />
    <link href="_files/tzs-home-header.css" rel="stylesheet" />
    <link href="_files/tzs-zjtz-tzmt.css" rel="stylesheet" />
    <link href="_files/tzs-zjtz-zjtzsy.css" rel="stylesheet" />
    [#include 'inc_js.html'/]
    <script>
        $(document).ready(function () {
            var map = new AMap.Map('map-container', {
                zoom: 12,//级别
                center: [116.4911, 30.71015],//中心点坐标
                viewMode: '3D'//使用3D视图
            });

            // AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.ElasticMarker'], function () {//异步加载插件
            // var toolbar = new AMap.ToolBar();
            // map.addControl(toolbar);
            // var scale = new AMap.Scale();
            // map.addControl(scale);
            // });

            var marker = {};
            var content = '';
            var infowindow = {};

            [@InfoList nodeId = 303; list]
            [#list list as info]

            marker[${ info_index }] = new AMap.Marker({
                position: new AMap.LngLat(${ info.customs['lon'] }, ${ info.customs['lat'] }),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '${info.title}',
                icon: '/uploads/17/image/zjtz/u8309.png'
            });

            map.add(marker[${ info_index }]);
            content = '<p>${info.title}</p>'
            content += '<video src="${info.customs['url']}" controls="controls">' +
                '您的浏览器不支持 video 标签。' +
                '</video>'

            var infoWindow = new AMap.InfoWindow({
                isCustom: false,  //使用自定义窗体
                content: content
            });
            AMap.event.addListener(marker[${ info_index }], 'click', function () {
                infoWindow.open(map, marker[${ info_index }].getPosition());
            });
            [/#list]
            [/@InfoList]
        });
    </script>
</head>

<body>
    [#include 'tzs-home-header.html'/]

    <div class="container">
        <div class="location-bar">
            <span>您所在的位置：</span><span style="color:#FFB400;font-weight: 650;" class="current">走进天柱</span>
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzjj";n]
            <span class="title-text">天柱简介</span>
            <a class="more-link" href="${n.url}">更多天柱简介>></a>
            [/@Node]
        </div>
        <div class="container-tzjj">
            [@Info id='551';bean]
            [@Node number='tzjj';n]
            <div class="container-tzjj-left">
                <img src="${bean.customs['tzjjpic']}">
                <br>
                <span>天柱简介</span>
                <p>${bean.customs['tzjjdesc']}</p>
                <a href="${n.url}">了解更多</a>
            </div>
            <div class="container-tzjj-right">
                <div class="tzjj-jhjd">
                    <img src="${bean.customs['jhjdpic']}">
                    <p></p>
                    <span>精华景点</span>
                    <p></p>
                    <a href="${n.url}">了解更多</a>
                </div>
                <div class="tzjj-zbjd">
                    <img src="${bean.customs['zbjdpic']}">
                    <p></p>
                    <span>周边景点</span>
                    <p></p>
                    <a href="${n.url}">了解更多</a>
                </div>
            </div>
            [/@Node]
            [/@Info]
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzmt";n]
            <span class="title-text">天柱美图</span>
            <a class="more-link" href="${n.url}">更多天柱美图>></a>
            [/@Node]
        </div>
        <div class="container-tzmt">
            [@Node number="tzmt";n]
            <div class="container-tzjj-left">
                [@InfoList limit=1 node="tzmtsjtz";list]
                [#list list as info]
                <img src="${info.smallImage}">
                <p></p>
                <span>四季天柱</span>
                <p></p>
                <a href="${n.url}">了解更多</a>
                [/#list]
                [/@InfoList]
            </div>
            <div class="tzmt-item">
                [@InfoList limit=1 node="tzmtsjtz";list]
                [#list list as info]
                <img src="/uploads/17/image/public/201811/20181116110237_nqtnhq4r1d.png">
                <p></p>
                <span>天柱奇观</span>
                <p></p>
                <a href="${n.url}">了解更多</a>
                [/#list]
                [/@InfoList]
            </div>
            <div class="tzmt-item">
                [@InfoList limit=1 node="tzmtsjtz";list]
                [#list list as info]
                <img src="/uploads/17/image/public/201811/20181116110237_nqtnhq4r1d.png">
                <p></p>
                <span>人气天柱</span>
                <p></p>
                <a href="${n.url}">了解更多</a>
                [/#list]
                [/@InfoList]
            </div>
            [/@Node]
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzvr";n]
            <span class="title-text">天柱VR</span>
            <a href="${n.url}" class="more-link">更多天柱VR>></a>
            [/@Node]
        </div>
        <div class="container-tzvr">
            <div class="text">
                <span class="tzvr-title">天柱全景实时观看</span>
                <p>天柱山全部景色都可以通过VR技术实时进行观看，魅力景色</p>
                <a class="more-link">了解更多</a>
            </div>
            <div class="vr">
                <img src="/uploads/17/image/public/201811/20181116110237_nqtnhq4r1d.png">
            </div>
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzyx";n]
            <span class="title-text">天柱影像</span>
            <a href="${n.url}" class="more-link">更多天柱影像>></a>
            [/@Node]
        </div>
        <div class="container-tzyx">
            [@InfoList node="tzyx" limit=6 isIncludeChildren='true';pagedList]
            <div class="tzsy-introduce">
                [#list pagedList as info]
                <div class="tzsy-introduce-item">
                    <a href="${info.url}">
                        <img src="${info.smallImage}" width="300px" height="200px">
                        <p>${info.customs['desc']}</p>
                    </a>
                </div>
                [/#list]
            </div>
            [/@InfoList]
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzmw";n]
            <span class="title-text">天柱美文</span>
            <a href="${n.url}" class="more-link">更多天柱美文>></a>
            [/@Node]
        </div>
        <div class="container-tzmv">
            <div class="zjtzsy-tzmv">
                [@InfoList limit=6 node="tzmw";list]
                [#list list as info]
                <div class="zjtzsy-tzmv-container">
                    <div class="zjtzsy-tzmv-picture">
                        <a href="${info.url}">
                            <img src=" ${info.smallImage}" alt="">
                            <p>${info.node.title}</p>
                        </a>
                    </div>
                </div>
                [/#list]
                [/@InfoList]
            </div>
        </div>
        <div class="zjtzsy-title">
            [@Node number="tzfgzb";n]
            <span class="title-text">天柱风光直播</span>
            <a href="${n.url}" class="more-link">更多天柱风光直播>></a>
            [/@Node]
        </div>
        <div id="map-container" class="container-tzfgzb" style="margin-top:50px;margin-bottom:50px;height: 500px;">

        </div>
        [#include 'tzs-footer.html'/]
    </div>
</body>

</html>
[/#escape]