完成音频、视频、图片详情页面模板
This commit is contained in:
parent
da77c63886
commit
9de5ce78c1
@ -1,24 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header/>
|
||||||
<Nav :navs="navs" />
|
<Nav :navs="navs"/>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ title }}</div>
|
||||||
<div class="player" v-show="playFileId">
|
<div class="player" v-show="playFileId">
|
||||||
<div class="video">
|
<div class="video">
|
||||||
<video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
|
<video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
|
||||||
</div>
|
|
||||||
<div class="list">
|
|
||||||
<div class="play-title">目录</div>
|
|
||||||
<div class="play-buttons">
|
|
||||||
<a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<div class="list">
|
||||||
<loading v-show="isLoading" />
|
<div class="play-title">目录</div>
|
||||||
|
<div class="play-buttons">
|
||||||
|
<a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
<loading v-show="isLoading"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -30,144 +30,159 @@ import Nav from '../../component/Nav'
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NewsViewDetailAudio',
|
name: 'NewsViewDetailAudio',
|
||||||
components: {
|
components: {
|
||||||
Header,
|
Header,
|
||||||
Footer,
|
Footer,
|
||||||
Loading,
|
Loading,
|
||||||
Nav
|
Nav
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
navs: [
|
navs: [
|
||||||
{
|
{
|
||||||
to: this.$route.query.navPath,
|
to: this.$route.query.navPath,
|
||||||
name: this.$route.query.navTitle
|
name: this.$route.query.navTitle
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '详情'
|
name: '详情'
|
||||||
}
|
|
||||||
],
|
|
||||||
title: '',
|
|
||||||
playFileId: '',
|
|
||||||
coverFileId: '',
|
|
||||||
fileList: []
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
methods: {
|
title: '',
|
||||||
onVideoPlayClick(file) {
|
playFileId: '',
|
||||||
this.playFileId = file.contentFileFileId
|
coverFileId: '',
|
||||||
},
|
fileList: []
|
||||||
init() {
|
|
||||||
let vueSelf = this;
|
|
||||||
vueSelf.isLoading = true;
|
|
||||||
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
|
||||||
let data = resp.data;
|
|
||||||
vueSelf.title = data.newsContentTitle;
|
|
||||||
vueSelf.playFileId = data.fileList[0].contentFileFileId;
|
|
||||||
if(data.newsContentCoverList.length > 0 &&
|
|
||||||
data.newsContentCoverList[0].contentCoverId) {
|
|
||||||
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
|
|
||||||
}
|
|
||||||
vueSelf.fileList = data.fileList;
|
|
||||||
}).catch(resp => {
|
|
||||||
console.error(resp)
|
|
||||||
}).finally(() => {
|
|
||||||
vueSelf.isLoading = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getSrc() {
|
|
||||||
return `${common.url}route/file/download/true/${this.playFileId}`
|
|
||||||
},
|
|
||||||
getPosterSrc() {
|
|
||||||
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onVideoPlayClick (file) {
|
||||||
|
this.playFileId = file.contentFileFileId
|
||||||
|
},
|
||||||
|
init () {
|
||||||
|
let vueSelf = this
|
||||||
|
vueSelf.isLoading = true
|
||||||
|
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
||||||
|
let data = resp.data
|
||||||
|
vueSelf.title = data.newsContentTitle
|
||||||
|
vueSelf.playFileId = data.fileList[0].contentFileFileId
|
||||||
|
if (data.newsContentCoverList.length > 0 &&
|
||||||
|
data.newsContentCoverList[0].contentCoverId) {
|
||||||
|
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
|
||||||
|
}
|
||||||
|
vueSelf.fileList = data.fileList
|
||||||
|
}).catch(resp => {
|
||||||
|
console.error(resp)
|
||||||
|
}).finally(() => {
|
||||||
|
vueSelf.isLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getSrc () {
|
||||||
|
return `${common.url}route/file/download/true/${this.playFileId}`
|
||||||
|
},
|
||||||
|
getPosterSrc () {
|
||||||
|
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.container
|
.container
|
||||||
width 100%
|
width 100%
|
||||||
min-height 450px
|
min-height 450px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
align-items center
|
||||||
|
font-family '宋体'
|
||||||
|
background-color #3e3e3e
|
||||||
|
|
||||||
|
.title
|
||||||
|
font-size 20px
|
||||||
|
color #fff
|
||||||
|
font-weight normal
|
||||||
|
line-height 35px
|
||||||
|
text-align center
|
||||||
|
padding 10px 0
|
||||||
|
|
||||||
|
.player
|
||||||
display flex
|
display flex
|
||||||
flex-direction column
|
justify-content center
|
||||||
align-items center
|
|
||||||
font-family '宋体'
|
.video
|
||||||
background-color #3e3e3e
|
video
|
||||||
.title
|
width 100%
|
||||||
font-size 20px
|
height 100%
|
||||||
color #fff
|
background-color #000
|
||||||
font-weight normal
|
outline none
|
||||||
line-height 35px
|
|
||||||
|
.list
|
||||||
|
background-color #343434
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
|
||||||
|
.play-title
|
||||||
|
font-size 18px
|
||||||
|
color #f9f6f6
|
||||||
text-align center
|
text-align center
|
||||||
padding 10px 0
|
border-bottom 2px solid #797777
|
||||||
.player
|
padding 10px
|
||||||
|
|
||||||
|
.play-buttons
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
flex-wrap wrap
|
||||||
.video
|
padding 5px 0 5px 5px
|
||||||
video
|
|
||||||
width 100%
|
a
|
||||||
height 100%
|
width 44px
|
||||||
background-color #000
|
height 34px
|
||||||
outline none
|
line-height 34px
|
||||||
.list
|
text-align center
|
||||||
background-color #343434
|
background-color #3a3a3a
|
||||||
display flex
|
color #FFF
|
||||||
flex-direction column
|
margin 0 5px 5px 0
|
||||||
.play-title
|
|
||||||
font-size 18px
|
a:hover
|
||||||
color #f9f6f6
|
background-color #A0333B
|
||||||
text-align center
|
|
||||||
border-bottom 2px solid #797777
|
.active
|
||||||
padding 10px
|
background-color #A0333B
|
||||||
.play-buttons
|
|
||||||
display flex
|
|
||||||
flex-wrap wrap
|
|
||||||
padding 5px 0 5px 5px
|
|
||||||
a
|
|
||||||
width 44px
|
|
||||||
height 34px
|
|
||||||
line-height 34px
|
|
||||||
text-align center
|
|
||||||
background-color #3a3a3a
|
|
||||||
color #FFF
|
|
||||||
margin 0 5px 5px 0
|
|
||||||
a:hover
|
|
||||||
background-color #A0333B
|
|
||||||
.active
|
|
||||||
background-color #A0333B
|
|
||||||
@media (min-width: 1200px)
|
@media (min-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 1200px
|
width 1200px
|
||||||
.player
|
|
||||||
width 1200px
|
.player
|
||||||
flex-direction row
|
width 1200px
|
||||||
|
flex-direction row
|
||||||
.video
|
|
||||||
width 800px
|
.video
|
||||||
height 600px
|
width 800px
|
||||||
.list
|
height 600px
|
||||||
width 300px
|
|
||||||
min-height 600px
|
.list
|
||||||
|
width 300px
|
||||||
|
min-height 600px
|
||||||
|
|
||||||
@media (max-width: 1200px)
|
@media (max-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 600px
|
width 600px
|
||||||
.player
|
|
||||||
width 600px
|
.player
|
||||||
flex-direction column
|
width 600px
|
||||||
|
flex-direction column
|
||||||
.video
|
|
||||||
width 100%
|
.video
|
||||||
height 450px
|
width 100%
|
||||||
.list
|
height 450px
|
||||||
width 100%
|
|
||||||
min-height 150px
|
.list
|
||||||
</style>
|
width 100%
|
||||||
|
min-height 150px
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header/>
|
||||||
<Nav :navs="navs" />
|
<Nav :navs="navs"/>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ title }}</div>
|
||||||
<div class="swiper-container-outer">
|
<div class="swiper-container-outer">
|
||||||
<swiper ref="swiperMain" class="swiper-outer" v-if="fileList.length > 0" :options="swiperOptions">
|
<swiper ref="swiperMain" class="swiper-outer" :options="swiperOptionsMain">
|
||||||
<swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
|
<swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="index">
|
||||||
<img alt="暂无图片" :src="getSrc(file)">
|
<img alt="暂无图片" :src="getSrc(file)">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<div class="swiper-pagination" slot="pagination"></div>
|
<div class="swiper-pagination" slot="pagination"></div>
|
||||||
</swiper>
|
<div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="onSwiperMainSlidePrev()"></div>
|
||||||
<swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
|
<div class="swiper-button-next swiper-button-white" slot="button-next" @click="onSwiperMainSlideNext()"></div>
|
||||||
<swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
|
</swiper>
|
||||||
<img alt="暂无图片" class="banner-img" :src="getSrc(file)">
|
<swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
|
||||||
</swiper-slide>
|
<swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="'s_'+ index">
|
||||||
</swiper>
|
<img alt="暂无图片" class="banner-img" :src="getSrc(file)">
|
||||||
</div>
|
</swiper-slide>
|
||||||
</div>
|
</swiper>
|
||||||
<Footer />
|
</div>
|
||||||
<loading v-show="isLoading" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
<loading v-show="isLoading"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -32,139 +34,173 @@ import Nav from '../../component/Nav'
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NewsViewDetailImage',
|
name: 'NewsViewDetailImage',
|
||||||
components: {
|
components: {
|
||||||
Header,
|
Header,
|
||||||
Footer,
|
Footer,
|
||||||
Loading,
|
Loading,
|
||||||
Nav
|
Nav
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
let vueSelf = this
|
||||||
isLoading: false,
|
return {
|
||||||
navs: [
|
isLoading: false,
|
||||||
{
|
navs: [
|
||||||
to: this.$route.query.navPath,
|
{
|
||||||
name: this.$route.query.navTitle
|
to: this.$route.query.navPath,
|
||||||
},
|
name: this.$route.query.navTitle
|
||||||
{
|
|
||||||
name: '详情'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
title: '',
|
|
||||||
swiperOptions: {
|
|
||||||
pagination: '.swiper-pagination',
|
|
||||||
paginationClickable: true,
|
|
||||||
loop: true,
|
|
||||||
loopedSlides: 8,
|
|
||||||
spaceBetween: 10,
|
|
||||||
autoplay: 3000,
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
swiperOptionThumbs: {
|
|
||||||
loop: true,
|
|
||||||
spaceBetween: 10,
|
|
||||||
centeredSlides: true,
|
|
||||||
slidesPerView: 4,
|
|
||||||
touchRatio: 1,
|
|
||||||
slideToClickedSlide: true,
|
|
||||||
},
|
|
||||||
fileList: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getSrc(file) {
|
|
||||||
return `${common.url}route/file/download/false/${file.contentFileFileId}`
|
|
||||||
},
|
},
|
||||||
init() {
|
{
|
||||||
let vueSelf = this;
|
name: '详情'
|
||||||
vueSelf.isLoading = true;
|
|
||||||
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
|
||||||
let data = resp.data;
|
|
||||||
vueSelf.title = data.newsContentTitle;
|
|
||||||
vueSelf.fileList = data.fileList;
|
|
||||||
vueSelf.$nextTick(() => {
|
|
||||||
const swiperMain = vueSelf.$refs.swiperMain.swiper
|
|
||||||
const swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
|
|
||||||
console.log(vueSelf.$refs)
|
|
||||||
swiperMain.controller.control = swiperThumbs
|
|
||||||
swiperThumbs.controller.control = swiperMain
|
|
||||||
})
|
|
||||||
}).catch(resp => {
|
|
||||||
console.error(resp)
|
|
||||||
}).finally(() => {
|
|
||||||
vueSelf.isLoading = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
computed: {
|
title: '',
|
||||||
},
|
swiperMain: null,
|
||||||
mounted() {
|
swiperOptionsMain: {
|
||||||
|
pagination: '.swiper-pagination',
|
||||||
this.init();
|
paginationClickable: true,
|
||||||
|
loop: false,
|
||||||
|
loopedSlides: 0,
|
||||||
|
spaceBetween: 10,
|
||||||
|
autoplay: 3000,
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev'
|
||||||
|
},
|
||||||
|
onSlideChangeStart (swiper) {
|
||||||
|
if (vueSelf.swiperThumbs) {
|
||||||
|
vueSelf.swiperThumbs.slideTo(swiper.activeIndex, 300, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
swiperThumbs: null,
|
||||||
|
swiperOptionThumbs: {
|
||||||
|
loop: false,
|
||||||
|
loopedSlides: 0,
|
||||||
|
spaceBetween: 10,
|
||||||
|
centeredSlides: true,
|
||||||
|
slidesPerView: 4,
|
||||||
|
touchRatio: 1,
|
||||||
|
slideToClickedSlide: true,
|
||||||
|
watchSlidesVisibility: true,
|
||||||
|
onSlideChangeStart (swiper) {
|
||||||
|
if (vueSelf.swiperMain) {
|
||||||
|
vueSelf.swiperMain.slideTo(swiper.activeIndex, 300, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fileList: []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSwiperMainSlidePrev () {
|
||||||
|
if (this.swiperMain) {
|
||||||
|
this.swiperMain.slidePrev()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSwiperMainSlideNext () {
|
||||||
|
if (this.swiperMain) {
|
||||||
|
this.swiperMain.slideNext()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSrc (file) {
|
||||||
|
return `${common.url}route/file/download/false/${file.contentFileFileId}`
|
||||||
|
},
|
||||||
|
init () {
|
||||||
|
let vueSelf = this
|
||||||
|
vueSelf.isLoading = true
|
||||||
|
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
||||||
|
let data = resp.data
|
||||||
|
vueSelf.title = data.newsContentTitle
|
||||||
|
vueSelf.fileList = data.fileList
|
||||||
|
setTimeout(() => {
|
||||||
|
vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
|
||||||
|
vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
|
||||||
|
}, 1000)
|
||||||
|
}).catch(resp => {
|
||||||
|
console.error(resp)
|
||||||
|
}).finally(() => {
|
||||||
|
vueSelf.isLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.container
|
.container
|
||||||
width 100%
|
width 100%
|
||||||
min-height 450px
|
min-height 450px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
display flex
|
display flex
|
||||||
flex-direction column
|
flex-direction column
|
||||||
align-items center
|
align-items center
|
||||||
font-family '宋体'
|
font-family '宋体'
|
||||||
background-color #5b5b5b
|
background-color #5b5b5b
|
||||||
.title
|
|
||||||
font-size 20px
|
.title
|
||||||
color #fff
|
font-size 20px
|
||||||
font-weight normal
|
color #fff
|
||||||
line-height 35px
|
font-weight normal
|
||||||
text-align center
|
line-height 35px
|
||||||
padding 10px 0
|
text-align center
|
||||||
.swiper-container-outer
|
padding 10px 0
|
||||||
position relative
|
|
||||||
box-sizing border-box
|
.swiper-container-outer
|
||||||
background-color #3e3e3e
|
position relative
|
||||||
padding 10px
|
box-sizing border-box
|
||||||
.swiper-outer
|
background-color #3e3e3e
|
||||||
width 1180px
|
padding 10px
|
||||||
height 500px
|
|
||||||
background-color #000
|
.swiper-outer
|
||||||
.swiper-box
|
width 1180px
|
||||||
cursor pointer
|
height 500px
|
||||||
img
|
background-color #000
|
||||||
width 100%
|
|
||||||
height 100%
|
.swiper-box
|
||||||
object-fit scale-down
|
cursor pointer
|
||||||
.swiper-thumbs
|
|
||||||
height 200px
|
img
|
||||||
box-sizing border-box
|
width 100%
|
||||||
margin-top 10px
|
height 100%
|
||||||
.swiper-box
|
object-fit scale-down
|
||||||
width 25%
|
|
||||||
height 100%
|
.swiper-thumbs
|
||||||
opacity 0.4
|
height 200px
|
||||||
cursor pointer
|
box-sizing border-box
|
||||||
.swiper-slide-active
|
margin-top 10px
|
||||||
opacity 1
|
|
||||||
img
|
.swiper-box
|
||||||
width 100%
|
width 25%
|
||||||
height 100%
|
height 100%
|
||||||
background-color #000
|
opacity 0.4
|
||||||
object-fit scale-down
|
cursor pointer
|
||||||
|
|
||||||
|
.swiper-slide-active
|
||||||
|
opacity 1
|
||||||
|
|
||||||
|
img
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
background-color #000
|
||||||
|
object-fit scale-down
|
||||||
|
|
||||||
@media (min-width: 1200px)
|
@media (min-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 1200px
|
width 1200px
|
||||||
.swiper-container-outer
|
|
||||||
width 1200px
|
.swiper-container-outer
|
||||||
|
width 1200px
|
||||||
|
|
||||||
@media (max-width: 1200px)
|
@media (max-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 600px
|
width 600px
|
||||||
.swiper-container-outer
|
|
||||||
width 600px
|
.swiper-container-outer
|
||||||
</style>
|
width 600px
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,24 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header/>
|
||||||
<Nav :navs="navs" />
|
<Nav :navs="navs"/>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ title }}</div>
|
||||||
<div class="player" v-show="playFileId">
|
<div class="player" v-show="playFileId">
|
||||||
<div class="video">
|
<div class="video">
|
||||||
<video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
|
<video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
|
||||||
</div>
|
|
||||||
<div class="list">
|
|
||||||
<div class="play-title">目录</div>
|
|
||||||
<div class="play-buttons">
|
|
||||||
<a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<div class="list">
|
||||||
<loading v-show="isLoading" />
|
<div class="play-title">目录</div>
|
||||||
|
<div class="play-buttons">
|
||||||
|
<a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer/>
|
||||||
|
<loading v-show="isLoading"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -30,144 +30,159 @@ import Nav from '../../component/Nav'
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NewsViewDetailVideo',
|
name: 'NewsViewDetailVideo',
|
||||||
components: {
|
components: {
|
||||||
Header,
|
Header,
|
||||||
Footer,
|
Footer,
|
||||||
Loading,
|
Loading,
|
||||||
Nav
|
Nav
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
navs: [
|
navs: [
|
||||||
{
|
{
|
||||||
to: this.$route.query.navPath,
|
to: this.$route.query.navPath,
|
||||||
name: this.$route.query.navTitle
|
name: this.$route.query.navTitle
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '详情'
|
name: '详情'
|
||||||
}
|
|
||||||
],
|
|
||||||
title: '',
|
|
||||||
playFileId: '',
|
|
||||||
coverFileId: '',
|
|
||||||
fileList: []
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
methods: {
|
title: '',
|
||||||
onVideoPlayClick(file) {
|
playFileId: '',
|
||||||
this.playFileId = file.contentFileFileId
|
coverFileId: '',
|
||||||
},
|
fileList: []
|
||||||
init() {
|
|
||||||
let vueSelf = this;
|
|
||||||
vueSelf.isLoading = true;
|
|
||||||
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
|
||||||
let data = resp.data;
|
|
||||||
vueSelf.title = data.newsContentTitle;
|
|
||||||
vueSelf.playFileId = data.fileList[0].contentFileFileId;
|
|
||||||
if(data.newsContentCoverList.length > 0 &&
|
|
||||||
data.newsContentCoverList[0].contentCoverId) {
|
|
||||||
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
|
|
||||||
}
|
|
||||||
vueSelf.fileList = data.fileList;
|
|
||||||
}).catch(resp => {
|
|
||||||
console.error(resp)
|
|
||||||
}).finally(() => {
|
|
||||||
vueSelf.isLoading = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getSrc() {
|
|
||||||
return `${common.url}route/file/download/true/${this.playFileId}`
|
|
||||||
},
|
|
||||||
getPosterSrc() {
|
|
||||||
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onVideoPlayClick (file) {
|
||||||
|
this.playFileId = file.contentFileFileId
|
||||||
|
},
|
||||||
|
init () {
|
||||||
|
let vueSelf = this
|
||||||
|
vueSelf.isLoading = true
|
||||||
|
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
|
||||||
|
let data = resp.data
|
||||||
|
vueSelf.title = data.newsContentTitle
|
||||||
|
vueSelf.playFileId = data.fileList[0].contentFileFileId
|
||||||
|
if (data.newsContentCoverList.length > 0 &&
|
||||||
|
data.newsContentCoverList[0].contentCoverId) {
|
||||||
|
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
|
||||||
|
}
|
||||||
|
vueSelf.fileList = data.fileList
|
||||||
|
}).catch(resp => {
|
||||||
|
console.error(resp)
|
||||||
|
}).finally(() => {
|
||||||
|
vueSelf.isLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getSrc () {
|
||||||
|
return `${common.url}route/file/download/true/${this.playFileId}`
|
||||||
|
},
|
||||||
|
getPosterSrc () {
|
||||||
|
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-video.jpeg`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.container
|
.container
|
||||||
width 100%
|
width 100%
|
||||||
min-height 450px
|
min-height 450px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
align-items center
|
||||||
|
font-family '宋体'
|
||||||
|
background-color #3e3e3e
|
||||||
|
|
||||||
|
.title
|
||||||
|
font-size 20px
|
||||||
|
color #fff
|
||||||
|
font-weight normal
|
||||||
|
line-height 35px
|
||||||
|
text-align center
|
||||||
|
padding 10px 0
|
||||||
|
|
||||||
|
.player
|
||||||
display flex
|
display flex
|
||||||
flex-direction column
|
justify-content center
|
||||||
align-items center
|
|
||||||
font-family '宋体'
|
.video
|
||||||
background-color #3e3e3e
|
video
|
||||||
.title
|
width 100%
|
||||||
font-size 20px
|
height 100%
|
||||||
color #fff
|
background-color #000
|
||||||
font-weight normal
|
outline none
|
||||||
line-height 35px
|
|
||||||
|
.list
|
||||||
|
background-color #343434
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
|
||||||
|
.play-title
|
||||||
|
font-size 18px
|
||||||
|
color #f9f6f6
|
||||||
text-align center
|
text-align center
|
||||||
padding 10px 0
|
border-bottom 2px solid #797777
|
||||||
.player
|
padding 10px
|
||||||
|
|
||||||
|
.play-buttons
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
flex-wrap wrap
|
||||||
.video
|
padding 5px 0 5px 5px
|
||||||
video
|
|
||||||
width 100%
|
a
|
||||||
height 100%
|
width 44px
|
||||||
background-color #000
|
height 34px
|
||||||
outline none
|
line-height 34px
|
||||||
.list
|
text-align center
|
||||||
background-color #343434
|
background-color #3a3a3a
|
||||||
display flex
|
color #FFF
|
||||||
flex-direction column
|
margin 0 5px 5px 0
|
||||||
.play-title
|
|
||||||
font-size 18px
|
a:hover
|
||||||
color #f9f6f6
|
background-color #A0333B
|
||||||
text-align center
|
|
||||||
border-bottom 2px solid #797777
|
.active
|
||||||
padding 10px
|
background-color #A0333B
|
||||||
.play-buttons
|
|
||||||
display flex
|
|
||||||
flex-wrap wrap
|
|
||||||
padding 5px 0 5px 5px
|
|
||||||
a
|
|
||||||
width 44px
|
|
||||||
height 34px
|
|
||||||
line-height 34px
|
|
||||||
text-align center
|
|
||||||
background-color #3a3a3a
|
|
||||||
color #FFF
|
|
||||||
margin 0 5px 5px 0
|
|
||||||
a:hover
|
|
||||||
background-color #A0333B
|
|
||||||
.active
|
|
||||||
background-color #A0333B
|
|
||||||
@media (min-width: 1200px)
|
@media (min-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 1200px
|
width 1200px
|
||||||
.player
|
|
||||||
width 1200px
|
.player
|
||||||
flex-direction row
|
width 1200px
|
||||||
|
flex-direction row
|
||||||
.video
|
|
||||||
width 800px
|
.video
|
||||||
height 600px
|
width 800px
|
||||||
.list
|
height 600px
|
||||||
width 300px
|
|
||||||
min-height 600px
|
.list
|
||||||
|
width 300px
|
||||||
|
min-height 600px
|
||||||
|
|
||||||
@media (max-width: 1200px)
|
@media (max-width: 1200px)
|
||||||
.title
|
.title
|
||||||
width 600px
|
width 600px
|
||||||
.player
|
|
||||||
width 600px
|
.player
|
||||||
flex-direction column
|
width 600px
|
||||||
|
flex-direction column
|
||||||
.video
|
|
||||||
width 100%
|
.video
|
||||||
height 450px
|
width 100%
|
||||||
.list
|
height 450px
|
||||||
width 100%
|
|
||||||
min-height 150px
|
.list
|
||||||
</style>
|
width 100%
|
||||||
|
min-height 150px
|
||||||
|
</style>
|
||||||
|
|||||||
BIN
static/poster-audio.jpeg
Normal file
BIN
static/poster-audio.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
BIN
static/poster-video.jpeg
Normal file
BIN
static/poster-video.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Loading…
Reference in New Issue
Block a user