@{layout layout}
@set header{
<style type="text/css"> 
    .text-right{color: black !important;}
    .text-right a{color: black !important;}
    .my-map { margin: 0 auto; width: 600px; height: 350px; }
    .my-map .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; }
    .my-map .icon-cir { height: 31px; width: 28px; }
    .my-map .icon-cir-red { background-position: -11px -5px; }
    .amap-container{height: 100%;}
      .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
      .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
      .amap-info-content {color: #000;}
  .item a{background: rgb(250,250,250);}
  .item a:hover{color: white;background: rgb(1,159,232);}
  .dialog-bg{
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.4);
    }


    .dialog-bg .img-box{
        width: 400px;
        height: 250px;
        position: fixed;
        left: 50%;
        top: 20%;
        margin-left: -200px;
        margin-top: -125px;
    }

    .dialog-bg .img-box img{
        width: 600px;
        /*height: 100%;*/
    }
  </style>
   <script src="http://webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
@}
@set body{

 <div class="clear"></div>
<div class="pages" style="width: 95%;max-width: 1200px;margin: auto;">
    <div class="w1200">
        <div class="page-center">
            <div class="page-right">
                
                <script type="text/javascript">
                    var dqtitle="@{d.CurSinglePage.Text}";
                    $(function(){
                        if(dqtitle=="关于莱诺"||dqtitle=="公司简介"||dqtitle=="企业文化")
                        {
                            $('#pagenav1').show();
                            if(dqtitle=="荣誉证书")
                            {
                              $('.about').addClass('aboutcont')
                            }
                        }
                        if(dqtitle=="品质服务")
                        {
                            $('#pagenav2').show();
                            if(dqtitle=="荣誉证书")
                            {
                              $('.about').addClass('aboutcont')
                            }
                        }
                        if(dqtitle=="联系我们"||dqtitle=="联系方式"||dqtitle=="电子地图")
                        {
                            $('#pagenav3').show();
                            if(dqtitle=="联系我们"||dqtitle=="联系方式")
                            {
                                 $('#wrap').show();
                         !function(){
                          var infoWindow, map, level = 17,
                           center = {lng: 120.558179, lat:28.140648},
                           features = [{type: "Marker", name: "温州莱诺游乐设备有限公司", desc: "浙江省温州市桥下垟湾工业区", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 120.558179, lat: 28.140648}}];

                          function loadFeatures(){
                           for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
                            data = features[i];
                            switch(data.type){
                             case "Marker":
                              feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                               zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                               content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
                              break;
                             case "Polyline":
                              for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
                               path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                              }
                              feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
                               strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
                              break;
                             case "Polygon":
                              for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
                               path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                              }
                              feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
                               strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                               fillColor: data.fillColor, fillOpacity: data.fillOpacity });
                              break;
                             default: feature = null;
                            }
                            if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
                           }
                          }

                          function mapFeatureClick(e){
                           if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
                           var extData = e.target.getExtData();
                           infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
                           infoWindow.open(map, e.lnglat);
                          }

                          map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
                          
                          loadFeatures();

                          map.on('complete', function(){
                           map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
                            map.addControl(new AMap.ToolBar);
                           map.addControl(new AMap.OverView({isOpen: true}));
                           map.addControl(new AMap.Scale);
                           }); 
                          })
                          
                         }();
                            }
                        }
                        if(dqtitle=="品质中心"||dqtitle=="品质认证"||dqtitle=="生产环境"||dqtitle=="生产设备"||dqtitle=="检测设备"||dqtitle=="质量控制规程"||dqtitle=="售后维护")
                        {
                            $('#pagenav4').show();
                        }
                    })


                </script>  
            </div>
        </div>
    </div>
    <div style="width: 95%;margin: auto;margin-top: 40px;">
        <div class="nei_title"><p>@{d.CurSinglePage.Title}</p></div>
        <div class="content" style="text-align: left;width: 100%;float: left;">@{d.CurSinglePage.Body}</div>
        <div id="wrap" class="my-map" style="width:95%;float: left;height:450px;border:1px solid #939393;display: none;margin-top: 10px;">
            <div id="mapContainer"></div>
        </div>
    </div>
        @var m is d.SinglePageMod(){
                    <div @{m.Attrs} style="width: 100px;height: 100px;padding-top: 300px;z-index: 999;">
                    </div>
                    @}

  <script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
  <!--[if lte IE 8]><script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script><![endif]-->
<script type="text/javascript">
    //无论点击哪一个img弹出层都会展示相应的图片。
    $(".p_img").find("img").on("click",function () {
        $(this).each(function () {
            var $this = $(this);
            var $img = $this.attr("src");//获取当前点击img的src的值
            $("#img-box").find("img").attr("src",$img);//将获取的当前点击img的src赋值到弹出层的图片的src
            $("#dialog-bg").show();//弹出层显示
        });
    });
        $(".p_imgb").find("img").on("click",function () {
        $(this).each(function () {
            var $this = $(this);
            var $img = $this.attr("src");//获取当前点击img的src的值
            $("#img-box").find("img").attr("src",$img);//将获取的当前点击img的src赋值到弹出层的图片的src
            $("#dialog-bg").show();//弹出层显示
        });
    });
    //弹出层隐藏
    $("#dialog-bg").on("click",function () {
        $(this).hide();//
    });
</script>
    
</div>
</div>
@}