ShowEasyFrontEnd/FrontEnd/components/newComponent/skeleton/homeExhibitionCardSkeleton.vue

<template>
  <div
    class="tw-animate-pulse tw-bg-neutrals-0 tw-rounded-[10px] tw-px-[6px] tw-py-[8px] md:tw-px-[11px] md:tw-py-[10px]">
    <div
      class="remove-underline md:tw-grid md:tw-grid-cols-[1fr_3fr] md:tw-gap-[20px] md:tw-auto-row-1 xl:tw-grid-cols-[160px_auto]">
      <div
        class="tw-bg-gray-200 tw-rounded-[10px] tw-h-[20vw] md:tw-h-[13vw] tw-flex tw-items-center tw-justify-center tw-overflow-hidden tw-min-h-[106px] xl:tw-w-[160px] xl:tw-h-[106px]">
      </div>
      <div class="md:tw-flex md:tw-flex-col md:tw-justify-between">
        <div class="md:tw-flex md:tw-flex-col">
          <h3
            class="t14 tw-h-[32px] tw-bg-gray-200 tw-content-[' '] tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden tw-mt-[8px] tw-mb-[4px] md:t16 md:tw-font-medium md:tw-line-clamp-none md:tw-h-full md:tw-mt-0 xl:tw-line-clamp-2 xl:tw-h-[42px]">
          </h3>
          <div
            class="tw-hidden t14 tw-text-neutrals-600 md:tw-flex md:tw-justify-start md:tw-items-center md:tw-gap-[6px]">
            <div class="tw-bg-gray-200 tw-content-[' '] tw-w-[28px] tw-h-[18px]"></div>
            <div class="tw-bg-gray-200 tw-content-[' '] tw-w-[28px] tw-h-[18px]"></div>
            <div class="tw-bg-gray-200 tw-content-[' '] tw-w-[28px] tw-h-[18px]"></div>
          </div>
        </div>
        <div class="md:tw-mt-[14px] md:tw-flex md:tw-justify-between md:tw-items-center">
          <div
            class="time t12 tw-text-gray-200 tw-mt-[8px] md:t16 md:tw-flex md:tw-justify-start md:tw-items-center  md:tw-font-medium md:tw-mt-0">
            <div class="tw-bg-gray-200 tw-content-[' '] tw-w-[85px] tw-h-[21px] tw-mr-[2px]"></div>
            ~
            <div class="tw-bg-gray-200 tw-content-[' '] tw-w-[85px] tw-h-[21px] tw-ml-[2px]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>