src/components/layouts/baseLayout.vue

@@ -1,32 +1,79 @@
<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" @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 tagFooter from "../fixed/footer.vue"
   const tagFooter = () => import("../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);
@@ -60,8 +107,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 +128,10 @@
         }
      }

      .ant-timeline-item-head {
         background-color: transparent !important;
      }

   }

   span,
@@ -90,12 +141,20 @@
      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;