little_disinfection_high_front_end/src/components/dialogs/LiquidModal.vue

<template>
  <my-modal type="confirm" icon="warning"
    v-model:visible="visible"
    @ok="tapLiquid"
    @cancel="cancelTap"
  >
    <p class="warn_info mg">请<span class="red">检查</span>是否接入排出容器</p>
    <p class="warn_info" style="margin-bottom: 50px;">并确认<span class="red">容器是否大于</span>排出液体容积</p>
  </my-modal>
</template>

<script setup>
import { useWebSocketStore } from '@/store'
import { startDrainingJSON } from '@/mock/command'
import { ref } from 'vue'

const webSocketStore = useWebSocketStore()

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

const visible = ref(true)


const tapLiquid = () => {
  webSocketStore.sendCommandMsg(startDrainingJSON)
  props?.hideTabLiquid()
}

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

<style lang="scss" scoped>
.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;
}

.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>