更新

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
+        &.title
           width 70%
           color #fff
           font-size 1rem
           font-weight normal
-
-
-
-
 </style>

src/views/components/supervision.vue

@@ -2,29 +2,44 @@
 <template>
   <div class="supervision">
     <div class="people">
+      <div class="head">
         <p>
           检察人员
           <span>[{{$store.state.supervisionPeopleList.length}}]</span>
         </p>
-      <div class="person" v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
+        <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">
+      <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">
+      <div class="head">
         <p>检察情况</p>
-      <div>
+        <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">
+          <div>
             <p>整改单</p>
-          <span>{{data.successNum}}/{{data.num}}</span>
-          <a-progress strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
+            <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,25 +52,36 @@ export default {
 
 }
 </script>
-
+<style lang="stylus">
+.supervision .ivu-progress-inner
+  background #0d87fc
+</style>
 <style lang="stylus" scoped>
-.supervision
+.head
   display flex
-  width 100%
-  height 100%
-  flex-wrap wrap
-  align-items flex-start
-  .people
-    width 100%
-    display flex
-    flex-wrap wrap
+  align-items center
+  .line
+    flex 1
+    background #094981
+    height 0.1rem
+    margin-left 0.5rem
   >p
-      width 100%
     color #fff
     font-weight 700
     >span
       color $edgeColor
-    .person
+.list
+  display flex
+  flex-wrap wrap
+
+.supervision
+  width 100%
+  height 100%
+  >div
+    margin-bottom 1rem
+  .people
+    .list
+      >div
         width 20%
         display flex
         align-items center
@@ -66,49 +92,37 @@ export default {
           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
+    .list
       >div
-      width 30%
-      border-left 2px solid yellow
-      margin .3rem
-      padding 0 .3rem
+        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%
+        >div
           display flex
-        align-items center
-        flex-wrap wrap
-        >p
-          width 50%
-        >span
-          font-size 1.2rem
-          text-align right
-          width 50%
-
-
-
+          justify-content space-between
+          p
+            color lightblue
+            font-size 0.8rem
+            &:last-child
+              font-family $font-pang
+              color #fff
+              span
+                color $edgeColor
 
 </style>