1、调整页面bug

src/assets/styles/index.scss

@@ -196,3 +196,21 @@ aside {
   border-top: 1px solid #DCDFE6;
 }
 
+// 主内容区滚动：navbar+tags 占顶部，app-main 占剩余高度并滚动（仅改布局，不影响页面内按钮）
+#app .main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#app .main-container > div:first-child {
+  flex-shrink: 0;
+}
+
+#app .main-container > .app-main {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}

src/assets/styles/transition.scss

@@ -1,54 +1,48 @@
-// base color
-$blue:#324157;
-$light-blue:#006CFF;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
-
-// 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#07052F;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
-
-// 自定义暗色菜单风格
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-
-$base-sidebar-width: 200px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuColor: $base-menu-color;
-  menuLightColor: $base-menu-light-color;
-  menuColorActive: $base-menu-color-active;
-  menuBackground: $base-menu-background;
-  menuLightBackground: $base-menu-light-background;
-  subMenuBackground: $base-sub-menu-background;
-  subMenuHover: $base-sub-menu-hover;
-  sideBarWidth: $base-sidebar-width;
-  logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
 }

src/components/RightToolbar/index.vue

@@ -76,9 +76,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .top-right-btn {
-  float: none;
-  margin-left: auto;
-  flex-shrink: 0;
+  position: relative;
+  float: right;
 }
 ::v-deep .el-transfer__button {
   border-radius: 50%;

src/layout/components/AppMain.vue

@@ -3,10 +3,8 @@
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />
-
       </keep-alive>
     </transition>
-
   </section>
 </template>
 
@@ -26,24 +24,16 @@ export default {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 50px;
 }
 
 .hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
-
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 84px;
   }
 }
@@ -56,5 +46,4 @@ export default {
     padding-right: 15px;
   }
 }
-
 </style>

src/layout/index.vue

@@ -21,12 +21,11 @@
     </div>
 
     <el-dialog append-to-body
+               v-if="qw.initLoad"
                :width="qw.isMaximized ? '100vw' : '90vw'"
                custom-class="im-dialog"
                :fullscreen="qw.isMaximized"
                :visible.sync="qw.open"
-               :style="{visibility: !qw.initLoad ? 'hidden' : 'unset'}"
-               :modal="qw.initLoad"
                :title="qw.title">
       <div class="qw-im-content">
         <QwIM :showQw="qw.open" :isMaximized="qw.isMaximized" @close="() => qw.open = false"/>
@@ -89,15 +88,7 @@ export default {
     }
   },
   mounted() {
-    if (!this.qw.initLoad) {
-      this.qw.open = true
-      this.$nextTick(() => {
-        this.qw.open = false
-        setTimeout(() => {
-          this.qw.initLoad = true
-        },  500)
-      })
-    }
+    this.qw.initLoad = true
   },
   methods: {
     handleClickOutside() {

src/views/live/liveVideo/index.vue

@@ -288,15 +288,26 @@ export default {
         this.download(response.msg);
         this.exportLoading = false;
       }).catch(() => {});
+    },
+    pauseTableVideos() {
+      if (!this.$el) return;
+      this.$el.querySelectorAll('video').forEach((video) => {
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+      });
     }
+  },
+  deactivated() {
+    this.pauseTableVideos();
   }
 };
 </script>
 
 <style scoped>
 .video-player {
-  width: 100%;
-  height: 100%;
+  width: 200px;
+  height: 120px;
   object-fit: cover;
 }
 </style>