<template>
|
<el-container class="home-container">
|
<!-- 头部区域 -->
|
<el-header>
|
<div class="image">
|
<img src="../assets/jh.png" alt="">
|
<span>青羊公安经侦</span>
|
</div>
|
<el-button type="info" @click="logout">退出</el-button>
|
</el-header>
|
<!-- 页面主题区域 -->
|
<el-container>
|
<!-- 侧边栏 -->
|
<el-aside :width="isCollapse?'64px':'200px'">
|
<div class="toggle-button"
|
@click="toggleCollapse">|||
|
</div>
|
<!-- 侧边栏菜单区域 -->
|
<el-menu text-color="rgb(191, 203, 217)"
|
:collapse="isCollapse"
|
:collapse-transition="false"
|
router
|
unique-opene>
|
<!-- <el-submenu index="/workbench">-->
|
<!-- <template slot="title">-->
|
<!-- <!– 图标 –>-->
|
<!-- <i class="el-icon-s-platform"></i>-->
|
<!-- <!– 文本 –>-->
|
<!-- <span>工作台</span>-->
|
<!-- </template>-->
|
<!-- <el-menu-item index="/">-->
|
<!-- <template slot="title">-->
|
<!-- <i class="el-icon-menu"></i>-->
|
<!-- <span>工作台</span>-->
|
<!-- </template>-->
|
<!-- </el-menu-item>-->
|
<!-- </el-submenu>-->
|
<el-menu-item index="/workbench">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>工作台</span>
|
</template>
|
</el-menu-item>
|
<el-submenu index="/cause">
|
<template slot="title">
|
<i class="el-icon-notebook-1"></i>
|
<span>案件区</span>
|
</template>
|
<el-menu-item index="/entry">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>案件录入</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/group">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>群组交流</span>
|
</template>
|
</el-menu-item>
|
<!-- <el-menu-item index="/search">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>群组搜索</span>
|
</template>
|
</el-menu-item> -->
|
</el-submenu>
|
<el-submenu index="/common">
|
<template slot="title">
|
<i class="el-icon-bangzhu"></i>
|
<span>公共区</span>
|
</template>
|
<el-menu-item index="/audit">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>报案人审核</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/publicity">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>公共宣传</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/announcement">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>警方公告</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/question">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>常见问题</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/sensitive">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>敏感词</span>
|
</template>
|
</el-menu-item>
|
</el-submenu>
|
<el-submenu index="/manager">
|
<template slot="title">
|
<i class="el-icon-s-custom"></i>
|
<span>管理区</span>
|
</template>
|
<el-menu-item index="/user">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>用户管理</span>
|
</template>
|
</el-menu-item>
|
<el-menu-item index="/police">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>警员管理</span>
|
</template>
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-aside>
|
<!-- 右侧内容主题 -->
|
<el-main style="background-color: #F5FAFF">
|
<router-view></router-view>
|
<!-- <div style="position: absolute;bottom: 0;right: 50%;color: #ccc">当前版本 v2.1.3</div>-->
|
</el-main>
|
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isCollapse: false,
|
}
|
},
|
created() {
|
},
|
methods: {
|
logout() {
|
window.sessionStorage.clear()
|
this.$router.push('/login')
|
},
|
toggleCollapse() {
|
this.isCollapse = !this.isCollapse
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.home-container {
|
height: 100%;
|
}
|
|
.el-header {
|
background-color: #242f42;
|
display: flex;
|
justify-content: space-between;
|
padding-left: 0;
|
align-items: center;
|
color: #FFFFFF;
|
font-size: 20px;
|
> div {
|
display: flex;
|
align-items: center;
|
img {
|
width: 50px;
|
height: 50px;
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.el-aside {
|
background-color: rgb(50, 65, 87);
|
.el-menu {
|
border-right: none;
|
background-color: rgb(50, 65, 87);
|
.el-menu-item{
|
background-color: rgb(50, 65, 87);
|
}
|
}
|
}
|
|
.el-main {
|
|
}
|
|
.iconfont {
|
margin-right: 10px;
|
}
|
|
.toggle-button {
|
background-color:rgb(50, 65, 87);
|
font-size: 10px;
|
line-height: 24px;
|
color:rgb(191, 203, 217);
|
text-align: center;
|
letter-spacing: 0.2em;
|
cursor: pointer;
|
}
|
.image {
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: #eee;
|
}
|
}
|
|
</style>
|
