|
|
|
|
@ -1,329 +1,319 @@
|
|
|
|
|
<!-- 首页 -->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>首页</title>
|
|
|
|
|
<link rel="stylesheet" href="./layui/css/layui.css">
|
|
|
|
|
<link rel="stylesheet" href="./xznstatic/css/common.css"/>
|
|
|
|
|
<link rel="stylesheet" href="./xznstatic/css/style.css"/>
|
|
|
|
|
</head>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
html, body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
#iframe {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
padding-top: 64px;
|
|
|
|
|
}
|
|
|
|
|
#header {
|
|
|
|
|
height: auto;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
<head>
|
|
|
|
|
<!-- 设置字符编码为 UTF-8 -->
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<!-- 设置视口，用于响应式布局，宽度等于设备宽度，初始缩放比例为 1，最大缩放比例为 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">
|
|
|
|
|
html, body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 iframe 的元素样式，宽度 100%，上边距 50px，内边距顶部 64px */
|
|
|
|
|
#iframe {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
padding-top: 64px;
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 的元素样式，高度自适应，白色背景，固定定位在顶部，宽度 100%，z 轴层级为 1 */
|
|
|
|
|
#header {
|
|
|
|
|
height: auto;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header .nav-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #2a8a15;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: #CB945C;
|
|
|
|
|
box-shadow: 0 0px 0px rgba(0,0,0,.3);
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.nav-top 类元素样式，弹性布局，水平居中对齐，设置字体大小、颜色等 */
|
|
|
|
|
#header .nav-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #2a8a15;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: #CB945C;
|
|
|
|
|
box-shadow: 0 0px 0px rgba(0, 0, 0,.3);
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header .nav-top-img {
|
|
|
|
|
width: 124px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.nav-top-img 类元素样式，设置宽度、高度、边框等 */
|
|
|
|
|
#header .nav-top-img {
|
|
|
|
|
width: 124px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header .nav-top-title {
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header .nav-top-tel {
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #333;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.nav-top-title 类元素样式，设置行高、字体大小、颜色、背景等 */
|
|
|
|
|
#header .nav-top-title {
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header .navs {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 64px;
|
|
|
|
|
background: #F2F2F2;
|
|
|
|
|
box-shadow: 0 1px 6px rgba(0,0,0,0);
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
#header .navs1 {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: darkgoldenrod;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
-ms-overflow-style: 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 顶部导航栏 -->
|
|
|
|
|
/* 定义 id 为 header 下的.nav-top-tel 类元素样式，设置行高、字体大小、颜色、边框等 */
|
|
|
|
|
#header .nav-top-tel {
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #333;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素样式，弹性布局，设置高度、背景、阴影等 */
|
|
|
|
|
#header .navs {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 64px;
|
|
|
|
|
background: #F2F2F2;
|
|
|
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.navs1 类元素样式，设置宽度、高度、背景、定位等 */
|
|
|
|
|
#header .navs1 {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: darkgoldenrod;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
/* 隐藏 id 为 header 下的.navs1 类元素的滚动条（webkit 内核浏览器） */
|
|
|
|
|
#header .navs.navs1::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var vue1 = new Vue({el: '#tabbar'})
|
|
|
|
|
/* 定义 id 为 header 下的.navs1 类元素下的.list 类元素样式，设置为弹性列布局 */
|
|
|
|
|
#header .navs1 .list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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'],
|
|
|
|
|
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());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的.title 类元素样式，设置行高、字体大小、颜色、边框等 */
|
|
|
|
|
#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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
layui.use(['element','layer'], function() {
|
|
|
|
|
var element = layui.element;
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
});
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的 li 元素样式，设置为行内块元素，设置行高、颜色、字体大小、边框等 */
|
|
|
|
|
#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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function chatTap(){
|
|
|
|
|
var userTable = localStorage.getItem('userTable');
|
|
|
|
|
if (userTable) {
|
|
|
|
|
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 元素内的 a 元素样式，设置颜色继承 */
|
|
|
|
|
#header .navs li a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 导航栏跳转
|
|
|
|
|
function navPage(url) {
|
|
|
|
|
localStorage.setItem('iframeUrl', url);
|
|
|
|
|
document.getElementById('iframe').src = url;
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的 a 元素样式，设置颜色继承 */
|
|
|
|
|
#header .navs li.current a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 跳转到个人中心也
|
|
|
|
|
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'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的 li 元素内的 a 元素鼠标悬停时的样式，设置颜色继承 */
|
|
|
|
|
#header .navs li a:hover {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var iframeUrl = localStorage.getItem('iframeUrl');
|
|
|
|
|
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的 li 元素带有 current 类时的样式，设置颜色、字体大小、边框等 */
|
|
|
|
|
#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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* 定义 id 为 header 下的.navs 类元素下的 li 元素鼠标悬停时的样式，设置颜色、字体大小、边框等 */
|
|
|
|
|
#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">
|
|
|
|
|
<!-- 根据条件 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 i = 0;
|
|
|
|
|
setInterval(function(){
|
|
|
|
|
// i++;
|
|
|
|
|
// if(i<50) changeFrameHeight();
|
|
|
|
|
changeFrameHeight();
|
|
|
|
|
},200)
|
|
|
|
|
<!-- 引入一个 iframe 元素，初始加载指定页面，id 为 iframe，无边框，不显示滚动条，宽度 100%，加载完成时调用 changeFrameHeight 函数 -->
|
|
|
|
|
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
<!-- 引入 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>
|
|
|
|
|
|
|
|
|
|
// 窗口变化时候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;
|
|
|
|
|
// }
|
|
|
|
|
<script>
|
|
|
|
|
// 创建一个 Vue 实例，绑定到 id 为 tabbar 的元素上（当前代码中未看到该元素，可能是代码不完整）
|
|
|
|
|
var vue1 = new Vue({
|
|
|
|
|
el: '#tabbar'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// reasize 事件 窗口大小变化后执行的方法
|
|
|
|
|
window.onresize = function() {
|
|
|
|
|
changeFrameHeight();
|
|
|
|
|
// 创建一个 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'],
|
|
|
|
|
// 导航项数据数组，用于循环渲染导航栏的项
|
|
|
|
|
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());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 加载 layui 的 element 和 layer 模块
|
|
|
|
|
layui.use(['element', 'layer'], function () {
|
|
|
|
|
var element = layui.element;
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 聊天点击事件处理函数，根据用户登录状态决定是打开聊天窗口还是跳转到登录页面
|
|
|
|
|
function chatTap() {
|
|
|
|
|
var userTable = localStorage.getItem('userTable');
|
|
|
|
|
if (userTable) {
|
|
|
|
|
layui.layer.open({
|
|
|
|
|
type: 2,
|
|
|
|
|
title: '客服',
|
|
|
|
|
area: ['600px', '600px'],
|
|
|
|
|
content: './pages/chat/chat.html'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
window.location.href = './pages/login
|
