diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 44eb5636..312115ff 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -10,7 +10,7 @@
         <div class="tab-content__item" v-show="leftIndex === 0">
           <div class="item">
             <div class="title">居民好友统计</div>
-            <div class="item-top">
+            <div class="item-top jmhy">
               <div class="item-top__item">
                 <h2>居民好友</h2>
                 <div class="bottom">
@@ -37,7 +37,7 @@
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
-            <div class="item-top">
+            <div class="item-top jmq">
               <div class="item-top__item">
                 <h2>居民群</h2>
                 <div class="bottom">
@@ -92,8 +92,8 @@
             <div class="title">消息回复率</div>
             <div class="item-top DonutChart-wrapper">
               <DonutChart v-if="leftIndex === 1" :ratio="100" text="昨日"></DonutChart>
-              <DonutChart v-if="leftIndex === 1" :ratio="40" text="近7天"></DonutChart>
-              <DonutChart v-if="leftIndex === 1" :ratio="70" text="近1个月"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="25" text="近7天"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="50" text="近1个月"></DonutChart>
             </div>
           </div>
           <div class="item">
@@ -475,6 +475,136 @@
         }
       }
 
+      .jmhy {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .item-top__item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 107px;
+          height: 52px;
+          line-height: 1;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.png);
+          background-size: 100% 100%;
+
+          h2 {
+            margin-bottom: 4px;
+            color: #2AB7D1;
+            font-size: 12px;
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
+      .jmq {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .item-top__item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 78px;
+          height: 52px;
+          line-height: 1;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.png);
+          background-size: 100% 100%;
+
+          h2 {
+            margin-bottom: 4px;
+            color: #2AB7D1;
+            font-size: 12px;
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #2AB7D1;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(4) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
       .chart1 {
         margin: 10px 0 18px;
       }
diff --git a/project/dv/apps/DonutChart.vue b/project/dv/apps/DonutChart.vue
index 43b8260b..f9169642 100644
--- a/project/dv/apps/DonutChart.vue
+++ b/project/dv/apps/DonutChart.vue
@@ -119,7 +119,8 @@
         margin-bottom: 8px;
         font-size: 20px;
         font-weight: bold;
-        color: #CEE1FF;
+        color: #fff;
+        font-style: oblique;
       }
 
       i {