首页业委会布局调整

src/views/home.vue

 <template>
-  <div id="home" class="layoutPadding" v-if="(this.$api.BASE_URL).indexOf('pudong') > -1 || (this.$api.BASE_URL).indexOf('31.0.161.39') > -1">
+  <!-- <div id="home" class="layoutPadding" v-if="(this.$api.BASE_URL).indexOf('xuhui') > -1 || (this.$api.BASE_URL).indexOf('31.0.161.39') > -1"> -->
+    <div id="home" class="layoutPadding">
       <a-row type="flex"  class="align-stretch">
-        <a-col :span="16">
-          <a-row type="flex" style="padding-right:10px;height:100%;">
+        <a-col :span="24">
+          <a-row type="flex" style="height:100%;">
             <a-col :span="6">
               <div class="home-card topBox" style="margin-right:10px;">
                 <div class="justify-between topBox" >
@@ -43,21 +44,46 @@
               </div>
             </a-col>
             <a-col :span="6">
-              <div class="home-card topBox" style="margin-left:0px 10px;">
-                <div class="justify-between topBox" >
-                  <div>
-                    <p class="top-font" >业委会数</p>
-                    <span class="top-count" >{{data.ic}}</span>
-                  </div>
-                  <div class="align-center" >
-                    <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
-                  </div>
-                </div>
+              <div class="home-card topBox" style="margin-left:10px;">
+                <a-row>
+                  <a-col :span='6'>
+                    <div class="justify-between topBox" >
+                      <div>
+                        <p class="top-font" >业委会数</p>
+                        <span class="top-count" >{{data.ic}}</span>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span='13'>
+                    <a-row style="border-left: 1px solid lightgrey; border-bottom: 1px solid lightgrey; padding-left: 10px; padding-bottom: 5px;">
+                      <a-col :span='16'>
+                        <span class="top-font" >已过期</span>
+                      </a-col>
+                      <a-col :span='8'>
+                        <span class="top-count-extra" style="cursor: pointer;" @click="handleExpired">{{expired}}</span>
+                      </a-col>
+                    </a-row>
+                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px;padding-top: 10px;">
+                      <a-col :span='16'>
+                        <span class="top-font" >5个月内到期</span>
+                      </a-col>
+                      <a-col :span='8'>
+                        <span class="top-count-extra" style="cursor: pointer;" @click="handleWillExpire">{{expireInFiveMonth}}</span>
+                      </a-col>
+                    </a-row>
+                  </a-col>
+                  <a-col :span='1'></a-col>
+                  <a-col :span='4'>
+                    <div class="align-center" >
+                        <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
+                      </div>
+                  </a-col>
+                </a-row>
               </div>
             </a-col> 
           </a-row>
         </a-col>
-        <a-col :span="4">
+        <!-- <a-col :span="4">
           <div class="home-card topBox" style="margin-left:0px 10px; cursor: pointer" @click="handleExpired">
                 <div class="justify-between topBox" >
                   <div>
@@ -82,7 +108,7 @@
                   </div>
                 </div>
               </div>
-        </a-col>
+        </a-col> -->
       </a-row>
       <a-row class="align-stretch" style="margin-top:20px;">
         <a-col :span="8">
@@ -539,63 +565,6 @@
         </a-col>
       </a-row>
   </div>
-
-  <div id="home" class="layoutPadding" v-else>
-    <div class="topBox">
-      <div class="inner" style="">
-          <div>
-            <p class="top-font" >小区数</p>
-            <span class="top-count" >{{data.community}}</span>
-          </div>
-          <div class="align-center" >
-            <img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
-          </div>
-      </div>
-      <div class="inner" style="">
-          <div>
-            <p class="top-font" >门牌幢数</p>
-            <span class="top-count" >{{data.building}}</span>
-          </div>
-          <div class="align-center" >
-            <img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
-          </div>
-      </div>
-      <div class="inner" style="">
-          <div>
-            <p class="top-font" >物业企业数</p>
-            <span class="top-count" >{{data.company}}</span>
-          </div>
-          <div class="align-center" >
-            <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
-          </div>
-        </div>
-      <div class="inner" style="">
-          <div>
-            <p class="top-font" >业委会数</p>
-            <span class="top-count" >{{data.ic}}</span>
-          </div>
-          <div class="align-center" >
-            <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
-          </div>
-      </div>
-    </div>
-    <div class="secBox">
-      <IndustrySupervision  style="width:35%" />
-      <ComplaintsTrain moduletitle="投诉直通车" style="width:48%" />
-      <FileModule style="width:13%;" />
-    </div>
-    <div class="thirdBox">
-      <ManagementModule moduletitle="信用" style="width:32.5%" />
-      <ManagementModule moduletitle="风险" style="width:32.5%"  />
-      <ManagementModule moduletitle="分类" style="width:32.5%"  />
-    </div>
-    <div class="fourthBox">
-      <RiskDisposal style="width:30%" />
-      <RetrofitElevator style="width:32%"  />
-      <ComplaintsTrain moduletitle="应急报修" style="width:36%" />
-    </div>
-
-  </div>
 </template>
 
 <script>
@@ -1107,6 +1076,14 @@ export default {
   font-weight:600;
   line-height:34px;
 }
+
+.top-count-extra{
+  color:#000;
+  font-size:24px;
+  font-weight:600;
+  line-height:24px;
+}
+
 .middle-right{
   text-align:center;
   height: calc(50% - 10px);