| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- {% load staticfiles %}
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>民宿列表页</title>
- <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
- <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
- <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
- <link rel="stylesheet" href="{% static '/css/common.css' %}">
- <link rel="stylesheet" href="{% static '/css/module.css' %}">
- <link rel="stylesheet" href="{% static '/css/hotelList.css' %}">
- </head>
- <body>
- <div class="header">
- <div class="headerTxt">
- <div class="wrapper">
- <p class="logoNameCn">休闲农业旅游网</p>
- <p class="logoNameEn">Leisure agricultural tourism network</p>
- </div>
- </div>
- <!-- 广告 -->
- <div class="bjColor advImg"></div>
- </div>
- <!-- 主体部分 -->
- <div class="content">
- <div class="wrapper">
- <div class="newsDiv">
- <!-- 面包屑导航 -->
- <div class="breadcrumb">
- <span class="layui-breadcrumb">
- <a href="home">首页</a>
- <a>
- <cite>民宿导览</cite>
- </a>
- </span>
- <div class="searchDiv">
- <input type="text" id="searchTitlt" value="{{con|default:''}}" placeholder="请输入标题" autocomplete="off" class="layui-input" >
- <button type="button" onclick="searchCon()" class="layui-btn layui-btn-ms"><i class="layui-icon"></i></button>
- </div>
- </div>
- <!-- 新闻列表 -->
- <div class="innerDiv">
- <ul class="hotelList">
- {% if hotel|length %} {% for hotelItem in hotel %}
- <li class="hotelItem">
- <a href="dorm_detail?id={{hotelItem.id}}">
- <img src="{{hotelItem.hotel_img}}" alt="">
- <div class="hotelDetial">
- <h2>{{hotelItem.name}}</h2>
- <div class="abstract-wrap">
- <p class="abstract-text">简介:{{hotelItem.intro}}</p>
- </div>
- <div class="address">
- 地址:{{hotelItem.addr}}
- </div>
- <div class="txtColor price">¥<span>{{hotelItem.price}}</span>起</div>
- <div class="date">
- <span>{{hotelItem.upl_time|date:"Y年m月d日"}}</span>
- 发布
- </div>
- </div>
- </a>
- </li>
- {% endfor %} {% else %}
- <li class="videoItem" style=" width: 100%;">
- <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
- </li>
- <!-- <li class="hotelItem">
- <a href="dorm_detail">
- <img src="{% static '/imgs/dorm/dorm2.jpg' %}" alt="">
- <div class="hotelDetial">
- <h2>酒店名名称酒店名名称酒店名名称酒店名名称</h2>
- <div class="address">
- 地址:党的十八大以来,以习近平同志为核心的党中央高度,关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示,提出明确要求。江西是中国革命的摇篮,也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作,关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示,提出明确要求。江西是中国革命的摇篮,也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作,必须传承党的保密工作光荣传统,持续推进党中央决策部署落地见效必须传承党的保密工作光荣传统,持续推进党中央决策部署落地见效
- </div>
- <div class="txtColor price">¥<span>200</span>起</div>
- <div class="date">
- <span>2019-02-30</span>
- 发布
- </div>
- </div>
- </a>
- </li> -->
- {% endif %}
- </ul>
- {% if hotel|length %}
- <div id="page"></div>
- <input type="hidden" value="{{nums}}" id="nums">
- <input type="hidden" value="{{page}}" id="currPage">
- {% else %}
- {% endif %}
- </div>
- </div>
- </div>
- </div>
- <!-- 底部版权 -->
- <div class="footer bjColor">
- <div class="wrapper">
- <div class="floatDiv">
- <div class="copyrightTxt">
- <div>休闲农业旅游网</div>
- <div>联系人:李四 联系电话:13811111111</div>
- <div>地址:河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
- </div>
- <div class="WeChatCode">
- <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
- <p>关注公众号</p>
- </div>
- </div>
- <div class="copyright">
- 版权所有XXXXXXXXXXXXXXXXXXXXXX
- </div>
- </div>
- </div>
- <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
- <script src="{% static '/lib/layui/layui.js'%}"></script>
- <script>
- //注意:导航 依赖 element 模块,否则无法进行功能性操作
- layui.use(['element', 'laypage'], function () {
- var element = layui.element;
- //…
- var laypage = layui.laypage;
- var currPage = $('#currPage').val();
- //执行一个laypage实例
- laypage.render({
- elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
- , count: $('#nums').val() //数据总数,从服务端得到
- // , limit: 5
- , curr: currPage
- , jump: function (obj, first) {
- //obj包含了当前分页的所有参数,比如:
- console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
- console.log(obj.limit); //得到每页显示的条数
- var searchTitlt = $('#searchTitlt').val();
- //首次不执行
- if (!first) {
- window.location.href = 'dorm_list?page=' + obj.curr + '&condition=' + searchTitlt;
- }
- }
- });
- });
- $('#searchTitlt').on('keypress', function (e) {
- if (e && e.keyCode == 13) { // 按 Esc
- searchCon()
- }
- })
- function searchCon() {
- var searchTitlt = $('#searchTitlt').val();
- window.location.href = 'dorm_list?page=1' + '&condition=' + searchTitlt;
- }
- </script>
- </body>
- </html>
|