diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 25da464f..1da5bf37 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -109,7 +109,7 @@
     </div>
     <div class="right">
       <div class="appPdDv-title">网格信息</div>
-      <div class="right-item">
+      <div class="right-item top-wrapper">
         <div class="title">"星"网格</div>
         <div class="item-wrapper">
           <div class="item-top__item">
@@ -130,33 +130,33 @@
           </div>
         </div>
       </div>
-      <div class="right-item">
+      <div class="right-item middle-wrapper">
         <div class="title">居民群统计</div>
         <div class="item-table">
           <div class="item-table__header">
-            <span>居民群</span>
-            <span>群主</span>
-            <span>群人数</span>
+            <span style="width: 110px">居民群</span>
+            <span style="flex: 1; text-align: center;">群主</span>
+            <span style="width: 60px; text-align: right;">群人数</span>
           </div>
           <div class="item-table__body">
             <div class="item-table__item" v-for="(item, index) in 4" :key="index">
-              <span>XX网格居民群</span>
-              <span>王磊</span>
-              <span>150</span>
+              <span style="width: 110px">XX网格居民群</span>
+              <span style="flex: 1; text-align: center;">王磊</span>
+              <span style="width: 60px; text-align: right;">150</span>
             </div>
           </div>
         </div>
       </div>
-      <div class="right-item">
+      <div class="right-item bottom-wrapper">
         <div class="title">积分排行</div>
         <div class="item-wrapper">
           <div class="tab">
-            <h2 :class="[rightIndex === '0' ? 'active' : '']">累计积分榜</h2>
-            <h2 :class="[rightIndex === '1' ? 'active' : '']">上周积分榜</h2>
+            <div :class="[rightIndex === 0 ? 'active' : '']">累计积分榜</div>
+            <div :class="[rightIndex === 1 ? 'active' : '']">上周积分榜</div>
           </div>
           <div class="tab-content">
             <div class="tab-item" v-for="(item, index) in 5" :key="index">
-              <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+              <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
               <div class="middel">
                 <div class="top">
                   <h2>王磊</h2>
@@ -355,9 +355,183 @@
       position: relative;
       width: 360px;
       height: 100%;
+      padding: 36px 12px 12px;
       box-shadow: inset 0px 0px 5px 0px #D5E6FF;
       border-radius: 8px;
       border: 1px solid #030D1C;
+
+      .top-wrapper {
+        margin-bottom: 23px;
+
+        .item-wrapper {
+          display: flex;
+          align-items: center;
+
+          .item-top__item {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1;
+            margin-right: 8px;
+            width: 78px;
+            height: 66px;
+            border-radius: 4px;
+            border: 1px solid #23A0AC;
+
+            h2 {
+              margin-bottom: 4px;
+              color: #fff;
+              font-size: 20px;
+            }
+
+            p {
+              color: #2AF0F8;
+              font-size: 12px;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+
+      .middle-wrapper {
+        margin-bottom: 23px;
+
+        .item-table {
+          .item-table__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 40px;
+            padding: 0 24px;
+            color: #82C5FF;
+            font-size: 14px;
+            background: rgba(35,160,172,0.2000);
+          }
+
+          .item-table__body {
+            .item-table__item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              height: 40px;
+              padding: 0 24px;
+              color: #fff;
+              font-size: 14px;
+              background: rgba(35,160,172,0.2000);
+
+              &:nth-of-type(2n - 1) {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
+
+      .bottom-wrapper {
+        .tab {
+          display: flex;
+          align-items: center;
+          height: 32px;
+          margin-bottom: 15px;
+          border: 1px solid #0E6EB5;
+
+          div {
+            flex: 1;
+            line-height: 32px;
+            text-align: center;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            user-select: none;
+
+            &.active {
+              background: #0F93B8;
+            }
+          }
+        }
+
+        .tab-content {
+          .tab-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .left {
+              width: 22px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              color: #fff;
+              font-size: 14px;
+              background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon3.png);
+              background-size: 100% 100%;
+
+              &.left0 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon1.png);
+                background-size: 100% 100%;
+              }
+
+              &.left1 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon2.png);
+                background-size: 100% 100%;
+              }
+            }
+
+            i {
+              position: relative;
+              color: #fff;
+              font-size: 12px;
+              font-style: normal;
+              transform: translateY(50%);
+            }
+
+            .middel {
+              width: 250px;
+              margin: 0 8px;
+
+              p {
+                width: 100%;
+                height: 8px;
+                background: linear-gradient(270deg, #51BF34 0%, #257718 100%);
+                border: 1px solid;
+                border-image: linear-gradient(270deg, rgba(96, 255, 99, 1), rgba(13, 156, 17, 1)) 1 1;
+              }
+
+              .top {
+                display: flex;
+                align-items: center;
+                margin-bottom: 4px;
+
+                h2 {
+                  margin-right: 4px;
+                  color: #FFFFFF;
+                  font-size: 14px;
+                }
+
+                span {
+                  width: 48px;
+                  height: 20px;
+                  line-height: 20px;
+                  text-align: center;
+                  color: #2AF0F8;
+                  font-size: 12px;
+                  background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%);
+                  border: 1px solid;
+                  border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 </style>