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.
333 lines
12 KiB
333 lines
12 KiB
<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>
|