湖里大屏(CIM+)：完成模型申报布局

src/views/projectAdmin/dataBoard/projectHuScreen/CIM/index.vue

@@ -1,25 +1,25 @@
 <template>
-<!-- CIM -->
+  <!-- CIM -->
   <div class="container">
     <div class="leftBox">
       <div class="leftTop">
-            <leftTop title="模型"  /> 
+        <leftTop title="模型" />
       </div>
       <div class="leftCenter">
-            <leftCenter title="模型审报" />
+        <leftCenter title="模型审报" />
       </div>
     </div>
     <div class="centerBox">
       <div class="centerTop">
-           <centerTop title="BIM+" />
+        <centerTop title="BIM+" />
       </div>
     </div>
     <div class="rightBox">
       <div class="rightTop">
-            <rightTop title="BIM预留接口" />
+        <rightTop title="BIM预留接口" />
       </div>
       <div class="rightCenter">
-            <rightCenter title="设计变更" />
+        <rightCenter title="设计变更" />
       </div>
     </div>
   </div>
@@ -33,8 +33,12 @@ import rightTop from './rightTop'
 import rightCenter from './rightCenter'
 export default {
   components: {
-    leftTop,leftCenter,centerTop,rightTop,rightCenter
+    leftTop,
-  },
+    leftCenter,
+    centerTop,
+    rightTop,
+    rightCenter
+  }
 }
 </script>
 
@@ -44,7 +48,7 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #07162b;
-  background-image:url('~@/assets/images/projectImg/Bimbgc.png')
+  background-image: url('~@/assets/images/projectImg/Bimbgc.png');
 }
 .topBox {
   height: 20%;
@@ -55,15 +59,15 @@ export default {
   margin-right: 15px;
   margin-left: 15px;
   .leftTop {
-    height: 35%;
+    height: 33%;
     margin-bottom: 15px;
   }
   .leftCenter {
-    height: 30%;
+    height: 33%;
     margin-bottom: 15px;
   }
   .leftBottom {
-    height: 30%;
+    height: 33%;
   }
 }
 .centerBox {
@@ -94,4 +98,4 @@ export default {
     height: 30%;
   }
 }
-</style>
+</style>

src/views/projectAdmin/dataBoard/projectHuScreen/CIM/leftCenter.vue

@@ -1,42 +1,24 @@
 <template>
-<!-- 模型报审 -->
+  <Card :title="title">
-<div class="container">
+    <Table :thead="['变更时间', '变更类型']" />
-    <div class="titleTxt">{{ title }}</div>
+  </Card>
-
-</div>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import Table from '../components/Table.vue'
 export default {
-
+  components: { Card, Table },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
+    return {}
-
+  }
-    };
-  },
-
-
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-

src/views/projectAdmin/dataBoard/projectHuScreen/components/Table.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="h-table">
+    <div class="thead">
+      <div class="row">
+        <div class="td" v-for="th in thead" :key="th">{{ th }}</div>
+      </div>
+    </div>
+    <div class="tbody">
+      <div class="row" v-for="i in 5" :key="i">
+        <div class="td">2022.03.05 15:23:22</div>
+        <div class="td">边临防护</div>
+        <div class="td">详情</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    thead: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.h-table {
+  padding: 0 6px;
+  height: 100%;
+  font-size: 14px;
+  color: #fff;
+  .thead,
+  .tbody {
+    &.thead {
+      margin-bottom: 5px;
+      padding-bottom: 5px;
+      color: #6ee4f0;
+      border-bottom: 1px solid #fff;
+    }
+    .row {
+      width: 100%;
+      display: flex;
+      .td {
+        height: 30px;
+        line-height: 30px;
+        &:nth-child(1) {
+          width: 40%;
+        }
+        &:nth-child(2) {
+          flex: 1;
+        }
+        &:nth-child(3) {
+          margin-right: 10px;
+          color: #6ee4f0;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>