楼单元

src/views/components/xiaoqu/bottomList.vue

@@ -75,7 +75,13 @@
                   v-show="item.isX"
               /></el-tooltip>
             </div>
-            <div class="table-cell1">
+            <div
+              class="table-cell1"
+              :style="{
+                color:
+                  item.type == 1 ? 'rgb(0, 193, 133)' : 'rgb(231, 51, 136)',
+              }"
+            >
               {{ item.type == 1 ? "户籍" : "流动" }}
             </div>
             <div class="table-cell1">

src/views/components/xiaoqu/building.vue

@@ -28,6 +28,9 @@
             @clickHouse="clickHouse(house)"
           ></colorCell>
         </div>
+        <div class="unit-rows">
+          <div v-for="item in info.unit" :key="item">{{ item }}单元</div>
+        </div>
       </div>
     </div>
   </transition>
@@ -248,7 +251,7 @@ export default {
   .building-house-container {
     padding-top: 85px;
     position: relative;
-    min-width: 300px;
+    min-width: 150px;
     // max-width: 700px;
     // overflow-x: auto;
     // overflow-y: hidden;
@@ -258,7 +261,8 @@ export default {
     background-size: cover;
     .building-name {
       position: absolute;
-      left: 90px;
+      left: 50%;
+      transform: translateX(-50%);
       top: 30px;
       min-width: 170px;
       height: 32px;
@@ -311,4 +315,20 @@ export default {
 .v-leave-to {
   opacity: 0;
 }
+
+.unit-rows {
+  display: flex;
+  align-items: center;
+  & > div {
+    flex: 1;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    text-align: center;
+    padding: 6px 0;
+  }
+  & > div:nth-child(odd) {
+    background: RGBA(2, 74, 95, 0.4);
+  }
+}
 </style>