joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

福州线 iscs 界面代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2020-10-10 13:17:16 +08:00
parent 545dbe8e3c
commit 48bc783755
1 changed files with 100 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/iscs/iscsSystem/stationNav.vue
View File

@ -8,7 +8,7 @@
<div class="station-box">
<div class="leftRect" />
<div class="rightRect" />
<div class="nav-list-box station-list-box" :class="{'active': selectStation == item.id}" @click="changeStation(item,index)" />
<div class="station-list-box" :class="{'active': selectStation == item.id}" @click="changeStation(item.id)" />
</div>
<div class="station-name" :class="index==0?'station-name-first':index%2==1?'station-name-up':'station-name-down'">{{ item.name }}</div>
</div>
@ -16,13 +16,27 @@
<div class="rightButtonGroup">
<div class="rightButtonGroupL">
<div class="controlCenter">
<div class="nav-list-box station-list-box" :class="{'active': selectStation == 'controlCenter'}" @click="changeStation(item,index)" />
<div class="station-list-button" :class="{'active': selectStation == 'controlCenter'}" @click="changeStation('controlCenter')" />
</div>
<div class="stationDepot">{{ '' }}</div>
<div class="parkingLot">{{ '' }}</div>
<div class="stationDepot">
<div class="station-list-button" :class="{'active': selectStation == 'stationDepot'}" @click="changeStation('stationDepot')" />
</div>
<div class="parkingLot">
<div class="station-list-button" :class="{'active': selectStation == 'parkingLot'}" @click="changeStation('parkingLot')" />
</div>
<div class="controlCenterName">控制中心</div>
<div class="parkingLotName">停车场</div>
<div class="stationDepotName">车辆段</div>
</div>
<div class="rightButtonGroupR">
{{ '' }}
<div class="mainHouseOne">
<div class="station-list-button" :class="{'active': selectStation == 'mainHouseOne'}" @click="changeStation('mainHouseOne')" />
</div>
<div class="mainHouseTwo">
<div class="station-list-button" :class="{'active': selectStation == 'mainHouseTwo'}" @click="changeStation('mainHouseTwo')" />
</div>
<div class="mainHouseOneName">黄山主所</div>
<div class="mainHouseTwoName">茶亭主所</div>
</div>
</div>
</div>
@ -65,7 +79,7 @@ export default {
name:'StationNav',
data() {
return {
selectStation: 'controlCenter',
selectStation: 'mainHouseOne',
stationList:[],
group:'',
lineCode:'',
@ -256,6 +270,9 @@ export default {
}
}
});
if (this.$route.query.stationId) {
this.selectStation = this.$route.query.stationId;
}
},
async subscribe() {
this.clearSubscribe();
@ -281,8 +298,8 @@ export default {
button.active = false;
this.selectChildren(child.id, false);
},
changeStation(item, index) {
this.selectStation = item.id;
changeStation(item) {
this.selectStation = item;
this.selectChildren(this.$route.params.mode, false);
},
selectChildren(type, isReplace = false) { // 选择菜单
@ -355,7 +372,7 @@ export default {
top: -10%;
border-radius: 130%;
}
.station-list-box.active{
.station-list-box.active,.station-list-button.active{
background:#cdcd37;
}
.station-name{
@ -517,4 +534,78 @@ background:rgba(231,237,253,0.9);
width: 17vw;
height: 100%;
}
.rightButtonGroupL{
width: 10vw;
height: 100%;
display: inline-block;
float: left;
position: relative;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}
.rightButtonGroupR{
width: 7vw;
height: 100%;
display: inline-block;
position: relative;
}
.controlCenter,.stationDepot,.parkingLot{
display: inline-block;
position: relative;
width: 31%;
height: 100%;
vertical-align: top;
float: left;
}
.controlCenterName{
font-size: 12px;
position: absolute;
top: 5px;
left: 0.3vw;
}
.stationDepotName{
font-size: 12px;
position: absolute;
top: 45px;
left: 38%;
}
.parkingLotName{
font-size: 12px;
position: absolute;
top: 5px;
right: 11%;
}
.station-list-button{
width: 1vw;
height: 1vw;
border-radius: 1vw;
background: #ccc;
position: absolute;
border-left: 1px #fdfdfd solid;
border-right: 1px #262626 solid;
left: 50%;
top: 21px;
transform: translateX(-47%);
cursor: pointer;
}
.mainHouseOne,.mainHouseTwo{
display: inline-block;
position: relative;
width: 49%;
height: 100%;
vertical-align: top;
float: left;
}
.mainHouseOneName{
font-size: 12px;
position: absolute;
top: 5px;
left: 0.3vw;
}
.mainHouseTwoName{
font-size: 12px;
position: absolute;
top: 45px;
right: 8%;
}
</style>