|
|
<template> <div class="exhibitionBannerArea"> <div class="banner"> <div class="bannerfilter md:tw-px-[30px] md:tw-py-[40px] xl:tw-px-[40px] xl:tw-py-[60px]" > <div class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[8px] tw-mb-[12px] md:tw-grid-cols-[160px_528px] xl:tw-grid-cols-[160px_976px] md:tw-gap-[20px] xl:tw-gap-[30px]" > <div> <div v-if="exhibition.logo == null"> <img src="~/assets/svg/noLogo.svg" class="tw-border-solid tw-border tw-rounded-[16px] tw-border-neutrals-200" alt="" /> </div> <div v-else> <img :src="exhibition.logo" class="tw-border-solid tw-border tw-rounded-[16px] tw-border-neutrals-200" alt="" /> </div>
<div class="tw-hidden md:tw-block md:tw-ml-[10px]"> <div class="tw-head-body tw-flex tw-flex-row tw-items-center tw-mt-[10px]" > <div class="tw-text-warning-default tw-mr-[11px] md:tw-text-[18px]" > {{ exhibition.rating }} </div> <div> <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" /> <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" /> <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" /> <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" /> <img src="~/assets/svg/star_border.svg" alt="" /> </div> </div> <div class="tw-text-warning-default tw-mt-[8px]"> ({{ exhibition.reviewCount == null ? "0" : exhibition.reviewCount }} reviews) </div> </div> </div> <div class="tw-justify-start md:tw-max-w-[528px] xl:tw-max-w-[976px]"> <div class="tw-flex tw-flex-row tw-mb-[8px] md:tw-mb-[12px]"> <div v-if="exhibition.isRecommend != null" class="tw-grid tw-grid-cols-[12px_auto] tw-gap-[4px] tw-items-center tw-border-solid tw-border tw-border-primary-2 tw-bg-primary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-mr-[8px]" > <img src="~/assets/svg/recommend.svg" alt="" /> <div class="tw-text-white tw-text-[12px] md:tw-text-[14px]"> Recommend </div> </div> <div v-if=" exhibition.status != null && exhibition.status.name != null " > <div v-if="exhibition.status.name == 'Upcoming'" class="tw-border-solid tw-border tw-border-primary-1 tw-text-primary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]" > {{ exhibition.status ? exhibition.status.name : "" }} </div> <div v-else-if="exhibition.status.name == 'Ongoing'" class="tw-border-solid tw-border tw-border-complementary-1 tw-text-complementary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]" > {{ exhibition.status ? exhibition.status.name : "" }} </div> <div v-else-if="exhibition.status.name == 'Finished'" class="tw-border-solid tw-border tw-border-neutrals-500 tw-text-neutrals-500 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]" > {{ exhibition.status ? exhibition.status.name : "" }} </div> <div v-else-if="exhibition.status.name == 'Cancelled'" class="tw-border-solid tw-border tw-border-error-default tw-text-error-default tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]" > {{ exhibition.status ? exhibition.status.name : "" }} </div> <div v-else class="tw-border-solid tw-border tw-bg-error-default tw-text-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]" > {{ exhibition.status ? exhibition.status.name : "" }} </div> </div> </div> <div class="tw-hidden md:tw-block"> <div v-if="exhibition.categories != null" class="md:tw-flex md:tw-flex-row md:tw-items-center" > <div v-for="(item, index) in exhibition.categories" :key="index" class="tw-bg-[#f6f6f6] tw-w-fit tw-border-solid tw-border tw-border-neutrals-400 tw-text-neutrals-800 tw-rounded-[10px] tw-mb-[4px] tw-whitespace-nowrap tw-px-[10px] tw-py-[5px] tw-text-[12px] md:tw-text-[14px] md:tw-mr-[12px] md:tw-text-white md:tw-bg-neutrals-400 md:tw-bg-opacity-50" > {{ item.name }} </div> </div> </div> <div class="md:tw-hidden"> <div v-if="exhibition.categories != null" class="md:tw-flex md:tw-flex-row md:tw-items-center" > <template v-for="(item, index) in exhibition.categories"> <div :key="index" v-if=" show ? (index = exhibition.categories.length) : index <= 1 " class="tw-bg-[#f6f6f6] tw-w-full tw-flex tw-justify-center tw-px-[10px] tw-py-[5px] tw-text-neutrals-800 tw-rounded-[10px] tw-mb-[4px] tw-whitespace-nowrap tw-text-[12px] md:tw-text-[14px] md:tw-mr-[12px] md:tw-text-white md:tw-bg-neutrals-400 md:tw-bg-opacity-50" > {{ item.name }} </div> </template> <div v-if="exhibition.categories.length > 2"> <button v-if="showCategoryNum" class="tw-text-warning-default tw-text-[16px] tw-hidden md:tw-block md:tw-mr[12px]" @click="openCategoryList()" > {{ show ? exhibition.categories.length - 2 + "+" : exhibition.categories.length - 2 + "-" }} </button> </div>
<button v-if="exhibition.categories.length > 2" class="tw-grid tw-w-full tw-grid-cols-[auto_16px] tw-gap-[8px] tw-bg-white tw-items-center tw-justify-center tw-py-[4px]" @click="openCategoryList()" > <div :class="[ 'tw-text-primary-1 tw-text-[12px]', 'primary_arrow',
show ? 'show' : '', ]" > {{ openCategoryText }} </div> </button> </div> </div>
<div class="tw-hidden md:tw-block"> <div class="tw-body-3 tw-break-all tw-text-base-primary tw-w-full md:t24 md:tw-text-white md:tw-mt-[12px] xl:tw-text-[28px] xl:tw-font-bold" > {{ exhibition.name }} </div>
<div class="tw-head-body tw-text-neutrals-500 tw-w-full md:tw-text-[20px] md:tw-font-medium md:tw-text-neutrals-0 md:tw-mt-[12px]" > {{ exhibition.region.name == null ? "" : exhibition.region.name + "．" }}{{ exhibition.country.name == null ? "" : exhibition.country.name + "．" }}{{ exhibition.city.name == null ? "" : exhibition.city.name }} </div> <div class="tw-head-body tw-text-primary-1 tw-w-full md:tw-text-[20px] md:tw-font-medium md:tw-text-white md:tw-mt-[12px]" > {{ exhibition.startdate }} - {{ exhibition.enddate }} </div> </div> </div> </div> <!-- phone --> <div class="tw-flex tw-flex-col tw-max-w-[354px] tw-gap-[12px] md:tw-hidden" > <div class="tw-body-3 tw-break-all"> {{ exhibition.name }} </div>
<div class="tw-head-body tw-text-neutrals-500 tw-w-full"> {{ exhibition.region.name == null ? "" : exhibition.region.name + "．" }}{{ exhibition.country.name == null ? "" : exhibition.country.name + "．" }}{{ exhibition.city.name == null ? "" : exhibition.city.name }} </div> <div class="tw-head-body tw-text-primary-1 tw-w-full"> {{ exhibition.startdate }} - {{ exhibition.enddate }} </div> <div class="tw-head-body tw-flex tw-flex-row tw-items-center"> <div class="tw-text-primary-1 tw-mr-[6px]"> {{ exhibition.rating }} </div> <img src="~/assets/svg/star.svg" class="tw-mr-[12px]" alt="" /> <div class="tw-text-neutrals-500"> ({{ exhibition.reviewCount == null ? "0" : exhibition.reviewCount }} reviews) </div> </div> </div> </div> </div> </div></template>
<script>import VClamp from "vue-clamp";export default { name: "ExhibitionBannerArea", data() { return { show: false, showCategoryNum: true, }; },
props: { exhibition: { type: Object, default: () => ({ banner: "", logo: "", rating: "", reviewCount: 0, name: "", region: {}, country: {}, city: {}, startdate: "", enddate: "", categories: [], }), }, },
computed: { openCategoryText() { if (this.show == false) { return "Expand"; } else { return "Collapse"; } }, }, methods: { openCategoryList() { this.show = !this.show; }, },};</script>
<style lang="scss" scoped>.banner { @media screen and (min-width: 768px) { background-image: url("~/assets/img/ExhibitionBanner.jpeg"); background-repeat: no-repeat; background-position: center; background-size: cover; }}
.bannerfilter { @media screen and (min-width: 768px) { background-color: rgba(0, 0, 0, 0.5); }}
.primary_arrow { position: relative;
&::after { content: ""; display: inline-block; position: absolute; right: -21px; top: 6px; margin-top: auto; margin-bottom: auto; background-image: url("~/assets/svg/arrow-down-primary.svg"); background-size: 100%; background-position: right center; background-repeat: no-repeat; width: 7px; height: 4px; } &.show { &::after { transform: rotate(180deg); } }}</style>
|
