disinfection_high_front_end/src/components/dialogs/UserModal.vue

<template>
  <my-modal type="confirm" icon="warning"
    :content="`请确认是否将 ${userWarnInfo}`"
    v-model:visible="visible"
    @ok="ok"
    @cancel="handleCancel"
  ></my-modal>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  userWarnInfo: {
    type: String,
  },
  hideUserModal: {
    type: Function,
  },
  handleOk: {
    type: Function,
  },
})

/** @var {Boolean} */
const visible = ref(true);


const ok = () => {
  props.handleOk()
  props.hideUserModal()
}

const handleCancel = () => {
  props.hideUserModal()
}
</script>

<style lang="scss" scoped>
.user_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: 350px;
    border-radius: 16px;
    background: #ffffff;
    padding: 52px 37px 55px 37px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tips {
      margin-top: 33px;
      margin-bottom: 50px;
      font-family: Source Han Sans CN;
      font-size: 21px;
      font-weight: normal;
      letter-spacing: 0.04em;
      color: #000000;
      .red {
        color: #fa1c1c;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 362px;
      .cancel {
        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;
      }
      .ok {
        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>