nelson.kai
/
ShowEasyFrontEnd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
241 Commits
2 Branches
0 Tags
30 MiB
 
 
Tree: 8eb51e3ab7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8eb51e3ab7'
${ noResults }
ShowEasyFrontEnd/FrontEnd/components/booking/Modal/ViewDetailsModal.vue

180 lines
6.5 KiB
Raw Blame History

<template>
<modal v-if="BookingOrder.Currency" name="ViewDetails" :clickToClose="false">
<div class="tw-text-base-primary">
<div class="modal-header tw-flex tw-w-full tw-justify-between tw-mb-[15px]">
<div class="t18 tw-mr-[120px]">{{ $t('View Details') }}</div>
<button class="close tw-transition tw-btn-md" @click="$modal.hide('ViewDetails')"></button>
</div>
<div
class="modal-content tw-bg-[#FFFFFF] tw-flex tw-flex-col tw-body-4 tw-p-[15px] tw-rounded-[10px] md:tw-items-center md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[10px] tw-font-bold md:tw-mb-[0px] md:tw-mr-[105px] tw-justify-items-start">
{{ $t('Total Amount')}}
</div>
<div class="tw-font-bold">${{ BookingOrder.TotalPrice }}&nbsp;{{ BookingOrder.Currency.CurrencyName }}</div>
</div>
<!--div class="modal-content tw-body-4 tw-text-[#7c7c7c] tw-bg-[#FFFFFF] tw-p-[15px] tw-rounded-[10px] md:tw-body-3">
<div class="tw-flex md:tw-mb-[12px]">
<img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
<div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[6px] tw-font-bold">Deposit (15%)</div>
<div class="tw-body-5 md:tw-body-3">
${{ ViewDetails.Deposit }}{{ Currency }}
</div>
</div>
</div>
<div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
</div>
<div class="tw-flex md:tw-mb-[12px]">
<img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
<div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[6px] tw-font-bold">First Payment (10%)</div>
<div class="tw-body-5 md:tw-body-3">
${{ ViewDetails.FirstPayment }}NTD
</div>
</div>
</div>
<div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
</div>
<div class="tw-flex md:tw-justify-items-center md:tw-mb-[12px]">
<img src="~/assets/svg/u_check-circle.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
<div class="tw-flex tw-flex-col tw-text-[#7c7c7c] md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[12px] tw-font-bold">Second Payment (25%)</div>
<div class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[12px] md:tw-mx-[30px]">
<img src="~/assets/svg/Alert.svg" />
<div class="tw-body-5 tw-text-worning md:tw-body-4">
Remittance only
</div>
</div>
<div class="tw-body-5 md:tw-body-3">
${{ ViewDetails.SecondPayment }}NTD
</div>
</div>
</div>
<div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
</div>
<div class="tw-flex md:tw-mb-[12px]">
<img src="~/assets/svg/u_check-circle_disable.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
<div class="tw-flex tw-flex-col te-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[12px] tw-font-bold tw-text-neutrals-800">
Third Payment (30%)
</div>
<div class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[12px] md:tw-ml-[17px]">
<img src="~/assets/svg/Alert.svg" />
<div class="tw-body-5 tw-text-worning md:tw-body-4">
Remittance only
</div>
</div>
<div class="tw-body-5 tw-text-primary-1 tw-font-bold md:tw-body-3">
${{ ViewDetails.ThirdPayment }}NTD
</div>
</div>
</div>
<div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-hidden">
</div>
<div class="tw-flex md:tw-mb-[12px]">
<img src="~/assets/svg/u_check-circle_disable.svg" class="tw-h-[20px] tw-w-[20px] tw-mr-[10px]" />
<div class="tw-flex tw-flex-col tw-text-[#7c7c7c] tw-w-full md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[6px] tw-font-bold">Final Payment (20%)</div>
<div class="tw-body-5 md:tw-body-3">
${{ ViewDetails.FinalPayment }}NTD
</div>
</div>
</div>
<div class="tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-mt-[14px] tw-mb-[10px] md:tw-my-[12px]" >
</div>
<div class="tw-flex tw-ml-[30px]">
<div class="tw-flex tw-flex-col tw-text-neutrals-600 tw-w-full md:tw-flex-row md:tw-justify-between">
<div class="tw-mb-[6px] tw-font-bold">{{ $t('Total Amount')}}</div>
<div class="tw-body-5 md:tw-body-3">
${{ TotalAmount }}NTD
</div>
</div>
</div>
</div-->
</div>
</modal>
</template>
<script>
export default {
name: "ViewDetails",
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 (min-width: 1366px) {
position: relative;
right: initial;
top: initial;
}
}
:deep() {
.v--modal {
background-color: #f8f8f8 !important;
text-align: left;
border-radius: 16px;
box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
padding: 20px;
max-width: max-content;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto;
height: auto !important;
vertical-align: middle;
}
.v--modal-overlay {
position: fixed;
box-sizing: border-box;
left: 0;
top: 0;
width: max-content;
height: auto;
background: rgba(0, 0, 0, 0.2);
z-index: 999;
opacity: 1;
}
.v--modal-top-right {
display: block;
position: fixed;
right: 0;
top: 0;
}
.v--modal-background-click {
display: flex;
justify-content: center;
align-items: center;
}
.v--modal-box {
margin-left: 60px;
margin-right: 60px;
@media (min-width: 768px) {
margin-left: 67px;
margin-right: 67px;
}
}
}
</style>