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.
137 lines
3.6 KiB
137 lines
3.6 KiB
<template>
|
|
<div
|
|
class="price-info tw-p-5 tw-mb-[20px] tw-bg-white tw-rounded-xl tw-hidden xl:tw-block"
|
|
>
|
|
<h4>
|
|
{{ info.title }}
|
|
</h4>
|
|
<div class="element collapse tw-my-[12px]">
|
|
<div
|
|
:class="[
|
|
'label',
|
|
'tw-body-4',
|
|
'tw-mb-[12px]',
|
|
'tw-cursor-pointer',
|
|
'service-info',
|
|
show ? 'show' : 'hide',
|
|
]"
|
|
@click="show = !show"
|
|
>
|
|
{{ $t("Package Detail") }}
|
|
</div>
|
|
<Transition name="bounce">
|
|
<div v-if="show">
|
|
<div v-for="(item, key) in info.order_item" :key="key"
|
|
class="detail tw-body-5 tw-mb-[10px] xl:tw-text-neutrals-600 xl:tw-mb-[4px]"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
<div
|
|
class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-my-[12px]"
|
|
>
|
|
<div class="label tw-body-4">{{ $t("Select Exhibition") }}</div>
|
|
<div class="content tw-body-4">{{ info.selectExhibition }}</div>
|
|
</div>
|
|
<!-- <div
|
|
class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-my-[12px]"
|
|
>
|
|
<div class="label tw-body-4">{{ $t("Select Exhibition") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ info.selectExhibition }}
|
|
</div>
|
|
</div> -->
|
|
<!-- <div
|
|
class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-my-[12px]"
|
|
>
|
|
<div class="label tw-body-4">{{ $t("Service Date") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ info.date }}
|
|
</div>
|
|
</div> -->
|
|
<!-- <div
|
|
class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-my-[12px]"
|
|
>
|
|
<div class="label tw-body-4">{{ $t("Quantity") }}</div>
|
|
<div class="content tw-body-4">{{ info.quantity }}</div>
|
|
</div> -->
|
|
<div
|
|
class="element total tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-pt-[12px] tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200"
|
|
>
|
|
<div class="label tw-body-4 tw-text-black tw-font-bold">
|
|
{{ $t("Total")}}
|
|
<!-- <span class="tw-text-neutrals-400 tw-font-medium tw-ml-[4px]">{{
|
|
$t("(Tax included)")
|
|
}}</span> -->
|
|
</div>
|
|
<div class="content tw-body-4 tw-font-bold">
|
|
${{ info.total.toLocaleString() + currency}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "PriceInfo",
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
},
|
|
currency:{
|
|
type: String,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.service-info {
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-size: 100%;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
width: 10px;
|
|
height: 6px;
|
|
transition: all 0.2s linear;
|
|
}
|
|
&.show {
|
|
&::after {
|
|
transition: all 0.2s linear;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
|
|
}
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|