ShowEasyFrontEnd/FrontEnd/components/service/PriceInfo.vue

<template>
  <div
    class="price-info tw-p-5 tw-mb-[20px] tw-bg-neutrals-0 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" class="content tw-body-4">
          {{ info.detail }}
        </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("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>