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

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

@ -2,22 +2,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- 设置字符编码为 UTF-8 -->
<meta charset="utf-8"> <meta charset="utf-8">
<!-- 设置视口，用于响应式布局，宽度等于设备宽度，初始缩放比例为 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">
<title>首页</title> <title>首页</title>
<!-- 引入 layui 的 CSS 样式文件 -->
<link rel="stylesheet" href="./layui/css/layui.css"> <link rel="stylesheet" href="./layui/css/layui.css">
<!-- 引入自定义的 common.css 样式文件 -->
<link rel="stylesheet" href="./xznstatic/css/common.css"/> <link rel="stylesheet" href="./xznstatic/css/common.css"/>
<!-- 引入自定义的 style.css 样式文件 -->
<link rel="stylesheet" href="./xznstatic/css/style.css"/> <link rel="stylesheet" href="./xznstatic/css/style.css"/>
</head> </head>
<style type="text/css"> <style type="text/css">
html, body { html, body {
height: 100%; height: 100%;
} }
/* 定义 id 为 iframe 的元素样式，宽度 100%，上边距 50px，内边距顶部 64px */
#iframe { #iframe {
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
padding-top: 64px; padding-top: 64px;
} }
/* 定义 id 为 header 的元素样式，高度自适应，白色背景，固定定位在顶部，宽度 100%，z 轴层级为 1 */
#header { #header {
height: auto; height: auto;
background: #fff; background: #fff;
@ -29,6 +36,7 @@
z-index: 1; z-index: 1;
} }
/* 定义 id 为 header 下的.nav-top 类元素样式，弹性布局，水平居中对齐，设置字体大小、颜色等 */
#header .nav-top { #header .nav-top {
display: flex; display: flex;
align-items: center; align-items: center;
@ -44,6 +52,7 @@
z-index: 1; z-index: 1;
} }
/* 定义 id 为 header 下的.nav-top-img 类元素样式，设置宽度、高度、边框等 */
#header .nav-top-img { #header .nav-top-img {
width: 124px; width: 124px;
height: 40px; height: 40px;
@ -56,6 +65,7 @@
box-shadow: 0 0 6px rgba(0, 0, 0,.3); box-shadow: 0 0 6px rgba(0, 0, 0,.3);
} }
/* 定义 id 为 header 下的.nav-top-title 类元素样式，设置行高、字体大小、颜色、背景等 */
#header .nav-top-title { #header .nav-top-title {
line-height: 40px; line-height: 40px;
font-size: 20px; font-size: 20px;
@ -70,6 +80,7 @@
box-shadow: 0 0 0px rgba(0, 0, 0,.3); box-shadow: 0 0 0px rgba(0, 0, 0,.3);
} }
/* 定义 id 为 header 下的.nav-top-tel 类元素样式，设置行高、字体大小、颜色、边框等 */
#header .nav-top-tel { #header .nav-top-tel {
line-height: 40px; line-height: 40px;
font-size: 16px; font-size: 16px;
@ -83,6 +94,7 @@
box-shadow: 0 0 6px rgba(0, 0, 0,.3); box-shadow: 0 0 6px rgba(0, 0, 0,.3);
} }
/* 定义 id 为 header 下的.navs 类元素样式，弹性布局，设置高度、背景、阴影等 */
#header .navs { #header .navs {
display: flex; display: flex;
padding: 0 20px; padding: 0 20px;
@ -93,6 +105,7 @@
box-shadow: 0 1px 6px rgba(0, 0, 0, 0); box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
justify-content: center; justify-content: center;
} }
/* 定义 id 为 header 下的.navs1 类元素样式，设置宽度、高度、背景、定位等 */
#header .navs1 { #header .navs1 {
width: 200px; width: 200px;
height: 100vh; height: 100vh;
@ -106,14 +119,18 @@
-ms-overflow-style: none; -ms-overflow-style: none;
} }
/* 隐藏 id 为 header 下的.navs1 类元素的滚动条（webkit 内核浏览器） */
#header .navs.navs1::-webkit-scrollbar { #header .navs.navs1::-webkit-scrollbar {
display: none; display: none;
} }
/* 定义 id 为 header 下的.navs1 类元素下的.list 类元素样式，设置为弹性列布局 */
#header .navs1 .list { #header .navs1 .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 定义 id 为 header 下的.navs 类元素下的.title 类元素样式，设置行高、字体大小、颜色、边框等 */
#header .navs .title { #header .navs .title {
width: auto; width: auto;
line-height: 40px; line-height: 40px;
@ -128,6 +145,8 @@
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 6px rgba(0, 0, 0, 0); box-shadow: 0 0 6px rgba(0, 0, 0, 0);
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素样式，设置为行内块元素，设置行高、颜色、字体大小、边框等 */
#header .navs li { #header .navs li {
display: inline-block; display: inline-block;
width: auto; width: auto;
@ -146,15 +165,23 @@
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素样式，设置颜色继承 */
#header .navs li a { #header .navs li a {
color: inherit; color: inherit;
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的 a 元素样式，设置颜色继承 */
#header .navs li.current a { #header .navs li.current a {
color: inherit; color: inherit;
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素鼠标悬停时的样式，设置颜色继承 */
#header .navs li a:hover { #header .navs li a:hover {
color: inherit; color: inherit;
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的样式，设置颜色、字体大小、边框等 */
#header .navs li.current { #header .navs li.current {
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
font-size: 16px; font-size: 16px;
@ -165,6 +192,8 @@
background-color: rgba(223, 195, 153, 1); background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(255, 0, 0,.8); box-shadow: 0 0 0px rgba(255, 0, 0,.8);
} }
/* 定义 id 为 header 下的.navs 类元素下的 li 元素鼠标悬停时的样式，设置颜色、字体大小、边框等 */
#header .navs li:hover { #header .navs li:hover {
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
font-size: 16px; font-size: 16px;
@ -179,19 +208,27 @@
<body> <body>
<!-- start 顶部导航栏 --> <!-- start 顶部导航栏 -->
<div id="header"> <div id="header">
<!-- 根据条件 v-if 显示或隐藏.nav-top 类元素 -->
<div v-if='true' class="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'> <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 v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div> <div class="nav-top-tel"></div>
</div> </div>
<div class="navs"> <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="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="title" v-if="false" v-text="projectName"></div>
<div class="list"> <div class="list">
<ul> <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 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> <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> <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> <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> </ul>
</div> </div>
@ -199,38 +236,57 @@
</div> </div>
<!-- end 顶部导航栏 --> <!-- end 顶部导航栏 -->
<!-- 引入一个 iframe 元素，初始加载指定页面，id 为 iframe，无边框，不显示滚动条，宽度 100%，加载完成时调用 changeFrameHeight 函数 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe> <iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>
<!-- 引入 jQuery 库文件 -->
<script src="./xznstatic/js/jquery-1.11.3.min.js"></script> <script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入 layui 的 JavaScript 文件 -->
<script src="./layui/layui.js"></script> <script src="./layui/layui.js"></script>
<!-- 引入 Vue 库文件 -->
<script src="./js/vue.js"></script> <script src="./js/vue.js"></script>
<!-- 引入自定义的 config.js 文件 -->
<script src="./js/config.js"></script> <script src="./js/config.js"></script>
<script> <script>
var vue1 = new Vue({el: '#tabbar'}) // 创建一个 Vue 实例，绑定到 id 为 tabbar 的元素上（当前代码中未看到该元素，可能是代码不完整）
var vue1 = new Vue({
el: '#tabbar'
})
// 创建一个 Vue 实例，绑定到 id 为 header 的元素上
var vue = new Vue({ var vue = new Vue({
el: '#header', el: '#header',
data: { data: {
// 图标类名数组，用于循环渲染图标
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'], 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, indexNav: indexNav,
// 购物车标志（未看到具体使用逻辑，可能是代码不完整）
cartFlag: cartFlag, cartFlag: cartFlag,
// 后台管理页面的 URL
adminurl: adminurl, adminurl: adminurl,
// 聊天标志（未看到具体使用逻辑，可能是代码不完整）
chatFlag: chatFlag, chatFlag: chatFlag,
// 项目名称，用于显示在导航栏
projectName: projectName, projectName: projectName,
}, },
mounted: function () { mounted: function () {
// 页面挂载完成后，调用 bindClickOnLi 方法绑定 li 元素的点击事件
this.bindClickOnLi(); this.bindClickOnLi();
}, },
created() { created() {
// 在实例创建时，对 iconArr 数组进行随机排序
this.iconArr.sort(() => { this.iconArr.sort(() => {
return (0.5 - Math.random()) return (0.5 - Math.random())
}) })
}, },
methods: { methods: {
// 跳转方法，调用外部的 jump 函数（未看到具体实现，可能是代码不完整）
jump(url) { jump(url) {
jump(url) jump(url)
}, },
// 绑定 li 元素点击事件的方法，添加或移除 current 类
bindClickOnLi() { bindClickOnLi() {
let list = document.getElementsByTagName("li"); let list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) { for (var i = 0; i < list.length; i++) {
@ -243,11 +299,13 @@
} }
}); });
// 加载 layui 的 element 和 layer 模块
layui.use(['element', 'layer'], function () { layui.use(['element', 'layer'], function () {
var element = layui.element; var element = layui.element;
var layer = layui.layer; var layer = layui.layer;
}); });
// 聊天点击事件处理函数，根据用户登录状态决定是打开聊天窗口还是跳转到登录页面
function chatTap() { function chatTap() {
var userTable = localStorage.getItem('userTable'); var userTable = localStorage.getItem('userTable');
if (userTable) { if (userTable) {
@ -258,72 +316,4 @@
content: './pages/chat/chat.html' content: './pages/chat/chat.html'
}); });
} else { } else {
window.location.href = './pages/login/login.html' window.location.href = './pages/login
}
}
// 导航栏跳转
function navPage(url) {
localStorage.setItem('iframeUrl', url);
document.getElementById('iframe').src = url;
}
// 跳转到个人中心也
function centerPage() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
} else {
window.location.href = './pages/login/login.html'
}
}
var iframeUrl = localStorage.getItem('iframeUrl');
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
if(i==localStorage.getItem("checkedLiIndex")) {
$(list[i]).addClass("current").siblings().removeClass("current");
}
}
// var i = 0;
setInterval(function(){
// i++;
// if(i<50) changeFrameHeight();
changeFrameHeight();
},200)
function changeFrameHeight() {
var iframe = document.getElementById('iframe');
// iframe.height = 'auto';
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
// 窗口变化时候iframe自适应
// function changeFrameHeight() {
// var header = document.getElementById('header').scrollHeight;
// let isshow = false
// 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() {
changeFrameHeight();
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save