适配看板设计小屏幕上无法显示完全的问题

src/views/custom-infoboard/screen-designer.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <el-header class="bg-blue" style="width: 1210px;margin:0 auto;">
+        <el-header class="bg-blue header" style="margin:0 auto;">
             <!--        <el-image :src="logo" style="width: 50px; height: 50px" fit="fill" />-->
             <el-row>
                 <el-col :span="8">
@@ -15,7 +15,7 @@
             </el-row>
         </el-header>
         <div class="floor-container" :style="{height:floorContainerHeight+'px' }">
-
+            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (floorContainerHeight)+'px'}">
             <div class="tpl-box" :style="tplBoxStyle">
                 <draggable v-model="templateArray" :options="tplOptions" class="tpl-list">
                     <div v-for="item in templateArray" :class="'item-' + item.tpl_id" class="tpl-item">
@@ -62,7 +62,7 @@
                 </div>
 
             </div>
-
+            </el-scrollbar>
         </div>
 
         <board-item-setting
@@ -299,6 +299,18 @@
         width: 100%;
 
     }
+    .header{
+        width: 1210px;
+        overflow: hidden;
+    }
+    @media (max-width: 1300px) {
+        .header{
+            width: 900px;
+        }
+        .container {
+            min-width: 1000px;
+        }
+    }
     .draggable-box .floor {
         width: 800px + 50px;
         flex-shrink: 0;
@@ -351,11 +363,11 @@
         justify-content: center;
         width: 100%;
         height: 100%;
-        overflow-y: scroll;
+        /*overflow-y: hidden;*/
     }
     .floor-list {
         background-color: #E5E7EA;
-        min-width: 75%;
+        /*min-width: 75%;*/
         min-height: 500px;
     }
     .floor-item {
@@ -456,4 +468,14 @@
     .bg-purple-3 {
         background: #e5e9f2;
     }
+    /deep/ .el-scrollbar__wrap {
+        overflow-x: hidden;
+        overflow-y: visible;
+        padding-bottom: 20px;
+    }
+
+     /deep/   .el-scrollbar{
+            width: 100%;
+        }
+
 </style>

src/views/custom-infoboard/templates/common/tpl-one-cloum.vue

@@ -82,7 +82,14 @@
     .floor-layout {
         position: relative;
         width: 1210px;
-        overflow: hidden;
+        overflow: visible;
+    }
+    @media(max-width: 1300px) {
+        .floor-layout {
+            position: relative;
+            width: 900px;
+            overflow: visible;
+        }
     }
 
     .one-cloum {
@@ -95,6 +102,7 @@
         height: 100%;
         overflow: hidden;
         overflow-wrap: break-word;
+        word-break: break-all;
     }
     .titlewrap{
         align-items: center;
@@ -109,6 +117,8 @@
         align-items: center;
         flex-direction: row-reverse;
         width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-all;
     }
 
     /deep/ {

src/views/custom-infoboard/templates/common/tpl-three-colum.vue

@@ -111,7 +111,15 @@
     .floor-layout {
         position: relative;
         width: 1210px;
-        overflow: hidden;
+        overflow: visible;
+    }
+
+    @media(max-width: 1300px) {
+        .floor-layout {
+            position: relative;
+            width: 900px;
+            overflow: visible;
+        }
     }
 
     .one-cloum {
@@ -124,6 +132,7 @@
         height: 100%;
         overflow: hidden;
         overflow-wrap: break-word;
+        word-break: break-all;
     }
     .titlewrap{
         align-items: center;
@@ -138,6 +147,8 @@
         align-items: center;
         flex-direction: row-reverse;
         width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-all;
     }
 
     /deep/ {

src/views/custom-infoboard/templates/common/tpl-two-cloum.vue

@@ -96,7 +96,14 @@
     .floor-layout {
         position: relative;
         width: 1210px;
-        overflow: hidden;
+        overflow: visible;
+    }
+    @media(max-width: 1300px) {
+        .floor-layout {
+            position: relative;
+            width: 900px;
+            overflow: visible;
+        }
     }
 
     .one-cloum {
@@ -109,6 +116,7 @@
         height: 100%;
         overflow: hidden;
         overflow-wrap: break-word;
+        word-break: break-all;
     }
     .titlewrap{
         align-items: center;
@@ -123,6 +131,8 @@
         align-items: center;
         flex-direction: row-reverse;
         width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-all;
     }
 
     /deep/ {