<template>
|
<div class="showIndexTitle-wrap">
|
<div class="daping-header">
|
<h1>综合行政执法局智慧执法办案平台</h1>
|
<img @click="backBtn" class="back-box" src="../../../assets/images/backImg.png" alt="">
|
<div class="showIndexTitle-menu-box">
|
<el-menu :default-active="$route.path" router mode="horizontal" class="el-menu-demo" @select="handleSelect">
|
<div class="showIndexTitle-menu menu-left">
|
<el-menu-item index="/show">
|
<div>
|
调度指挥
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/caseAnalysis">
|
<div>
|
案件分析
|
</div>
|
<!--<div class="menu__item__box">
|
<div class="menu__item__up">案件分析</div>
|
<!–<div class="menu__item__down">案件分析</div>–>
|
</div>-->
|
</el-menu-item>
|
</div>
|
<div class="showIndexTitle-menu menu-right">
|
<el-menu-item index="/lawTeam">
|
<div>
|
执法队伍
|
</div>
|
<!--<div class="menu__item__box">
|
<div class="menu__item__up">执法队伍</div>
|
<!–<div class="menu__item__down">案件分析</div>–>
|
</div>-->
|
</el-menu-item>
|
</div>
|
</el-menu>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "showIndexTitle",
|
methods: {
|
handleSelect(val) {
|
console.log(val)
|
this.$router.push({
|
path: 'val'
|
})
|
},
|
backBtn() {
|
this.$router.push({
|
path: '/wel'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.showIndexTitle-menu-box{
|
.el-menu.el-menu--horizontal{
|
border-bottom:none;
|
}
|
.el-menu-item{
|
color: #2DE2FF;
|
font-size: 0.0625rem /* 16/256 */;
|
font-weight: 400;
|
text-align: center;
|
opacity: 1;
|
/*transition: border-color .3s,color .3s;*/
|
transition: none!important;
|
height:0.140625rem /* 36/256 */;
|
line-height:0.140625rem /* 36/256 */;
|
div{
|
height:0.140625rem /* 36/256 */;
|
line-height:0.140625rem /* 36/256 */;
|
width: 0.62890625rem /* 161/256 */;
|
background:url("../../../assets/images/menu-bj-normal.png") no-repeat center;
|
background-size: 100% 100%;
|
animation: color .3s;
|
}
|
}
|
.el-menu-item.is-active{
|
opacity: 1;
|
height:0.140625rem /* 36/256 */;
|
line-height:0.140625rem /* 36/256 */;
|
div{
|
color: #094373;
|
height:0.140625rem /* 36/256 */;
|
line-height:0.140625rem /* 36/256 */;
|
width: 0.62890625rem /* 161/256 */;
|
background:url("../../../assets/images/menu-bj-active.png") no-repeat center;
|
background-size: 100% 100%;
|
animation: opacity .6s;
|
}
|
/*&:before{
|
content: '';
|
background: url('../../../assets/images/arrow.png') no-repeat center;
|
background-size: 100% 100%;
|
width: 0.0833rem !* 16/192 *!;
|
height: 0.0417rem !* 8/192 *!;
|
position: absolute;
|
bottom: -0.03125rem !* -6/192 *!;
|
left: 50%;
|
transform: translateX(-50%);
|
}*/
|
}
|
.el-menu-item:focus, .el-menu-item:hover{
|
background:transparent;
|
}
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
|
color:#fff;
|
opacity: 1;
|
}
|
}
|
@keyframes opacity{
|
0%{
|
opacity: 0;
|
}
|
100%{
|
opacity: 1;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.daping-header{
|
width: 100%;
|
height: 0.3125rem /* 60/192 */;
|
background: url("../../../assets/images/showIndex-header-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
.back-box{
|
position: absolute;
|
left: 0.1302rem /* 25/192 */;
|
top: 0.0625rem /* 12/192 */;
|
cursor: pointer;
|
z-index: 999;
|
}
|
h1{
|
font-size: 0.1042rem /* 20/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: center;
|
color: #ffffff;
|
line-height: 0.1146rem /* 22/192 */;
|
text-align: center;
|
}
|
.showIndexTitle-menu{
|
display: flex;
|
}
|
.showIndexTitle-menu-box{
|
position: absolute;
|
top: 0;
|
width: 100%;
|
}
|
.el-menu-demo{
|
width: 100%;
|
height: 0.25rem /* 64/256 */;
|
position: relative;
|
}
|
.menu-left{
|
position: absolute;
|
left: 1.71875rem /* 330/192 */;
|
bottom: 0;
|
}
|
.menu-right{
|
position: absolute;
|
right: 1.71875rem /* 330/192 */;
|
bottom: 0;
|
}
|
}
|
.menu__item__block{
|
/*width: 130px;*/
|
/*height: 34px;*/
|
/*background:url("../../../assets/images/menu-bj-active.png") no-repeat center;*/
|
/*background-size: 100% 100%;*/
|
}
|
/*.menu-acitive{*/
|
/* background:url("../../../assets/images/menu-bj-normal.png") no-repeat center;*/
|
/*}*/
|
/*.menu__item__box{*/
|
/* width: 100%;*/
|
/* height: 100%;*/
|
/* position: relative;*/
|
/* transition: all .3s;*/
|
/*}*/
|
/*.menu__item__box:hover{
|
transform: rotateX(90deg);
|
}
|
.menu__item__up,.menu__item__down{
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.menu__item__up{
|
background: #0D528A;
|
transform: translateZ(17.5px);
|
}
|
.menu__item__down{
|
background: #2DE2FF;
|
transform: translateY(17.5px) rotateX(-90deg);
|
}*/
|
</style>
|
