disinfection_high_front_end/src/components/dialogs/LoginModal.vue

<template>
  <div class="login_modal_container">
    <div class="modal_content">
      <LoginForm :hideLoginModal="hideLoginModal" :modal="true" />
      <svg
        @click="closeModal"
        class="close"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="14.666666984558105"
        height="14.666666984558105"
        viewBox="0 0 14.666666984558105 14.666666984558105"
      >
        <g>
          <path
            d="M8.70833,7.33333L14.6667,13.2917L13.2917,14.6667L7.33333,8.70833L1.375,14.6667L0,13.2917L5.95833,7.33333L0,1.375L1.375,0L7.33333,5.95833L13.2917,0L14.6667,1.375L8.70833,7.33333Z"
            fill="#3D3D3D"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup>
import LoginForm from 'cpns/LoginForm'

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

const closeModal = () => {
  props.hideLoginModal()
}
</script>

<style lang="scss" scoped>
.login_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: 414px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;
    .close {
      position: absolute;
      right: 22px;
      top: 18px;
    }
  }
}
</style>