From af029bdfb645bd2b75fbab687c1a5f45b428d801 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 11 Aug 2022 18:53:48 +0800
Subject: [PATCH] 优化上传逻辑,月台添加mini播放弹窗
---
src/components/layouts/baseLayout.vue | 51 +++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 47 insertions(+), 4 deletions(-)
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index 9d5a6ee..04cfdc4 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/src/components/layouts/baseLayout.vue
@@ -1,32 +1,65 @@
<template>
<a-layout>
- <a-layout-header :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
+ <a-layout-header class="scrolling-navbar"
+ :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
<tag-Header />
</a-layout-header>
- <router-view class="fade"></router-view>
+ <keep-alive>
+ <router-view @showMyVideo="showMyVideo"></router-view>
+ </keep-alive>
<a-layout-footer>
+ <AplayerBox />
<tagFooter />
+ <MyVideo ref="MyVideo" />
+ <a-button v-if="miniVideoPlayData!=null" class="fadeInRight"
+ style="position: fixed;right: 0px;bottom: 120px;" @click="showMyVideo(miniVideoPlayData)">
+ 视频盒子
+ <a-icon type="youtube" />
+ </a-button>
</a-layout-footer>
+
+ <a-back-top>
+ <a-icon type="up" />回到顶部
+ </a-back-top>
+
</a-layout>
</template>
<script>
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,
+ showMiniBox: false
}
},
methods: {
+ showMyVideo(param) {
+ this.miniVideoPlayData = param;
+ console.log("开启mini盒子");
+
+ this.$refs.MyVideo.showModal(param);
+ if (!this.showMiniBox) {
+ this.$notification.info({
+ message: '这里是盒子的最小化啦..',
+ placement: 'bottomRight',
+ });
+ this.showMiniBox = true;
+ }
+ },
// 下载文件
down: function() {
console.log(111);
@@ -60,8 +93,8 @@
.ant-layout {}
.ant-layout-header {
- // background-color: #ffffff;
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%);
}
@@ -81,6 +114,10 @@
}
}
+ .ant-timeline-item-head {
+ background-color: transparent !important;
+ }
+
}
span,
@@ -90,6 +127,12 @@
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;
--
Gitblit v1.9.1