首页update

src/views/common/home.vue

@@ -25,18 +25,50 @@
       </el-col>
       <el-col :span="12" class="bg1-2">
         <el-row :span="24" class="bg1-2-1">
-          <div class="box-company-title">
-            <div class="company-title"></div>
+          <div class="box-notice-title">
+            <div class="notice-title">通知：热烈欢迎领导莅临考察</div>
           </div>
         </el-row>
         <el-row :span="24" class="bg1-2-2">
-          <div class="box-custom-number">
-            <div class="custom-number"></div>
+          <div class="box-stat-number">
+            <div class="stat-number">
+              <div class="item">
+                <div class="title">在制产品总数</div>
+                <div class="number">100</div>
+              </div>
+               <div class="item">
+                <div class="title">已完成数量</div>
+                <div class="number">1000</div>
+              </div>
+               <div class="item">
+                <div class="title">损坏数量</div>
+                <div class="number">19</div>
+              </div>
+               <div class="item">
+                <div class="title">生产总值</div>
+                <div class="number">9988221</div>
+              </div>
+            </div>
           </div>
         </el-row>
         <el-row :span="24" class="bg1-2-3">
-          <div class="box-contract-number">
-            <div class="contract-number"></div>
+          <div class="box-contract-table">
+            <div class="contract-table">
+              <el-table :data="contractList" height="100%" 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>
+                <el-table-column prop="productNo" label="产品编号"></el-table-column>
+                <el-table-column prop="batchNo" label="批次号"></el-table-column>
+                <el-table-column prop="progress" label="生产进度" width="180">
+                  <template slot-scope="scope">
+                    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="customName" label="客户名称"></el-table-column>
+                <el-table-column prop="operatorName" label="当前操作人"></el-table-column>
+              </el-table>
+            </div>
           </div>
         </el-row>
       </el-col>
@@ -52,7 +84,27 @@
 </template>
 
 <script>
- export default { }
+ export default {
+  name: 'home',
+  components: {
+  },
+  data () {
+    return {
+      contractList:[
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"},
+        {no:"1",contractNo:"NKDI98SDF",productName:"课桌粉笔",productNo:"KIHDSDF",batchNo:"N23",progress:"80",customName:"中国联通",operatorName:"小王"}
+      ]
+    }
+  },
+  methods: {
+    
+  }
+}
 </script>
 
 <style>
@@ -192,5 +244,67 @@ body,
   padding: 10px;
   border: 1px solid black;
 }
+
+.box-notice-title {
+  background-color: forestgreen;
+  display: flex;
+  height: 100%;
+}
+
+.notice-title {
+  font-size: 20px;
+  color: aliceblue;
+  margin: 0 auto;
+  align-items: center;
+  display: flex;
+}
+
+.box-stat-number {
+  background-color: forestgreen;
+  display: flex;
+  height: 100%;
+}
+
+.stat-number {
+  font-size: 20px;
+  color: aliceblue;
+  margin: 0 auto;
+  align-items: center;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.stat-number > .item {
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.stat-number > .item > .title{
+  color:darkturquoise;
+}
+
+.stat-number > .item > .number {
+  text-align: center;
+}
+
+/*合同列表*/
+.box-contract-table {
+  background-color: forestgreen;
+  display: flex;
+  height: 100%;
+}
+
+.contract-table {
+  font-size: 20px;
+  color: aliceblue;
+  margin: 0 auto;
+  align-items: center;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
 </style>