ppc8uw5bo
/
hotels
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zxy

Browse Source
pull/2/head
zxy 5 months ago
parent 923c11af2f
commit 8e87ff2ea5
1 changed files with 297 additions and 307 deletions
Show Stats Download Patch File Download Diff File

602
back/src/main/resources/front/front/index.html
Unescape View File

@ -1,329 +1,319 @@
<!-- 首页 --> <!-- 首页 -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="utf-8">
<title>首页</title> <!-- 设置视口，用于响应式布局，宽度等于设备宽度，初始缩放比例为 1，最大缩放比例为 1 -->
<link rel="stylesheet" href="./layui/css/layui.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./xznstatic/css/common.css"/> <title>首页</title>
<link rel="stylesheet" href="./xznstatic/css/style.css"/> <!-- 引入 layui 的 CSS 样式文件 -->
</head> <link rel="stylesheet" href="./layui/css/layui.css">
<style type="text/css"> <!-- 引入自定义的 common.css 样式文件 -->
html, body { <link rel="stylesheet" href="./xznstatic/css/common.css"/>
height: 100%; <!-- 引入自定义的 style.css 样式文件 -->
} <link rel="stylesheet" href="./xznstatic/css/style.css"/>
#iframe { </head>
width: 100%; <style type="text/css">
margin-top: 50px; html, body {
padding-top: 64px; height: 100%;
} }
#header { /* 定义 id 为 iframe 的元素样式，宽度 100%，上边距 50px，内边距顶部 64px */
height: auto; #iframe {
background: #fff; width: 100%;
border-bottom: 0; margin-top: 50px;
position: fixed; padding-top: 64px;
top: 0; }
left: 0; /* 定义 id 为 header 的元素样式，高度自适应，白色背景，固定定位在顶部，宽度 100%，z 轴层级为 1 */
width: 100%; #header {
z-index: 1; height: auto;
} background: #fff;
border-bottom: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#header .nav-top { /* 定义 id 为 header 下的.nav-top 类元素样式，弹性布局，水平居中对齐，设置字体大小、颜色等 */
display: flex; #header .nav-top {
align-items: center; display: flex;
padding: 0 20px; align-items: center;
font-size: 16px; padding: 0 20px;
color: #2a8a15; font-size: 16px;
box-sizing: border-box; color: #2a8a15;
height: 50px; box-sizing: border-box;
background: #CB945C; height: 50px;
box-shadow: 0 0px 0px rgba(0,0,0,.3); background: #CB945C;
justify-content: center; box-shadow: 0 0px 0px rgba(0, 0, 0,.3);
position: relative; justify-content: center;
z-index: 1; position: relative;
} z-index: 1;
}
#header .nav-top-img { /* 定义 id 为 header 下的.nav-top-img 类元素样式，设置宽度、高度、边框等 */
width: 124px; #header .nav-top-img {
height: 40px; width: 124px;
padding: 0; height: 40px;
margin: 0; padding: 0;
border-radius: 6px; margin: 0;
border-width: 0; border-radius: 6px;
border-style: solid; border-width: 0;
border-color: rgba(0,0,0,.3); border-style: solid;
box-shadow: 0 0 6px rgba(0,0,0,.3); border-color: rgba(0, 0, 0,.3);
} box-shadow: 0 0 6px rgba(0, 0, 0,.3);
}
#header .nav-top-title { /* 定义 id 为 header 下的.nav-top-title 类元素样式，设置行高、字体大小、颜色、背景等 */
line-height: 40px; #header .nav-top-title {
font-size: 20px; line-height: 40px;
color: rgba(255, 255, 255, 1); font-size: 20px;
padding: 0 10px; color: rgba(255, 255, 255, 1);
margin: 0 10px; padding: 0 10px;
border-radius: 6px; margin: 0 10px;
border-width: 0; border-radius: 6px;
border-style: solid; border-width: 0;
border-color: rgba(0,0,0,.3); border-style: solid;
background-color: rgba(0,0,0,0); border-color: rgba(0, 0, 0,.3);
box-shadow: 0 0 0px rgba(0,0,0,.3); background-color: rgba(0, 0, 0, 0);
} box-shadow: 0 0 0px rgba(0, 0, 0,.3);
}
#header .nav-top-tel { /* 定义 id 为 header 下的.nav-top-tel 类元素样式，设置行高、字体大小、颜色、边框等 */
line-height: 40px; #header .nav-top-tel {
font-size: 16px; line-height: 40px;
color: #333; font-size: 16px;
padding: 0 10px; color: #333;
margin: 0; padding: 0 10px;
border-radius: 6px; margin: 0;
border-width: 0; border-radius: 6px;
border-style: solid; border-width: 0;
border-color: rgba(0,0,0,.3); border-style: solid;
box-shadow: 0 0 6px rgba(0,0,0,.3); border-color: rgba(0, 0, 0,.3);
} box-shadow: 0 0 6px rgba(0, 0, 0,.3);
}
#header .navs { /* 定义 id 为 header 下的.navs 类元素样式，弹性布局，设置高度、背景、阴影等 */
display: flex; #header .navs {
padding: 0 20px; display: flex;
align-items: center; padding: 0 20px;
box-sizing: border-box; align-items: center;
height: 64px; box-sizing: border-box;
background: #F2F2F2; height: 64px;
box-shadow: 0 1px 6px rgba(0,0,0,0); background: #F2F2F2;
justify-content: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
} justify-content: center;
#header .navs1 { }
width: 200px; /* 定义 id 为 header 下的.navs1 类元素样式，设置宽度、高度、背景、定位等 */
height: 100vh; #header .navs1 {
background: darkgoldenrod; width: 200px;
position: absolute; height: 100vh;
top: 0; background: darkgoldenrod;
display: block; position: absolute;
padding: 0; top: 0;
overflow-y: scroll; display: block;
scrollbar-width: none; padding: 0;
-ms-overflow-style: none; overflow-y: scroll;
} scrollbar-width: none;
-ms-overflow-style: none;
}
#header .navs.navs1::-webkit-scrollbar { /* 隐藏 id 为 header 下的.navs1 类元素的滚动条（webkit 内核浏览器） */
display: none; #header .navs.navs1::-webkit-scrollbar {
} display: none;
}
#header .navs1 .list {
display: flex;
flex-direction: column;
}
#header .navs .title {
width: auto;
line-height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
margin: 0 5px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(0,0,0,0);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .navs li {
display: inline-block;
width: auto;
line-height: 34px;
padding: 0 20px;
margin: 0 5px;
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(143, 143, 143, 1);
background-color: rgba(217, 217, 217, 1);
box-shadow: 0 0 0px rgba(0,0,0,.1);
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
#header .navs li a{
color: inherit;
}
#header .navs li.current a{
color: inherit;
}
#header .navs li a:hover{
color: inherit;
}
#header .navs li.current {
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(213, 169, 122, 1);
background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(255,0,0,.8);
}
#header .navs li:hover {
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(213, 169, 122, 1);
background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(0,0,0,.3);
}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
<div v-if='true' class="nav-top">
<img v-if='false' class="nav-top-img" src='http://codegen.caihongy.cn/20220207/32e8fb282bd04ae883c7a780558e97f8.png'>
<div v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<div class="title" v-if="false" v-text="projectName"></div>
<div class="list">
<ul>
<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
</ul>
</div>
</div>
</div>
<!-- end 顶部导航栏 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe> /* 定义 id 为 header 下的.navs1 类元素下的.list 类元素样式，设置为弹性列布局 */
#header .navs1 .list {
display: flex;
flex-direction: column;
}
<script src="./xznstatic/js/jquery-1.11.3.min.js"></script> /* 定义 id 为 header 下的.navs 类元素下的.title 类元素样式，设置行高、字体大小、颜色、边框等 */
<script src="./layui/layui.js"></script> #header .navs .title {
<script src="./js/vue.js"></script> width: auto;
<script src="./js/config.js"></script> line-height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
margin: 0 5px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0,.3);
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 6px rgba(0, 0, 0, 0);
}
<script> /* 定义 id 为 header 下的.navs 类元素下的 li 元素样式，设置为行内块元素，设置行高、颜色、字体大小、边框等 */
var vue1 = new Vue({el: '#tabbar'}) #header .navs li {
display: inline-block;
width: auto;
line-height: 34px;
padding: 0 20px;
margin: 0 5px;
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(143, 143, 143, 1);
background-color: rgba(217, 217, 217, 1);
box-shadow: 0 0 0px rgba(0, 0, 0,.1);
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
var vue = new Vue({ /* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素样式，设置颜色继承 */
el: '#header', #header .navs li a {
data: { color: inherit;
iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'], }
indexNav: indexNav,
cartFlag: cartFlag,
adminurl: adminurl,
chatFlag: chatFlag,
projectName: projectName,
},
mounted: function() {
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
})
},
methods: {
jump(url) {
jump(url)
},
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
$(this).addClass("current").siblings().removeClass("current");
localStorage.setItem("checkedLiIndex",$(this).index());
}
}
}
}
});
layui.use(['element','layer'], function() { /* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的 a 元素样式，设置颜色继承 */
var element = layui.element; #header .navs li.current a {
var layer = layui.layer; color: inherit;
}); }
function chatTap(){ /* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素鼠标悬停时的样式，设置颜色继承 */
var userTable = localStorage.getItem('userTable'); #header .navs li a:hover {
if (userTable) { color: inherit;
layui.layer.open({ }
type: 2,
title: '客服',
area: ['600px', '600px'],
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login/login.html'
}
}
// 导航栏跳转 /* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的样式，设置颜色、字体大小、边框等 */
function navPage(url) { #header .navs li.current {
localStorage.setItem('iframeUrl', url); color: rgba(0, 0, 0, 1);
document.getElementById('iframe').src = url; font-size: 16px;
} border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(213, 169, 122, 1);
background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(255, 0, 0,.8);
}
// 跳转到个人中心也 /* 定义 id 为 header 下的.navs 类元素下的 li 元素鼠标悬停时的样式，设置颜色、字体大小、边框等 */
function centerPage() { #header .navs li:hover {
var userTable = localStorage.getItem('userTable'); color: rgba(0, 0, 0, 1);
if (userTable) { font-size: 16px;
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html'); border-radius: 10px;
document.getElementById('iframe').src = './pages/' + userTable + '/center.html'; border-width: 10px 0 0;
} else { border-style: solid;
window.location.href = './pages/login/login.html' border-color: rgba(213, 169, 122, 1);
} background-color: rgba(223, 195, 153, 1);
} box-shadow: 0 0 0px rgba(0, 0, 0,.3);
}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
<!-- 根据条件 v-if 显示或隐藏.nav-top 类元素 -->
<div v-if='true' class="nav-top">
<!-- 根据条件 v-if 显示或隐藏.nav-top-img 类元素 -->
<img v-if='false' class="nav-top-img" src='http://codegen.caihongy.cn/20220207/32e8fb282bd04ae883c7a780558e97f8.png'>
<!-- 根据条件 v-if 显示或隐藏.nav-top-title 类元素，并绑定 Vue 数据 projectName -->
<div v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<!-- 根据条件 v-if 显示或隐藏.title 类元素，并绑定 Vue 数据 projectName -->
<div class="title" v-if="false" v-text="projectName"></div>
<div class="list">
<ul>
<!-- 带有 current 类的 li 元素，表示当前选中项，点击时调用 navPage 函数跳转到指定页面 -->
<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<!-- 循环渲染 li 元素，根据 indexNav 数组的数据生成导航项，点击时调用 navPage 函数跳转到指定页面 -->
<li v-for="(item, index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\'' + item.url + '\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<!-- 点击时调用 centerPage 函数跳转到个人中心页面，根据条件判断是否显示图标 -->
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<!-- 点击时在新窗口打开后台管理页面，根据数据绑定生成 href 属性 -->
<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
</ul>
</div>
</div>
</div>
<!-- end 顶部导航栏 -->
var iframeUrl = localStorage.getItem('iframeUrl'); <!-- 引入一个 iframe 元素，初始加载指定页面，id 为 iframe，无边框，不显示滚动条，宽度 100%，加载完成时调用 changeFrameHeight 函数 -->
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html'; <iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>
let list = document.getElementsByTagName("li"); <!-- 引入 jQuery 库文件 -->
for(var i = 0;i<list.length;i++){ <script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
if(i==localStorage.getItem("checkedLiIndex")) { <!-- 引入 layui 的 JavaScript 文件 -->
$(list[i]).addClass("current").siblings().removeClass("current"); <script src="./layui/layui.js"></script>
} <!-- 引入 Vue 库文件 -->
} <script src="./js/vue.js"></script>
<!-- 引入自定义的 config.js 文件 -->
<script src="./js/config.js"></script>
// var i = 0; <script>
setInterval(function(){ // 创建一个 Vue 实例，绑定到 id 为 tabbar 的元素上（当前代码中未看到该元素，可能是代码不完整）
// i++; var vue1 = new Vue({
// if(i<50) changeFrameHeight(); el: '#tabbar'
changeFrameHeight(); })
},200)
function changeFrameHeight() { // 创建一个 Vue 实例，绑定到 id 为 header 的元素上
var iframe = document.getElementById('iframe'); var vue = new Vue({
// iframe.height = 'auto'; el: '#header',
if (iframe) { data: {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; // 图标类名数组，用于循环渲染图标
if (iframeWin.document.body) { iconArr: ['layui-icon-gift', 'layui-icon-email', 'layui-icon-logout', 'layui-icon-transfer', 'layui-icon-slider', 'layui-icon-print', 'layui-icon-cols', 'layui-icon-snowflake', 'layui-icon-note', 'layui-icon-flag', 'layui-icon-theme', 'layui-icon-website', 'layui-icon-console', 'layui-icon-face-surprised', 'layui-icon-template-1', 'layui-icon-app', 'layui-icon-read', 'layui-icon-component', 'layui-icon-file-b', 'layui-icon-unlink', 'layui-icon-tabs', 'layui-icon-form', 'layui-icon-chat'],
iframe.height = iframeWin.document.body.scrollHeight; // 导航项数据数组，用于循环渲染导航栏的项
} indexNav: indexNav,
} // 购物车标志（未看到具体使用逻辑，可能是代码不完整）
}; cartFlag: cartFlag,
// 后台管理页面的 URL
adminurl: adminurl,
// 聊天标志（未看到具体使用逻辑，可能是代码不完整）
chatFlag: chatFlag,
// 项目名称，用于显示在导航栏
projectName: projectName,
},
mounted: function () {
// 页面挂载完成后，调用 bindClickOnLi 方法绑定 li 元素的点击事件
this.bindClickOnLi();
},
created() {
// 在实例创建时，对 iconArr 数组进行随机排序
this.iconArr.sort(() => {
return (0.5 - Math.random())
})
},
methods: {
// 跳转方法，调用外部的 jump 函数（未看到具体实现，可能是代码不完整）
jump(url) {
jump(url)
},
// 绑定 li 元素点击事件的方法，添加或移除 current 类
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
$(this).addClass("current").siblings().removeClass("current");
localStorage.setItem("checkedLiIndex", $(this).index());
}
}
}
}
});
// 窗口变化时候iframe自适应 // 加载 layui 的 element 和 layer 模块
// function changeFrameHeight() { layui.use(['element', 'layer'], function () {
// var header = document.getElementById('header').scrollHeight; var element = layui.element;
// let isshow = false var layer = layui.layer;
// var tabbar = 0 });
// if(isshow) {
// tabbar = document.getElementById('tabbar').scrollHeight
// }
// var ifm = document.getElementById("iframe");
// ifm.height = document.documentElement.clientHeight - header - tabbar;
// ifm.width = document.documentElement.clientWidth;
// }
// reasize 事件 窗口大小变化后执行的方法 // 聊天点击事件处理函数，根据用户登录状态决定是打开聊天窗口还是跳转到登录页面
window.onresize = function() { function chatTap() {
changeFrameHeight(); var userTable = localStorage.getItem('userTable');
} if (userTable) {
</script> layui.layer.open({
</body> type: 2,
</html> title: '客服',
area: ['600px', '600px'],
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login
Write Preview
Loading…
Cancel
Save