|
|
|
@ -1,14 +1,13 @@
|
|
|
|
<div id="index" v-cloak>
|
|
|
|
<div id="index" v-cloak>
|
|
|
|
<div id="aside">
|
|
|
|
<div id="aside" :style="{width:(prop.coll?'64px':'200px')}">
|
|
|
|
<el-menu
|
|
|
|
<el-menu
|
|
|
|
:style="{width:(properties.isCollapse?'64px':'200px')}"
|
|
|
|
|
|
|
|
:default-active="properties.defaultActive"
|
|
|
|
|
|
|
|
@open="handleOpen"
|
|
|
|
@open="handleOpen"
|
|
|
|
@close="handleClose"
|
|
|
|
@close="handleClose"
|
|
|
|
@select="handleSelect"
|
|
|
|
@select="handleSelect"
|
|
|
|
:unique-opened="properties.uniqueOpened"
|
|
|
|
:default-active="prop.defaultActive"
|
|
|
|
:collapse="properties.isCollapse"
|
|
|
|
:unique-opened="prop.open"
|
|
|
|
:collapse-transition="properties.transition"
|
|
|
|
:collapse="prop.coll"
|
|
|
|
|
|
|
|
:collapse-transition="prop.tran"
|
|
|
|
background-color="#252a2f"
|
|
|
|
background-color="#252a2f"
|
|
|
|
text-color="#d6d6d6"
|
|
|
|
text-color="#d6d6d6"
|
|
|
|
active-text-color="#ffd04b">
|
|
|
|
active-text-color="#ffd04b">
|
|
|
|
@ -36,7 +35,7 @@
|
|
|
|
<div id="main">
|
|
|
|
<div id="main">
|
|
|
|
<div id="head">
|
|
|
|
<div id="head">
|
|
|
|
<div class="collapseSwitch" @click="collapseSwitch">
|
|
|
|
<div class="collapseSwitch" @click="collapseSwitch">
|
|
|
|
<a :class="properties.isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
|
|
|
|
<a :class="prop.coll?'reversal':''"><i class="el-icon-s-grid"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>
|
|
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>
|
|
|
|
@ -88,76 +87,43 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
* {
|
|
|
|
* {
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
padding: 0;
|
|
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html, body, #index, #main, #content {
|
|
|
|
html, body, #index {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
outline: 0;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
-webkit-transition: color .2s ease;
|
|
|
|
|
|
|
|
transition: color .2s ease;
|
|
|
|
|
|
|
|
-webkit-text-decoration-skip: objects;
|
|
|
|
|
|
|
|
color: #757575;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
a:active, a:hover {
|
|
|
|
a:active, a:hover {
|
|
|
|
outline-width: 0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:active {
|
|
|
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:active, a:hover {
|
|
|
|
|
|
|
|
outline: 0;
|
|
|
|
outline: 0;
|
|
|
|
text-decoration: none
|
|
|
|
text-decoration: none
|
|
|
|
}
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
a[disabled] {
|
|
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
|
|
pointer-events: none
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#index {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#aside {
|
|
|
|
#aside {
|
|
|
|
background: #252a2f;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
#aside .el-menu {
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
transition: all .5s;
|
|
|
|
transition: all .5s;
|
|
|
|
border-right: 0
|
|
|
|
background: #252a2f;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#aside .el-menu-item, .el-submenu__title {
|
|
|
|
#aside ul[role=menubar] {
|
|
|
|
height: 40px;
|
|
|
|
border-right: solid 0 #e6e6e6;
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#main {
|
|
|
|
#main {
|
|
|
|
flex-grow: 1;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
margin-left: 200px;
|
|
|
|
|
|
|
|
transition: all .5s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#head {
|
|
|
|
#head {
|
|
|
|
@ -238,35 +204,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
#head .menu ul li a:hover:after {
|
|
|
|
#head .menu ul li a:hover:after {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
left: 0%;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#content {
|
|
|
|
|
|
|
|
height: calc(100% - 35px);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#content > div {
|
|
|
|
#content,#content .el-tabs__content {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#content > div > .el-tabs__content {
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
padding: 0;
|
|
|
|
height: calc(100% - 43px);
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#content .el-tabs__item {
|
|
|
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#content .el-tabs__nav {
|
|
|
|
|
|
|
|
white-space: normal !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#content > div > .el-tabs__content .el-tab-pane {
|
|
|
|
#content > div,#content .el-tab-pane {
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background: #f0f2f5;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
window.index = new Vue({
|
|
|
|
window.index = new Vue({
|
|
|
|
@ -274,10 +223,10 @@
|
|
|
|
data: {
|
|
|
|
data: {
|
|
|
|
tabs: [],//所有Tabs
|
|
|
|
tabs: [],//所有Tabs
|
|
|
|
activeTabName: '',
|
|
|
|
activeTabName: '',
|
|
|
|
properties: {
|
|
|
|
prop: {
|
|
|
|
uniqueOpened: true,//是否保持一个子菜单展开
|
|
|
|
open: true,//是否保持一个子菜单展开
|
|
|
|
isCollapse: false,//左侧菜单是否收缩
|
|
|
|
coll: false,//左侧菜单是否收缩
|
|
|
|
transition:false,
|
|
|
|
tran: false//是否展示动画
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
@ -289,7 +238,7 @@
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
collapseSwitch: function () {
|
|
|
|
collapseSwitch: function () {
|
|
|
|
this.properties.isCollapse = !this.properties.isCollapse;
|
|
|
|
this.prop.coll = !this.prop.coll;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleOpen: function () {
|
|
|
|
handleOpen: function () {
|
|
|
|
|
|
|
|
|
|
|
|
|
wangbing
5 years ago