@ -1,23 +1,30 @@
<!-- 首页 -->
<!DOCTYPE html>
< html >
< head >
< head >
<!-- 设置字符编码为 UTF - 8 -->
< meta charset = "utf-8" >
<!-- 设置视口，用于响应式布局，宽度等于设备宽度，初始缩放比例为 1， -->
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< title > 首页< / title >
<!-- 引入 layui 的 CSS 样式文件 -->
< link rel = "stylesheet" href = "./layui/css/layui.css" >
<!-- 引入自定义的 common.css 样式文件 -->
< link rel = "stylesheet" href = "./xznstatic/css/common.css" / >
<!-- 引入自定义的 style.css 样式文件 -->
< link rel = "stylesheet" href = "./xznstatic/css/style.css" / >
< / head >
< style type = "text/css" >
< / head >
< style type = "text/css" >
html, body {
height: 100%;
}
/* 定义 id 为 iframe 的元素样式，宽度 100%，上边距 50px，
#iframe {
width: 100%;
margin-top: 50px;
padding-top: 64px;
}
/* 定义 id 为 header 的元素样式，高度自适应，白色背景，固定定位在顶部，宽度 100%，
#header {
height: auto;
background: #fff;
@ -29,6 +36,7 @@
z-index: 1;
}
/* 定义 id 为 header 下的.nav-top 类元素样式，弹性布局，水平居中对齐，设置字体大小、颜色等 */
#header .nav-top {
display: flex;
align-items: center;
@ -38,12 +46,13 @@
box-sizing: border-box;
height: 50px;
background: #CB945C;
box-shadow: 0 0px 0px rgba(0,0,0,.3);
box-shadow: 0 0px 0px rgba(0, 0, 0,.3);
justify-content: center;
position: relative;
z-index: 1;
}
/* 定义 id 为 header 下的.nav-top-img 类元素样式，设置宽度、高度、边框等 */
#header .nav-top-img {
width: 124px;
height: 40px;
@ -52,10 +61,11 @@
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
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);
}
/* 定义 id 为 header 下的.nav-top-title 类元素样式，设置行高、字体大小、颜色、背景等 */
#header .nav-top-title {
line-height: 40px;
font-size: 20px;
@ -65,11 +75,12 @@
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 0px rgba(0,0,0,.3);
border-color: rgba(0, 0, 0,.3);
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0px rgba(0, 0, 0,.3);
}
/* 定义 id 为 header 下的.nav-top-tel 类元素样式，设置行高、字体大小、颜色、边框等 */
#header .nav-top-tel {
line-height: 40px;
font-size: 16px;
@ -79,10 +90,11 @@
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
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);
}
/* 定义 id 为 header 下的.navs 类元素样式，弹性布局，设置高度、背景、阴影等 */
#header .navs {
display: flex;
padding: 0 20px;
@ -90,9 +102,10 @@
box-sizing: border-box;
height: 64px;
background: #F2F2F2;
box-shadow: 0 1px 6px rgba(0,0,0,0);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
justify-content: center;
}
/* 定义 id 为 header 下的.navs1 类元素样式，设置宽度、高度、背景、定位等 */
#header .navs1 {
width: 200px;
height: 100vh;
@ -106,14 +119,18 @@
-ms-overflow-style: none;
}
/* 隐藏 id 为 header 下的.navs1 类元素的滚动条（
#header .navs.navs1::-webkit-scrollbar {
display: none;
}
/* 定义 id 为 header 下的.navs1 类元素下的.list 类元素样式，设置为弹性列布局 */
#header .navs1 .list {
display: flex;
flex-direction: column;
}
/* 定义 id 为 header 下的.navs 类元素下的.title 类元素样式，设置行高、字体大小、颜色、边框等 */
#header .navs .title {
width: auto;
line-height: 40px;
@ -124,10 +141,12 @@
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);
border-color: rgba(0, 0, 0,.3);
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 6px rgba(0, 0, 0, 0);
}
/* 定义 id 为 header 下的.navs 类元素下的 li 元素样式，设置为行内块元素，设置行高、颜色、字体大小、边框等 */
#header .navs li {
display: inline-block;
width: auto;
@ -141,20 +160,28 @@
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);
box-shadow: 0 0 0px rgba(0, 0, 0,.1);
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
#header .navs li a{
/* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素样式，设置颜色继承 */
#header .navs li a {
color: inherit;
}
#header .navs li.current a{
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的 a 元素样式，设置颜色继承 */
#header .navs li.current a {
color: inherit;
}
#header .navs li a:hover{
/* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素鼠标悬停时的样式，设置颜色继承 */
#header .navs li a:hover {
color: inherit;
}
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的样式，设置颜色、字体大小、边框等 */
#header .navs li.current {
color: rgba(0, 0, 0, 1);
font-size: 16px;
@ -163,8 +190,10 @@
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);
box-shadow: 0 0 0px rgba(255, 0, 0,.8);
}
/* 定义 id 为 header 下的.navs 类元素下的 li 元素鼠标悬停时的样式，设置颜色、字体大小、边框等 */
#header .navs li:hover {
color: rgba(0, 0, 0, 1);
font-size: 16px;
@ -173,82 +202,111 @@
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);
box-shadow: 0 0 0px rgba(0, 0, 0,.3);
}
< / style >
< body >
<!-- start 顶部导航栏 -->
< div id = "header" >
< / 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 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 元素，根据 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 顶部导航栏 -->
< / div >
<!-- end 顶部导航栏 -->
< iframe src = "./pages/home/home.html" id = "iframe" frameborder = "0" scrolling = "no" width = "100%" onload = "changeFrameHeight" > < / iframe >
<!-- 引入一个 iframe 元素， ， ， ， ， -->
< iframe src = "./pages/home/home.html" id = "iframe" frameborder = "0" scrolling = "no" width = "100%" onload = "changeFrameHeight" > < / iframe >
< script src = "./xznstatic/js/jquery-1.11.3.min.js" > < / script >
< script src = "./layui/layui.js" > < / script >
< script src = "./js/vue.js" > < / script >
< script src = "./js/config.js" > < / script >
<!-- 引入 jQuery 库文件 -->
< script src = "./xznstatic/js/jquery-1.11.3.min.js" > < / script >
<!-- 引入 layui 的 JavaScript 文件 -->
< script src = "./layui/layui.js" > < / script >
<!-- 引入 Vue 库文件 -->
< script src = "./js/vue.js" > < / script >
<!-- 引入自定义的 config.js 文件 -->
< script src = "./js/config.js" > < / script >
< script >
var vue1 = new Vue({el: '#tabbar'})
< script >
// 创建一个 Vue 实例，绑定到 id 为 tabbar 的元素上（当前代码中未看到该元素，可能是代码不完整）
var vue1 = new Vue({
el: '#tabbar'
})
// 创建一个 Vue 实例，绑定到 id 为 header 的元素上
var vue = new Vue({
el: '#header',
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,
// 购物车标志（未看到具体使用逻辑，可能是代码不完整）
cartFlag: cartFlag,
// 后台管理页面的 URL
adminurl: adminurl,
// 聊天标志（未看到具体使用逻辑，可能是代码不完整）
chatFlag: chatFlag,
// 项目名称，用于显示在导航栏
projectName: projectName,
},
mounted: function() {
mounted: function () {
// 页面挂载完成后，调用 bindClickOnLi 方法绑定 li 元素的点击事件
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
// 在实例创建时，对 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(){
for (var i = 0; i < list.length ; i + + ) {
list[i].onclick = function () {
$(this).addClass("current").siblings().removeClass("current");
localStorage.setItem("checkedLiIndex", $(this).index());
localStorage.setItem("checkedLiIndex", $(this).index());
}
}
}
}
});
layui.use(['element','layer'], function() {
// 加载 layui 的 element 和 layer 模块
layui.use(['element', 'layer'], function () {
var element = layui.element;
var layer = layui.layer;
});
function chatTap(){
// 聊天点击事件处理函数，根据用户登录状态决定是打开聊天窗口还是跳转到登录页面
function chatTap() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
layui.layer.open({
@ -258,72 +316,4 @@
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login/login.html'
}
}
// 导航栏跳转
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 >
window.location.href = './pages/login
