Skip to content

S
ssr-pc
Commit 25abb8d4 by tangjiale
Options

1

parent 319db36b
Showing with 34 additions and 215 deletions
pages/components/center-video.vue deleted 100644 → 0
<template>
<div>
<div class="flex-s">
<img class="decorate" src="@/assets/images/screen/video-t-l.png" alt=""><img class="decorate" src="@/assets/images/screen/video-t-r.png" alt="">
</div>
<div class="swiper-container swiper-no-swiping" ref="video-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in banners">
<template v-if="type == 2">
<video :id="'video' + index" muted
preload="auto"
x5-video-player-type="h5-page"
:controls="true"
style="object-fit:cover"
></video>
</template>
<template v-else>
<img :src="item" alt="">
</template>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="flex-s">
<img class="decorate btm-d" src="@/assets/images/screen/video-b-l.png" alt=""><img class="decorate btm-d" src="@/assets/images/screen/video-b-r.png" alt="">
</div>
<!--<div class="time">数据统计时间：{{stateNum.updateTime}}</div>-->
</div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
export default {
name: "center-video",
props:{
list:{
type:Array,
default:[]
},
stateNum:{
type:Object,
default:() => {
return {}
}
},
type:String
},
data(){
return{
active:0,
videos:'',
videoSwiper:'',
// list:[
// '','','','','',''
// ]
banners:[]
}
},
created(){
this.banners = this.type == 2 ? this.list : ['https://cdn.xiaobentiyu.cn/yueluscreen/1.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/2.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/3.jpg']
},
mounted(){
if (typeof window !== 'undefined') {
require('flv.js')
}
const Swiper = require('Swiper')
//轮播参数
let _this = this;
this.videoSwiper = new Swiper(this.$refs['video-swiper'], {
direction: "horizontal",
initialSlide: _this.active,
observer: true,
observeParents: true,
speed: 1500,
autoplay:_this.type == 2 ? false : 3000,
spaceBetween: 0,
pagination : '.swiper-pagination',
});
if(this.type != 2) return
let that = this
this.banners.forEach((item, index) => {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById("video" + index);
player = flvjs.createPlayer({
type: "mp4", //=> 媒体类型 flv 或 mp4
isLive: false, //=> 是否为直播流
hasAudio: true, //=> 是否开启声音
url: item, //=> 视频流地址
});
player.attachMediaElement(videoElement); //=> 绑DOM
player.load();
videoElement.addEventListener('ended', function(event) {
if ((that.active + 1) != that.banners.length) {
that.active += 1;
} else {
that.active = 0
}
//切换swiper
that.videoSwiper.slideTo(that.active, 1000, false);
//播放视频
that.changeVideoSrc()
})
} else {
console.log("flvjs不支持");
}
});
this.changeVideoSrc()
},
methods:{
changeVideoSrc(){
let that = this
var dom = document;
var videoDom = dom.getElementById(`video${that.active}`);
if(that.active != 0){
videoDom.muted = false
}
videoDom.play();
}
}
}
</script>
<style scoped lang="less">
/deep/ .swiper-pagination{
bottom: 35px !important;
}
/deep/ .swiper-pagination-bullet{
height: 10px !important;
width: 10px !important;
background: #FFFFFF;
opacity: 0.34;
}
/deep/ .swiper-pagination-bullet-active{
opacity: 1 !important;
}
video{
width: 100%;
height: 100%;
}
.flex-s{
display: flex;
justify-content: space-between;
.btm-d{
margin-top: 10px !important;}
.decorate{
height: 14px;
width: 220px;
margin-top: 33px;
}
.swiper-container{
margin-top: 10px;
height: 540px;
width: 906px;
.swiper-slide{
width: 100%;
img{
width: 100%;
height: 100%;
}
}
}
.time{
text-align: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #BFCAFF;
opacity: 0.49;
}
}
</style>
pages/screen.vue
<template>
<div class="index-page">
<div class="index-page-head">{{type == 2 ? '天心区智慧体育监测平台' : '岳麓区智慧体育服务平台'}}</div>
<div class="flex-s">
<div class="left">
<comBox height="284px" title="智能设备使用监测（本学期）">
<left-a :statisticsObj="dataObj.statisticsObj"></left-a>
</comBox>
<comBox marginTop="34px" height="244px" title="智能跳绳个人榜 TOP 20 （本学期）">
<left-b v-if="dataObj.studentTop && dataObj.studentTop.length" :list="dataObj.studentTop"></left-b>
</comBox>
<comBox height="244px" marginTop="30px" title="智能跳绳学校榜 TOP 10 （本学期）">
<left-c v-if="dataObj.schoolTop && dataObj.schoolTop.length" :list="dataObj.schoolTop"></left-c>
</comBox>
</div>
<div class="center">
<!--视频轮播播放-->
<centerVideo :type="type" v-if="localBanner && localBanner.length" :list="localBanner" :stateNum="dataObj.statistics"></centerVideo>
<center-a v-if="dataObj.xxOption && dataObj.xxOption.length" :xxOption="dataObj.xxOption"></center-a>
</div>
<div class="right">
<comBox height="284px" title="学生运动参与总览（本学期）">
<right-a :stateNum="dataObj.statistics"></right-a>
</comBox>
<comBox marginTop="34px" height="244px" title="各级学生运动参与分布（本学期）">
<right-b v-if="dataObj.year && dataObj.year.length" :list="dataObj.year"></right-b>
</comBox>
<right-c v-if="dataObj.zxOption && dataObj.zxOption.length" :zxOption="dataObj.zxOption" ref="right-c"></right-c>
</div>
</div>
<!--<div class="index-page-head">{{type == 2 ? '天心区智慧体育监测平台' : '岳麓区智慧体育服务平台'}}</div>-->
<!--<div class="flex-s">-->
<!--<div class="left">-->
<!--<comBox height="284px" title="智能设备使用监测（本学期）">-->
<!--<left-a :statisticsObj="dataObj.statisticsObj"></left-a>-->
<!--</comBox>-->
<!--<comBox marginTop="34px" height="244px" title="智能跳绳个人榜 TOP 20 （本学期）">-->
<!--<left-b v-if="dataObj.studentTop && dataObj.studentTop.length" :list="dataObj.studentTop"></left-b>-->
<!--</comBox>-->
<!--<comBox height="244px" marginTop="30px" title="智能跳绳学校榜 TOP 10 （本学期）">-->
<!--<left-c v-if="dataObj.schoolTop && dataObj.schoolTop.length" :list="dataObj.schoolTop"></left-c>-->
<!--</comBox>-->
<!--</div>-->
<!--<div class="center">-->
<!--&lt;!&ndash;视频轮播播放&ndash;&gt;-->
<!--<centerVideo :type="type" v-if="localBanner && localBanner.length" :list="localBanner" :stateNum="dataObj.statistics"></centerVideo>-->
<!--<center-a v-if="dataObj.xxOption && dataObj.xxOption.length" :xxOption="dataObj.xxOption"></center-a>-->
<!--</div>-->
<!--<div class="right">-->
<!--<comBox height="284px" title="学生运动参与总览（本学期）">-->
<!--<right-a :stateNum="dataObj.statistics"></right-a>-->
<!--</comBox>-->
<!--<comBox marginTop="34px" height="244px" title="各级学生运动参与分布（本学期）">-->
<!--<right-b v-if="dataObj.year && dataObj.year.length" :list="dataObj.year"></right-b>-->
<!--</comBox>-->
<!--<right-c v-if="dataObj.zxOption && dataObj.zxOption.length" :zxOption="dataObj.zxOption" ref="right-c"></right-c>-->
<!--</div>-->
<!--</div>-->
</div>
</template>
<script>
import comBox from './components/monitor-head'
import centerVideo from './components/center-video'
import leftA from './components/left-a-ctn'
import leftB from './components/left-b-ctn'
import leftC from './components/left-c-ctn'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment