首页update

src/views/common/home.vue

@@ -54,7 +54,7 @@
         <el-row :span="24" class="bg1-2-3">
           <div class="box-contract-table">
             <div class="contract-table">
-              <el-table :data="contractList" height="100%" style="width:100%;">
+              <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
                 <el-table-column prop="no" label="序号"></el-table-column>
                 <el-table-column prop="contractNo" label="合同号"></el-table-column>
                 <el-table-column prop="productName" label="产品名称"></el-table-column>
@@ -98,10 +98,102 @@
       </el-col>
     </el-row>
     <el-row :span="24" class="sample-bg1">
-      <el-col :span="6" class="bg2-1"></el-col>
-      <el-col :span="6" class="bg2-2"></el-col>
-      <el-col :span="6" class="bg2-1"></el-col>
-      <el-col :span="6" class="bg2-2"></el-col>
+      <el-col :span="6" class="bg2-1">
+         <el-row :span="24" class="bg2-3-1">
+          <div class="box-contract-alert">
+            <div class="contract-alert">合同预警</div>
+          </div>
+        </el-row>
+        <el-row :span="24" class="bg2-3-2">
+          <div class="box-contract-alert">
+            <div class="contract-alert">
+              <div class="table">
+                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
+                    <el-table-column prop="no" label="序号"></el-table-column>
+                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
+                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
+                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
+                    <el-table-column prop="progress" label="交付日期"></el-table-column>
+                    <el-table-column prop="customName" label="客户名称"></el-table-column>
+                    <el-table-column prop="customName" label="业务员"></el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="bg2-2">
+        <el-row :span="24" class="bg2-3-1">
+          <div class="box-contract-alert">
+            <div class="contract-alert">报损记录</div>
+          </div>
+        </el-row>
+        <el-row :span="24" class="bg2-3-2">
+          <div class="box-contract-alert">
+            <div class="contract-alert">
+              <div class="table">
+                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
+                    <el-table-column prop="no" label="序号"></el-table-column>
+                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
+                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
+                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
+                    <el-table-column prop="progress" label="交付日期"></el-table-column>
+                    <el-table-column prop="customName" label="客户名称"></el-table-column>
+                    <el-table-column prop="customName" label="业务员"></el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="bg2-1">
+        <el-row :span="24" class="bg2-3-1">
+          <div class="box-contract-alert">
+            <div class="contract-alert">报工</div>
+          </div>
+        </el-row>
+        <el-row :span="24" class="bg2-3-2">
+          <div class="box-contract-alert">
+            <div class="contract-alert">
+              <div class="table">
+                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
+                    <el-table-column prop="no" label="序号"></el-table-column>
+                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
+                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
+                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
+                    <el-table-column prop="progress" label="交付日期"></el-table-column>
+                    <el-table-column prop="customName" label="客户名称"></el-table-column>
+                    <el-table-column prop="customName" label="业务员"></el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="bg2-2">
+        <el-row :span="24" class="bg2-3-1">
+          <div class="box-contract-alert">
+            <div class="contract-alert">出库记录</div>
+          </div>
+        </el-row>
+        <el-row :span="24" class="bg2-3-2">
+          <div class="box-contract-alert">
+            <div class="contract-alert">
+              <div class="table">
+                  <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
+                    <el-table-column prop="no" label="序号"></el-table-column>
+                    <el-table-column prop="contractNo" label="合同号"></el-table-column>
+                    <el-table-column prop="contractNo" label="订单号"></el-table-column>
+                    <el-table-column prop="progress" label="剩余时间"></el-table-column>
+                    <el-table-column prop="progress" label="交付日期"></el-table-column>
+                    <el-table-column prop="customName" label="客户名称"></el-table-column>
+                    <el-table-column prop="customName" label="业务员"></el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -151,7 +243,7 @@ body,
 }
 
 .sample-bg1 {
-  background-color: blueviolet;
+  /* background-color: blueviolet; */
   height: 40%;
 }
 
@@ -171,12 +263,12 @@ body,
 }
 
 .bg2-1 {
-  background-color: red;
+  /* background-color: red; */
   height: 100%;
 }
 
 .bg2-2 {
-  background-color: aqua;
+  /* background-color: aqua; */
   height: 100%;
 }
 
@@ -332,6 +424,7 @@ body,
 
 .bg1-3-1 {
   height: 10%;
+  min-height: 45px;
   padding: 10px;
   border: 1px solid black;
 }
@@ -360,16 +453,49 @@ body,
   height: 100%;
 }
 
-.custom-ranking > .title {
-  /* background-color: forestgreen; */
+.custom-ranking > .table {
+  background-color:darkturquoise;
   height: 100%;
-  min-height: 30px;
   width: 100%;
-  text-align: center;
-  display:flex;
 }
 
-.custom-ranking > .title > div {
+.custom-ranking-table-row {
+  font-size: 8px;
+}
+
+.bg2-3-1 {
+  height: 10%;
+  min-height: 45px;
+  padding: 10px;
+  border: 1px solid black;
+}
+
+.bg2-3-2 {
+  height: 90%;
+  padding: 10px;
+  border: 1px solid black;
+}
+
+
+/*合同预警*/
+.box-contract-alert {
+  background-color: forestgreen;
+  height: 100%;
+}
+
+.contract-alert {
+  font-size: 16px;
+  color: aliceblue;
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+	justify-content:center;
+	text-align:justify;
+  width: 100%;
+  height: 100%;
+}
+
+.contract-alert > .title > div {
   background-color: forestgreen;
   width: 100%;
   display:flex;
@@ -378,14 +504,56 @@ body,
 	text-align:justify;
 }
 
-.custom-ranking > .table {
+.contract-alert > .table {
   background-color:darkturquoise;
   height: 100%;
   width: 100%;
 }
 
-.custom-ranking-table-row {
-  font-size: 8px;
+.contract-alert > .table thead .cell {
+  font-size: 13px;
+  -webkit-transform: scale(0.9) !important;
+}
+
+.contract-alert > .table tbody .cell {
+  font-size: 12px;
+  -webkit-transform: scale(0.8) !important;
+}
+
+/* 设置滚动条的样式 */
+
+::-webkit-scrollbar {
+
+width:6px;
+height: 6px;
+}
+
+/* 滚动槽 */
+
+::-webkit-scrollbar-track {
+
+-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
+
+border-radius:10px;
+
+}
+
+/* 滚动条滑块 */
+
+::-webkit-scrollbar-thumb {
+
+border-radius:10px;
+
+background:rgba(0,0,0,0.1);
+
+-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
+
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+
+background:rgba(161, 156, 156, 0.2);
+
 }
 </style>