<template>
|
<div class="showIndexTitle-wrap">
|
<h1 class="title">石家庄人社局业务运行数据分析平台</h1>
|
<el-menu :default-active="$route.path" router mode="horizontal" class="el-menu-demo">
|
<div class="showIndex-left">
|
<el-menu-item index="/index">
|
<div class="showIndex-block">
|
<h1>首页</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/jiuyeAndChuangye">
|
<div class="showIndex-block">
|
<h1>就业创业</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/shehuiBaozhang">
|
<div class="showIndex-block">
|
<h1>社会保障</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>人事人才</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>劳动关系</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>其它业务</h1>
|
</div>
|
</el-menu-item>
|
|
</div>
|
<div class="showIndex-right">
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>营商政策</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>通讯录</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>工作周报</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>文档中心</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item>
|
<div class="showIndex-block">
|
<h1>退出登录</h1>
|
</div>
|
</el-menu-item>
|
</div>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "showIndexTitle"
|
}
|
</script>
|
|
<style lang="scss">
|
.showIndexTitle-wrap{
|
.el-menu-item:focus, .el-menu-item:hover{
|
background-color:transparent;
|
}
|
/*.el-menu-item:focus{*/
|
/* background:url("../../assets/images/menu-active.png") no-repeat center;*/
|
/* background-size: 100% 100%;*/
|
/* width: 12.8rem !* 128/10 *!;*/
|
/* height: 5rem;*/
|
/*}*/
|
.el-menu-item.is-active{
|
background:url("../../assets/images/menu-active.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 12.8rem /* 128/10 */;
|
height: 5rem;
|
}
|
.el-menu-item{
|
background:url("../../assets/images/menu-normal.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 12.8rem /* 128/10 */;
|
height: 5rem;
|
margin-right: 1.2rem /* 12/10 */;
|
}
|
.el-menu.el-menu--horizontal{
|
border-bottom: 0;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
.showIndexTitle-wrap{
|
width: 100%;
|
height: 9rem /* 90/10 */;
|
background:url("../../assets/images/jiashicang-title-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
.title{
|
font-size: 3rem /* 30/10 */;
|
font-family: 'Source Han Sans CN';
|
color: #fff;
|
text-align: center;
|
line-height: 7rem /* 70/10 */;
|
}
|
.showIndex-left{
|
position: absolute;
|
left:1rem /* 10/10 */;
|
top: -5rem /* 10/10 */;
|
display: flex;
|
.showIndex-block{
|
/*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
|
/*background-size: 100% 100%;*/
|
/*width: 12.8rem !* 128/10 *!;*/
|
/*height: 5rem;*/
|
h1{
|
color: #fff;
|
font-size: 2.4rem;
|
text-align: center;
|
line-height: 5rem;
|
}
|
}
|
}
|
.showIndex-right{
|
position: absolute;
|
right:1rem /* 10/10 */;
|
top: -5rem /* 10/10 */;
|
display: flex;
|
.showIndex-block{
|
/*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
|
/*background-size: 100% 100%;*/
|
/*width: 12.8rem !* 128/10 *!;*/
|
/*height: 5rem;*/
|
/*cursor: pointer;*/
|
h1{
|
color: #fff;
|
font-size: 2.4rem;
|
text-align: center;
|
line-height: 5rem;
|
}
|
}
|
.menu-active{
|
|
}
|
}
|
}
|
</style>
|
