farm.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. {%include 'inc/header.html'%}
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bVe3y15p9lPq9lGbrPP71lUL"></script>
  6. <link href="{{static_url('css/nchome.css')}}" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div class="wrapper">
  10. <h1>{{data['info']['name']}}</h1>
  11. <div class="banner">
  12. <img src="{{data['info']['pic']}}" width="100%">
  13. </div>
  14. {% if data['env'] %}
  15. <div class="block environment">
  16. <h2 class="block-title">农场环境<span>Farm environment</span></h2>
  17. <div class="list">
  18. {% for v in data['env'] %}
  19. <dl>
  20. <dd><i class="icon icon-{{v['type']['key']}}"></i></dd>
  21. <dt>{{v['device']['value']}}</dt>
  22. <dd>{{v['name']}}( {{v['type']['unit']}} )</dd>
  23. </dl>
  24. {% end %}
  25. </div>
  26. </div>
  27. {% end %}
  28. <div class="block introduction">
  29. <h2 class="block-title">农场介绍<span>Farm introduction</span></h2>
  30. <div class="intro-cont">
  31. <div id="allmap" style="float:left;width:310px;height:230px;"></div>
  32. <div class="txt">
  33. {% raw data['info']['info'] %}
  34. </div>
  35. </div>
  36. </div>
  37. {% if data['product'] %}
  38. <div class="block products">
  39. <h2 class="block-title">农场产品<span>Farm products</span></h2>
  40. <ul>
  41. {% for v in data['product'] %}
  42. <li><a href="javascript:;"><img src="{{v['pic']}}" width="100%"><p>{{v['name']}}</p></a></li>
  43. {% end %}
  44. </ul>
  45. </div>
  46. {% end %}
  47. <div class="block information">
  48. <h2 class="block-title">联系方式<span>Contact information</span></h2>
  49. <ul>
  50. <li><i class="icon icon-ct1"></i><span>农场主:{{data['info']['master_name']}}</span></li>
  51. <li><i class="icon icon-ct2"></i><span>电话:{{data['info']['tel']}}</span></li>
  52. <li><i class="icon icon-ct3"></i><span>地址:{{data['info']['address']}}</span></li>
  53. </ul>
  54. </div>
  55. </div>
  56. {%include 'inc/script.html'%}
  57. <script type="text/javascript">
  58. // 百度地图API功能
  59. var map = new BMap.Map("allmap");
  60. var point = new BMap.Point({{data['info']['location']}});
  61. map.centerAndZoom(point, 12);
  62. var marker = new BMap.Marker(point); // 创建标注
  63. map.addOverlay(marker); // 将标注添加到地图中
  64. map.enableScrollWheelZoom(true);
  65. // 覆盖区域图层测试
  66. //map.addTileLayer(new BMap.PanoramaCoverageLayer());
  67. //var stCtrl = new BMap.PanoramaControl(); //构造全景控件
  68. //stCtrl.setOffset(new BMap.Size(20, 20));
  69. //map.addControl(stCtrl);//添加全景控件
  70. </script>
  71. </body>
  72. </html>