大屏页跳转及样式优化

imt-ui/src/layout/components/Navbar.vue

@@ -7,25 +7,22 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <el-tooltip content="大屏展示" effect="dark" placement="bottom">
+          <svg-icon icon-class="monitor" class-name='right-menu-item hover-effect largeScreen' @click="goLargeScreen"/>
+        </el-tooltip>
         <search id="header-search" class="right-menu-item" />
-
         <!-- 站内信 -->
         <notify-message class="right-menu-item hover-effect" />
-
 <!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
-
         <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip>-->
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -58,8 +55,8 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+/*import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiDoc from '@/components/RuoYi/Doc'*/
 import NotifyMessage from '@/layout/components/Message'
 import {getPath} from "@/utils/ruoyi";
 
@@ -71,8 +68,8 @@ export default {
     Screenfull,
     SizeSelect,
     Search,
-    RuoYiGit,
-    RuoYiDoc,
+    /*RuoYiGit,
+    RuoYiDoc,*/
     NotifyMessage
   },
   computed: {
@@ -103,6 +100,9 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
+    goLargeScreen() {
+      this.$router.push({ path: "/largeScreen" });
+    },
     async logout() {
       this.$modal.confirm('确定注销并退出系统吗？', '提示').then(() => {
         this.$store.dispatch('LogOut').then(() => {
@@ -158,6 +158,10 @@ export default {
       outline: none;
     }
 
+    .largeScreen{
+      width: 38px;
+    }
+
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;

imt-ui/src/router/index.js

@@ -259,6 +259,11 @@ export const constantRoutes = [
       },
       component: (resolve) => require(['@/views/pay/cashier'], resolve)
     }]
+  },{
+    path: '/largeScreen',
+    meta: { title: '大屏展示',affix: false},
+    component: (resolve) => require(['@/views/system/bigscreen/index'], resolve),
+    hidden: true
   }
 ]
 

imt-ui/src/views/system/bigscreen/index.vue

@@ -819,6 +819,7 @@ export default {
   src: url(../../../assets/biaoti.ttf);
 }
 .app {
+  overflow: hidden;
   width: 100%;
   min-height: 100vh; /* 视口高度 */
   color: white;
@@ -845,21 +846,20 @@ export default {
     display: grid;
     grid-template-columns: 24% 50% 24%;
     grid-gap: 1%;
-    min-height: calc(100vh - 50px);
     .company-column {
       display: grid;
       grid-template-rows: repeat(3, 32%);
       grid-gap: 1%;
       &.left-column {
-        grid-template-rows: 35% 30% 35%;
+        grid-template-rows: 33% 29% 33%;
         grid-gap: 1%;
       }
       &.right-column {
-        grid-template-rows: 35% 30% 35%;
+        grid-template-rows: 33% 29% 33%;
         grid-gap: 1%;
       }
       &:nth-child(2) {
-        grid-template-rows: 65% 30%;
+        grid-template-rows: 61% 29%;
         grid-gap: 2%;
         > div {
           padding: 0;