jinna
3 years ago
parent
cebe78b4db
commit
d9a09b2cd9
15 changed files with 15070 additions and 102 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
@ -0,0 +1,257 @@ |
||||
<template> |
||||
<basic-container> |
||||
<el-form :inline="true" :model="stationForm"> |
||||
<el-form-item> |
||||
<el-select v-model="stationForm.car" placeholder="请选择公交车"> |
||||
<el-option |
||||
v-for="item in carOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="stationForm.direction" placeholder="请选择行驶方向"> |
||||
<el-option |
||||
v-for="item in directionOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="station_box"> |
||||
<div class="box"> |
||||
<div class="top_box" v-for="item in stationData" :key="item"></div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bottom_box" :class="active == item.id ? 'active' : ''" v-for="item in stationData" @click="handleEdit(item)" :key="item"> |
||||
<el-popover |
||||
ref="popverRef" |
||||
placement="right" |
||||
width="400" |
||||
trigger="hover" |
||||
@show="showPopver(item)" |
||||
@hide="hidePopver" |
||||
> |
||||
<div> |
||||
<div>{{item.tips}}</div> |
||||
<div>{{item.red}}</div> |
||||
<div>{{item.green}}</div> |
||||
<div>{{item.yellow}}</div> |
||||
<el-carousel trigger="click" height="150px"> |
||||
<el-carousel-item v-for="item1 in item.imgList" :key="item1"> |
||||
<!-- {{item.img}} --> |
||||
<img :src="item1.img" alt=""> |
||||
<!-- <img src="~/@/assets/image/up_1.jpg" alt=""> --> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<div class="name_txt" slot="reference">{{item.name}}</div> |
||||
</el-popover> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="station_box"> |
||||
<div class="box"> |
||||
<div class="top_box" v-for="item in stationData1" :key="item"></div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bottom_box" :class="active == item.id ? 'active' : ''" v-for="item in stationData1" :key="item"> |
||||
<el-popover |
||||
ref="popverRef" |
||||
placement="right" |
||||
width="400" |
||||
trigger="hover" |
||||
@show="showPopver(item)" |
||||
@hide="hidePopver" |
||||
> |
||||
<div> |
||||
<div>{{item.tips}}</div> |
||||
<div>{{item.red}}</div> |
||||
<div>{{item.green}}</div> |
||||
<div>{{item.yellow}}</div> |
||||
<el-carousel trigger="click" height="150px"> |
||||
<el-carousel-item v-for="item1 in item.imgList" :key="item1"> |
||||
<!-- {{item.img}} --> |
||||
<img :src="item1.img" alt=""> |
||||
<!-- <img src="~/@/assets/image/up_1.jpg" alt=""> --> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</div> |
||||
<div class="name_txt" slot="reference">{{item.name}}</div> |
||||
</el-popover> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
active:'', |
||||
stationForm:{}, |
||||
carOptions:[ |
||||
{ |
||||
value:'1', |
||||
label:"17路公交车" |
||||
} |
||||
], |
||||
directionOptions:[ |
||||
{ |
||||
value:1, |
||||
label:'上行' |
||||
}, |
||||
{ |
||||
value:1, |
||||
label:'下行' |
||||
} |
||||
], |
||||
stationArr:[ |
||||
{ |
||||
id:1, |
||||
name:"火车站北广场火车站北广场火车站北广场火车站北广场火车站北广场火车站北广场", |
||||
tips:'终点到了,欢迎您下次乘坐', |
||||
red:'爱在烟台，和你一起', |
||||
green:'有海的城市公交车都很浪漫', |
||||
yellow:'人文注意特色', |
||||
imgList:[ |
||||
{img:require('@/assets/image/up_1.jpg')}, |
||||
{img:require('@/assets/image/up_2.jpg')}, |
||||
{img:require('@/assets/image/up_3.jpg')}, |
||||
] |
||||
}, |
||||
{ |
||||
id:2, |
||||
name:"烟台日报社", |
||||
tips:'烟台日报社到了,欢迎您下次乘坐', |
||||
red:'爱在烟台，和你一起', |
||||
green:'有海的城市公交车都很浪漫', |
||||
yellow:'人文注意特色', |
||||
imgList:[ |
||||
{img:require('@/assets/image/up_1.jpg')}, |
||||
{img:require('@/assets/image/up_2.jpg')}, |
||||
{img:require('@/assets/image/up_3.jpg')}, |
||||
] |
||||
}, |
||||
{ |
||||
id:3, |
||||
name:"北极星钟表站", |
||||
tips:'终点到了,欢迎您下次乘坐', |
||||
red:'爱在烟台，和你一起', |
||||
green:'有海的城市公交车都很浪漫', |
||||
yellow:'人文注意特色', |
||||
imgList:[ |
||||
{img:require('@/assets/image/up_1.jpg')}, |
||||
{img:require('@/assets/image/up_2.jpg')}, |
||||
{img:require('@/assets/image/up_3.jpg')}, |
||||
] |
||||
}, |
||||
{ |
||||
id:4, |
||||
name:"大悦城", |
||||
tips:'终点到了,欢迎您下次乘坐', |
||||
red:'爱在烟台，和你一起', |
||||
green:'有海的城市公交车都很浪漫', |
||||
yellow:'人文注意特色', |
||||
imgList:[ |
||||
{img:require('@/assets/image/up_1.jpg')}, |
||||
{img:require('@/assets/image/up_2.jpg')}, |
||||
{img:require('@/assets/image/up_3.jpg')}, |
||||
] |
||||
}, |
||||
], |
||||
stationData:[], |
||||
stationData1:[], |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
showPopver(val){ |
||||
this.active = val.id |
||||
}, |
||||
hidePopver(){ |
||||
this.active = '' |
||||
}, |
||||
handleEdit(val){ |
||||
console.log(val) |
||||
}, |
||||
getList(){ |
||||
this.stationData = []; |
||||
this.stationData1 = []; |
||||
let temp = []; |
||||
let ranm = []; |
||||
let zongArr = [] |
||||
this.stationArr.forEach( (item, index)=> { |
||||
if (index % 2) { |
||||
temp.push(item) |
||||
} else { |
||||
ranm.push(item) |
||||
} |
||||
}) |
||||
ranm.forEach( (item, index)=> { |
||||
zongArr.push([item,temp[index]]) |
||||
}) |
||||
this.stationData = zongArr[0]; |
||||
this.stationData1 = zongArr[1] |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.station_box{ |
||||
width: 100%; |
||||
height: 350px; |
||||
|
||||
.box{ |
||||
width: 100%; |
||||
height: 20px; |
||||
background: red; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
|
||||
.top_box{ |
||||
width: 15px; |
||||
height: 15px; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
|
||||
.bottom{ |
||||
width: 100%; |
||||
height: 200px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
|
||||
.bottom_box{ |
||||
width: 35px; |
||||
height: 100%; |
||||
cursor: pointer; |
||||
|
||||
.name_txt{ |
||||
height: 100%; |
||||
align-items: center; |
||||
writing-mode: vertical-lr; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
.active{ |
||||
background: gray; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,19 @@ |
||||
<template> |
||||
<basic-container> |
||||
<div style="width:100%;height:780px;"> |
||||
<iframe width="100%" height="100%" src="http://42.192.165.208:8005/" frameborder="0"></iframe> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .top_box{ |
||||
height: 14% !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue