局长信箱-内网前端-vue
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

85 lines
2.4 KiB

<template>
<header class="flex v-center between">
<div>
<div class="title"><a href="">局长信箱</a></div>
</div>
<div>
<el-button type="primary">退出</el-button>
</div>
</header>
<div class="flex">
<aside>
<nav>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><HomeFilled /></el-icon>
<span>首页</span>
</a>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><Platform /></el-icon>
<span>我的大屏</span>
</a>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><Menu /></el-icon>
<span>我的工作</span>
</a>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><HomeFilled /></el-icon>
<span>来信初筛</span>
</a>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><HomeFilled /></el-icon>
<span>数据分析</span>
</a>
<a class="flex v-center center wrap pointer" @click="router.push('/')">
<el-icon><Setting /></el-icon>
<span>系统管理</span>
</a>
</nav>
</aside>
<main><router-view /></main>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
:root {
--header-height: 80px;
}
header {
background-color: #162582;
color: #fff;
height: var(--header-height);
padding: 0 20px;
.title {
font-size: 28px;
a {
text-decoration: none;
color: inherit;
}
}
}
aside {
background-color: #071254;
color: #fff;
width: 100px;
height: calc(100vh - var(--header-height));
nav {
a {
height: 100px;
color: #707ab6;
&:hover {
color: #fff;
}
.el-icon {
font-size: 50px;
}
span {
width: 100%;
text-align: center;
}
}
}
}
</style>