ShowEasyFrontEnd/FrontEnd/components/home/Hero.vue

<template>
  <!-- { 'background-image': 'linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url(' + banner + ')' } 設置透明度--> 
  <div
    class="hero tw-flex tw-justify-start tw-px-[16px] tw-pt-[120px] tw-pb-[160px] md:tw-pt-[140px] xl:tw-pt-[165px] xl:tw-pb-[150px]"
    :style="{ 'background-image': banner ? 'url(' + banner + ')' : '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-[30px] 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']">
          <div class="tw-p-0">
            <div class="logo-title tw-text-[#504f4f] t28 tw-font-normal md:tw-text-[36px] xl:tw-text-[48px]">
              {{ slogan }}
            </div>
          </div>
        </div>
        <!-- <div class="t20 tw-font-normal tw-text-[#504f4f] tw-mt-[10px] tw-hidden xl:tw-block">
          {{ subslogan }}
        </div> -->
        <Search class="tw-mt-[8px] xl:tw-mt-[16px]"
          :width="WindowWidth > 960 ? '760' : WindowWidth > 600 ? '382' : '345'"
          :height="WindowWidth > 960 ? '60' : WindowWidth > 600 ? '48' : '40'"
          :exhibitionsSearchs="exhibitionsSearchs"
          :exhibitionsLocations="exhibitionsLocations" :exhibitionsCategories="exhibitionsCategories"
          :exhibitionListIcon="exhibitionListIcon" :populars="populars"
          :exhibitionsKeywords="exhibitionsKeywords" :type="type" @type="type=$event" />
        <div v-if="type=='exhibition'" class="keep-width xl:tw-block tw-mt-[8px] 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>