modal 架子

src/components/Tabs.vue

@@ -9,10 +9,13 @@
     <div class="tab_wrap active">
       <p class="text">排液氮</p>
     </div>
+    <EjectLiquid />
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import EjectLiquid from 'cpns/modals/EjectLiquid'
+</script>
 
 <style lang="scss" scoped>
 .tabs_container {

src/components/modals/EjectLiquid.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="eject_liquid_container">
+    <div class="modal_content">
+      <div class="modal_header">
+        <p class="title">排液氮</p>
+        <img :src="Close" alt="关闭" class="close_img" />
+      </div>
+      <div class="chart_container"></div>
+      <div class="btns">
+        <div class="stop_wrap">
+          <div class="stop_btn">
+            <img :src="StopIcon" class="icon" alt="" />
+            <p class="text">暂停排出</p>
+          </div>
+        </div>
+        <div class="start_wrap">
+          <div class="start_btn">
+            <img :src="StartIcon" class="icon" alt="" />
+            <p class="text">排出液氮</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Close from '@/assets/img/close.png'
+import StartIcon from '@/assets/img/start.png'
+import StopIcon from '@/assets/img/stop.png'
+</script>
+
+<style lang="scss" scoped>
+.eject_liquid_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: 700px;
+    height: 590px;
+    border-radius: 20px;
+    background: #ffffff;
+    box-sizing: border-box;
+    overflow: hidden;
+    .modal_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 700px;
+      height: 91px;
+      border-radius: 20px 20px 0px 0px;
+      background: #f0f6fb;
+      box-sizing: border-box;
+      padding: 0 42px;
+      .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;
+      }
+    }
+    .chart_container {
+      width: 660px;
+      height: 339px;
+      border-radius: 16px;
+      background: #f0f6fb;
+      margin: 20px 20px 17px 20px;
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      padding: 0 20px 15px 20px;
+      box-sizing: border-box;
+      .stop_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 320px;
+        height: 108px;
+        border-radius: 54px;
+        margin-right: 20px;
+        background: rgba(199, 204, 208, 0.2);
+        .stop_btn {
+          width: 296px;
+          height: 88px;
+          border-radius: 44px;
+          background: #d8d8d8;
+          box-sizing: border-box;
+          border: 2px solid #c4c4c4;
+          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;
+          }
+        }
+      }
+      .start_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 320px;
+        height: 108px;
+        border-radius: 54px;
+        background: rgba(23, 241, 121, 0.2);
+        .start_btn {
+          width: 296px;
+          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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>