首页

src/components/Row.vue

 <template>
-  <el-row v-on="$attrs" v-bind="$listeners">
+  <el-row v-bind="$attrs" v-on="$listeners">
     <slot></slot>
   </el-row>
 </template>

src/views/Home/cells/NoticeAnnouncement.vue

@@ -5,7 +5,7 @@
       <span class="el-icon-more" title="操作"></span>
     </CellHeaderVue>
 
-    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
+    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
       <div class="cell-content">
         <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
           <div class="notice-title" :class="{ active: idx === 0 }">
@@ -34,11 +34,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    scrollbarHeight() {
-      return window.document.body.clientHeight - this.cellScrollHeight;
-    },
-  },
   data() {
     return {
       noticeList: [

src/views/Home/cells/QuickSearch.vue

@@ -2,17 +2,16 @@
   <div class="home-cell" id="quickSearch">
     <CellHeaderVue title="快速查询"> </CellHeaderVue>
 
-    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
+    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
       <div class="cell-content">
         <div
           class="content-wrapper"
           v-for="(item, index) in options"
           :key="index"
-          :style="{ height: Math.floor(scrollbarHeight * 0.3) + 'px' }"
+          :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
         >
           <div class="search-item-wrapper">
             <div class="search-item">
-              <!-- <i class="el-icon-set-up"></i> -->
               <img :src="item.icon" alt="" />
               <span>{{ item.name }}</span>
             </div>
@@ -35,11 +34,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    scrollbarHeight() {
-      return window.document.body.clientHeight - this.cellScrollHeight;
-    },
-  },
   data() {
     return {
       options: [

src/views/Home/cells/QuickVisit.vue

@@ -2,17 +2,16 @@
   <div class="home-cell" id="quickVisit">
     <CellHeaderVue title="快速访问"> </CellHeaderVue>
 
-    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
+    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
       <div class="cell-content">
         <div
           class="content-wrapper"
           v-for="(item, index) in quickVisitItem"
           :key="index"
-          :style="{ height: Math.floor(scrollbarHeight * 0.3) + 'px' }"
+          :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
         >
           <div class="visit-item-wrapper">
             <div class="visit-item">
-              <!-- <i class="el-icon-set-up"></i> -->
               <img :src="item.icon" alt="" />
               <span>{{ item.name }}</span>
             </div>
@@ -35,11 +34,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    scrollbarHeight() {
-      return window.document.body.clientHeight - this.cellScrollHeight;
-    },
-  },
   data() {
     return {
       quickVisitItem: [

src/views/Home/index.vue

@@ -2,7 +2,7 @@
   <div class="eContainer-home">
     <QuickVisitVue :cellScrollHeight="cellScrollHeight"></QuickVisitVue>
     <TaskStatisticsVue></TaskStatisticsVue>
-    <NoticeAnnouncementVue :cellScrollHeight="cellScrollHeight"></NoticeAnnouncementVue>
+    <NoticeAnnouncementVue :cellScrollHeight="cellScrollHeight" ></NoticeAnnouncementVue>
     <HallVue></HallVue>
     <CustomerAnalyseVue></CustomerAnalyseVue>
     <QuickSearchVue :cellScrollHeight="cellScrollHeight"></QuickSearchVue>
@@ -27,24 +27,24 @@ export default {
     CustomerAnalyseVue,
     QuickSearchVue,
   },
-  created() {
+  mounted() {
     this.calcCellScrollHeight();
-    this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this)
-    window.addEventListener("resize", this.calcCellScrollHeightBind)
+    this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this);
+    window.addEventListener("resize", this.calcCellScrollHeightBind);
   },
   data() {
     return {
-      cellScrollHeight: null,
+      cellScrollHeight: 0,
     };
   },
   methods: {
     calcCellScrollHeight() {
-      this.cellScrollHeight = window.document.body.clientHeight - (window.document.body.clientHeight - 110 - 52 * 2 - 10) / 2;
-    }
+      this.cellScrollHeight = this.$el.clientHeight * 0.49 - 52;
+    },
   },
   destroyed() {
-    window.removeEventListener("resize", this.calcCellScrollHeightBind)
-  }
+    window.removeEventListener("resize", this.calcCellScrollHeightBind);
+  },
 };
 </script>
 
@@ -70,7 +70,7 @@ export default {
   height: calc(100% - 52px);
   overflow: auto;
 }
-.home-cell >>> .el-scrollbar__wrap{
+.home-cell >>> .el-scrollbar__wrap {
   overflow-y: scroll;
   overflow-x: auto;
 }

src/views/TaskList/index.vue

@@ -106,7 +106,7 @@ export default {
 
 <style scoped>
 .eContainer-taskList {
-  padding: 3px 15px;
+  /* padding: 3px 15px; */
 }
 </style>
 <style>