| | |
| | | <div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }"> |
| | | <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox> |
| | | </div> |
| | | <div |
| | | <div |
| | | v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }"> |
| | | <div class="introduce myShadow" v-if="introduce!=''"> |
| | | <pre style="white-space: pre-line;">{{introduce}}</pre> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | loadFinish: false, |
| | | showBackButton: false, |
| | | articleId: "", |
| | | lastArticleId: "", |
| | |
| | | myLock: false, |
| | | showFade: true, |
| | | videoData: { |
| | | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | pic: "", |
| | | url: "", |
| | | type: "normal", |
| | | title: "", |
| | |
| | | return |
| | | } |
| | | |
| | | if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { |
| | | this.$notification.error({ |
| | | message: '此视频还没有上传资源..', |
| | | placement: 'bottomRight' |
| | | }); |
| | | this.videoData.url = ""; |
| | | } else { |
| | | this.videoData.url = res.data.videoUrlList[0]; |
| | | } |
| | | |
| | | this.isAllowedComment = res.data.isAllowedComment; |
| | | this.introduce = res.data.introduce; |
| | | |
| | | this.videoData.url = res.data.articleFileURL; |
| | | this.videoData.img = res.data.coverFileURL; |
| | | |
| | | this.videoData.pic = res.data.coverFileURL; |
| | | this.videoData.title = res.data.title; |
| | | this.videoData.introduce = res.data.introduce; |
| | | this.videoData.id = res.data.id; |
| | | |
| | | |
| | | if (res.data.articleFileURL != null && |
| | | res.data.articleFileURL != "" && |
| | | res.data.articleFileURL.endsWith("m3u8")) { |
| | | this.videoData.type = "customHls"; |
| | | } else { |
| | | this.videoData.type = "normal"; |
| | | } |
| | | |
| | | this.myLock = !this.myLock; |
| | | if (this.lastArticleId != this.articleId) { |
| | |
| | | }, |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | a { |
| | | color: black; |
| | | } |
| | | |
| | | pre { |
| | | font-family: 'HYTangMeiRen'; |
| | | src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype"); |
| | | } |
| | | |
| | | <style lang="less"> |
| | | .boxMain { |
| | | user-select: none; |
| | | grid-template-columns: repeat(2, 1fr); |
| | |
| | | clear: both; |
| | | grid-row-gap: 2rem; |
| | | max-height: 100%; |
| | | |
| | | a { |
| | | color: black; |
| | | } |
| | | |
| | | .playBox { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding: 35px 0px; |
| | | } |
| | | |
| | | .showButtonMargin { |
| | | margin: 75px 0px 0px 0px; |
| | | } |
| | | |
| | | .myShadow { |
| | | |
| | | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), |
| | | -8px -8px 18px #ffffff; |
| | | } |
| | | |
| | | .introduce { |
| | | padding: 20px 20px 5px; |
| | | margin-bottom: 20px; |
| | | } |
| | | } |
| | | |
| | | .playBox { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding: 35px 0px; |
| | | } |
| | | |
| | | .showButtonMargin { |
| | | margin: 75px 0px 0px 0px; |
| | | } |
| | | |
| | | .myShadow { |
| | | |
| | | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), |
| | | -8px -8px 18px #ffffff; |
| | | } |
| | | |
| | | .introduce { |
| | | padding: 20px 20px 5px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | @media screen and (max-width: 1023px) { |
| | | .boxMain { |