Tenlion/xzrkz-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成音频、视频、图片详情页面模板

Browse Source
This commit is contained in:
wanggeng 2023-03-10 22:04:59 +08:00
parent da77c63886
commit 9de5ce78c1
5 changed files with 507 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/NewsViewDetail/NewsViewDetailAudio.vue
View File

@ -1,7 +1,7 @@
<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">
@ -16,8 +16,8 @@
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer/>
<loading v-show="isLoading" /> <loading v-show="isLoading"/>
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
Loading, Loading,
Nav Nav
}, },
data() { data () {
return { return {
isLoading: false, isLoading: false,
navs: [ navs: [
@ -56,21 +56,21 @@ export default {
} }
}, },
methods: { methods: {
onVideoPlayClick(file) { onVideoPlayClick (file) {
this.playFileId = file.contentFileFileId this.playFileId = file.contentFileFileId
}, },
init() { init () {
let vueSelf = this; let vueSelf = this
vueSelf.isLoading = true; vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => { axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data; let data = resp.data
vueSelf.title = data.newsContentTitle; vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId; vueSelf.playFileId = data.fileList[0].contentFileFileId
if(data.newsContentCoverList.length > 0 && if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) { data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
} }
vueSelf.fileList = data.fileList; vueSelf.fileList = data.fileList
}).catch(resp => { }).catch(resp => {
console.error(resp) console.error(resp)
}).finally(() => { }).finally(() => {
@ -79,15 +79,15 @@ export default {
} }
}, },
computed: { computed: {
getSrc() { getSrc () {
return `${common.url}route/file/download/true/${this.playFileId}` return `${common.url}route/file/download/true/${this.playFileId}`
}, },
getPosterSrc() { getPosterSrc () {
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg` return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
}
}, },
}, mounted () {
mounted() { this.init()
this.init();
} }
} }
</script> </script>
@ -102,6 +102,7 @@ export default {
align-items center align-items center
font-family '宋体' font-family '宋体'
background-color #3e3e3e background-color #3e3e3e
.title .title
font-size 20px font-size 20px
color #fff color #fff
@ -109,29 +110,35 @@ export default {
line-height 35px line-height 35px
text-align center text-align center
padding 10px 0 padding 10px 0
.player .player
display flex display flex
justify-content center justify-content center
.video .video
video video
width 100% width 100%
height 100% height 100%
background-color #000 background-color #000
outline none outline none
.list .list
background-color #343434 background-color #343434
display flex display flex
flex-direction column flex-direction column
.play-title .play-title
font-size 18px font-size 18px
color #f9f6f6 color #f9f6f6
text-align center text-align center
border-bottom 2px solid #797777 border-bottom 2px solid #797777
padding 10px padding 10px
.play-buttons .play-buttons
display flex display flex
flex-wrap wrap flex-wrap wrap
padding 5px 0 5px 5px padding 5px 0 5px 5px
a a
width 44px width 44px
height 34px height 34px
@ -140,13 +147,17 @@ export default {
background-color #3a3a3a background-color #3a3a3a
color #FFF color #FFF
margin 0 5px 5px 0 margin 0 5px 5px 0
a:hover a:hover
background-color #A0333B background-color #A0333B
.active .active
background-color #A0333B background-color #A0333B
@media (min-width: 1200px) @media (min-width: 1200px)
.title .title
width 1200px width 1200px
.player .player
width 1200px width 1200px
flex-direction row flex-direction row
@ -154,12 +165,15 @@ export default {
.video .video
width 800px width 800px
height 600px height 600px
.list .list
width 300px width 300px
min-height 600px min-height 600px
@media (max-width: 1200px) @media (max-width: 1200px)
.title .title
width 600px width 600px
.player .player
width 600px width 600px
flex-direction column flex-direction column
@ -167,6 +181,7 @@ export default {
.video .video
width 100% width 100%
height 450px height 450px
.list .list
width 100% width 100%
min-height 150px min-height 150px

94
src/pages/NewsViewDetail/NewsViewDetailImage.vue
View File

@ -1,25 +1,27 @@
<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>
<div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="onSwiperMainSlidePrev()"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next" @click="onSwiperMainSlideNext()"></div>
</swiper> </swiper>
<swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs"> <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
<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="'s_'+ index">
<img alt="暂无图片" class="banner-img" :src="getSrc(file)"> <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
</div> </div>
<Footer /> <Footer/>
<loading v-show="isLoading" /> <loading v-show="isLoading"/>
</div> </div>
</template> </template>
@ -39,7 +41,8 @@ export default {
Loading, Loading,
Nav Nav
}, },
data() { data () {
let vueSelf = this
return { return {
isLoading: false, isLoading: false,
navs: [ navs: [
@ -52,47 +55,68 @@ export default {
} }
], ],
title: '', title: '',
swiperOptions: { swiperMain: null,
swiperOptionsMain: {
pagination: '.swiper-pagination', pagination: '.swiper-pagination',
paginationClickable: true, paginationClickable: true,
loop: true, loop: false,
loopedSlides: 8, loopedSlides: 0,
spaceBetween: 10, spaceBetween: 10,
autoplay: 3000, autoplay: 3000,
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev' prevEl: '.swiper-button-prev'
},
onSlideChangeStart (swiper) {
if (vueSelf.swiperThumbs) {
vueSelf.swiperThumbs.slideTo(swiper.activeIndex, 300, false)
}
} }
}, },
swiperThumbs: null,
swiperOptionThumbs: { swiperOptionThumbs: {
loop: true, loop: false,
loopedSlides: 0,
spaceBetween: 10, spaceBetween: 10,
centeredSlides: true, centeredSlides: true,
slidesPerView: 4, slidesPerView: 4,
touchRatio: 1, touchRatio: 1,
slideToClickedSlide: true, slideToClickedSlide: true,
watchSlidesVisibility: true,
onSlideChangeStart (swiper) {
if (vueSelf.swiperMain) {
vueSelf.swiperMain.slideTo(swiper.activeIndex, 300, false)
}
}
}, },
fileList: [] fileList: []
} }
}, },
methods: { methods: {
getSrc(file) { 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}` return `${common.url}route/file/download/false/${file.contentFileFileId}`
}, },
init() { init () {
let vueSelf = this; let vueSelf = this
vueSelf.isLoading = true; vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => { axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data; let data = resp.data
vueSelf.title = data.newsContentTitle; vueSelf.title = data.newsContentTitle
vueSelf.fileList = data.fileList; vueSelf.fileList = data.fileList
vueSelf.$nextTick(() => { setTimeout(() => {
const swiperMain = vueSelf.$refs.swiperMain.swiper vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
const swiperThumbs = vueSelf.$refs.swiperThumbs.swiper vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
console.log(vueSelf.$refs) }, 1000)
swiperMain.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperMain
})
}).catch(resp => { }).catch(resp => {
console.error(resp) console.error(resp)
}).finally(() => { }).finally(() => {
@ -102,9 +126,8 @@ export default {
}, },
computed: { computed: {
}, },
mounted() { mounted () {
this.init()
this.init();
} }
} }
</script> </script>
@ -119,6 +142,7 @@ export default {
align-items center align-items center
font-family '宋体' font-family '宋体'
background-color #5b5b5b background-color #5b5b5b
.title .title
font-size 20px font-size 20px
color #fff color #fff
@ -126,45 +150,57 @@ export default {
line-height 35px line-height 35px
text-align center text-align center
padding 10px 0 padding 10px 0
.swiper-container-outer .swiper-container-outer
position relative position relative
box-sizing border-box box-sizing border-box
background-color #3e3e3e background-color #3e3e3e
padding 10px padding 10px
.swiper-outer .swiper-outer
width 1180px width 1180px
height 500px height 500px
background-color #000 background-color #000
.swiper-box .swiper-box
cursor pointer cursor pointer
img img
width 100% width 100%
height 100% height 100%
object-fit scale-down object-fit scale-down
.swiper-thumbs .swiper-thumbs
height 200px height 200px
box-sizing border-box box-sizing border-box
margin-top 10px margin-top 10px
.swiper-box .swiper-box
width 25% width 25%
height 100% height 100%
opacity 0.4 opacity 0.4
cursor pointer cursor pointer
.swiper-slide-active .swiper-slide-active
opacity 1 opacity 1
img img
width 100% width 100%
height 100% height 100%
background-color #000 background-color #000
object-fit scale-down object-fit scale-down
@media (min-width: 1200px) @media (min-width: 1200px)
.title .title
width 1200px width 1200px
.swiper-container-outer .swiper-container-outer
width 1200px width 1200px
@media (max-width: 1200px) @media (max-width: 1200px)
.title .title
width 600px width 600px
.swiper-container-outer .swiper-container-outer
width 600px width 600px
</style> </style>

55
src/pages/NewsViewDetail/NewsViewDetailVideo.vue
View File

@ -1,7 +1,7 @@
<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">
@ -16,8 +16,8 @@
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer/>
<loading v-show="isLoading" /> <loading v-show="isLoading"/>
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
Loading, Loading,
Nav Nav
}, },
data() { data () {
return { return {
isLoading: false, isLoading: false,
navs: [ navs: [
@ -56,21 +56,21 @@ export default {
} }
}, },
methods: { methods: {
onVideoPlayClick(file) { onVideoPlayClick (file) {
this.playFileId = file.contentFileFileId this.playFileId = file.contentFileFileId
}, },
init() { init () {
let vueSelf = this; let vueSelf = this
vueSelf.isLoading = true; vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => { axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data; let data = resp.data
vueSelf.title = data.newsContentTitle; vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId; vueSelf.playFileId = data.fileList[0].contentFileFileId
if(data.newsContentCoverList.length > 0 && if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) { data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
} }
vueSelf.fileList = data.fileList; vueSelf.fileList = data.fileList
}).catch(resp => { }).catch(resp => {
console.error(resp) console.error(resp)
}).finally(() => { }).finally(() => {
@ -79,15 +79,15 @@ export default {
} }
}, },
computed: { computed: {
getSrc() { getSrc () {
return `${common.url}route/file/download/true/${this.playFileId}` return `${common.url}route/file/download/true/${this.playFileId}`
}, },
getPosterSrc() { getPosterSrc () {
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg` return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-video.jpeg`
}
}, },
}, mounted () {
mounted() { this.init()
this.init();
} }
} }
</script> </script>
@ -102,6 +102,7 @@ export default {
align-items center align-items center
font-family '宋体' font-family '宋体'
background-color #3e3e3e background-color #3e3e3e
.title .title
font-size 20px font-size 20px
color #fff color #fff
@ -109,29 +110,35 @@ export default {
line-height 35px line-height 35px
text-align center text-align center
padding 10px 0 padding 10px 0
.player .player
display flex display flex
justify-content center justify-content center
.video .video
video video
width 100% width 100%
height 100% height 100%
background-color #000 background-color #000
outline none outline none
.list .list
background-color #343434 background-color #343434
display flex display flex
flex-direction column flex-direction column
.play-title .play-title
font-size 18px font-size 18px
color #f9f6f6 color #f9f6f6
text-align center text-align center
border-bottom 2px solid #797777 border-bottom 2px solid #797777
padding 10px padding 10px
.play-buttons .play-buttons
display flex display flex
flex-wrap wrap flex-wrap wrap
padding 5px 0 5px 5px padding 5px 0 5px 5px
a a
width 44px width 44px
height 34px height 34px
@ -140,13 +147,17 @@ export default {
background-color #3a3a3a background-color #3a3a3a
color #FFF color #FFF
margin 0 5px 5px 0 margin 0 5px 5px 0
a:hover a:hover
background-color #A0333B background-color #A0333B
.active .active
background-color #A0333B background-color #A0333B
@media (min-width: 1200px) @media (min-width: 1200px)
.title .title
width 1200px width 1200px
.player .player
width 1200px width 1200px
flex-direction row flex-direction row
@ -154,12 +165,15 @@ export default {
.video .video
width 800px width 800px
height 600px height 600px
.list .list
width 300px width 300px
min-height 600px min-height 600px
@media (max-width: 1200px) @media (max-width: 1200px)
.title .title
width 600px width 600px
.player .player
width 600px width 600px
flex-direction column flex-direction column
@ -167,6 +181,7 @@ export default {
.video .video
width 100% width 100%
height 450px height 450px
.list .list
width 100% width 100%
min-height 150px min-height 150px

BIN
static/poster-audio.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
static/poster-video.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB