<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>
|
|
<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);
|
this.$axios({
|
"url": "http://192.168.40.149:9000/test2/save/%E6%B5%8B%E8%AF%95%E9%83%A8/%E6%96%87%E4%BB%B6%E7%BB%84/OIP-C.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin/20220113/us-east-1/s3/aws4_request&X-Amz-Date=20220113T085350Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=36db32d3fe577716ada0655379327e837efdfd3a133be6051281ae9eaad8e04f",
|
"method": "get",
|
"responseType": "blob"
|
|
}).then((res) => {
|
|
let blob = new Blob([res.data], {
|
type: "application/octet-stream"
|
});
|
let url = window.URL.createObjectURL(blob)
|
let link = document.createElement('a')
|
link.download = "inleft.jpg"
|
|
link.style.display = 'none'
|
link.href = url
|
document.body.appendChild(link)
|
link.click()
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.app {
|
.ant-layout {}
|
|
.ant-layout-header {
|
backdrop-filter: saturate(180%) blur(1em);
|
-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-layout-footer {
|
background-color: #edf1f299;
|
padding: 0px;
|
padding-top: 20px;
|
|
p {
|
margin: auto;
|
color: #757575;
|
}
|
|
a {
|
opacity: 0.8;
|
color: #757575;
|
}
|
}
|
|
.ant-timeline-item-head {
|
background-color: transparent !important;
|
}
|
|
}
|
|
span,
|
p {
|
font-size: 17px;
|
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;
|
}
|
|
.fade {
|
-webkit-animation-name: "fade";
|
-webkit-animation-duration: 2s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
|
|
.fadeInLeft {
|
-webkit-animation-name: "fadeInLeft";
|
-webkit-animation-duration: 1s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
.fadeInRight {
|
-webkit-animation-name: "fadeInRight";
|
-webkit-animation-duration: 1s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
|
// 动画
|
@-webkit-keyframes fadeInLeft {
|
0% {
|
opacity: 0;
|
-webkit-transform: translateX(-120px);
|
}
|
|
100% {
|
opacity: 1;
|
-webkit-transform: translateX(0);
|
}
|
}
|
|
@keyframes fadeInLeft {
|
0% {
|
opacity: 0;
|
transform: translateX(-120px);
|
}
|
|
100% {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@-webkit-keyframes fadeInRight {
|
0% {
|
opacity: 0;
|
-webkit-transform: translateX(120px);
|
}
|
|
100% {
|
opacity: 1;
|
-webkit-transform: translateX(0);
|
}
|
}
|
|
@keyframes fadeInRight {
|
0% {
|
opacity: 0;
|
transform: translateX(120px);
|
}
|
|
100% {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@-webkit-keyframes fade {
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
|
@keyframes fade {
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
</style>
|
