宁波一号线 菜单样式调整
This commit is contained in:
joylink_cuiweidong
parent
3366718864
commit
5762399c6b
@ -135,6 +135,7 @@ export default {
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.row = null;
|
||||
this.restoreBeforeDevices();
|
||||
this.$refs.table.setCurrentRow();
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
@ -220,9 +221,9 @@ export default {
|
||||
commitOperate(menuOperate.Signal.arrangementRoute, {routeCode:this.row.code}, 1).then(({valid, operate})=>{
|
||||
this.loading = false;
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
const signal = this.$store.getters['map/getDeviceByCode'](this.row.startSignalCode);
|
||||
operate.message = `<div>命令：进路设置</div><div>始端信号机：${signal.name}</div><div>进路：${this.row.name} </div>`;
|
||||
this.doClose();
|
||||
this.$refs.confirmTip.doShow(operate);
|
||||
}
|
||||
}).catch(() => {
|
||||
@ -236,7 +237,6 @@ export default {
|
||||
const operate = {
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
|
||||
@ -19,65 +19,48 @@
|
||||
<ul class="nav-ul" :class="{'active' :i==classA}">
|
||||
<template v-for="(child,j) in item.children">
|
||||
<template v-if="child.children && child.children.length > 0">
|
||||
<li v-if="child.type === 'separator'" :key="j" class="menu-separator">
|
||||
<span class="status"> </span>
|
||||
<span class="separator"> </span>
|
||||
</li>
|
||||
<li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
|
||||
<li
|
||||
v-else
|
||||
:id="getDomId(child)"
|
||||
:key="j"
|
||||
class="menu-li"
|
||||
class="menu-li-block"
|
||||
@click.stop="selectedClassB(child, j)"
|
||||
>
|
||||
<div class="menu-li-block">
|
||||
<span class="menu-li-text">
|
||||
<span class="status"> </span>
|
||||
<span class="label">{{ child.title }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="menu-ul" :class="{'active' :j==classB}">
|
||||
<template v-for="(grandchild,k) in child.children">
|
||||
<li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator">
|
||||
<span class="status"> </span>
|
||||
<span class="separator"> </span>
|
||||
</li>
|
||||
<li
|
||||
v-else-if="grandchild.show"
|
||||
:id="getDomId(grandchild)"
|
||||
:key="k"
|
||||
class="menu-li"
|
||||
@click.stop="hookClick(grandchild)"
|
||||
>
|
||||
<div class="menu-li-block">
|
||||
<span class="menu-li-text">
|
||||
<span class="status"> </span>
|
||||
<span class="label">{{ child.title }}</span>
|
||||
<div class="menu-ul-block-out">
|
||||
<div class="menu-ul-block">
|
||||
<ul class="menu-ul" :class="{'active' :j==classB}" style="position:fixed">
|
||||
<template v-for="(grandchild,k) in child.children">
|
||||
<li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator" />
|
||||
<li
|
||||
v-else-if="grandchild.show"
|
||||
:id="getDomId(grandchild)"
|
||||
:key="k"
|
||||
class="menu-li-block"
|
||||
@click.stop="hookClick(grandchild)"
|
||||
>
|
||||
<span class="status"> </span>
|
||||
<span class="label">{{ grandchild.title }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li v-if="child.type === 'separator'" :key="j" class="menu-separator">
|
||||
<span class="status"> </span>
|
||||
<span class="separator"> </span>
|
||||
</li>
|
||||
<li v-if="child.type === 'separator'" :key="j" class="menu-separator" />
|
||||
<li
|
||||
v-else-if="child.show"
|
||||
:id="getDomId(child)"
|
||||
:key="j"
|
||||
class="menu-li"
|
||||
class="menu-li-block"
|
||||
@click.stop="hookClick(child)"
|
||||
>
|
||||
<div class="menu-li-block">
|
||||
<span class="menu-li-text">
|
||||
<span class="status"> </span>
|
||||
<span class="label">{{ child.title }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="status"> </span>
|
||||
<span class="label">{{ child.title }}</span>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
@ -685,7 +668,7 @@ export default {
|
||||
initMenu(menu) {
|
||||
const type = State2SimulationMap[this.$store.state.training.prdType];
|
||||
this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode);
|
||||
if (this.menu[2]) {
|
||||
if (this.menu[2] && this.$store.state.training.prdType == '02') {
|
||||
this.menu[2].children = this.initStationList();
|
||||
}
|
||||
this.clickEvent();
|
||||
@ -977,7 +960,6 @@ export default {
|
||||
$height: 30px;
|
||||
$menuPadding: 10px;
|
||||
$menuItemHeight: 30px;
|
||||
$menuItemWidth: 180px;
|
||||
$menuItemPadding: 5px;
|
||||
|
||||
#menuBar {
|
||||
@ -1026,11 +1008,11 @@ export default {
|
||||
list-style: none;
|
||||
border: 1px solid gray !important;
|
||||
line-height: $menuItemHeight;
|
||||
width: $menuItemWidth;
|
||||
background: #F0F0F0;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
max-height: 550px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
@ -1053,15 +1035,40 @@ export default {
|
||||
list-style: none;
|
||||
background: #F0F0F0;
|
||||
line-height: $menuItemHeight;
|
||||
width: $menuItemWidth;
|
||||
bottom: $menuItemHeight;
|
||||
}
|
||||
|
||||
.active {
|
||||
.menu-ul-block-out{
|
||||
position: absolute;
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-ul-block{
|
||||
position: relative;
|
||||
margin-left: 100%;
|
||||
overflow-x: hidden;
|
||||
display: inline-block;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.nav-ul.active {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.menu-ul.active{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding:0;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
border-left: 1px #CACACA solid;
|
||||
}
|
||||
.menu-ul-text {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
@ -1070,56 +1077,36 @@ export default {
|
||||
line-height: $menuItemHeight;
|
||||
}
|
||||
|
||||
.menu-li {
|
||||
text-align: left;
|
||||
background: #F0F0F0;
|
||||
height: $menuItemHeight;
|
||||
line-height: $menuItemHeight;
|
||||
}
|
||||
|
||||
.menu-li-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
letter-spacing: 0;
|
||||
height: $menuItemHeight;
|
||||
line-height: $menuItemHeight;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-li-text {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.menu-li-text .status {
|
||||
display: inline-block;
|
||||
.menu-li-block .status {
|
||||
border-right: 1px inset #CACACA;
|
||||
width: $width;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-li-text .label {
|
||||
display: inline-block;
|
||||
.menu-li-block .label {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: #000;
|
||||
padding:0px 10px 0px 5px;
|
||||
line-height: $menuItemHeight;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
text-align: left;
|
||||
background: #F0F0F0;
|
||||
height: 2px;
|
||||
line-height: 2px;
|
||||
}
|
||||
|
||||
.menu-separator .status {
|
||||
display: inline-block;
|
||||
border-right: 1px inset #CACACA;
|
||||
width: $width;
|
||||
height: 100%;
|
||||
background: #EFECDE;
|
||||
}
|
||||
|
||||
.menu-separator .separator {
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
background: #CACACA;
|
||||
margin-left: 5px;
|
||||
height: 2px;
|
||||
width: $menuItemWidth - $width - 30px;
|
||||
margin-left:30px;
|
||||
line-height: 2px;
|
||||
}
|
||||
|
||||
.menu-li-block:hover {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user