feat: 表格渲染

app/src/views/BasicInfo/components/GementUnit.vue

@@ -33,11 +33,64 @@
                 </ul>
             </div>
         </div>
+        <div>
+            <div class="title">入住单位列表</div>
+            <div>
+                <div class="row header">
+                    <span class="idx">序号</span>
+                    <span class="in_unit">入住单位</span>
+                    <span class="person">责任人</span>
+                    <span class="manage">管理人</span>
+                </div>
+                <VueSeamlessScroll
+                    :data="list"
+                    :class-option="classOption"
+                    class="warp"
+                >
+                    <ul class="item">
+                    <li class="row" v-for="(item, index) in list" :key="index">
+                        <span class="idx">{{ index + 1 }}</span>
+                        <span class="in_unit">{{ item[0] }}</span>
+                        <span class="person">{{ item[1] }}</span>
+                        <span class="manage">{{ item[2] }}</span>
+                    </li>
+                    </ul>
+                </VueSeamlessScroll>
+            </div>
+        </div>
     </div>
 </template>
 
 <script >
+import VueSeamlessScroll from "vue-seamless-scroll";
 
+export default {
+  name: 'GementUnit',
+  data() {
+    return {
+      list: [
+        ["国泰艺术中心", "王晓辉", "李小小"],
+        ["人民大礼堂", "李四", "张三"],
+        ["人民大礼堂", "王五", "赵六"],
+        ["花博艺术中心", "张米", "刘小明"],
+        ["人民大礼堂", "王五", "赵六"],
+        ["人民大礼堂", "王五", "赵六"],
+        ["人民大礼堂", "王五", "赵六"],
+        ["人民大礼堂", "王五", "赵六"],
+      ]
+    }
+  },
+  components: {
+    VueSeamlessScroll
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 29,
+      };
+    },
+  },
+}
 </script>
 
 <style lang="less" scoped>
@@ -67,4 +120,59 @@
     }
 }
 }
-</style>
+
+.title {
+  height: 30px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  background-color: rgba(0, 163, 255, 0.3) !important;
+}
+.warp {
+  height: 85px;
+  margin: 0 auto;
+  overflow: hidden;
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+
+.header {
+  color: #98DFE9 !important;
+  height: 30px !important;
+  line-height: 30px !important;
+  background-color: rgba(7, 188, 223, 0.8) !important;
+  margin-top: 2px; //07BCDF
+  font-size: 12px !important;
+}
+
+li.row {
+  border-bottom: 1px dotted #1d525f;
+  box-sizing: border-box;
+}
+
+.row,li.row {
+  display: block;
+  height: 29px;
+  line-height: 29px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  .idx,
+  .in_unit,
+  .person,
+  .manage {
+    flex: 0.25;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

app/src/views/BasicInfo/components/MaintenanceSupervision.vue

@@ -32,6 +32,9 @@
               <span class="time">{{ item[0] }}</span>
               <span class="person">{{ item[1] }}</span>
               <span class="result"
+                :style="{
+                  color: resultType(item[2])
+                }"
                 >{{ item[2] }}</span
               >
             </li>
@@ -73,6 +76,12 @@ export default {
     change(idx) {
       console.log("切换索引", idx)
     },
+    resultType(text) {
+      return {
+        "合格": "#23f59d",
+        "不合格": "#df575b"
+      }[text]
+    }
   }
 }
 </script>

app/src/views/BasicInfo/components/Risklevel.vue

@@ -6,8 +6,25 @@
         <span>疏通管道拥堵</span>
         <span>火灾隐患</span>
     </div>
-    <div>
-        <img src="../../../assets/images/image 13.png" alt="">
+    <div class="level_bottom">
+        <div class="code">
+            <img src="../../../assets/images/image 13.png" alt="">
+        </div>
+        <div class="info">
+            <div class="title">提示管理单位</div>
+            <ul>
+                <li>
+                    <span>1</span>
+                    <span>中海管理有限公司</span>
+                    <span class="error">未提示 <span class="action">提示</span></span>
+                </li>
+                <li>
+                    <span>2</span>
+                    <span>渝中区七星岗街道</span>
+                    <span>已提示</span>
+                </li>
+            </ul>
+        </div>
     </div>
     </div>
 </template>
@@ -40,5 +57,66 @@
         height: 131px;
         margin-top: 10px;
     }
+    .level_bottom {
+        display: flex;
+        align-items: start;
+        
+        .code {
+            flex: .35;
+        }
+        .info {
+            flex: .65;
+            padding-top: 10px;
+            .title {
+                height: 30px;
+                font-size: 14px;
+                display: flex;
+                align-items: center;
+                padding-left: 10px;
+                background-color: rgba(0, 163, 255, 0.3) !important;
+            }
+
+            ul {
+              border: 1px dotted #1d525f;
+              box-sizing: border-box;
+              li {
+                border-bottom: 1px dotted #1d525f;
+                box-sizing: border-box;
+                padding: 2px 4px;
+                height: 24px;
+                line-height: 24px;
+                display: flex;
+                &:nth-last-child(1) {
+                    border-bottom: 0px
+                }
+               span {
+                    font-size: 12px;
+                    &:nth-child(1) {
+                      flex: .1;
+                    }
+                    &:nth-child(2) {
+                        text-align: left;
+                      flex: .5;
+                    }
+                    &:nth-child(3) {
+                      flex: .4;
+                    }
+                }
+                
+                .error {
+                    display: inline-block;
+                    color: #e84c4c;
+                    .action {
+                        display: inline-block;
+                        padding-left: 20px;
+                        text-decoration: underline;
+                        color: #44F1FF;
+                        font-size: 12px;
+                    }
+                }
+              }
+            }
+        }
+    }
 }
-</style>
+</style>