100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div id="TPcontainer">
|
||
|
|
<el-container style="height: 100%">
|
||
|
|
<el-aside class="MyAside">
|
||
|
|
<el-menu
|
||
|
|
background-color="#F7F8F1"
|
||
|
|
text-color="rgb(38,70,114)"
|
||
|
|
active-text-color="#3A87F9"
|
||
|
|
:default-active="this.$route.path"
|
||
|
|
router
|
||
|
|
>
|
||
|
|
<el-submenu index="1">
|
||
|
|
<template slot="title">
|
||
|
|
<i class="el-icon-folder-opened"></i>任务管理
|
||
|
|
</template>
|
||
|
|
<el-menu-item-group>
|
||
|
|
<el-menu-item :index="'/main'">任务管理</el-menu-item>
|
||
|
|
<el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
|
||
|
|
<el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
|
||
|
|
</el-menu-item-group>
|
||
|
|
</el-submenu>
|
||
|
|
<el-menu-item
|
||
|
|
:index="'/usermanage'"
|
||
|
|
style="padding-left: 10px !important"
|
||
|
|
>
|
||
|
|
<i class="el-icon-user-solid"></i>用户管理
|
||
|
|
</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</el-aside>
|
||
|
|
<el-container>
|
||
|
|
<el-main class="tpcontent">
|
||
|
|
<router-view class="view" style="padding: 20px"></router-view>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</el-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
method: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.MyAside {
|
||
|
|
width: 255px !important;
|
||
|
|
opacity: 0.9;
|
||
|
|
background-color: #f7f8f1;
|
||
|
|
color: #333;
|
||
|
|
text-align: left;
|
||
|
|
line-height: 200px;
|
||
|
|
z-index: 10;
|
||
|
|
bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.tpcontent {
|
||
|
|
position: absolute;
|
||
|
|
left: 255px;
|
||
|
|
right: 0px;
|
||
|
|
width: calc(100% - 255px);
|
||
|
|
padding: 0px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.MyAside .usermp {
|
||
|
|
padding-left: 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 840px) and (max-width: 1401px) {
|
||
|
|
.tpcontent {
|
||
|
|
position: absolute;
|
||
|
|
left: 255px;
|
||
|
|
width: calc(100% - 255px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 420px) and (max-width: 840px) {
|
||
|
|
.MyAside {
|
||
|
|
width: 160px !important;
|
||
|
|
}
|
||
|
|
.tpcontent {
|
||
|
|
position: absolute;
|
||
|
|
left: 160px;
|
||
|
|
width: calc(100% - 160px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media all and (max-width: 420px) {
|
||
|
|
.MyAside {
|
||
|
|
width: 120px !important;
|
||
|
|
}
|
||
|
|
.tpcontent {
|
||
|
|
position: absolute;
|
||
|
|
left: 120px;
|
||
|
|
width: calc(100% - 120px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|