Merge branch 'jw_feature_dev' into jw_feature_zhangruochen

src/views/dataBoard/cpts/homeDetails/index.vue

@@ -25,7 +25,7 @@
               <img src="@/assets/images/home/homeTop.png" alt="/" />
             </div>
             <div class="apar_center">
-              <div class="apar_center_flex">
+              <div class="apar_center_flex" :style="{ width: flexWidth + 'px' }">
                 <div v-for="(item, index) in houseMountArr" :key="index" class="floor">
                   <div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div>
                 </div>
@@ -99,6 +99,7 @@ export default {
       //   total: 0,
       //   pageNum: 1,
       //   pageSize: 10,
+      flexWidth: 0,
       loading: false,
       homeMsg: {},
       list: [],
@@ -166,6 +167,13 @@ export default {
           this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
           console.log(this.homeText, " this.homeText");
           this.houseMountArr = this.getDoorNameList(this.list);
+          // this.houseMountArr = [
+          //   [{ doorName: 101 }, { doorName: 102 }, { doorName: 103 }, { doorName: 104 }, { doorName: 105 }, { doorName: 106 }, { doorName: 107 }, { doorName: 108 }, { doorName: 109 }],
+          //   [{ doorName: 201 }, { doorName: 202 }, { doorName: 203 }, { doorName: 204 }, { doorName: 205 }, { doorName: 206 }, { doorName: 207 }, { doorName: 208 }, { doorName: 209 }],
+          // ];
+          if (this.houseMountArr.length > 0) {
+            this.flexWidth = this.houseMountArr[0].length * 58;
+          }
           this.loading = false;
         } else {
           this.loading = false;
@@ -230,6 +238,7 @@ export default {
     display: flex;
     align-items: flex-end;
     justify-content: center;
+    margin-top: 100px;
 
     .apar_comtent {
       display: flex;
@@ -246,11 +255,11 @@ export default {
         background-size: 100% 100%;
         padding: 30px 30px 10px 30px;
         display: flex;
-        align-items: flex-end;
+        // align-items: flex-end;
         flex-direction: column-reverse;
 
         .apar_center_flex {
-          width: 100%;
+          // width: 100%;
           display: flex;
           flex-wrap: wrap-reverse;
           justify-content: center;
@@ -275,7 +284,9 @@ export default {
             font-family: PingFang SC;
             font-weight: 500;
             color: #7fceff;
-            margin-right: 10px;
+            &:not(:last-child) {
+              margin-right: 10px;
+            }
           }
         }
       }