中建四局(CIM+)：完成 BIM 协同布局

src/views/projectAdmin/zjsj/cim/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cim">
-    <!-- <div class="between">
+    <div class="between">
       <div class="top">
         <LeftTop />
       </div>
@@ -16,7 +16,7 @@
       <div class="bottom">
         <RightBottom />
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -37,8 +37,8 @@ export default {
   color: #fff;
   display: flex;
   justify-content: space-between;
-  background: url(../assets/temp/2.png) no-repeat;
-  background-size: 100% 100%;
+  // background: url(../assets/temp/2.png) no-repeat;
+  // background-size: 100% 100%;
   .between {
     width: 20%;
     height: 100%;
@@ -52,7 +52,7 @@ export default {
   .center {
     width: calc(60% - 40px);
     height: 100%;
-    background: skyblue;
+    border: 1px solid skyblue;
   }
 }
 </style>

src/views/projectAdmin/zjsj/cim/leftTop.vue

@@ -1,14 +1,63 @@
 <template>
   <Card title="BIM协同">
-    BIM协同
+    <div class="table">
+      <div class="row">
+        <div class="td">规划报批</div>
+        <div class="td">施工图审查</div>
+        <div class="td">竣工验收</div>
+      </div>
+      <div class="row" :class="{ warning: !row[0] }" v-for="(row, i) in list" :key="i">
+        <div class="td">{{ row[0] ? '符合' : '不符合' }}</div>
+        <div class="td">{{ row[1] ? '符合' : '不符合' }}</div>
+        <div class="td">{{ row[2] ? '已验收' : '未验收' }}</div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    const list = new Array(9).fill(0).map((item, index) => new Array(3).fill(0).map(() => (index === 3 ? 0 : 1)))
+    return {
+      list
+    }
+  },
+  methods: {}
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.table {
+  box-sizing: border-box;
+  padding: 20px 10px 0;
+  width: 100%;
+  height: 100%;
+  .row {
+    margin-bottom: 12px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    display: flex;
+    .td {
+      flex: 1;
+      text-align: center;
+    }
+    &:nth-child(1) {
+      font-size: 14px;
+      color: #67d4d9;
+    }
+    &.warning {
+      background: linear-gradient(90deg, #a45133, #a4513338);
+      &::before {
+        content: '';
+        width: 4px;
+        height: 100%;
+        background-color: #e7622a;
+      }
+    }
+  }
+}
+</style>