hotelList.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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/css/reset.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.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/hotelList.css' %}">
  15. </head>
  16. <body>
  17. <div class="header">
  18. <div class="headerTxt">
  19. <div class="wrapper">
  20. <p class="logoNameCn">休闲农业旅游网</p>
  21. <p class="logoNameEn">Leisure agricultural tourism network</p>
  22. </div>
  23. </div>
  24. <!-- 广告 -->
  25. <div class="bjColor advImg"></div>
  26. </div>
  27. <!-- 主体部分 -->
  28. <div class="content">
  29. <div class="wrapper">
  30. <div class="newsDiv">
  31. <!-- 面包屑导航 -->
  32. <div class="breadcrumb">
  33. <span class="layui-breadcrumb">
  34. <a href="home">首页</a>
  35. <a>
  36. <cite>民宿导览</cite>
  37. </a>
  38. </span>
  39. <div class="searchDiv">
  40. <input type="text" id="searchTitlt" value="{{con|default:''}}" placeholder="请输入标题" autocomplete="off" class="layui-input" >
  41. <button type="button" onclick="searchCon()" class="layui-btn layui-btn-ms"><i class="layui-icon">&#xe615;</i></button>
  42. </div>
  43. </div>
  44. <!-- 新闻列表 -->
  45. <div class="innerDiv">
  46. <ul class="hotelList">
  47. {% if hotel|length %} {% for hotelItem in hotel %}
  48. <li class="hotelItem">
  49. <a href="dorm_detail?id={{hotelItem.id}}">
  50. <img src="{{hotelItem.hotel_img}}" alt="">
  51. <div class="hotelDetial">
  52. <h2>{{hotelItem.name}}</h2>
  53. <div class="abstract-wrap">
  54. <p class="abstract-text">简介:{{hotelItem.intro}}</p>
  55. </div>
  56. <div class="address">
  57. 地址:{{hotelItem.addr}}
  58. </div>
  59. <div class="txtColor price">¥<span>{{hotelItem.price}}</span>起</div>
  60. <div class="date">
  61. <span>{{hotelItem.upl_time|date:"Y年m月d日"}}</span>
  62. 发布
  63. </div>
  64. </div>
  65. </a>
  66. </li>
  67. {% endfor %} {% else %}
  68. <li class="videoItem" style=" width: 100%;">
  69. <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
  70. </li>
  71. <!-- <li class="hotelItem">
  72. <a href="dorm_detail">
  73. <img src="{% static '/imgs/dorm/dorm2.jpg' %}" alt="">
  74. <div class="hotelDetial">
  75. <h2>酒店名名称酒店名名称酒店名名称酒店名名称</h2>
  76. <div class="address">
  77. 地址:党的十八大以来,以习近平同志为核心的党中央高度,关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示,提出明确要求。江西是中国革命的摇篮,也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作,关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示,提出明确要求。江西是中国革命的摇篮,也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作,必须传承党的保密工作光荣传统,持续推进党中央决策部署落地见效必须传承党的保密工作光荣传统,持续推进党中央决策部署落地见效
  78. </div>
  79. <div class="txtColor price">¥<span>200</span>起</div>
  80. <div class="date">
  81. <span>2019-02-30</span>
  82. 发布
  83. </div>
  84. </div>
  85. </a>
  86. </li> -->
  87. {% endif %}
  88. </ul>
  89. {% if hotel|length %}
  90. <div id="page"></div>
  91. <input type="hidden" value="{{nums}}" id="nums">
  92. <input type="hidden" value="{{page}}" id="currPage">
  93. {% else %}
  94. {% endif %}
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- 底部版权 -->
  100. <div class="footer bjColor">
  101. <div class="wrapper">
  102. <div class="floatDiv">
  103. <div class="copyrightTxt">
  104. <div>休闲农业旅游网</div>
  105. <div>联系人:李四  联系电话:13811111111</div>
  106. <div>地址:河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
  107. </div>
  108. <div class="WeChatCode">
  109. <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
  110. <p>关注公众号</p>
  111. </div>
  112. </div>
  113. <div class="copyright">
  114. 版权所有XXXXXXXXXXXXXXXXXXXXXX
  115. </div>
  116. </div>
  117. </div>
  118. <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
  119. <script src="{% static '/lib/layui/layui.js'%}"></script>
  120. <script>
  121. //注意:导航 依赖 element 模块,否则无法进行功能性操作
  122. layui.use(['element', 'laypage'], function () {
  123. var element = layui.element;
  124. //…
  125. var laypage = layui.laypage;
  126. var currPage = $('#currPage').val();
  127. //执行一个laypage实例
  128. laypage.render({
  129. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  130. , count: $('#nums').val() //数据总数,从服务端得到
  131. // , limit: 5
  132. , curr: currPage
  133. , jump: function (obj, first) {
  134. //obj包含了当前分页的所有参数,比如:
  135. console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
  136. console.log(obj.limit); //得到每页显示的条数
  137. var searchTitlt = $('#searchTitlt').val();
  138. //首次不执行
  139. if (!first) {
  140. window.location.href = 'dorm_list?page=' + obj.curr + '&condition=' + searchTitlt;
  141. }
  142. }
  143. });
  144. });
  145. $('#searchTitlt').on('keypress', function (e) {
  146. if (e && e.keyCode == 13) { // 按 Esc
  147. searchCon()
  148. }
  149. })
  150. function searchCon() {
  151. var searchTitlt = $('#searchTitlt').val();
  152. window.location.href = 'dorm_list?page=1' + '&condition=' + searchTitlt;
  153. }
  154. </script>
  155. </body>
  156. </html>