src/components/layouts/baseLayout.vue

@@ -6,17 +6,18 @@
      </a-layout-header>

      <keep-alive>
         <router-view @showMyVideo="showMyVideo"></router-view>
         <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></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" />
         <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>

@@ -28,6 +29,8 @@
</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"
@@ -42,22 +45,32 @@
      data() {
         return {
            miniVideoPlayData: null,
            showMiniBox: false
            firstQuery: true,
            showMiniBox: false,
            miniBoxContent: "视频盒子",
         }
      },
      methods: {
         showMyVideo(param) {
            this.miniVideoPlayData = param;
            console.log("开启mini盒子");


            this.$refs.MyVideo.showModal(param);
            if (!this.showMiniBox) {
         },
         detailBackAction(param) {
            this.miniVideoPlayData = param;
            this.closeMyVideo()
         },
         closeMyVideo() {
            if (this.firstQuery) {
               this.firstQuery = !this.firstQuery;
               this.showMiniBox = !this.showMiniBox;
               this.$notification.info({
                  message: '这里是盒子的最小化啦..',
                  message: '视频盒子最小化啦..',
                  placement: 'bottomRight',
               });
               this.showMiniBox = true;

               setTimeout(() => {
                  this.miniBoxContent = "";
               }, 6000);
            }
         },
         // 下载文件
@@ -138,6 +151,8 @@
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: 1;
   }
	
	 

   .fadeInLeft {
      -webkit-animation-name: "fadeInLeft";