<template>
|
<div class="shehuiBaozhang-wrap">
|
<div class="shehuiBaozhang-menu-left">
|
<el-menu :default-active="$route.path" router mode="vertical">
|
<el-menu-item index="/shehuiBaoxian">
|
<div class="menu-left-block">
|
<h1>社会保险</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/shebaoShouzhiZongbiao">
|
<div class="menu-left-block">
|
<h1>社保收支总表</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/qiyezhigongShebao">
|
<div class="menu-left-block">
|
<h1>企业职工社保</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/jiguanzhigongShebao">
|
<div class="menu-left-block">
|
<h1>机关职工社保</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/juminYanglaoBaoxian">
|
<div class="menu-left-block">
|
<h1>居民养老保险</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/shiyeBaoxian">
|
<div class="menu-left-block">
|
<h1>失业保险</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/gongshangBaoxian">
|
<div class="menu-left-block">
|
<h1>工伤保险</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/shebaoZhengjiShouru">
|
<div class="menu-left-block">
|
<h1>社保征缴收入</h1>
|
</div>
|
</el-menu-item>
|
<el-menu-item index="/shebaoChikaRenshu">
|
<div class="menu-left-block">
|
<h1>社保卡持卡人数</h1>
|
</div>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
<div class="shehuiBaozhang-menu-right">
|
<router-view></router-view>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "shehuiBaozhang"
|
}
|
</script>
|
|
<style lang="scss">
|
.shehuiBaozhang-menu-left{
|
.el-menu{
|
background-color: transparent;
|
border-right:none;
|
}
|
.el-menu-item, .el-submenu__title{
|
height: 0.3125rem /* 80/256 */;
|
margin: 0.1171875rem /* 30/256 */ 0;
|
}
|
.el-menu-item{
|
background:url("../../../assets/images/jiuye-menu-normal.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 0.75rem /* 192/256 */;
|
height: 0.3125rem /* 80/256 */;
|
display: flex;
|
justify-content: center;
|
padding: 0px!important;
|
}
|
.el-menu-item.is-active{
|
background:url("../../../assets/images/jiuye-menu-active.png") no-repeat center;
|
background-size: 100% 100%;
|
width: 0.75rem /* 192/256 */;
|
height: 0.3125rem /* 80/256 */;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
@import "../../../assets/css/base";
|
@import "../../../assets/css/mixin";
|
.shehuiBaozhang-wrap{
|
width: 100%;
|
padding: 0.078125rem /* 20/256 */;
|
box-sizing: border-box;
|
display: flex;
|
height: calc(100% - 0.390625rem /* 100/256 */);
|
.shehuiBaozhang-menu-left{
|
width: 0.9375rem /* 240/256 */;
|
height: 5.2734375rem /* 1350/256 */;
|
background:url("../../../assets/images/jiuye-menu-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 0.15625rem /* 40/256 */ 0;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: center;
|
.menu-left-block{
|
h1{
|
font-size: $fontSize-24;
|
color: $color-blue;
|
text-align: center;
|
line-height: 0.3125rem /* 80/256 */;
|
}
|
}
|
}
|
.shehuiBaozhang-menu-right{
|
width: calc(100% - 0.9375rem);
|
padding: 0 0.078125rem /* 20/256 */;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
}
|
|
</style>
|