diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 16125fe..6aaad04 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -84,6 +84,28 @@
         </div>
       </div>
     </div>
+
+    <!-- 供水规划 -->
+    <div class="rightBox rightBox5">
+      <div class="ListTitle">供水规划</div>
+      <div class="ListContent">
+        <div class="waterSupply">
+          <div class="bottomBgc"></div>
+          <div class="eachDescribe">
+            <div class="icon bgcblue"></div>
+            <div class="text">近期</div>
+            <div class="sum colorBlue">68.7</div>
+            <div class="unit">万立方米/日</div>
+          </div>
+          <div class="eachDescribe">
+            <div class="icon bgcYellow"></div>
+            <div class="text">远期</div>
+            <div class="sum colorYellow">88.7</div>
+            <div class="unit">万立方米/日</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -140,7 +162,7 @@
     color: #e4f5ff;
   }
   .precedence {
-    margin-top: 10px;
+    margin-top: 5px;
     width: 100%;
     height: 32px;
     // line-height: 32px;
@@ -290,20 +312,76 @@
       }
     }
   }
+
+  // 供水规划
+  .waterSupply {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .eachDescribe {
+      display: flex;
+      align-items: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      padding-top: 5px;
+      .unit {
+        padding-top: 5px;
+        color: #ffffff;
+      }
+      .icon {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+      .colorYellow {
+        color: #ffed52;
+      }
+      .colorBlue {
+        color: #18ffff;
+      }
+      .bgcYellow {
+        background: #ffed52;
+      }
+      .bgcblue {
+        background: #18ffff;
+      }
+      .text {
+        padding: 0 10px 0 6px;
+        font-size: 16px;
+      }
+      .sum {
+        font-size: 20px;
+        padding-right: 10px;
+      }
+    }
+    .bottomBgc {
+      width: 100%;
+      height: 16px;
+
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
+    }
+  }
 }
 .rightBox1 {
   height: 110px;
 }
 .rightBox2 {
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 .rightBox3 {
-  margin-top: 10px;
+  margin-top: 5px;
 }
 .rightBox4 {
-  margin-top: 10px;
+  margin-top: 5px;
   height: 200px;
   //   background: red;
 }
+.rightBox5 {
+  margin-top: 5px;
+}
 </style>