farm.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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('mobile/css/farm.css')}}" rel="stylesheet">
  7. </head>
  8. <body>
  9. <h1 class="h1">{{data['info']['name']}}</h1>
  10. <section class="banner">
  11. <img src="{{data['info']['pic']}}" width="100%">
  12. </section>
  13. {% if data['env'] %}
  14. <section class="m-wrapper">
  15. <h2>农场环境 <p>Farm environment</p> </h2>
  16. <section class="environment">
  17. {% for v in data['env'] %}
  18. <dl>
  19. <dd><i class="icon icon-{{v['type']['key']}}"></i></dd>
  20. <dt>{{v['device']['value']}}</dt>
  21. <dd>{{v['name']}}( {{v['type']['unit']}} )</dd>
  22. </dl>
  23. {% end %}
  24. </section>
  25. </section>
  26. {% end %}
  27. <section class="m-wrapper introduction">
  28. <h2>农场介绍 <p>Farm introduction</p> </h2>
  29. {% raw data['info']['info'] %}
  30. <a href="#" style="display: none;" class="more">点击查看更多</a>
  31. </section>
  32. {% if data['info']['location'] %}
  33. <section class="m-wrapper">
  34. <h2>地理位置 <p>geographical position</p> </h2>
  35. <section class="img-wrap" id="allmap" style="height:230px;">
  36. </section>
  37. </section>
  38. {% end %}
  39. {% if data['product'] %}
  40. <section class="m-wrapper">
  41. <h2>农场产品 <p>Farm products</p> </h2>
  42. <section class="li-1">
  43. {% for v in data['product'] %}
  44. <dl>
  45. <dt><img src="{{v['pic']}}" width="100%"></dt>
  46. <dd>{{v['name']}}</dd>
  47. </dl>
  48. {% end %}
  49. </section>
  50. </section>
  51. {% end %}
  52. <section class="m-wrapper contact">
  53. <h2>联系方式 <p>Contact information</p> </h2>
  54. <section >
  55. <dl>
  56. <dt><i class="icon icon-ct1"></i></dt>
  57. <dd>农场主:{{data['info']['master_name']}}</dd>
  58. </dl>
  59. <dl>
  60. <dt><i class="icon icon-ct2"></i></dt>
  61. <dd><a href="tel://400-123-1234">电话:{{data['info']['tel']}}</a></dd>
  62. </dl>
  63. </section>
  64. </section>
  65. {%include 'inc/script.html'%}
  66. <script type="text/javascript">
  67. // 百度地图API功能
  68. var map = new BMap.Map("allmap");
  69. var point = new BMap.Point({{data['info']['location']}});
  70. map.centerAndZoom(point, 12);
  71. var marker = new BMap.Marker(point); // 创建标注
  72. map.addOverlay(marker); // 将标注添加到地图中
  73. map.enableScrollWheelZoom(true);
  74. </script>
  75. </body>
  76. </html>