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.
149 lines
4.0 KiB
149 lines
4.0 KiB
<template>
|
|
<v-row class="mx-0 mb-6">
|
|
<v-col cols="12" class="px-0">
|
|
<h1
|
|
:class="
|
|
$vuetify.breakpoint.smAndUp
|
|
? 'neutrals--text text--darken-5 text-size-25'
|
|
: 'neutrals--text text--darken-5 text-size-18'
|
|
"
|
|
>
|
|
{{ $t("Intro") }}
|
|
</h1>
|
|
</v-col>
|
|
<v-col
|
|
v-if="
|
|
(exhibition.frequency != null && exhibition.frequency.name) ||
|
|
exhibition.internalExhibitors ||
|
|
exhibition.visitors ||
|
|
exhibition.exhibitors ||
|
|
exhibition.area
|
|
"
|
|
cols="12"
|
|
class="px-0"
|
|
>
|
|
<hr
|
|
v-if="$vuetify.breakpoint.mdAndUp"
|
|
class="my-7"
|
|
style="border: 1px solid #e5e5e5"
|
|
/>
|
|
<v-row class="mx-0">
|
|
<v-col cols="12" class="px-0">
|
|
<div class="frequency">
|
|
<div
|
|
class="my-1 frequencyName neutrals--text text--darken-5"
|
|
v-if="exhibition.frequency != null && exhibition.frequency.name"
|
|
>
|
|
{{ $t("Frequency") }} : {{ exhibition.frequency.name }}
|
|
</div>
|
|
<div
|
|
v-if="exhibition.internalExhibitors"
|
|
class="my-1 internalExhibitors neutrals--text text--darken-5"
|
|
>
|
|
{{ $t("International Visitor Number :") }}
|
|
{{ numberFormat(exhibition.internalExhibitors) }}
|
|
</div>
|
|
<div
|
|
v-if="exhibition.visitors"
|
|
class="my-1 frequencyVisitors neutrals--text text--darken-5"
|
|
>
|
|
{{ $t("Visitor Number :") }}
|
|
{{ numberFormat(exhibition.visitors) }}
|
|
</div>
|
|
<div
|
|
v-if="exhibition.exhibitors"
|
|
class="my-1 frequencyExhibitors neutrals--text text--darken-5"
|
|
>
|
|
{{ $t("Exhibitor Number :") }}
|
|
{{ numberFormat(exhibition.exhibitors) }}
|
|
</div>
|
|
<div
|
|
v-if="exhibition.area"
|
|
class="my-1 frequencyArea neutrals--text text--darken-5"
|
|
>
|
|
{{ $t("Event Space :") }} {{ exhibition.area }}
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<hr
|
|
v-if="$vuetify.breakpoint.mdAndUp"
|
|
class="mt-7"
|
|
style="border: 1px solid #e5e5e5"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" class="px-0">
|
|
<div
|
|
class="neutrals--text text--darken-5"
|
|
v-html="exhibition.about"
|
|
style="text-align: justify"
|
|
></div>
|
|
<br />
|
|
<div
|
|
v-if="exhibition.organizers"
|
|
class="organizer neutrals--text text--darken-5"
|
|
>
|
|
<div style="font-weight: bold">{{ $t("Organizer Name :") }}</div>
|
|
<div v-for="item in exhibition.organizers" :key="item.id">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ExhibitionIntro",
|
|
props: {
|
|
exhibition: {
|
|
type: Object,
|
|
default: () => ({
|
|
frequency: {},
|
|
internalExhibitors: "",
|
|
visitors: "",
|
|
exhibitors: "",
|
|
area: "",
|
|
about: "",
|
|
organizers: [],
|
|
}),
|
|
},
|
|
},
|
|
methods: {
|
|
numberFormat: function (number) {
|
|
return number; //.toLocaleString("en-US");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@media screen and (min-width: 900px) {
|
|
.frequency {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"frequencyName internalExhibitors"
|
|
"frequencyVisitors frequencyExhibitors"
|
|
"frequencyArea frequencyArea";
|
|
}
|
|
}
|
|
@media only screen and (min-width: 0px) and (max-width: 899px) {
|
|
.frequency {
|
|
display: grid;
|
|
background: #f8f8f8;
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
grid-template-areas:
|
|
"frequencyName"
|
|
"internalExhibitors"
|
|
"frequencyVisitors"
|
|
"frequencyExhibitors"
|
|
"frequencyArea";
|
|
}
|
|
.organizer {
|
|
background: #f8f8f8;
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
}
|
|
}
|
|
</style>
|