pipeline_disinfection_front_end/src/components/dialogs/LiquidModal.vue

<template>
  <div class="liquid_modal_container">
    <div class="modal_content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="69"
        height="69"
        viewBox="0 0 69 69"
      >
        <g>
          <path
            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
            fill="#FA1C1C"
            fill-opacity="1"
          />
        </g>
      </svg>
      <p class="warn_info mg">
        请<span class="red">检查</span>是否接入排出容器
      </p>
      <p class="warn_info">
        并确认<span class="red">容器是否大于</span>排出液体容积
      </p>
      <div class="btns">
        <div class="ok" @click="tapLiquid">确定</div>
        <div class="cancel" @click="cancelTap">取消</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  hideTabLiquid: {
    type: Function,
  },
})

const tapLiquid = () => {
  console.log('排液体')
}

const cancelTap = () => {
  props?.hideTabLiquid()
}
</script>

<style lang="scss" scoped>
.liquid_modal_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 389px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 52px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .warn_info {
      font-family: Source Han Sans CN;
      font-size: 22px;
      font-weight: normal;
      letter-spacing: 0.04em;
      color: #000000;
      .red {
        color: #fa1c1c;
      }
    }
    .mg {
      margin-top: 34px;
      margin-bottom: 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 362px;
      margin-top: 45px;
      .ok {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #06518b;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cancel {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #d8d8d8;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>