南京二号线 列车详览页面 代码调整
This commit is contained in:
joylink_cuiweidong
parent
beb086e57f
commit
7094b1d497
@ -14,22 +14,25 @@
|
||||
<div class="eachTrainViewIn">
|
||||
<div class="eachTrainViewInRhom" />
|
||||
<div class="eachTrainTrunkS">{{ 'W'+eachTrainView+'0' }}</div>
|
||||
<div class="eachTrainTrunkD">
|
||||
<div class="eachTrainTrunkD" @click="toTrainTrunkDetail(index)">
|
||||
<img :src="trainTrunkDown" class="trainTrunkDown">
|
||||
</div>
|
||||
<div class="eachTrainTrunkE">{{ 'W'+eachTrainView+'6' }}</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<train-trunk-detail ref="trainTrunkDetail" :train-view-list="trainViewList" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import trainTrunkDown from '@/assets/baSiDi/up.png';
|
||||
// import alarmpic from 'ibp_images/alarm.png';
|
||||
import TrainTrunkDetail from './trainTrunkDetail.vue';
|
||||
export default {
|
||||
name:'Tra',
|
||||
components:{
|
||||
TrainTrunkDetail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
@ -63,6 +66,9 @@ export default {
|
||||
// this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
toTrainTrunkDetail(index) {
|
||||
this.$refs.trainTrunkDetail.doShow(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -141,6 +147,7 @@ export default {
|
||||
position: absolute;
|
||||
left: 99px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkDown{
|
||||
width: 25px;
|
||||
|
||||
344
src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue
Normal file
344
src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="haerbin-01__systerm"
|
||||
:width="'1000px'"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
:before-close="doClose"
|
||||
>
|
||||
<!-- :fullscreen="true" -->
|
||||
<div class="trainTrunkView">
|
||||
<div class="trainTrunkViewT">
|
||||
<img :src="trainTrunkUp" class="trainTrunkUp" @click="doClose">
|
||||
<div class="trainTrunkTtext">
|
||||
<div class="trainTrunkTtextIn">OBCU</div>
|
||||
<div class="trainTrunkTtextIn">Overview</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewM">
|
||||
<div class="trainTrunkViewMT">
|
||||
<div class="eachTrunkViewInRhom" />
|
||||
<div class="trainTrunkViewMTL">
|
||||
<div class="trainTrunkViewMTL1">
|
||||
<div class="trainTrunkViewMTLEach">ATP</div>
|
||||
<div class="trainTrunkViewMTLEach">ATO</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTL2">
|
||||
<div class="trainTrunkViewMTL2L" />
|
||||
<div class="trainTrunkViewMTL2R">
|
||||
<div class="trainTrunkViewLine">
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTL3">
|
||||
<div class="trainTrunkViewMTLEach">ITF</div>
|
||||
<div class="trainTrunkViewMTLEach">HMI</div>
|
||||
<div class="trainTrunkViewMTLEach">TMS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR">
|
||||
<div class="trainTrunkViewMTR1">
|
||||
<div class="trainTrunkViewMTLEach">ATO</div>
|
||||
<div class="trainTrunkViewMTLEach">ATP</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR2">
|
||||
<div class="trainTrunkViewMTR2L">
|
||||
<div class="trainTrunkViewLine">
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
||||
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR2R" />
|
||||
</div>
|
||||
<div class="trainTrunkViewMTR3">
|
||||
<div class="trainTrunkViewMTLEach">TMS</div>
|
||||
<div class="trainTrunkViewMTLEach">HMI</div>
|
||||
<div class="trainTrunkViewMTLEach">ITF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewMB">
|
||||
<div class="trainTrunkViewMBL">{{ 'W'+trainCode+'0' }}</div>
|
||||
<div class="trainTrunkViewMBR">{{ 'W'+trainCode+'6' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trainTrunkViewB">
|
||||
<div v-if="prev" class="trainTrunkViewBL">
|
||||
<img :src="trainTrunkUp" class="trainTrunkLeft" @click="doPrev">
|
||||
<div class="trainTrunkViewBLIn">
|
||||
<div class="trainTrunkViewBLInRhom" />
|
||||
<div class="trainTrunkViewBLInL">{{ 'W'+prev+'0' }}</div>
|
||||
<div class="trainTrunkViewBLInR">{{ 'W'+prev+'6' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="next" class="trainTrunkViewBB">
|
||||
<div class="trainTrunkViewBRIn">
|
||||
<div class="trainTrunkViewBLInRhom" />
|
||||
<div class="trainTrunkViewBLInL">{{ 'W'+next+'0' }}</div>
|
||||
<div class="trainTrunkViewBLInR">{{ 'W'+next+'6' }}</div>
|
||||
</div>
|
||||
<img :src="trainTrunkUp" class="trainTrunkRight" @click="doNext">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import trainTrunkUp from '@/assets/baSiDi/up.png';
|
||||
export default {
|
||||
name:'TrainTrunkDetail',
|
||||
props:{
|
||||
trainViewList:{
|
||||
type:Array,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
trainCode:'',
|
||||
prev:'',
|
||||
next:'',
|
||||
index:0,
|
||||
trainTrunkUp:trainTrunkUp
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
title() {
|
||||
return '列车详览';
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(index) {
|
||||
this.index = index;
|
||||
this.dialogShow = true;
|
||||
this.init();
|
||||
},
|
||||
init() {
|
||||
this.trainCode = this.trainViewList[this.index];
|
||||
this.prev = '';
|
||||
if (this.index > 0) {
|
||||
this.prev = this.trainViewList[this.index - 1];
|
||||
}
|
||||
this.next = '';
|
||||
if ((this.index + 1) < this.trainViewList.length) {
|
||||
this.next = this.trainViewList[this.index + 1];
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
doPrev() {
|
||||
this.index--;
|
||||
this.init();
|
||||
},
|
||||
doNext() {
|
||||
this.index++;
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trainTrunkView{
|
||||
width: 100%;
|
||||
background: #000;
|
||||
display: inline-block;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.trainTrunkUp{
|
||||
width: 60px;
|
||||
margin-left: 433px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkTtext{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: 0px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
.trainTrunkTtextIn{margin-bottom:5px;letter-spacing: 2px;}
|
||||
.trainTrunkViewMT{
|
||||
width: 800px;
|
||||
height: 210px;
|
||||
margin-left: 58px;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
}
|
||||
.eachTrunkViewInRhom{
|
||||
width: 800px;
|
||||
height: 210px;
|
||||
border-left: 1px #828282 solid;
|
||||
transform: skew(-30deg, 0deg);
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
border-bottom: 1px #828282 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.eachTrunkViewInRhom:before{
|
||||
content: '';
|
||||
transform: skew(50deg, 0deg);
|
||||
transform-origin: bottom center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-top: 1px #828282 solid;
|
||||
border-right: 1px #828282 solid;
|
||||
}
|
||||
.trainTrunkViewMTL{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border-right: 1px #fff dashed;
|
||||
font-size:0;
|
||||
}
|
||||
.trainTrunkViewMTR{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
.trainTrunkViewMTL1{margin-left: 177px;margin-top: 28px;font-size: 0;}
|
||||
.trainTrunkViewMTR1{margin-left: 34px;margin-top: 28px;font-size: 0;}
|
||||
.trainTrunkViewMTL2{height: 59px;margin-left:100px;display: inline-block;}
|
||||
.trainTrunkViewMTL2L{
|
||||
width: 117px;
|
||||
border-left: 1px #fff solid;
|
||||
height: 34px;
|
||||
margin-top: 25px;
|
||||
border-top: 1px #fff solid;
|
||||
display: inline-block;
|
||||
}
|
||||
.trainTrunkViewMTR2R{width: 106px;border-top: 1px #fff solid;display: inline-block;margin-top: 25px;border-right: 1px #fff solid;height: 34px;}
|
||||
.trainTrunkViewMTR2{height: 59px;margin-left:75px;display: inline-block;}
|
||||
.trainTrunkViewMTR2L{
|
||||
width: 108px;
|
||||
height: 59px;
|
||||
border-left: 1px #fff solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-right: 1px #fff solid;
|
||||
}
|
||||
.trainTrunkViewMTL2R{
|
||||
width: 108px;
|
||||
height: 59px;
|
||||
border-left: 1px #fff solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-right: 1px #fff solid;
|
||||
}
|
||||
.trainTrunkViewMTL3{margin-left: 65px;font-size: 0;}
|
||||
.trainTrunkViewMTR3{margin-left: 34px;font-size: 0;}
|
||||
.trainTrunkViewMTLEach{
|
||||
padding: 10px 0px;
|
||||
width:80px;
|
||||
text-align:center;
|
||||
font-size: 24px;
|
||||
color: #5F5F5F;
|
||||
border: 1px #5F5F5F solid;
|
||||
display: inline-block;
|
||||
letter-spacing: 4px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewDot{
|
||||
position:absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
.trainTrunkViewLine{
|
||||
width: 107px;
|
||||
height: 33px;
|
||||
border-top: 1px #fff solid;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
}
|
||||
.trainTrunkViewMB{padding: 20px 123px;}
|
||||
.trainTrunkViewMBL{font-size: 40px;color: #fff;display:inline-block;margin-left: 75px;letter-spacing: 5px;}
|
||||
.trainTrunkViewMBR{font-size: 40px;color: #fff;display:inline-block;float:right;margin-right:75px;letter-spacing: 5px;}
|
||||
.trainTrunkViewBL{display: inline-block;}
|
||||
.trainTrunkLeft{
|
||||
width: 60px;
|
||||
transform-origin: center center;
|
||||
transform: rotate(-90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewB{margin-top: 20px;}
|
||||
.trainTrunkViewBB{display: inline-block;float: right;}
|
||||
.trainTrunkRight{
|
||||
width: 60px;
|
||||
transform-origin: center center;
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trainTrunkViewBLIn,.trainTrunkViewBRIn{
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.trainTrunkViewBLIn{margin-left: 20px;}
|
||||
.trainTrunkViewBRIn{margin-right: 20px;}
|
||||
.trainTrunkViewBLInRhom{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-left: 1px #828282 solid;
|
||||
transform: skew(-30deg, 0deg);
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
border-bottom: 1px #828282 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trainTrunkViewBLInRhom:before{
|
||||
content: '';
|
||||
transform: skew(50deg, 0deg);
|
||||
transform-origin: bottom center;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-top: 1px #828282 solid;
|
||||
border-right: 1px #828282 solid;
|
||||
}
|
||||
.trainTrunkViewBLInL{
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-right: 1px #fff dashed;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
padding-top: 16px;
|
||||
letter-spacing: 2px;
|
||||
padding-left:27px;
|
||||
}
|
||||
.trainTrunkViewBLInR{
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
padding-top: 16px;
|
||||
letter-spacing: 2px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user