exhibitionList.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>产品展厅列表页</title>
  9. <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
  12. <link rel="stylesheet" href="{% static '/css/common.css' %}">
  13. <link rel="stylesheet" href="{% static '/css/module.css' %}">
  14. <link rel="stylesheet" href="{% static '/css/exhibitionList.css' %}">
  15. <style>
  16. .layui-breadcrumb .curr cite{
  17. color: #3ab851;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="header">
  23. <div class="headerTxt">
  24. <div class="wrapper">
  25. <p class="logoNameCn">休闲农业旅游网</p>
  26. <p class="logoNameEn">Leisure agricultural tourism network</p>
  27. </div>
  28. </div>
  29. <!-- 广告 -->
  30. <div class="bjColor advImg"></div>
  31. </div>
  32. <!-- 主体部分 -->
  33. <div class="content">
  34. <div class="wrapper">
  35. <div class="newsDiv">
  36. <!-- 面包屑导航 -->
  37. <div class="breadcrumb">
  38. <span class="layui-breadcrumb">
  39. <a href="newslist_view?page=1&type=5">
  40. <cite>新闻资讯</cite>
  41. </a>
  42. <a href="video_list?page=1">
  43. <cite>视频资讯</cite>
  44. </a>
  45. <a href="equip_show_list?page=1" class="curr">
  46. <cite>产品展厅</cite>
  47. </a>
  48. </span>
  49. <div class="searchDiv">
  50. <input type="text" id="searchTitlt" value="{{con|default:''}}" placeholder="请输入标题" autocomplete="off" class="layui-input" >
  51. <button type="button" onclick="searchCon()" class="layui-btn layui-btn-ms"><i class="layui-icon">&#xe615;</i></button>
  52. </div>
  53. </div>
  54. <!-- 新闻列表 -->
  55. <div class="innerDiv">
  56. <ul class="videoList">
  57. {% if product|length %} {% for productItem in product %}
  58. <li class="videoItem">
  59. <a href="equip_show_detail?id={{productItem.id}}">
  60. <div class="videoImg">
  61. <img src="{{productItem.head_img}}" alt="">
  62. </div>
  63. <div class="videoMsg">
  64. <h2>产品名称:{{productItem.title}}</h2>
  65. </div>
  66. </a>
  67. </li>
  68. {% endfor %} {% else %}
  69. <li class="videoItem" style=" width: 100%;">
  70. <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
  71. </li>
  72. <li class="videoItem">
  73. <a href="equip_show_detail?id=1">
  74. <div class="videoImg">
  75. <img src="{% static '/imgs/fruit/fruit2.jpg' %}" alt="">
  76. </div>
  77. <div class="videoMsg">
  78. <h2>产品名称:青苹果</h2>
  79. </div>
  80. </a>
  81. </li>
  82. {% endif %}
  83. </ul>
  84. <!-- 分页 -->
  85. {% if product|length %}
  86. <div id="page"></div>
  87. <input type="hidden" value="{{nums}}" id="nums">
  88. <input type="hidden" value="{{page}}" id="currPage"> {% else %} {% endif %}
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <!-- 底部版权 -->
  94. <div class="footer bjColor">
  95. <div class="wrapper">
  96. <div class="floatDiv">
  97. <div class="copyrightTxt">
  98. <div>休闲农业旅游网</div>
  99. <div>联系人:李四  联系电话:13811111111</div>
  100. <div>地址:河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
  101. </div>
  102. <div class="WeChatCode">
  103. <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
  104. <p>关注公众号</p>
  105. </div>
  106. </div>
  107. <div class="copyright">
  108. 版权所有XXXXXXXXXXXXXXXXXXXXXX
  109. </div>
  110. </div>
  111. </div>
  112. <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
  113. <script src="{% static '/lib/layui/layui.js'%}"></script>
  114. <script>
  115. //注意:导航 依赖 element 模块,否则无法进行功能性操作
  116. layui.use(['element', 'laypage'], function () {
  117. var element = layui.element;
  118. //…
  119. var laypage = layui.laypage;
  120. var currPage = $('#currPage').val();
  121. //执行一个laypage实例
  122. laypage.render({
  123. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  124. , count: $('#nums').val() //数据总数,从服务端得到
  125. , limit: 20
  126. , curr: currPage
  127. , jump: function (obj, first) {
  128. //obj包含了当前分页的所有参数,比如:
  129. console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
  130. console.log(obj.limit); //得到每页显示的条数
  131. var searchTitlt = $('#searchTitlt').val();
  132. //首次不执行
  133. if (!first) {
  134. window.location.href = 'equip_show_list?page=' + obj.curr + '&condition=' + searchTitlt;
  135. }
  136. }
  137. });
  138. });
  139. $('#searchTitlt').on('keypress', function (e) {
  140. if (e && e.keyCode == 13) { // 按 Esc
  141. searchCon()
  142. }
  143. })
  144. function searchCon() {
  145. var searchTitlt = $('#searchTitlt').val();
  146. window.location.href = 'equip_show_list?page=1' + '&condition=' + searchTitlt;
  147. }
  148. </script>
  149. </body>
  150. </html>