You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
489 lines
12 KiB
489 lines
12 KiB
<template>
|
|
<div class="mainHD">
|
|
<!-- 首页导航样式 -->
|
|
<div v-if="menu_box_show" class="top_box">
|
|
<div class="topHeader">
|
|
<!-- 首页标题 -->
|
|
<div class="safe_title" @mouseenter="handle_mouse_enter">
|
|
<div class="iconbg">
|
|
<img
|
|
src="../assets/companyFile/police.png"
|
|
style="width: 60px; height: 60px"
|
|
/>
|
|
</div>
|
|
<div class="headText">镇海平安企业（园区）</div>
|
|
</div>
|
|
<div class="jingGuan">
|
|
<div class="jgtx" @click="check_user">
|
|
<img src="../assets/companyFile/12110.png" />
|
|
</div>
|
|
王警官
|
|
</div>
|
|
<div class="user_box" v-show="user_show">
|
|
<div class="user_box_body">
|
|
<!-- 用户个人中心 -->
|
|
<div class="user_center">修改密码</div>
|
|
<!-- 用户退出登录 -->
|
|
<div class="user_check_login" @click="logout">退出登录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu_box" v-show="menu_show">
|
|
<div class="menu_item">
|
|
<el-menu
|
|
:default-active="activeIndex"
|
|
class="el-menu-demo topMenu"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
:router="true"
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="1" route="/home/safetyIndex"
|
|
>综合指数</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="6"
|
|
route="/home/applySupermarket"
|
|
@click="menu_change"
|
|
>安商惠企</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="2"
|
|
route="/home/realtimeWarning"
|
|
@click="menu_change"
|
|
>实时预警</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="3"
|
|
route="/home/closeLoopDispose"
|
|
@click="menu_change"
|
|
>闭环处置</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="4"
|
|
route="/home/factorResources"
|
|
@click="menu_change"
|
|
>要素资源</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="5"
|
|
route="/home/enterpriseArchives"
|
|
@click="menu_change"
|
|
>企业档案</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="7"
|
|
route="/home/systemManagement/safeIndex"
|
|
@click="menu_change"
|
|
>系统管理</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 旧版导航样式 -->
|
|
<div v-else class="topHeader">
|
|
<div class="iconbg">
|
|
<img
|
|
src="../assets/companyFile/police.png"
|
|
style="width: 60px; height: 60px"
|
|
/>
|
|
</div>
|
|
<div class="headText">镇海平安企业（园区）</div>
|
|
<el-menu
|
|
:default-active="activeIndex"
|
|
class="el-menu-demo topMenu"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
:router="true"
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item
|
|
index="1"
|
|
route="/home/safetyIndex"
|
|
@click="menu_first_change"
|
|
>综合指数</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="6" route="/home/applySupermarket"
|
|
>安商惠企</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="2" route="/home/realtimeWarning"
|
|
>实时预警</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="3" route="/home/closeLoopDispose"
|
|
>闭环处置</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="4" route="/home/factorResources"
|
|
>要素资源</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="5" route="/home/enterpriseArchives"
|
|
>企业档案</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
<el-menu-item index="7" route="/home/systemManagement/safeIndex"
|
|
>系统管理</el-menu-item
|
|
>
|
|
<div class="shu"></div>
|
|
</el-menu>
|
|
<div class="jingGuan">
|
|
<div class="jgtx" @click="check_user">
|
|
<img src="../assets/companyFile/12110.png" />
|
|
</div>
|
|
王警官
|
|
</div>
|
|
<div class="user_box" v-show="user_show">
|
|
<div class="user_box_body">
|
|
<!-- 用户个人中心 -->
|
|
<div class="user_center">修改密码</div>
|
|
<!-- 用户退出登录 -->
|
|
<div class="user_check_login" @click="logout">退出登录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<router-view />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Head",
|
|
data() {
|
|
return {
|
|
activeIndex: "1",
|
|
activeIndex2: "1",
|
|
user_show: false,
|
|
menu_show: false,
|
|
menu_box_show: true,
|
|
};
|
|
},
|
|
created() {
|
|
this.activeIndex = sessionStorage.getItem("activeIndex")
|
|
? sessionStorage.getItem("activeIndex")
|
|
: "1";
|
|
},
|
|
methods: {
|
|
handleSelect(key) {
|
|
sessionStorage.setItem("activeIndex", key);
|
|
},
|
|
// 点击显示退出登录界面
|
|
check_user() {
|
|
if (this.user_show) {
|
|
this.user_show = false;
|
|
} else {
|
|
this.user_show = true;
|
|
}
|
|
},
|
|
// 鼠标移入出现头部导航
|
|
handle_mouse_enter() {
|
|
this.menu_show = true;
|
|
},
|
|
// 退出登录
|
|
logout() {
|
|
// 清空token
|
|
window.sessionStorage.clear();
|
|
// 跳转到登录页
|
|
this.$router.push("/login");
|
|
},
|
|
// 综合指数点击切换新版导航
|
|
menu_first_change() {
|
|
this.menu_box_show = true;
|
|
},
|
|
// 新版切换回旧版导航
|
|
menu_change() {
|
|
this.menu_box_show = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mainHD {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.topHeader {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url("~@/assets/companyFile/导航栏上.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.iconbg {
|
|
height: 35px;
|
|
width: 50px;
|
|
margin: 0 25px;
|
|
// background: url("~@/assets/companyFile/矩形2111.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.img {
|
|
height: 35px;
|
|
width: 50px;
|
|
}
|
|
}
|
|
.safe_title {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
.headText {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 38px;
|
|
color: #edf6ff;
|
|
letter-spacing: 4px;
|
|
text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
|
|
font-weight: 400;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.jingGuan {
|
|
position: absolute;
|
|
right: 30px;
|
|
display: flex;
|
|
color: #edf6ff;
|
|
align-items: center;
|
|
|
|
.jgtx {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url("~@/assets/companyFile/矩形21112222.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
.user_box {
|
|
position: absolute;
|
|
top: 70px;
|
|
right: 10px;
|
|
width: 180px;
|
|
height: 100px;
|
|
// border: 0.1px solid #33cccc;
|
|
padding: 10px;
|
|
background: url("~@/assets/archives/023.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
.user_box_body {
|
|
width: 160px;
|
|
height: 80px;
|
|
// border: 0.1px solid #33cccc;
|
|
}
|
|
.user_center {
|
|
width: 160px;
|
|
height: 40px;
|
|
color: #d9e7ff;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.user_check_login {
|
|
width: 160px;
|
|
height: 40px;
|
|
color: #d9e7ff;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.user_center:hover,
|
|
.user_center:focus {
|
|
text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
|
|
}
|
|
.user_check_login:hover,
|
|
.user_check_login:focus {
|
|
text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
|
|
}
|
|
}
|
|
/deep/.el-menu {
|
|
border: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-menu-item {
|
|
width: 130px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
font-size: 16px;
|
|
color: #d9e7ff;
|
|
letter-spacing: 3px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.shu {
|
|
border-left: 1px solid rgba(217, 231, 255, 0.4);
|
|
width: 0;
|
|
height: 24px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.is-active {
|
|
background: url("~@/assets/companyFile/891772.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/.el-menu {
|
|
border: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-menu-item {
|
|
width: 100px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
font-size: 16px;
|
|
color: #d9e7ff;
|
|
letter-spacing: 3px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.shu {
|
|
border-left: 1px solid rgba(217, 231, 255, 0.4);
|
|
width: 0;
|
|
height: 24px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.is-active {
|
|
background: url("~@/assets/companyFile/891771.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
border: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* 导航盒子 */
|
|
.menu_box {
|
|
width: 100%;
|
|
height: 60px;
|
|
border: 0.1px solid #d9e7ff;
|
|
position: absolute;
|
|
top: 80px;
|
|
z-index: 10;
|
|
.menu_item {
|
|
/deep/.el-menu {
|
|
border: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
width: 1102px;
|
|
margin: 0 auto;
|
|
.el-menu-item {
|
|
width: 130px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
font-size: 16px;
|
|
color: #d9e7ff;
|
|
letter-spacing: 3px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.shu {
|
|
border-left: 1px solid rgba(217, 231, 255, 0.4);
|
|
width: 0;
|
|
height: 24px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.is-active {
|
|
background: url("~@/assets/companyFile/891772.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/.el-menu {
|
|
border: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-menu-item {
|
|
width: 100px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background: url("~@/assets/companyFile/Rectangle Copy 4.png")
|
|
no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
font-size: 16px;
|
|
color: #d9e7ff;
|
|
letter-spacing: 3px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.shu {
|
|
border-left: 1px solid rgba(217, 231, 255, 0.4);
|
|
width: 0;
|
|
height: 24px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.is-active {
|
|
background: url("~@/assets/companyFile/891771.png") no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
border: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |