|
|
|
@ -3,335 +3,256 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en" class="fly-html-layui fly-html-store">
|
|
|
|
<html lang="en" class="fly-html-layui fly-html-store">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<!-- 设置页面的字符编码为UTF-8 -->
|
|
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<!-- 指定页面使用webkit内核进行渲染 -->
|
|
|
|
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
<!-- 声明页面以IE的最高版本（或Chrome）的模式来渲染，以保证兼容性 -->
|
|
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<!-- 设置页面的视口，使其宽度等于设备宽度，初始缩放比例为1，最大缩放比例也为1，实现页面在移动端的自适应显示 -->
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- 引入Layui框架的CSS文件，路径通过EL表达式结合项目上下文路径动态获取，用于设置页面的样式框架 -->
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/layui/dist/css/layui.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/layui/dist/css/layui.css">
|
|
|
|
<!-- 引入自定义的全局样式文件，用于补充和覆盖Layui框架样式，以及设置项目通用的样式规则，字符编码指定为utf-8 -->
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/global.css" charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/global.css" charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/global(1).css" charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/global(1).css" charset="utf-8">
|
|
|
|
<!-- 引入特定于当前页面（可能是商店、酒店相关页面）的样式文件，用于定制该页面独有的样式，字符编码为utf-8 -->
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/store.css" charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/store.css" charset="utf-8">
|
|
|
|
<!-- 设置页面的图标，指定图标文件的路径，通过EL表达式结合项目上下文路径获取 -->
|
|
|
|
|
|
|
|
<link rel="icon" href="${pageContext.request.contextPath}/static/front/images/favicon.ico">
|
|
|
|
<link rel="icon" href="${pageContext.request.contextPath}/static/front/images/favicon.ico">
|
|
|
|
<!-- 页面的标题，显示在浏览器标签页上 -->
|
|
|
|
|
|
|
|
<title>首页-酒店管理系统</title>
|
|
|
|
<title>首页-酒店管理系统</title>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<!-- 顶部区域开始的标记，通常用于放置网站的导航栏、logo等元素 -->
|
|
|
|
<!-- 顶部start -->
|
|
|
|
<!-- 顶部start -->
|
|
|
|
<div class="layui-header header header-store" style="background-color: #393D49;">
|
|
|
|
<div class="layui-header header header-store" style="background-color: #393D49;">
|
|
|
|
<div class="layui-container">
|
|
|
|
<div class="layui-container">
|
|
|
|
<a class="logo" href="index.html">
|
|
|
|
<!-- 网站的logo图片链接，点击可跳转到首页（index.html），通过img标签展示logo图片，图片路径通过EL表达式结合项目上下文路径获取 -->
|
|
|
|
<img src="${pageContext.request.contextPath}/static/front/images/logo.png" alt="layui">
|
|
|
|
<a class="logo" href="index.html">
|
|
|
|
</a>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/front/images/logo.png" alt="layui">
|
|
|
|
<div class="layui-form component" lay-filter="LAY-site-header-component"></div>
|
|
|
|
</a>
|
|
|
|
<ul class="layui-nav" id="layui-nav-userinfo">
|
|
|
|
<!-- 这可能是一个用于放置表单相关组件（比如搜索框、登录表单等）的div，通过lay-filter属性设置了一个过滤器标识，可能用于后续的Layui表单相关操作 -->
|
|
|
|
|
|
|
|
<div class="layui-form component" lay-filter="LAY-site-header-component"></div>
|
|
|
|
<c:if test="${sessionScope.users!=null}">
|
|
|
|
<!-- 这是一个无序列表，用于构建页面顶部的导航栏，通过id属性设置了一个唯一标识，方便后续进行样式设置和JavaScript操作 -->
|
|
|
|
<li data-id="index" class="layui-nav-item layui-hide-xs layui-this">
|
|
|
|
<ul class="layui-nav" id="layui-nav-userinfo">
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/home.jsp">首页</a>
|
|
|
|
<!-- 使用JSTL的<c:if>标签进行条件判断，判断会话（session）中是否存在名为"users"的属性且不为null -->
|
|
|
|
</li>
|
|
|
|
<c:if test="${sessionScope.users!=null}">
|
|
|
|
<li data-id="room" class="layui-nav-item layui-hide-xs">
|
|
|
|
<!-- 导航栏中的一个菜单项，表示首页，设置了相关的数据-id属性、样式类，通过a标签设置链接地址（点击跳转到fronts/home.jsp）以及添加了用于交互效果的自定义属性和样式类 -->
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="JavaScript:void(0);">房间</a>
|
|
|
|
<li data-id="index" class="layui-nav-item layui-hide-xs layui-this">
|
|
|
|
</li>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/home.jsp">首页</a>
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
</li>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/admin/login.html">后台管理</a>
|
|
|
|
<!-- 导航栏中表示“房间”的菜单项，链接地址暂时设置为JavaScript:void(0);，可能后续通过JavaScript来动态设置实际跳转地址 -->
|
|
|
|
</li>
|
|
|
|
<li data-id="room" class="layui-nav-item layui-hide-xs">
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="JavaScript:void(0);">房间</a>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/user/logout">退出</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<!-- 导航栏中表示“后台管理”的菜单项，点击跳转到admin/login.html，可能用于管理员登录进入后台管理系统 -->
|
|
|
|
</c:if>
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
<c:if test="${sessionScope.users==null}">
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/admin/login.html">后台管理</a>
|
|
|
|
<li data-id="index" class="layui-nav-item layui-hide-xs layui-this">
|
|
|
|
</li>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/home.jsp">首页</a>
|
|
|
|
<!-- 导航栏中表示“退出”的菜单项，点击可能触发退出登录的操作，具体的退出逻辑应该在对应的后端接口（${pageContext.request.contextPath}/user/logout）中实现 -->
|
|
|
|
</li>
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
<li data-id="room" class="layui-nav-item layui-hide-xs">
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/user/logout">退出</a>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/hotelList.jsp">房间</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</c:if>
|
|
|
|
<li data-id="login" class="layui-nav-item layui-hide-xs ">
|
|
|
|
<!-- 另一个<c:if>条件判断，判断会话中"users"属性是否为null -->
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/login.jsp">登入</a>
|
|
|
|
<c:if test="${sessionScope.users==null}">
|
|
|
|
</li>
|
|
|
|
<!-- 导航栏中的首页菜单项，与上面类似，点击跳转到fronts/home.jsp -->
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
<li data-id="index" class="layui-nav-item layui-hide-xs layui-this">
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/register.jsp">注册</a>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/home.jsp">首页</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</c:if>
|
|
|
|
<!-- 导航栏中“房间”菜单项，点击跳转到fronts/hotelList.jsp，用于未登录用户查看房间列表等操作 -->
|
|
|
|
<span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span>
|
|
|
|
<li data-id="room" class="layui-nav-item layui-hide-xs">
|
|
|
|
</ul>
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/hotelList.jsp">房间</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<!-- 导航栏中“登入”菜单项，点击跳转到fronts/login.jsp，引导用户进行登录操作 -->
|
|
|
|
|
|
|
|
<li data-id="login" class="layui-nav-item layui-hide-xs ">
|
|
|
|
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/login.jsp">登入</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<!-- 导航栏中“注册”菜单项，点击跳转到fronts/register.jsp，方便新用户进行注册账号操作 -->
|
|
|
|
|
|
|
|
<li data-id="register" class="layui-nav-item layui-hide-xs ">
|
|
|
|
|
|
|
|
<a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/fronts/register.jsp">注册</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</c:if>
|
|
|
|
|
|
|
|
<!-- 这是一个用于显示导航栏菜单项选中效果的元素（比如底部的横线等），通过style属性设置了其初始的位置、宽度、透明度等样式 -->
|
|
|
|
|
|
|
|
<span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 顶部区域结束的标记 -->
|
|
|
|
</div>
|
|
|
|
<!-- 顶部end -->
|
|
|
|
<!-- 顶部end -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 中间区域开始的标记，通常放置页面主要内容，如搜索框、筛选条件、房间列表等 -->
|
|
|
|
|
|
|
|
<!-- 中间区域开始 -->
|
|
|
|
|
|
|
|
<!-- 搜索框start -->
|
|
|
|
|
|
|
|
<div class="shop-nav shop-index">
|
|
|
|
|
|
|
|
<!--搜索 start-->
|
|
|
|
|
|
|
|
<div id="LAY-topbar" style="height: auto;">
|
|
|
|
|
|
|
|
<!-- 这是一个Layui框架的表单，通过layuimini-form样式类可能应用了一些自定义的表单样式 -->
|
|
|
|
|
|
|
|
<form class="layui-form layuimini-form">
|
|
|
|
|
|
|
|
<!-- 这是一个用于放置搜索输入框和搜索按钮的div -->
|
|
|
|
|
|
|
|
<div class="input-search">
|
|
|
|
|
|
|
|
<!-- 搜索输入框，设置了相关的属性，如placeholder用于显示提示文本，name用于设置表单提交时的参数名，id用于唯一标识该输入框，autocomplete设置为off表示关闭自动完成功能，value属性可用于设置初始值 -->
|
|
|
|
|
|
|
|
<div id="searchRoom"><input type="text" placeholder="搜索你需要的房间" name="keywords" id="searchKeywords"
|
|
|
|
|
|
|
|
autocomplete="off" value="">
|
|
|
|
|
|
|
|
<!-- 搜索按钮，使用了Layui框架的按钮样式类layui-btn以及自定义的样式类layui-btn-shop，通过lay-submit和lay-filter属性设置了按钮的提交和过滤功能（可能用于触发搜索操作并验证表单数据），按钮的背景色设置为#009688，内部使用了Layui的图标（搜索图标） -->
|
|
|
|
|
|
|
|
<button class="layui-btn layui-btn-shop" lay-submit="" lay-filter="searchHotelRoom" style="background-color: #009688"><i
|
|
|
|
|
|
|
|
class="layui-icon layui-icon-search"></i></button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 在大屏幕（非xs尺寸）下显示的一个div，内部包含一个链接和logo图片，可能用于在页面顶部显示品牌logo等信息 -->
|
|
|
|
|
|
|
|
<div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo"> <img
|
|
|
|
|
|
|
|
src="${pageContext.request.contextPath}/statics/front/images/logo-1.png" alt="layui"> </a></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--搜索 end-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 中间区域开始 -->
|
|
|
|
|
|
|
|
<!-- 搜索框start -->
|
|
|
|
|
|
|
|
<div class="shop-nav shop-index">
|
|
|
|
|
|
|
|
<!--搜索 start-->
|
|
|
|
|
|
|
|
<div id="LAY-topbar" style="height: auto;">
|
|
|
|
|
|
|
|
<form class="layui-form layuimini-form">
|
|
|
|
|
|
|
|
<div class="input-search">
|
|
|
|
|
|
|
|
<div id="searchRoom"><input type="text" placeholder="搜索你需要的房间" name="keywords" id="searchKeywords"
|
|
|
|
|
|
|
|
autocomplete="off" value="">
|
|
|
|
|
|
|
|
<button class="layui-btn layui-btn-shop" lay-submit="" lay-filter="searchHotelRoom" style="background-color: #009688"><i
|
|
|
|
|
|
|
|
class="layui-icon layui-icon-search"></i></button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo"> <img
|
|
|
|
|
|
|
|
src="${pageContext.request.contextPath}/statics/front/images/logo-1.png" alt="layui"> </a></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 搜索框end -->
|
|
|
|
<!--搜索 end-->
|
|
|
|
<!-- 筛选条件start -->
|
|
|
|
|
|
|
|
<div class="shoplist-filter">
|
|
|
|
|
|
|
|
<div class="layui-container">
|
|
|
|
|
|
|
|
<div class="layui-card">
|
|
|
|
|
|
|
|
<!-- 卡片头部区域，包含一个面包屑导航，用于显示当前页面在网站中的位置路径，通过设置style属性让其可见 -->
|
|
|
|
|
|
|
|
<div class="layui-card-header"> <span class="layui-breadcrumb" style="visibility: visible;"> <a href="${pageContext.request.contextPath}/fronts/home.jsp">酒店首页</a><span lay-separator="">/</span> <a href="../hotel/lists.html">类别</a><span lay-separator="">/</span> <a><cite>全部</cite></a>
|
|
|
|
|
|
|
|
</span> </div>
|
|
|
|
|
|
|
|
<!-- 卡片主体内容区域 -->
|
|
|
|
|
|
|
|
<div class="layui-card-body">
|
|
|
|
|
|
|
|
<!-- 用于筛选房间类别的区域，通过一个列表展示不同的类别选项 -->
|
|
|
|
|
|
|
|
<div class="store-cat-item"> <span><i class="layui-icon layui-icon-shop-fenlei"></i>类别：</span>
|
|
|
|
|
|
|
|
<ul id="getAllRoomType">
|
|
|
|
|
|
|
|
<!-- 使用JSTL的<c:if>标签进行条件判断，判断房型ID（typeId）是否为空，为空则表示当前点击的是“全部”这个超链接，此时给对应的li元素添加active样式类，用于样式上的选中效果展示 -->
|
|
|
|
|
|
|
|
<li data-id="0" <c:if test="${typeId == null}">class="active"</c:if>> <a class="fly-case-active" href="#" data-type="toRoomTypeListByLists">全部</a></li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 用于筛选楼层的区域，同样通过一个列表展示不同的楼层选项 -->
|
|
|
|
|
|
|
|
<div class="store-cat-item colorFilt"> <span><i class="layui-icon layui-icon-shop-color"></i>楼层：</span>
|
|
|
|
|
|
|
|
<ul id="getAllFloor">
|
|
|
|
|
|
|
|
<!-- 表示“全部”楼层的选项，设置了背景色、标题属性等，链接地址暂时设置为JavaScript:void(0);，点击操作可能通过JavaScript来动态处理，内部使用了图片和图标来展示选中效果等 -->
|
|
|
|
|
|
|
|
<li style="background: #F2F2F2" title="全部"> <a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists"> <img src="images/all_bg.jpg"><i class="layui-icon layui-icon-ok"></i></a></li>
|
|
|
|
|
|
|
|
<!-- 表示酒店1楼的楼层选项，设置了对应的数据-id属性、标题属性以及样式类（用于区分不同楼层的样式），链接同样暂时设置为JavaScript:void(0);，点击操作待后续JavaScript实现 -->
|
|
|
|
|
|
|
|
<li data-id="1" title="酒店1楼" class="bg1">
|
|
|
|
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<!-- 搜索框end -->
|
|
|
|
<li data-id="2" title="酒店2楼" class="bg2">
|
|
|
|
<!-- 筛选条件start -->
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<div class="shoplist-filter">
|
|
|
|
|
|
|
|
<div class="layui-container">
|
|
|
|
|
|
|
|
<div class="layui-card">
|
|
|
|
|
|
|
|
<div class="layui-card-header"> <span class="layui-breadcrumb" style="visibility: visible;"> <a href="${pageContext.request.contextPath}/fronts/home.jsp">酒店首页</a><span lay-separator="">/</span> <a href="../hotel/lists.html">类别</a><span lay-separator="">/</span> <a><cite>全部</cite></a>
|
|
|
|
|
|
|
|
</span> </div>
|
|
|
|
|
|
|
|
<div class="layui-card-body">
|
|
|
|
|
|
|
|
<div class="store-cat-item"> <span><i class="layui-icon layui-icon-shop-fenlei"></i>类别：</span>
|
|
|
|
|
|
|
|
<ul id="getAllRoomType">
|
|
|
|
|
|
|
|
<%-- 判断typeId房型ID值是否为空，为空表示当前点击的是全部这个超链接 --%>
|
|
|
|
|
|
|
|
<li data-id="0" <c:if test="${typeId == null}">class="active"</c:if>> <a class="fly-case-active" href="#" data-type="toRoomTypeListByLists">全部</a></li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="store-cat-item colorFilt"> <span><i class="layui-icon layui-icon-shop-color"></i>楼层：</span>
|
|
|
|
|
|
|
|
<ul id="getAllFloor"><li style="background: #F2F2F2" title="全部"> <a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists"> <img src="images/all_bg.jpg"><i class="layui-icon layui-icon-ok"></i></a></li><li data-id="1" title="酒店1楼" class="bg1">
|
|
|
|
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li data-id="3" title="酒店3楼" class="bg3">
|
|
|
|
<li data-id="2" title="酒店2楼" class="bg2">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li data-id="4" title="酒店4楼" class="bg4">
|
|
|
|
<li data-id="3" title="酒店3楼" class="bg3">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li data-id="5" title="酒店5楼" class="bg5">
|
|
|
|
<li data-id="4" title="酒店4楼" class="bg4">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li data-id="6" title="酒店6楼" class="bg6">
|
|
|
|
<li data-id="5" title="酒店5楼" class="bg5">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<li data-id="6" title="酒店6楼" class="bg6">
|
|
|
|
</div>
|
|
|
|
<a class="fly-case-active" href="JavaScript:void(0);" data-type="toFloorListByLists">
|
|
|
|
<!-- 显示筛选结果数量的文本，通过id为filtTotal的元素展示筛选出的房间数量，数量值通过EL表达式${roomList.size()}从后端获取并动态显示 -->
|
|
|
|
|
|
|
|
<p class="filtEnd">筛选出<span id="filtTotal">${roomList.size()}</span>个</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p class="filtEnd">筛选出<span id="filtTotal">${roomList.size()}</span>个</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 筛选条件end -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 筛选条件end -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 房间列表start -->
|
|
|
|
<!-- 房间列表start -->
|
|
|
|
<div class="shop-temp shoplist">
|
|
|
|
<div class="shop-temp shoplist">
|
|
|
|
<div class="temp-normal">
|
|
|
|
<div class="temp-normal">
|
|
|
|
<div class="layui-container">
|
|
|
|
<div class="layui-container">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<!-- 用于展示单个房间信息的div容器，通过data-id属性绑定房间的唯一标识（${room.id}从后端获取），使用了Layui的栅格系统类来控制在不同屏幕尺寸下的布局占比 -->
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<!-- 这是一个整体的房间展示链接，点击可跳转到房间详情页面（fronts/detail.jsp），并传递了名为toRoomInfo的数据类型参数，用于在详情页做相应业务逻辑处理，添加了多个样式类用于样式控制和交互效果 -->
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<!-- 展示房间对应的图片，设置了相应的图片路径以及store-list-cover样式类，用于控制图片在页面中的显示样式，比如大小、对齐等 -->
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<!-- 展示房间名称，使用了layui-elip样式类，通常用于处理文字过长时超出部分以省略号显示等文本排版效果，这里显示的房间名称是“标准间” -->
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
<div>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<!-- 展示房间价格标签，使用了Layui的徽章样式类layui-badge-rim以及自定义的样式类store-list-pay，显示价格为￥120 -->
|
|
|
|
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<!-- 这是一个用于展示房间其他属性（如房号、房间类型、楼层等）的div，通过多个span元素展示不同属性，每个span设置了相应的样式，如边框颜色、文字颜色、背景色等来区分不同属性 -->
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<!-- 以下每个div都是用于展示单个房间信息的容器，通过data-id属性绑定房间的唯一标识（${room.id}应是从后端获取的具体房间ID），
|
|
|
|
</div>
|
|
|
|
同时使用了Layui的栅格系统类（layui-col-xs12、layui-col-sm6、layui-col-md4、layui-col-lg3）来控制在不同屏幕尺寸（超小屏xs、小屏sm、中屏md、大屏lg）下的布局占比 -->
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<!-- 这是一个整体的房间展示链接，点击后会跳转到房间详情页面（fronts/detail.jsp），同时传递了一个名为toRoomInfo的数据类型参数，
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
可能用于在详情页做对应业务逻辑区分，添加了一些样式类（template、store-list-box、fly-case-active）用于样式控制和交互效果 -->
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
<!-- 展示该房间对应的图片，设置了对应的图片路径以及样式类store-list-cover，用于页面中图片显示样式的定制，比如大小、对齐等 -->
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<!-- 展示房间名称，使用了layui-elip样式类，通常用于处理文字过长时超出部分以省略号显示等文本排版效果，这里显示的房间名称是“单人间” -->
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<!-- 展示房间价格标签，使用了Layui的徽章样式类layui-badge-rim以及自定义的样式类store-list-pay，显示价格为￥100 -->
|
|
|
|
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<!-- 这是一个用于展示房间其他属性（如房号、房间类型、楼层等）的div，通过多个span元素展示不同属性，每个span设置了相应的样式，
|
|
|
|
|
|
|
|
如边框颜色、文字颜色、背景色等来区分不同属性 -->
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<!-- 展示房号信息的span元素，设置了相对位置、边框颜色、文字颜色、边框宽度、边框样式、背景色以及文本居中对齐等样式，这里房号是NO.1 -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<!-- 展示房间类型信息的span元素，设置了边框颜色、文字颜色等样式，这里房间类型是“单人间” -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
|
|
|
|
<!-- 展示楼层信息的span元素，设置了边框颜色、文字颜色等样式，这里楼层是“1楼” -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
</div>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<div>
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
</div>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<div>
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 以下又是一组房间信息展示的div结构，与上面类似，用于展示更多房间的信息 -->
|
|
|
|
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
</a>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
</div>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
</div>
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
</div>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
</div>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
</a>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
</a>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
</div>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
</div>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
</a>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
</div>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<div>
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
</div>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<!-- 这是一组用于展示多个房间信息的div结构，通过layui-row和layui-col-space20样式类应用了Layui框架的行布局以及列间距设置，id为roomList可用于后续通过JavaScript等方式对房间列表进行操作 -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<!-- 以下每个div都是用于展示单个房间信息的容器，通过data-id属性绑定房间的唯一标识（${room.id}应是从后端获取的具体房间ID），
|
|
|
|
|
|
|
|
同时使用了Layui的栅格系统类（layui-col-xs12、layui-col-sm6、layui-col-md4、layui-col-lg3）来控制在不同屏幕尺寸（超小屏xs、小屏sm、中屏md、大屏lg）下的布局占比 -->
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
<!-- 这是一个整体的房间展示链接，点击后会跳转到房间详情页面（fronts/detail.jsp），同时传递了一个名为toRoomInfo的数据类型参数，
|
|
|
|
|
|
|
|
可能用于在详情页做对应业务逻辑区分，添加了一些样式类（template、store-list-box、fly-case-active）用于样式控制和交互效果 -->
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<!-- 展示该房间对应的图片，设置了对应的图片路径以及样式类store-list-cover，用于页面中图片显示样式的定制，比如大小、对齐等 -->
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<!-- 展示房间名称，使用了layui-elip样式类，通常用于处理文字过长时超出部分以省略号显示等文本排版效果，这里显示的房间名称是“双人间” -->
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<div>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<!-- 展示房间价格标签，使用了Layui的徽章样式类layui-badge-rim以及自定义的样式类store-list-pay，显示价格为￥120 -->
|
|
|
|
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<!-- 这是一个用于展示房间其他属性（如房号、房间类型、楼层等）的div，通过多个span元素展示不同属性，每个span设置了相应的样式，
|
|
|
|
|
|
|
|
如边框颜色、文字颜色、背景色等来区分不同属性 -->
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<!-- 展示房号信息的span元素，设置了相对位置、边框颜色、文字颜色、边框宽度、边框样式、背景色以及文本居中对齐等样式，这里房号是NO.1 -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<!-- 展示房间类型信息的span元素，设置了边框颜色、文字颜色等样式，这里房间类型是“双人间” -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<!-- 展示楼层信息的span元素，设置了边框颜色、文字颜色等样式，这里楼层是“2楼” -->
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -341,8 +262,7 @@
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
<div>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
@ -355,8 +275,7 @@
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
<div>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
@ -369,8 +288,7 @@
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
<div>
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
<label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
@ -380,79 +298,216 @@
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 以下是多组重复的房间信息展示结构，与上面一组的功能和结构类似，都是展示不同房间的信息，方便在页面上呈现多个房间供用户查看 -->
|
|
|
|
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<!-- 此处省略重复的单个房间信息展示div内容注释，其结构和功能与上述第一个roomList中的单个房间展示div一致 -->
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
...
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<!-- 此处省略重复的单个房间信息展示div内容注释，其结构和功能与上述第一个roomList中的单个房间展示div一致 -->
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
...
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<div class="layui-row layui-col-space20 shoplist" id="roomList">
|
|
|
|
<!-- 此处省略重复的单个房间信息展示div内容注释，其结构和功能与上述第一个roomList中的单个房间展示div一致 -->
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
...
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/t4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥888 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">总统套房</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/b4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">标准间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">标准间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/d4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">单人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥100 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">单人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">1楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div data-id="${room.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
|
|
|
|
|
|
|
|
<a class="template store-list-box fly-case-active" href="${pageContext.request.contextPath}/fronts/detail.jsp" data-type="toRoomInfo">
|
|
|
|
|
|
|
|
<img src="${pageContext.request.contextPath}/static/images/s4.png" class="store-list-cover">
|
|
|
|
|
|
|
|
<h2 class="layui-elip">双人间</h2>
|
|
|
|
|
|
|
|
<div> <label class="layui-badge-rim store-list-pay"> ￥120 </label>
|
|
|
|
|
|
|
|
<div class="store-list-colorbar">
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">NO.1</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">双人间</span>
|
|
|
|
|
|
|
|
<span class="store-color-bar" style="border-color: #01aaed;color: #01aaed;border-width: 1px;border-style: solid;background-color: #fff; text-align: center;">2楼</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 一个空的div，通过设置样式来添加页面的上下边距以及文本居中对齐等样式效果，可能用于页面布局中的空白间隔或者视觉上的分隔 -->
|
|
|
|
|
|
|
|
<div style="margin: 50px 0 80px; text-align: center;"> </div>
|
|
|
|
<div style="margin: 50px 0 80px; text-align: center;"> </div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 房间列表结束的标记，表示房间列表展示部分到此结束 -->
|
|
|
|
<!-- 房间列表end -->
|
|
|
|
<!-- 中间区域结束的标记，意味着页面中间主要内容展示区域已完结 -->
|
|
|
|
|
|
|
|
<!-- 中间区域结束 -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部区域开始，用于展示页面底部相关信息，比如版权声明、友情链接等 -->
|
|
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
|
|
|
<div class="fly-footer">
|
|
|
|
|
|
|
|
<!-- 展示版权相关信息及链接到首页的文字链接，文本内容包含了“酒店系统”以及版权年份、所属网站域名等信息 -->
|
|
|
|
|
|
|
|
<p><a href="#">酒店系统</a> 2022 © <a href="#">xyp.cn</a></p>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<!-- 友情链接标题文本 -->
|
|
|
|
|
|
|
|
友情链接
|
|
|
|
|
|
|
|
<!-- 以下是一系列友情链接，点击可跳转到对应的外部网站，target="_blank"表示在新标签页中打开链接 -->
|
|
|
|
|
|
|
|
<a href="https://gitee.com/xie_yingpeng/ssm-hotel-management-system.git" target="_blank">项目源码分享网</a>
|
|
|
|
|
|
|
|
<a href="https://gitee.com/xie_yingpeng/ssm-hotel-management-system.git" target="_blank">源码下载平台</a>
|
|
|
|
|
|
|
|
<a href="https://gitee.com/xie_yingpeng" target="_blank">源码市场</a>
|
|
|
|
|
|
|
|
<a href="https://www.zhihu.com/people/nan-qiao-12-73" target="_blank">简历制作</a>
|
|
|
|
|
|
|
|
<a href="https://www.zhihu.com/people/nan-qiao-12-73" target="_blank">社区论坛</a>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 脚本开始的标记，意味着下面开始引入和编写JavaScript相关代码 -->
|
|
|
|
|
|
|
|
<!-- 引入Layui框架的核心JavaScript文件，文件路径通过EL表达式结合项目上下文路径动态获取，这是使用Layui框架各种功能的基础 -->
|
|
|
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/front/layui/dist/layui.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
// 使用Layui框架的use方法来加载模块，这里加载了"form"、"element"、"carousel"三个模块，并在回调函数中使用它们
|
|
|
|
|
|
|
|
layui.use(["form","element","carousel"], function () {
|
|
|
|
|
|
|
|
var form = layui.form,
|
|
|
|
|
|
|
|
layer = layui.layer,
|
|
|
|
|
|
|
|
element = layui.element,
|
|
|
|
|
|
|
|
carousel = layui.carousel,
|
|
|
|
|
|
|
|
$ = layui.$;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 使用carousel模块的render方法来渲染轮播图，配置相关参数
|
|
|
|
<!-- 中间区域结束 -->
|
|
|
|
// elem属性指定轮播图对应的DOM元素的ID，这里是'LAY-store-banner'
|
|
|
|
|
|
|
|
// width属性设置轮播图容器的宽度为100%，使其自适应父容器宽度
|
|
|
|
<!-- 底部 -->
|
|
|
|
// height属性设置轮播图容器的高度为460像素
|
|
|
|
<!-- 底部 -->
|
|
|
|
// arrow属性设置为'always'，表示始终显示轮播图的切换箭头，方便用户操作切换图片
|
|
|
|
<div class="fly-footer">
|
|
|
|
carousel.render({
|
|
|
|
<p><a href="#">酒店系统</a> 2022 © <a href="#">xyp.cn</a></p>
|
|
|
|
elem: '#LAY-store-banner'
|
|
|
|
<p>
|
|
|
|
,width: '100%' //设置容器宽度
|
|
|
|
友情链接
|
|
|
|
,height: '460' //设置容器高度
|
|
|
|
<a href="https://gitee.com/xie_yingpeng/ssm-hotel-management-system.git" target="_blank">项目源码分享网</a>
|
|
|
|
,arrow: 'always' //始终显示箭头
|
|
|
|
<a href="https://gitee.com/xie_yingpeng/ssm-hotel-management-system.git" target="_blank">源码下载平台</a>
|
|
|
|
});
|
|
|
|
<a href="https://gitee.com/xie_yingpeng" target="_blank">源码市场</a>
|
|
|
|
});
|
|
|
|
<a href="https://www.zhihu.com/people/nan-qiao-12-73" target="_blank">简历制作</a>
|
|
|
|
</script>
|
|
|
|
<a href="https://www.zhihu.com/people/nan-qiao-12-73" target="_blank">社区论坛</a> </p>
|
|
|
|
<!-- 脚本结束的标记，表示JavaScript代码部分结束 -->
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 脚本开始 -->
|
|
|
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/front/layui/dist/layui.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
layui.use(["form","element","carousel"], function () {
|
|
|
|
|
|
|
|
var form = layui.form,
|
|
|
|
|
|
|
|
layer = layui.layer,
|
|
|
|
|
|
|
|
element = layui.element,
|
|
|
|
|
|
|
|
carousel = layui.carousel,
|
|
|
|
|
|
|
|
$ = layui.$;
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 这是一个用于实现页面固定栏（可能是回到顶部等功能按钮所在栏）相关样式和交互效果的无序列表，使用了layui-fixbar样式类 -->
|
|
|
|
//渲染轮播图
|
|
|
|
<ul class="layui-fixbar">
|
|
|
|
carousel.render({
|
|
|
|
<!-- 列表中的一个元素，代表回到顶部按钮，使用了layui-icon样式类来应用特定图标样式，lay-type属性设置为"top"表示其功能是回到页面顶部，通过style属性设置了一些额外的样式 -->
|
|
|
|
elem: '#LAY-store-banner'
|
|
|
|
<li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
|
|
|
|
,width: '100%' //设置容器宽度
|
|
|
|
</ul>
|
|
|
|
,height: '460' //设置容器高度
|
|
|
|
<!-- 这是一个用于实现页面某些元素（可能是弹窗等）可拖动效果的空div，使用了layui-layer-move样式类 -->
|
|
|
|
,arrow: 'always' //始终显示箭头
|
|
|
|
<div class="layui-layer-move"></div>
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- 脚本结束 -->
|
|
|
|
|
|
|
|
<ul class="layui-fixbar">
|
|
|
|
|
|
|
|
<li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<div class="layui-layer-move"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|
|
周明
