You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.5 KiB
143 lines
3.5 KiB
<template>
|
|
<modal name="OtherDetails" :clickToClose="false">
|
|
<div class="tw-text-base-primary xl:tw-p-[5px]">
|
|
<div class="modal-header tw-flex tw-w-full tw-justify-center tw-mb-[32px] md:tw-mb-[21px] xl:tw-justify-between">
|
|
<div class="t18 xl:tw-text-[20px]">{{ $t('Other Details') }}</div>
|
|
<button class="close tw-transition tw-btn-md" @click="$modal.hide('OtherDetails')"></button>
|
|
</div>
|
|
<div class="modal-content tw-head-body tw-grid tw-gap-[10px] tw-grid-cols-1 md:tw-text-[12px]">
|
|
<div v-for="(item,key) in BookingOrder.OtherDetail" :key="key">
|
|
{{ item }}
|
|
</div>
|
|
<!-- <div v-for="(item,key) in BookingOrder.OtherDetail" :key="key">
|
|
<div class="tw-text-neutrals-600 tw-mb-[20px]">
|
|
{{item.question}}<span class="tw-text-[#EF5A5A]">*</span>
|
|
</div>
|
|
<div class="tw-text-neutrals-800 tw-mb-[37px]">
|
|
{{ item.answer }}
|
|
</div>
|
|
<div v-if=" key < BookingOrder.OtherDetail.length - 1 " class="tw-border-solid tw-border-neutrals-200"></div>
|
|
</div> -->
|
|
<div class="tw-flex tw-justify-end tw-hidden xl:tw-flex">
|
|
<button
|
|
class="tw-body-2 tw-text-neutrals-0 tw-bg-base-secondary tw-rounded-[16px] tw-px-[24px] tw-py-[12px] tw-mb-[10px]"
|
|
@click="$modal.hide('OtherDetails')">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "OtherDetails",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
BookingOrder: {
|
|
type: Object,
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.close {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 25px;
|
|
background-image: url("~/assets/svg/close.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
position: relative;
|
|
right: initial;
|
|
top: initial;
|
|
}
|
|
}
|
|
|
|
:deep() {
|
|
.v--modal {
|
|
background-color: #f8f8f8 !important;
|
|
text-align: left;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
|
|
padding: 20px;
|
|
min-width: 100% !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
margin: 0;
|
|
height: auto !important;
|
|
vertical-align: bottom;
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
border-radius: 16px;
|
|
width: max-content;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.v--modal-overlay {
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
left: 0;
|
|
top: 0;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
height: auto;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 999;
|
|
opacity: 1;
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
width: max-content !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.v--modal-overlay {
|
|
width: max-content !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.v--modal-box {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
.v--modal-top-right {
|
|
display: block;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.v--modal-background-click {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin: 0 auto;
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
width: 600px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|