| | |
| | | <template> |
| | | <a-layout> |
| | | <a-layout-header class="scrolling-navbar" :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }"> |
| | | <tag-Header /> |
| | | <a-layout-header class="scrolling-navbar" |
| | | :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }"> |
| | | <tag-Header /> |
| | | </a-layout-header> |
| | | |
| | | <router-view ></router-view> |
| | | <keep-alive> |
| | | <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></router-view> |
| | | </keep-alive> |
| | | |
| | | <a-layout-footer> |
| | | <AplayerBox /> |
| | | <tagFooter /> |
| | | <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo"/> |
| | | |
| | | <a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight" |
| | | style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)"> |
| | | {{miniBoxContent}} |
| | | <a-icon type="youtube" style="transform: scale(1.5);" /> |
| | | </a-button> |
| | | </a-layout-footer> |
| | | |
| | | <a-back-top> |
| | | <a-icon type="up" />回到顶部 |
| | | </a-back-top> |
| | | |
| | | </a-layout> |
| | | </template> |
| | | |
| | | <script> |
| | | // Dplayer Api地址 |
| | | // http://dplayer.js.org/ |
| | | import tagHeader from "../fixed/header.vue" |
| | | import tagFooter from "../fixed/footer.vue" |
| | | import AplayerBox from "../mini/Aplayer.vue" |
| | | import MyVideo from "../group/MyVideo.vue" |
| | | export default { |
| | | components: { |
| | | tagHeader, |
| | | tagFooter, |
| | | AplayerBox, |
| | | MyVideo, |
| | | }, |
| | | data() { |
| | | return { |
| | | |
| | | miniVideoPlayData: null, |
| | | firstQuery: true, |
| | | showMiniBox: false, |
| | | miniBoxContent: "视频盒子", |
| | | } |
| | | }, |
| | | methods: { |
| | | showMyVideo(param) { |
| | | this.miniVideoPlayData = param; |
| | | this.$refs.MyVideo.showModal(param); |
| | | }, |
| | | detailBackAction(param) { |
| | | this.miniVideoPlayData = param; |
| | | this.closeMyVideo() |
| | | }, |
| | | closeMyVideo() { |
| | | if (this.firstQuery) { |
| | | this.firstQuery = !this.firstQuery; |
| | | this.showMiniBox = !this.showMiniBox; |
| | | this.$notification.info({ |
| | | message: '视频盒子最小化啦..', |
| | | placement: 'bottomRight', |
| | | }); |
| | | |
| | | setTimeout(() => { |
| | | this.miniBoxContent = ""; |
| | | }, 6000); |
| | | } |
| | | }, |
| | | // 下载文件 |
| | | down: function() { |
| | | console.log(111); |
| | |
| | | .ant-layout {} |
| | | |
| | | .ant-layout-header { |
| | | |
| | | // background-color: #ffffff; |
| | | backdrop-filter: saturate(180%) blur(1em); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | |
| | | -webkit-backdrop-filter: blur(5px); |
| | | background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%); |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | .ant-timeline-item-head { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | } |
| | | |
| | | span, |
| | |
| | | letter-spacing: 0.8px; |
| | | line-height: 22px; |
| | | } |
| | | |
| | | |
| | | .scrolling-navbar { |
| | | will-change: background, padding,height; |
| | | -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| | | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| | | will-change: background, padding, height; |
| | | -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| | | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| | | } |
| | | |
| | | .fade { |
| | |
| | | -webkit-animation-duration: 2s; |
| | | -webkit-animation-iteration-count: 1; |
| | | } |
| | | |
| | | |
| | | |
| | | .fadeInLeft { |
| | | -webkit-animation-name: "fadeInLeft"; |