home ui

src/views/Business/Brtdck/index.vue

 <template>
-  <c-page>
-    <div class="eContainer">
+  <div class="eContainer">
+    <c-page>
       <!-- <c-bus-button :$pntvm="this"></c-bus-button> j加操作按钮-->
       <el-form
         :model="model"
@@ -109,8 +109,8 @@
         @select-ety="selectMsg"
       >
       </c-grid-ety-prompt-dialog>
-    </div>
-  </c-page>
+    </c-page>
+  </div>
 </template>
 <script>
 import Api from '~/service/Api'

src/views/Business/Brtlat/index.vue

 <template>
-  <c-page>
-    <div class="eContainer">
+	<div class="eContainer">
+  		<c-page>
           
 			<el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" label-position="right" size="small" :validate-on-rule-change="false">
 						<c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="myTabClick">
@@ -124,8 +124,8 @@
 			<!-- <el-button size="small">拆分报文</el-button> -->
 			<!-- <el-button size="small">智能提示</el-button> -->
 			</c-function-btn>
-		</div>
-  </c-page>
+  		</c-page>
+	</div>
 </template>
 <script>
 import Api from "~/service/Api"

src/views/Business/Litdav/index.vue

 <template>
-  <c-page title="进口信用证通知">
-    <div class="eContainer">
+  <div class="eContainer">
+    <c-page title="进口信用证通知">
       <el-form
         :model="model"
         :rules="rules"
@@ -106,8 +106,8 @@
         v-on:select-ety="selectEty"
       >
       </c-grid-ety-prompt-dialog>
-    </div>
-  </c-page>
+    </c-page>
+  </div>
 </template>
 <script>
 import Api from "~/service/Api";

src/views/Home/cells/NoticeAnnouncement.vue

@@ -6,7 +6,7 @@
     </template>
 
     <div class="notice-container">
-      <el-scrollbar style="height: 100%;">
+      <el-scrollbar style="height: 100%;padding-right: 10px;">
         <div class="notice-item" v-for="(item, idx) in  testData" :key="idx">
           <div class="notice-title" :class="{ active: idx === 0 }">
             <a :href="item.url" target="_blank" rel="noopener noreferrer">

src/views/Home/index.vue

 <template>
   <div class="eContainer-home">
     <c-row
-      :gutter="10"
       v-for="cRow in cellRows"
       :key="cRow"
     >
-      <c-col
-        :span="24 / cellCols"
+      <div class="cell-item"
+        :style="{'width': cellWidth + 'px'}"
         v-for="cCol in cellCols"
         :key="cCol"
       >
@@ -15,7 +14,7 @@
           v-bind:is="getComponentName([cRow - 1], [cCol - 1])"
           :cellContentHeight="cellContentHeight"
         ></component>
-      </c-col>
+      </div>
     </c-row>
   </div>
 </template>
@@ -46,6 +45,7 @@ export default {
   data() {
     return {
       cellContentHeight: 0,
+      cellWidth: 0
     };
   },
   created() {
@@ -67,6 +67,9 @@ export default {
     cellRows(newVal, oldVal) {
       this.calcCellContentHeight()
     },
+    cellCols(newVal, oldVal) {
+      this.calcCellContentWidth()
+    }
   },
   methods: {
     loadCellData() {
@@ -117,12 +120,16 @@ export default {
       return this.cellNames[rowIdx] ? this.cellNames[rowIdx][colIdx] : null;
     },
     calcCellContentHeight() {
-      this.cellContentHeight = this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10
+      // this.cellContentHeight = this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10
+      this.cellContentHeight = (this.$el.clientHeight - (this.cellRows + 1) * 25 - (52 + 10) * this.cellRows) / this.cellRows
     },
     getRowHeightPercent() {
       // 每行预留 0.4% 的间距
       return 1 / this.cellRows - 0.004 * this.cellRows;
     },
+    calcCellContentWidth() {
+      this.cellWidth = (this.$el.clientWidth - (this.cellCols + 1) * 25) / this.cellCols
+    }
   },
   destroyed() {
     window.removeEventListener("resize", this.calcCellContentHeightBind);
@@ -132,9 +139,21 @@ export default {
 
 <style scoped>
 .eContainer-home {
+  box-sizing: border-box;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
+  padding: 25px;
+}
+.eContainer-home .el-row {
+  margin-bottom: 25px;
+}
+.eContainer-home .el-row:last-child {
+  margin-bottom: 0;
+}
+.eContainer-home .cell-item {
+  float: left;
+  margin-right: 25px;
+}
+.eContainer-home .el-row .cell-item:last-child {
+  margin-right: 0;
 }
 </style>