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.
137 lines
4.1 KiB
137 lines
4.1 KiB
<template>
|
|
<div
|
|
class="hero tw-flex tw-justify-start tw-px-[30px] tw-pt-[120px] tw-pb-[160px] md:tw-pt-[140px] xl:tw-pt-[165px] xl:tw-pb-[150px]"
|
|
:style="{ 'background-image': 'linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url(' + banner + ')' }">
|
|
<div
|
|
class="tw-flex tw-items-center tw-text-transparent xl:tw-px-[60px] xl:tw-w-full xl:tw-max-w-[1366px] xl:tw-mx-auto">
|
|
<div class="tw-w-full tw-px-0 tw-flex- tw-flex-col tw-items-start">
|
|
<div :class="['tw-mx-0',WindowWidth > 960 ? '' : 'mb-1']">
|
|
<div class="tw-p-0">
|
|
<div class="logo-title tw-text-white t28 tw-font-normal md:tw-text-[36px] xl:tw-text-[48px]">
|
|
{{ slogan }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="t20 tw-font-normal tw-text-white tw-mt-[10px] tw-hidden xl:tw-block">
|
|
{{ subslogan }}
|
|
</div>
|
|
<Search class="tw-mt-[12px] xl:tw-mt-[10px]"
|
|
:width="WindowWidth > 960 ? '760' : WindowWidth > 600 ? '374' : '300'"
|
|
:height="WindowWidth > 960 ? '60' : WindowWidth > 600 ? '48' : '40'" :servicesSearchs="servicesSearchs"
|
|
:servicesLocations="servicesLocations" :exhibitionsSearchs="exhibitionsSearchs"
|
|
:exhibitionsLocations="exhibitionsLocations" :exhibitionsCategories="exhibitionsCategories"
|
|
:exhibitionListIcon="exhibitionListIcon" :populars="populars" :serviceKeywords="serviceKeywords"
|
|
:exhibitionsKeywords="exhibitionsKeywords" :type="type" @type="type=$event" />
|
|
<div v-if="type=='exhibition'" class="tw-w-[60%] keep-width tw-hidden xl:tw-block xl:tw-mt-[16px]">
|
|
<v-btn depressed class="neutrals--text text--darken-4 neutrals darken-1 border-radius-12 text-capitalize mx-1"
|
|
style="opacity: 0.8" v-for="popular in populars.search" :key="popular">
|
|
<nuxt-link :to="localePath(`/exhibition?q=${popular}`)" class="remove-underline">
|
|
{{ popular }}
|
|
</nuxt-link>
|
|
</v-btn>
|
|
</div>
|
|
<div v-if="type=='service'" :class="['tw-w-[60%] keep-width tw-hidden xl:tw-block xl:tw-mt-[16px]']">
|
|
<v-btn depressed class="neutrals--text text--darken-4 neutrals darken-1 border-radius-12 text-capitalize mx-1"
|
|
style="opacity: 0.8" v-for="popular in populars.service" :key="popular">
|
|
<nuxt-link :to="localePath(`/service?q=${popular}`)" class="remove-underline">
|
|
{{ popular }}
|
|
</nuxt-link>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Search from "~/components/home/Search.vue";
|
|
|
|
export default {
|
|
components: {
|
|
Search,
|
|
},
|
|
props: [
|
|
"slogan",
|
|
"subslogan",
|
|
"populars",
|
|
"servicesSearchs",
|
|
"servicesLocations",
|
|
"serviceKeywords",
|
|
"exhibitionsSearchs",
|
|
"exhibitionsLocations",
|
|
"exhibitionsCategories",
|
|
"exhibitionsKeywords",
|
|
"banner",
|
|
],
|
|
data() {
|
|
return {
|
|
type: 'exhibition',
|
|
service: false,
|
|
exhibition: false,
|
|
WindowWidth: undefined,
|
|
exhibitionListIcon: [
|
|
"rawMaterial",
|
|
"aeroSpace",
|
|
"energy",
|
|
"autoMobile",
|
|
"electronics",
|
|
"contrucstion",
|
|
"security",
|
|
"Machinary",
|
|
"Medical",
|
|
"education",
|
|
"textile",
|
|
"food",
|
|
"entertainment",
|
|
"consumer",
|
|
"others",
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.onResize);
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.onResize);
|
|
},
|
|
created() {
|
|
if (process.client) {
|
|
this.WindowWidth = window.innerWidth;
|
|
}
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
if (process.client) {
|
|
this.WindowWidth = window.innerWidth;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hero {
|
|
position: relative;
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-size: cover, cover;
|
|
background-position: center, center;
|
|
// filter: brightness(.7);
|
|
}
|
|
|
|
.hero-content {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 30%;
|
|
left: 5%;
|
|
}
|
|
|
|
.hero-content-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|