<template>
<div>
<h1>地铁线路实时动态图</h1>
<div class="subway">
<div class="lines">
<div class="line_title" v-for="(item,index) in lines" :key="index">
<div class="line_item">
{{item.lineName}}:
</div>
</div>
</div>
<div class="stations">
<div class="station_title" v-for="(item,index) in stations" :key="index">
<div class="station_item">
{{item.stationName}}
</div>
<div class="line" v-if="index !== stations.length-1"></div>
</div>
</div>
<div class="positions">
<div class="act-point" v-for="(item,index) in positions" :style="{left: item.left + 'px', bottom: item.bottom + 'px'}" ></div>
</div>
</div>
</div>
</template>
<script>
import { setInterval } from 'timers';
export default {
data(){
return {
lines:[{lineName:'13号线'}],
stations: [
{stationName: '西直门'},
{stationName: '大钟寺'},
{stationName: '知春路'},
{stationName: '五道口'},
{stationName: '上地'},
{stationName: '西二旗'},
{stationName: '龙泽'}],
positions: [
{left: 1, bottom:20 ,name: '车01'},
{left: 1, bottom:20 , name: '车02'},
{left: 1, bottom:20 ,name: '车03'},
{left: 1, bottom:20 ,name: '车04'}]
}
},
methods: {
calcPosition() {
let arr = [ 0, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600];
// let arr1 = arr.reverse();
let count = 0;
setInterval(() => {
if (count > arr.length -1) return
this.positions[0].left = arr[count];
this.positions[1].left = arr[count + 1];
this.positions[2].left = arr[count + 2];
this.positions[3].left = arr[count + 3];
count++
console.log(this.positions[0].left)
}, 3000)
// let count1 = 0;
// setInterval(() => {
// if (count > arr1.length -1) return
// this.positions[0].bottom = -25
// this.positions[1].bottom = -25
// this.positions[2].bottom = -25
// this.positions[3].bottom = -25
// this.positions[0].left = arr1[count1];
// this.positions[1].left = arr1[count1 + 1];
// this.positions[2].left = arr1[count1 + 2];
// this.positions[3].left = arr1[count1 + 3];
// count++
// console.log(this.positions[0].left)
// }, 3000)
}
},
mounted(){
this.calcPosition()
}
}
</script>
<style type="text/css">
.subway {
margin-top: 20px;
position: relative;
}
/* 线路 */
.subway .lines .line_item{
margin-bottom:10px;
font-size:16px;
color:#000;
font-weight:bold;
}
/* 车站 */
.subway .station_title {
display: inline-block;
width: 100px;
/* border-bottom: 4px solid #000; */
}
.subway .station_item {
font-size: 12px;
margin-bottom: 40px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
.subway .line {
position: relative;
width: 100px;
border-bottom: 4px solid #000;
/* border-radius: 4px; */
margin-top: 15px;
margin-left:10px;
}
.subway .line::after {
position: absolute;
left: -2px;
bottom: -10px;
content: '';
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #0089ff;
opacity: 1;
}
.subway .station_title:nth-last-child(2) .line::before{