更新

src/views/components/discovery.vue

@@ -27,7 +27,7 @@
 
 <script>
 export default {
-  name: 'discovery'
+  name: 'Discovery'
 
 }
 </script>
@@ -37,22 +37,20 @@ export default {
   display flex
   width 100%
   height 100%
-  align-content flex-start
-  flex-wrap:wrap
+  flex-wrap wrap
   .d-card
     width 50%
-    margin 1rem 0
   .d-list
     display flex
-    align-items center
-    flex-wrap:wrap
+    flex-wrap wrap
     .d-l-card
-      width 47%
+      width 49%
       background-color rgba(6,27,50,0.9)
       margin 0.1rem
       padding .7rem
       display flex
       justify-content space-between
+      align-items center
       >img
         width 1.25rem /* 20/16 */
         height 1.25rem /* 20/16 */
@@ -60,13 +58,9 @@ export default {
         color $edgeColor
         font-weight 700
         font-size 1.2rem
-      >.title
-        width 70%
-        color #fff
-        font-size 1rem
-        font-weight normal
-
-
-
-
+        &.title
+          width 70%
+          color #fff
+          font-size 1rem
+          font-weight normal
 </style>

src/views/components/repair.vue

 <template>
   <div class="repair">
-     <m-brief
-      class="r-card"
-      v-for="(data,i) in $store.state.repairList"
-      :key="i"
-      :label="data.title"
-      :icon="require(`@/assets/images/${data.img}`) "
-      :unit="`/${data.allNum}`"
-      :count="+data.num"
-      countColor="#00f2ff"
-      size="1.2rem"
-     />
+    <m-brief
+    class="r-card"
+    v-for="(data,i) in $store.state.repairList"
+    :key="i"
+    :label="data.title"
+    :icon="require(`@/assets/images/${data.img}`) "
+    :unit="`/${data.allNum}`"
+    :count="+data.num"
+    countColor="#00f2ff"
+    size="1.2rem"
+    />
   </div>
 </template>
 

src/views/components/supervision.vue

@@ -2,29 +2,44 @@
 <template>
   <div class="supervision">
     <div class="people">
-      <p>
-        检察人员
-        <span>[{{$store.state.supervisionPeopleList.length}}]</span>
-      </p>
-      <div class="person" v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
-        <img :src="require(`@/assets/images/${data.img}`)" alt="">
-        <p>{{data.name}}</p>
+      <div class="head">
+        <p>
+          检察人员
+          <span>[{{$store.state.supervisionPeopleList.length}}]</span>
+        </p>
+        <div class="line"/>
+      </div>
+      <div class="list">
+        <div v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
+          <img :src="require(`@/assets/images/${data.img}`)" alt="">
+          <p>{{data.name}}</p>
+        </div>
       </div>
     </div>
     <div class="community">
-      <p>检察小区</p>
-      <div v-for="(data,i) in $store.state.supervisionCommunityList" :key="i">
-        <p>{{data.title}}</p>
+      <div class="head">
+        <p>检察小区</p>
+        <div class="line"/>
+      </div>
+      <div class="list">
+        <div v-for="(data,i) in $store.state.supervisionCommunityList" :key="i">
+          <p>{{data.title}}</p>
+        </div>
       </div>
     </div>
     <div class="situation">
-      <p>检察情况</p>
-      <div>
+      <div class="head">
+        <p>检察情况</p>
+        <div class="line"/>
+      </div>
+      <div class="content">
         <img :src="require(`@/assets/images/modify.png`)">
         <div v-for="(data,i) in $store.state.supervisionSituationList" :key="i">
-          <p>整改单</p>
-          <span>{{data.successNum}}/{{data.num}}</span>
-          <a-progress strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
+          <div>
+            <p>整改单</p>
+            <p><span>{{data.successNum}}/</span>{{data.num}}</p>
+          </div>
+          <a-progress hide-info stroke-width="8"  strokeColor="#00f2ff" :percent="data.successNum/data.num*100" />
         </div>
       </div>
     </div>
@@ -37,78 +52,77 @@ export default {
 
 }
 </script>
-
+<style lang="stylus">
+.supervision .ivu-progress-inner
+  background #0d87fc
+</style>
 <style lang="stylus" scoped>
-.supervision
+.head
+  display flex
+  align-items center
+  .line
+    flex 1
+    background #094981
+    height 0.1rem
+    margin-left 0.5rem
+  >p
+    color #fff
+    font-weight 700
+    >span
+      color $edgeColor
+.list
   display flex
+  flex-wrap wrap
+
+.supervision
   width 100%
   height 100%
-  flex-wrap wrap
-  align-items flex-start
+  >div
+    margin-bottom 1rem
   .people
-    width 100%
-    display flex
-    flex-wrap wrap
-    >p
-      width 100%
-      color #fff
-      font-weight 700
-      >span
-        color $edgeColor
-    .person
-      width 20%
-      display flex
-      align-items center
-      color $fontColor
-      margin-top .5rem
-      >img
-        width 1rem
-        height 1rem
-        margin 0 .2rem
+    .list
+      >div
+        width 20%
+        display flex
+        align-items center
+        color $fontColor
+        margin-top .5rem
+        >img
+          width 1rem
+          height 1rem
+          margin 0 .2rem
   .community
-    width 100%
-    display flex
-    align-items center
-    justify-content center
-    flex-wrap wrap
-    >p
-      width 100%
-      color #fff
-      font-weight 700
-      margin-bottom 1rem
-    >div
-      width 30%
-      border-left 2px solid yellow
-      margin .3rem
-      padding 0 .3rem
+    .list
+      >div
+        width 33.3%
+        border-left 0.2rem solid yellow
+        margin 0.5rem 0
+        padding 0 .5rem
+        p
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
   .situation
-    width 100%
-    >p
-      width 100%
-      color #fff
-      font-weight 700
-    >div
-      width 100%
+    .content
       margin-top 1rem
       display flex
-      align-items flex-start
+      align-items center
       img
         width 2.5rem
         height 2.5rem
-        margin 0 0.5rem
-      div
+        margin-right 0.5rem
+      >div
         width 100%
-        display flex
-        align-items center
-        flex-wrap wrap
-        >p
-          width 50%
-        >span
-          font-size 1.2rem
-          text-align right
-          width 50%
-
-
-
+        >div
+          display flex
+          justify-content space-between
+          p
+            color lightblue
+            font-size 0.8rem
+            &:last-child
+              font-family $font-pang
+              color #fff
+              span
+                color $edgeColor
 
 </style>

src/views/main.vue

@@ -27,7 +27,7 @@
       <Discovery />
     </m-card>
     <m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
-    <Supervision/>
+      <Supervision/>
     </m-card>
     <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
     </m-card>