<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 index="/personnelTalents">
|
<div class="showIndex-block">
|
<h1>人事人才</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/laborRelations">
|
<div class="showIndex-block">
|
<h1>劳动关系</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/otherBusiness">
|
<div class="showIndex-block">
|
<h1>其它业务</h1>
|
</div>
|
</el-menu-item>
|
</div>
|
<div class="showIndex-right">
|
<el-menu-item index="/businessPolicy">
|
<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 index="/login">
|
<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: 0.5rem /* 128/256 */;
|
height: 0.1953125rem /* 50/256 */;
|
}
|
.el-menu-item {
|
background: url("../../assets/images/menu-normal.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 0.5rem /* 128/256 */;
|
height: 0.1953125rem /* 50/256 */;
|
margin-right: 0.046875rem /* 12/256 */;
|
}
|
.el-menu.el-menu--horizontal {
|
border-bottom: 0;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.showIndexTitle-wrap {
|
width: 100%;
|
height: 0.3515625rem /* 90/256 */;
|
background: url("../../assets/images/jiashicang-title-bj.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
.title {
|
font-size: 0.1171875rem /* 30/256 */;
|
//font-family: "Source Han Sans CN";
|
color: #fff;
|
text-align: center;
|
line-height: 0.2734375rem /* 70/256 */;
|
}
|
.showIndex-left {
|
position: absolute;
|
left: 0.0390625rem /* 10/256 */;
|
top: -0.1953125rem /* -50/256 */;
|
display: flex;
|
z-index: 9;
|
.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: 0.09375rem /* 24/256 */;
|
text-align: center;
|
line-height: 0.1953125rem /* 50/256 */;
|
}
|
}
|
}
|
.showIndex-right {
|
position: absolute;
|
right: 0.0390625rem /* 10/256 */;
|
top: -0.1953125rem /* -50/256 */;
|
display: flex;
|
z-index: 9;
|
.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: 0.09375rem /* 24/256 */;
|
text-align: center;
|
line-height: 0.1953125rem /* 50/256 */;
|
}
|
}
|
.menu-active {
|
}
|
}
|
}
|
</style>
|
