soil/src/components/modals/EjectLiquid.vue

<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"
          @click="handleHiddenModal"
        />
      </div>
      <div class="chart_container">
        <div class="title_wrap">
          <img class="water_icon" :src="Water" alt="" />
          <p class="info">正在注入液氮</p>
        </div>
        <div class="double_chart">
          <UpperTank />
          <LowerTank />
        </div>
      </div>
      <div class="btns">
        <div class="disable_wrap">
          <div class="real_btn">
            <img :src="StopIcon" 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>
  </div>
</template>

<script setup>
import Close from '@/assets/img/close.png'
import Water from '@/assets/img/water.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'

const props = defineProps({
  handleModalVisible: {
    type: Function,
  },
})

const handleHiddenModal = () => {
  props.handleModalVisible()
}
</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;
      box-sizing: border-box;
      padding: 20px;
      .title_wrap {
        padding: 2px 0 21px 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .water_icon {
          width: 47px;
          height: 35px;
          margin-right: 15px;
        }
        .info {
          font-family: Source Han Sans CN;
          font-size: 24px;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0.04em;
          color: #3d3d3d;
        }
      }
      .double_chart {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 620px;
        height: 240px;
        column-gap: 20px;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      padding: 0 20px 15px 20px;
      box-sizing: border-box;
      .disable_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);
        .real_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);
        .real_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;
          }
        }
      }
      .stop_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 320px;
        height: 108px;
        border-radius: 54px;
        background: rgba(250, 28, 28, 0.2);
        .real_btn {
          width: 296px;
          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>