104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="BTRpMenuBarOut">
|
||
|
|
<div class="BTRpMenuBar">
|
||
|
|
<div class="eachBTRpMenuBar">车站股道</div>
|
||
|
|
<div class="eachBTRpMenuBar">车站出入口</div>
|
||
|
|
<div class="eachBTRpMenuBar">列车固定路径</div>
|
||
|
|
<div class="eachBTRpMenuBar">车站用户管理</div>
|
||
|
|
<div class="eachBTRpMenuBar">备份区名称</div>
|
||
|
|
<div class="eachBTRpMenuBar">工作区选择</div>
|
||
|
|
<div class="eachBTRpMenuBar">帮助</div>
|
||
|
|
</div>
|
||
|
|
<div class="BTRunplanClose">
|
||
|
|
<i class="el-icon-close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="BTRpTabs">
|
||
|
|
<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="(item, index) in currentTabs"
|
||
|
|
:key="item.name"
|
||
|
|
:label="item.title"
|
||
|
|
:name="item.name"
|
||
|
|
>
|
||
|
|
<!-- {{ item.content }} -->
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'BigTrainRunplanManage',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeTab:1,
|
||
|
|
currentTabs: [
|
||
|
|
{
|
||
|
|
title: '车站股道',
|
||
|
|
name: 1
|
||
|
|
// content: 'Tab 1 content'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '列车固定径路',
|
||
|
|
name: 2
|
||
|
|
// content: 'Tab 1 content'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
removeTab(targetName) {
|
||
|
|
const tabs = this.currentTabs;
|
||
|
|
const activeName = this.activeTab;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.BTRpMenuBarOut{
|
||
|
|
width: 100%;
|
||
|
|
background: #bad8fb;
|
||
|
|
border-bottom: 1px #8fb2dd solid;
|
||
|
|
height: 29px;
|
||
|
|
}
|
||
|
|
.BTRpMenuBar{
|
||
|
|
display: inline-block;
|
||
|
|
background: #d2e0f3;
|
||
|
|
border-bottom-right-radius: 10px;
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
border-right: 1px #93a3b4 solid;
|
||
|
|
border-bottom: 1px #cadaef solid;
|
||
|
|
position: absolute;
|
||
|
|
height: 29px;
|
||
|
|
}
|
||
|
|
.eachBTRpMenuBar{
|
||
|
|
display: inline-block;
|
||
|
|
padding: 5px 15px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.eachBTRpMenuBar:hover{
|
||
|
|
background: #a6cdfb;
|
||
|
|
}
|
||
|
|
.BTRunplanClose{
|
||
|
|
display: inline-block;
|
||
|
|
float: right;
|
||
|
|
margin-right: 10px;
|
||
|
|
padding: 4px 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.BTRpTabs .el-tabs--card>.el-tabs__header{background: #c5dffd;font-size: 13px;color: #1f4678;border-bottom: 2px #84827f solid;}
|
||
|
|
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top.is-active{background:#fafbfa;}
|
||
|
|
.BTRpTabs .el-tabs__item.is-active{color: #003589;font-weight: bold;}
|
||
|
|
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top{font-size:13px;border-top-right-radius: 40px;height: 30px;
|
||
|
|
line-height: 30px;padding: 0 15px 0px 10px;background: #b9d2f1;vertical-align: text-bottom;border-top: 1px #5e6a79 solid;
|
||
|
|
border-left: 1px #94b6f0 solid;border-right: 1px #c9d3e0 solid;}
|
||
|
|
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__nav{border:none}
|
||
|
|
</style>
|