首页显示

src/views/Home/cells/NoticeAnnouncement.vue

@@ -4,18 +4,20 @@
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </CellHeaderVue>
-    <div class="cell-content">
-      <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
-        <div class="notice-title" :class="{ active: idx === 0 }">
-          <a :href="item.url" target="_blank" rel="noopener noreferrer">
-            {{ item.title }}
-          </a>
-        </div>
-        <div class="notice-date">
-          {{ item.date }}
+    <c-content :height="cellScrollHeight">
+      <div class="cell-content">
+        <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
+          <div class="notice-title" :class="{ active: idx === 0 }">
+            <a :href="item.url" target="_blank" rel="noopener noreferrer">
+              {{ item.title }}
+            </a>
+          </div>
+          <div class="notice-date">
+            {{ item.date }}
+          </div>
         </div>
       </div>
-    </div>
+    </c-content>
   </div>
 </template>
 
@@ -25,6 +27,12 @@ import CellHeaderVue from "./CellHeader.vue";
 export default {
   name: "NoticeAnnouncement",
   components: { CellHeaderVue },
+  props: {
+    cellScrollHeight: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       noticeList: [

src/views/Home/cells/QuickSearch.vue

 <template>
   <div class="home-cell" id="quickSearch">
     <CellHeaderVue title="快速查询"> </CellHeaderVue>
-    <div class="cell-content">
-      <div
-        class="content-wrapper"
-        v-for="(item, index) in options"
-        :key="index"
-      >
-        <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>
+    <c-content :height="cellScrollHeight">
+      <div class="cell-content">
+        <div
+          class="content-wrapper"
+          v-for="(item, index) in options"
+          :key="index"
+          :style="{ height: wrapperHeight + '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>
           </div>
         </div>
       </div>
-    </div>
+    </c-content>
   </div>
 </template>
 
@@ -25,6 +28,19 @@ import CellHeaderVue from "./CellHeader.vue";
 export default {
   name: "QuickSearch",
   components: { CellHeaderVue },
+  props: {
+    cellScrollHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    wrapperHeight() {
+      return Math.floor(
+        (window.document.body.clientHeight - this.cellScrollHeight) * 0.3
+      );
+    },
+  },
   data() {
     return {
       options: [

src/views/Home/cells/QuickVisit.vue

@@ -2,12 +2,13 @@
   <div class="home-cell" id="quickVisit">
     <CellHeaderVue title="快速访问"> </CellHeaderVue>
 
-      <!-- <el-scrollbar  :vertical="true" style="height: 100%;"> -->
-    <div class="cell-content">
+    <c-content :height="cellScrollHeight">
+      <div class="cell-content">
         <div
           class="content-wrapper"
           v-for="(item, index) in quickVisitItem"
           :key="index"
+          :style="{ height: wrapperHeight + 'px' }"
         >
           <div class="visit-item-wrapper">
             <div class="visit-item">
@@ -17,8 +18,8 @@
             </div>
           </div>
         </div>
-    </div>
-      <!-- </el-scrollbar> -->
+      </div>
+    </c-content>
   </div>
 </template>
 
@@ -28,6 +29,19 @@ import CellHeaderVue from "./CellHeader.vue";
 export default {
   name: "QuickVisit",
   components: { CellHeaderVue },
+  props: {
+    cellScrollHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    wrapperHeight() {
+      return Math.floor(
+        (window.document.body.clientHeight - this.cellScrollHeight) * 0.3
+      );
+    },
+  },
   data() {
     return {
       quickVisitItem: [
@@ -91,7 +105,7 @@ export default {
 #quickVisit .content-wrapper {
   display: inline-block;
   width: 33%;
-  height: 30%;
+  /* height: 30%; */
 }
 #quickVisit .cell-content .visit-item-wrapper {
   display: flex;

src/views/Home/index.vue

 <template>
   <div class="eContainer-home">
-    <QuickVisitVue></QuickVisitVue>
+    <QuickVisitVue :cellScrollHeight="cellScrollHeight"></QuickVisitVue>
     <TaskStatisticsVue></TaskStatisticsVue>
-    <NoticeAnnouncementVue></NoticeAnnouncementVue>
+    <NoticeAnnouncementVue :cellScrollHeight="cellScrollHeight"></NoticeAnnouncementVue>
     <HallVue></HallVue>
     <CustomerAnalyseVue></CustomerAnalyseVue>
-    <QuickSearchVue></QuickSearchVue>
+    <QuickSearchVue :cellScrollHeight="cellScrollHeight"></QuickSearchVue>
   </div>
 </template>
 
 <script>
 import QuickVisitVue from "./cells/QuickVisit.vue";
-import TaskStatisticsVue from './cells/TaskStatistics.vue';
+import TaskStatisticsVue from "./cells/TaskStatistics.vue";
 import NoticeAnnouncementVue from "./cells/NoticeAnnouncement.vue";
 import HallVue from "./cells/Hall.vue";
 import CustomerAnalyseVue from "./cells/CustomerAnalyse.vue";
@@ -27,8 +27,15 @@ export default {
     CustomerAnalyseVue,
     QuickSearchVue,
   },
+  created() {
+    this.cellScrollHeight =
+      window.document.body.clientHeight -
+      (window.document.body.clientHeight - 110 - 52 * 2 - 10) / 2;
+  },
   data() {
-    return {};
+    return {
+      cellScrollHeight: null,
+    };
   },
 };
 </script>

src/views/TaskList/index.vue

@@ -3,7 +3,7 @@
     <c-tabs :value="tabVal" type="card" @tab-click="tabClick">
       <el-tab-pane label="待经办列表" name="sptsel">
         <!-- <c-table :columnsConfig="tableColumns" :list="tableData"></c-table> -->
-        <c-content :height="0">
+        <c-content :height="160">
         <span slot="label">
           待经办列表
           <el-badge v-if="$store.state.Status.taskList.sptsel>0" :value="$store.state.Status.taskList.sptsel" :max="99"/>
@@ -13,7 +13,7 @@
       </el-tab-pane>
       
       <el-tab-pane label="待复核列表" name="trnrel">
-        <c-content>
+        <c-content :height="160">
         <span slot="label">
           待复核列表
           <el-badge v-if="$store.state.Status.taskList.trnrel>0" :value="$store.state.Status.taskList.trnrel" :max="99"/>
@@ -36,7 +36,7 @@
        <t-sptbrk />
       </el-tab-pane>
       <el-tab-pane label="到期提示" name="diasel">
-        <c-content :height="0">
+        <c-content :height="160">
        <t-diasel/>
         </c-content>
       </el-tab-pane>