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.
328 lines
8.6 KiB
328 lines
8.6 KiB
<div id="index" v-cloak>
|
|
<div id="aside">
|
|
<el-menu
|
|
:style="{width:(properties.isCollapse?'64px':'200px')}"
|
|
:default-active="properties.defaultActive"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
@select="handleSelect"
|
|
:unique-opened="properties.uniqueOpened"
|
|
:collapse="properties.isCollapse"
|
|
:collapse-transition="properties.transition"
|
|
background-color="#252a2f"
|
|
text-color="#d6d6d6"
|
|
active-text-color="#ffd04b">
|
|
<el-submenu index="1">
|
|
<template slot="title">
|
|
<i class="el-icon-setting"></i>
|
|
<span>系统设置</span>
|
|
</template>
|
|
<el-menu-item index="1-1">映射管理</el-menu-item>
|
|
</el-submenu>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="head">
|
|
<div class="collapseSwitch" @click="collapseSwitch">
|
|
<a :class="properties.isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
|
|
</div>
|
|
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>
|
|
|
|
<div class="menu">
|
|
<ul>
|
|
<li>
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span
|
|
style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
|
|
</li>
|
|
<li>
|
|
<el-dropdown>
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-example-solid">我的</el-link>
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>修改信息</el-dropdown-item>
|
|
<el-dropdown-item>修改密码</el-dropdown-item>
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</li>
|
|
<li>
|
|
<el-link :underline="false" @click="onHome" icon="el-icon-warning">关于</el-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="content">
|
|
<el-tabs v-model="activeTabName" type="border-card" closable @tab-remove="removeTab">
|
|
<el-tab-pane
|
|
v-for="(item, index) in tabs"
|
|
:key="item.name"
|
|
:label="item.title"
|
|
:name="item.name">
|
|
<iframe :src="item.url" style="width: 100%;height: 100%;border: 0;"></iframe>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
}
|
|
|
|
html, body, #index, #main, #content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
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 {
|
|
outline-width: 0
|
|
}
|
|
|
|
a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
a:active {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
a:active, a:hover {
|
|
outline: 0;
|
|
text-decoration: none
|
|
}
|
|
|
|
a[disabled] {
|
|
color: #ccc;
|
|
cursor: not-allowed;
|
|
pointer-events: none
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#index {
|
|
display: flex;
|
|
}
|
|
|
|
#aside {
|
|
background: #252a2f;
|
|
}
|
|
|
|
#aside .el-menu {
|
|
transition: all .5s;
|
|
border-right: 0
|
|
}
|
|
|
|
#aside .el-menu-item, .el-submenu__title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
#main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#head {
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
overflow: hidden;
|
|
background: #252a2f;
|
|
}
|
|
|
|
#head .collapseSwitch {
|
|
display: inline-block;
|
|
height: 40px;
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
border-left: 1px solid #424242;
|
|
border-right: 1px solid #424242;
|
|
}
|
|
|
|
#head .collapseSwitch a {
|
|
display: inline-block;
|
|
transition: all 1s;
|
|
}
|
|
|
|
#head .collapseSwitch a.reversal {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
#head a {
|
|
color: #d6d6d6;
|
|
vertical-align: top;
|
|
}
|
|
|
|
#head a:hover {
|
|
color: #409EFF;
|
|
opacity: 1;
|
|
}
|
|
|
|
#head .collapseSwitch:hover {
|
|
background: #3b4146;
|
|
}
|
|
|
|
#head .menu {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
#head .menu ul {
|
|
display: inline-block;
|
|
}
|
|
|
|
#head .menu ul li {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
#head .menu ul li a {
|
|
display: inline-block;
|
|
text-align: center;
|
|
position: relative;
|
|
margin: 0 10px;
|
|
height: 40px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
#head .menu ul li a:after {
|
|
content: "";
|
|
display: inline-block;
|
|
background: #409EFF;
|
|
width: 0;
|
|
height: 2px;
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#head .menu ul li a:hover:after {
|
|
width: 100%;
|
|
left: 0%;
|
|
}
|
|
|
|
#content {
|
|
height: calc(100% - 35px);
|
|
}
|
|
|
|
#content > div {
|
|
height: 100%;
|
|
}
|
|
|
|
#content > div > .el-tabs__content {
|
|
padding: 0;
|
|
height: calc(100% - 43px);
|
|
}
|
|
|
|
#content .el-tabs__item {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#content .el-tabs__nav {
|
|
white-space: normal !important;
|
|
}
|
|
|
|
#content > div > .el-tabs__content .el-tab-pane {
|
|
height: 100%;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
window.index = new Vue({
|
|
el: "#index",
|
|
data: {
|
|
tabs: [],//所有Tabs
|
|
activeTabName: '',
|
|
properties: {
|
|
uniqueOpened: true,//是否保持一个子菜单展开
|
|
isCollapse: false,//左侧菜单是否收缩
|
|
transition: false,
|
|
defaultActive: "1-1",
|
|
}
|
|
},
|
|
methods: {
|
|
onHome: function () {
|
|
this.addTab({
|
|
title: '首页',
|
|
name: 'home',
|
|
url: '${contextPath}/home.htm'
|
|
})
|
|
},
|
|
collapseSwitch: function () {
|
|
this.properties.isCollapse = !this.properties.isCollapse;
|
|
},
|
|
handleOpen: function () {
|
|
|
|
},
|
|
handleClose: function () {
|
|
|
|
},
|
|
handleSelect: function (index) {
|
|
switch (index) {
|
|
case "1-1":
|
|
this.addTab({title: "映射管理", name: "mapping", url: "/mapping.htm"});
|
|
break;
|
|
}
|
|
return false;
|
|
},
|
|
addTab: function (tab) {
|
|
//查找是否存在该tab
|
|
var tempTabs = this.tabs.filter(function (tab_) {
|
|
return tab_.name === tab.name;
|
|
})
|
|
//不存在则添加
|
|
if (tempTabs.length <= 0) {
|
|
this.tabs.push(tab)
|
|
}
|
|
this.activeTabName = tab.name;
|
|
},
|
|
removeTab: function (tabName) {
|
|
var activeName = this.activeTabName;
|
|
var tempTabs = this.tabs;
|
|
if (activeName === tabName) {
|
|
tempTabs.forEach(function (tab, index) {
|
|
if (tab.name === tabName) {
|
|
var nextTab = tempTabs[index + 1] || tempTabs[index - 1];
|
|
if (nextTab) {
|
|
activeName = nextTab.name;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
this.activeTabName = activeName;
|
|
this.tabs = tempTabs.filter(function (tab) {
|
|
return tab.name !== tabName
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
},
|
|
mounted: function () {
|
|
this.onHome();//页面初始好后打开首页
|
|
},
|
|
watch: {}
|
|
})
|
|
</script>
|
|
|