diff --git a/index.html b/index.html
index 6e11604..31a93ff 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>鹏成科技</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/assets/img/close.png b/src/assets/img/close.png
new file mode 100644
index 0000000..213e5c6
Binary files /dev/null and b/src/assets/img/close.png differ
diff --git a/src/assets/img/error.png b/src/assets/img/error.png
new file mode 100644
index 0000000..1693be8
Binary files /dev/null and b/src/assets/img/error.png differ
diff --git a/src/assets/img/ok.png b/src/assets/img/ok.png
new file mode 100644
index 0000000..a613c68
Binary files /dev/null and b/src/assets/img/ok.png differ
diff --git a/src/components/Tube.vue b/src/components/Tube.vue
index f19dd86..6c094aa 100644
--- a/src/components/Tube.vue
+++ b/src/components/Tube.vue
@@ -102,24 +102,21 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .tube_container {
-  width: 720px;
-  height: 365px;
-  border-radius: 14px;
-  background: #f6f8fa;
+  width: 740px;
+  height: 361px;
   box-sizing: border-box;
-  padding: 10px;
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(5, 1fr);
-  column-gap: 10px;
-  row-gap: 10px;
+  column-gap: 14px;
+  row-gap: 14px;
   .tube_wrap {
     width: 61px;
     height: 61px;
     opacity: 1;
-    background: #d6d6d6;
+    background: #ffffff;
     box-sizing: border-box;
-    border: 3px solid #d2d2d2;
+    border: 3px solid #53dd79;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -128,12 +125,13 @@ onMounted(() => {
     font-weight: bold;
     line-height: normal;
     letter-spacing: 0.02em;
-    color: #ffffff;
+    color: #5fec85;
     border-radius: 50%;
   }
   .active {
-    background: #5f82ec;
-    border: 3px solid #5779e0;
+    background: #5fec85;
+    border: 3px solid #53dd79;
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/components/modals/LeakRateModal.vue b/src/components/modals/LeakRateModal.vue
new file mode 100644
index 0000000..6bdb0b0
--- /dev/null
+++ b/src/components/modals/LeakRateModal.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="leak_rate_container">
+    <div class="modal_content">
+      <div class="modal_header">
+        <p class="title">查询所有漏率</p>
+        <img :src="Close" alt="关闭" class="close_img" />
+      </div>
+      <div class="modal_info">
+        <div class="info_wrap" v-for="item in 50" :key="item">
+          <img class="info_img" :src="Ok" alt="正确" />
+          <p class="info_text">{{ `A-${formatTubeNumber(item)}` }}</p>
+        </div>
+      </div>
+      <div class="modal_bottom">
+        <div class="btn">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Close from '@/assets/img/close.png'
+import Error from '@/assets/img/error.png'
+import Ok from '@/assets/img/ok.png'
+import { formatTubeNumber } from '@/utils'
+</script>
+
+<style lang="scss" scoped>
+.leak_rate_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(5, 14, 42, 0.7);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal_content {
+    width: 760px;
+    height: 680px;
+    border-radius: 20px;
+    background: #ffffff;
+    box-sizing: border-box;
+    overflow: hidden;
+    .modal_header {
+      width: 760px;
+      height: 90.88px;
+      box-sizing: border-box;
+      border-radius: 20px 20px 0px 0px;
+      background: #f6f8fa;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 41px;
+      .title {
+        font-family: Source Han Sans CN;
+        font-size: 26px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #9395a0;
+      }
+      .close_img {
+        width: 36px;
+        height: 36px;
+      }
+    }
+    .modal_info {
+      padding: 43px 56px;
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(10, 1fr);
+      column-gap: 53px;
+      row-gap: 15px;
+      .info_wrap {
+        display: flex;
+        align-items: center;
+        .info_img {
+          width: 28px;
+          height: 28px;
+          margin-right: 5px;
+        }
+        .info_text {
+          font-family: Poppins;
+          font-size: 18px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0.02em;
+          color: #17191c;
+        }
+      }
+    }
+    .modal_bottom {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 20px;
+      .btn {
+        width: 720px;
+        height: 70px;
+        border-radius: 8px;
+        background: #565ee4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 26px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 1em;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 8209a66..b002cbf 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,11 +1,17 @@
 <template>
   <div class="home_container">
-    <Tube />
+    <div class="header_card_wrap">
+      <div class="header_info"></div>
+      <Tube />
+    </div>
+    <div class="content_card_wrap"></div>
+    <LeakRateModal />
   </div>
 </template>
 
 <script setup>
 import Tube from 'cpns/Tube'
+import LeakRateModal from 'cpns/modals/LeakRateModal'
 </script>
 
 <style lang="scss" scoped>
@@ -13,9 +19,29 @@ import Tube from 'cpns/Tube'
   width: 800px;
   height: 1280px;
   opacity: 1;
-  background: #f5f7fb;
+  background: #565ee4;
   overflow: hidden;
-  padding: 20px;
   box-sizing: border-box;
+  .header_card_wrap {
+    padding: 30px;
+    box-sizing: border-box;
+    .header_info {
+      width: 740px;
+      height: 97px;
+      border-radius: 48px;
+      background: #f0f6fb;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 32px;
+    }
+  }
+  .content_card_wrap {
+    width: 800px;
+    height: 730px;
+    border-radius: 40px 40px 0 0;
+    background: #ffffff;
+  }
 }
 </style>
