diff --git a/src/assets/img/start_trans.png b/src/assets/img/start_trans.png
new file mode 100644
index 0000000..6c8f3e9
Binary files /dev/null and b/src/assets/img/start_trans.png differ
diff --git a/src/assets/img/stop_trans.png b/src/assets/img/stop_trans.png
new file mode 100644
index 0000000..c6204eb
Binary files /dev/null and b/src/assets/img/stop_trans.png differ
diff --git a/src/components/operation/TransferLiquid.vue b/src/components/operation/TransferLiquid.vue
index 9da874e..a18a79e 100644
--- a/src/components/operation/TransferLiquid.vue
+++ b/src/components/operation/TransferLiquid.vue
@@ -1,8 +1,57 @@
 <template>
-  <div class="transfer_liquid_container"></div>
+  <div class="transfer_liquid_container">
+    <div class="top_wrap">
+      <div class="title_wrap">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+        >
+          <g>
+            <path
+              d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
+              fill="#9395A0"
+              fill-opacity="1"
+            />
+          </g>
+        </svg>
+        <p class="title">操作运行状态</p>
+      </div>
+      <img :src="startTrans" class="img_btn" alt="" />
+    </div>
+    <div class="double_chart">
+      <LowerTank />
+      <UpperTank />
+    </div>
+    <div class="btns">
+      <div class="start_wrap" style="margin-right: 20px">
+        <div class="real_btn">
+          <img :src="StartIcon" class="icon" alt="" />
+          <p class="text">注入上仓液氮</p>
+        </div>
+      </div>
+      <div class="start_wrap">
+        <div class="real_btn">
+          <img :src="StartIcon" class="icon" alt="" />
+          <p class="text">注入下仓液氮</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import startTrans from '@/assets/img/start_trans.png'
+import stopTrans from '@/assets/img/stop_trans.png'
+import StartIcon from '@/assets/img/start.png'
+import StopIcon from '@/assets/img/stop.png'
+import LowerTank from 'cpns/charts/LowerTank'
+import UpperTank from 'cpns/charts/UpperTank'
+</script>
 
 <style lang="scss" scoped>
 .transfer_liquid_container {
@@ -13,5 +62,115 @@
   margin: 20px 0;
   box-sizing: border-box;
   padding: 20px;
+  .top_wrap {
+    display: flex;
+    align-items: center;
+    .title_wrap {
+      width: 535px;
+      height: 62px;
+      margin-right: 25px;
+      border-radius: 16px;
+      background: #ffffff;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      .title {
+        margin-left: 17px;
+        font-family: Source Han Sans CN;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #9395a0;
+      }
+      .active {
+        color: #08092c;
+      }
+    }
+    .img_btn {
+      width: 165px;
+      height: 62px;
+    }
+  }
+  .double_chart {
+    width: 720px;
+    height: 240px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+    margin: 20px 0;
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    .start_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(23, 241, 121, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #17f179;
+        box-sizing: border-box;
+        border: 2px solid #1ad66e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .stop_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(250, 28, 28, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #fa1c1c;
+        box-sizing: border-box;
+        border: 2px solid #b71212;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }
 </style>