PIS轮播图
This commit is contained in:
Yuan
parent
9fe0241959
commit
c4d2bad24e
82
src/views/pis/components/slideshow.vue
Normal file
82
src/views/pis/components/slideshow.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div :class="{ content: true, animation: animation }" :style="`transform: translateX(-${currentIndex}00%)`">
|
||||
<template v-for="(path, idx) in _paths">
|
||||
<img class="img" :src="idx - currentIndex < 3 ? `${prefix}${path}` : ''" :key="`${path}${idx}`" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let timer
|
||||
export default {
|
||||
name: 'SlideShow',
|
||||
props: {
|
||||
paths: {
|
||||
type: Array,
|
||||
validator: val => Array.isArray(val) && val.every(item => typeof item === 'string'),
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
animation: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
len() {
|
||||
return this._paths.length
|
||||
},
|
||||
_paths() {
|
||||
return [...this.paths, this.paths[0]]
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initAnimation()
|
||||
},
|
||||
methods: {
|
||||
initAnimation() {
|
||||
timer = setInterval(() => {
|
||||
this.animation = true
|
||||
this.currentIndex = this.nextIndex(this.currentIndex)
|
||||
setTimeout(() => {
|
||||
if (this.currentIndex === this.len - 1) {
|
||||
this.animation = false
|
||||
this.currentIndex = this.nextIndex(this.currentIndex)
|
||||
}
|
||||
}, 1000)
|
||||
}, 3000)
|
||||
},
|
||||
nextIndex(idx) {
|
||||
return idx < this.len - 1 ? idx + 1 : 0
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
timer = null
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.content {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.animation {
|
||||
transition: 1s linear all;
|
||||
}
|
||||
</style>
|
||||
@ -48,7 +48,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="mediacontent" :style="{ backgroundImage: `url(${standPisImgUrl})` }"></div>
|
||||
<div class="mediacontent">
|
||||
<SlideShow
|
||||
:prefix="prefix"
|
||||
:paths="
|
||||
Array(27)
|
||||
.fill()
|
||||
.map((e, i) => `img${i + 1}.jpg`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="text">{{ standPisState.text }}</div>
|
||||
<div class="text">{{ standPisState.text }}</div>
|
||||
@ -98,7 +107,16 @@
|
||||
}}{{ onboardPisState.endStationNameEn ? ' / TO: ' + currentTrain.endStationNameEn : '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="media" :style="{ backgroundImage: `url(${onboardPisImgUrl})` }"></div>
|
||||
<div class="media">
|
||||
<SlideShow
|
||||
:prefix="prefix"
|
||||
:paths="
|
||||
Array(27)
|
||||
.fill()
|
||||
.map((e, i) => `img${i + 1}.jpg`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
@ -113,8 +131,10 @@
|
||||
import { creatSubscribe, clearSubscribe, getTopic, displayTopic } from '@/utils/stomp'
|
||||
import { timestampFormat } from '@/utils/date'
|
||||
import logo from '@/assets/icon/favicon_hhzy.png'
|
||||
import SlideShow from './components/slideshow'
|
||||
export default {
|
||||
name: 'PIS',
|
||||
components: { SlideShow },
|
||||
watch: {
|
||||
'$store.state.socket.simulationTimeSync': function(val) {
|
||||
this.time = timestampFormat('HH:mm', val)
|
||||
@ -147,18 +167,19 @@ export default {
|
||||
firstEndStationName: '',
|
||||
secondTrainRemain: undefined,
|
||||
secondEndStationName: '',
|
||||
text: '党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
|
||||
text:
|
||||
'党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
|
||||
},
|
||||
onboardPisState: {
|
||||
groupNumber: '',
|
||||
stationName: '',
|
||||
endStationName: '',
|
||||
parking: 0,
|
||||
text:
|
||||
'今日天气：晴，最低气温15℃，最高气温22℃，风向风力：东北风3级，空气质量：良好',
|
||||
text: '今日天气：晴，最低气温15℃，最高气温22℃，风向风力：东北风3级，空气质量：良好',
|
||||
},
|
||||
standPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/standPis.png`,
|
||||
onboardPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/onboardPis.png`,
|
||||
prefix: `${this.$store.state.user.resourcesUrl}/PICTURE/pis/`,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -335,7 +356,7 @@ export default {
|
||||
background: linear-gradient(90deg, #3e4e69, #586baa, #3e4e69);
|
||||
padding: 20px;
|
||||
.logo {
|
||||
height: 12%;
|
||||
height: 12%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
& > img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user