UnivateProperties/src/components/home/carouselSection.vue

<template>
  <section id="intro">
    <div class="container">
      <div class="form">
        <div class="row">
          <div align="left" class="col-sm-12 col-md-12 col-lg-8">
            <div class="intro-content">
              <h2>Find your perfect Property</h2>
              <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="timeshare-tab"
                    data-toggle="pill"
                    href="#timeshare"
                    role="tab"
                    aria-controls="timeshare"
                    aria-selected="false"
                  >
                    Timeshare
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="commercial-tab"
                    data-toggle="pill"
                    href="#commercial"
                    role="tab"
                    aria-controls="commercial"
                    aria-selected="false"
                  >
                    Commercial
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="residential-tab"
                    data-toggle="pill"
                    href="#residential"
                    role="tab"
                    aria-controls="residential"
                    aria-selected="false"
                  >
                    Residential
                  </a>
                </li>
              </ul>
              <!--========    header tabs      ==========-->
              <div class="tab-content" id="pills-tabContent">
                <div
                  class="tab-pane fade show active"
                  id="start"
                  role="tabpanel"
                  aria-labelledby="start-tab"
                >
                  <p>Choose an option to start your adventure</p>
                </div>

                <div
                  class="tab-pane fade"
                  id="timeshare"
                  role="tabpanel"
                  aria-labelledby="timeshare-tab"
                >
                  <H4>Timeshare Sales</H4>
                  <p>Start exploring your posibilities</p>
                  <div id="row">
                    <router-link to="/timeshare/buy" class="btn-white-border">
                      <i class="fa fa-search"></i>
                      Buy
                    </router-link>
                    <router-link to="/timeshare/sell" class="btn-white-border">
                      <i class="fa chevron-circle-right"></i>
                      Sell
                    </router-link>
                  </div>
                </div>

                <div
                  class="tab-pane fade"
                  id="commercial"
                  role="tabpanel"
                  aria-labelledby="commercial-tab"
                >
                  <h4>Commercial Properties</h4>
                  <p>
                    Select the region you are looking for to start your search
                  </p>
                  <div id="row">
                    <div class="form-group">
                      <autoComplete @GoogleAddress="UpdateAddress" />
                    </div>
                    <a
                      v-on:click="SearchClickRentComm()"
                      class="btn-white-border scrollto"
                    >
                      <i class="fa fa-search"></i>
                      Rent
                    </a>
                    <a
                      v-on:click="SearchClickBuyComm()"
                      class="btn-white-border scrollto"
                    >
                      <i class="fa fa-search"></i>
                      Buy
                    </a>
                  </div>
                </div>

                <div
                  class="tab-pane fade"
                  id="residential"
                  role="tabpanel"
                  aria-labelledby="residential-tab"
                >
                  <h4>Residential Properties</h4>
                  <p>
                    Select the region you are looking for to start your search
                  </p>
                  <div id="row">
                    <div class="form-group">
                      <autoComplete @GoogleAddress="UpdateAddress" />
                    </div>
                    <a
                      v-on:click="SearchClickRentRes()"
                      class="btn-white-border scrollto"
                    >
                      <i class="fa fa-search"></i>
                      Rent
                    </a>
                    <a
                      v-on:click="SearchClickBuyRes()"
                      class="btn-white-border scrollto"
                    >
                      <i class="fa fa-search"></i>
                      Buy
                    </a>
                  </div>
                </div>
              </div>

              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <carousel
      :nav="false"
      :dots="false"
      :items="1"
      :autoplay="true"
      :loop="true"
      id="intro-carousel"
      style="margin-top: -50px;"
      :responsive="{
        0: { items: 1, nav: false },
        600: { items: 1, nav: false },
      }"
    >
      <img
        class="item"
        src="/img/intro-carousel/home-1.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/home-2.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/home-3.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/home-4.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/home-5.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/home-6.jpg"
        style="object-fit: cover;"
        alt
      />
    </carousel>

    <div id="intro-carousel" class="owl-carousel"></div>
  </section>
  <!-- #intro -->
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import carousel from 'vue-owl-carousel'
import autoComplete from '../shared/addressAutoComplete'
export default {
  components: {
    carousel,
    autoComplete,
  },
  computed: {
    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
  },
  data() {
    return {
      propertyUsageType: 'Commercial',
      salesType: 'Sale',
      searchText: '',
      clicked: false,
    }
  },
  methods: {
    ...mapActions('propertySearch', ['applyFilter']),
    SetSalesType(value) {
      this.salesType = value
    },
    SearchClickBuyRes() {
      // const item = this.suburbs.find((s) => s.display === this.searchText);
      // this.propertySearch.province = item.province;
      // this.propertySearch.city = item.city;
      // this.propertySearch.suburb = item.suburb;
      this.propertySearch.propertyUsageType = 'Residential'
      this.propertySearch.salesType = 'Sale'

      this.$router.push('/property/residential/searchResult')
    },
    SearchClickRentRes() {
      // const item = this.suburbs.find((s) => s.display === this.searchText);
      // this.propertySearch.province = item.province;
      // this.propertySearch.city = item.city;
      // this.propertySearch.suburb = item.suburb;
      this.propertySearch.propertyUsageType = 'Residential'
      this.propertySearch.salesType = 'Rent'

      this.$router.push('/property/residential/searchResult')
    },
    SearchClickBuyComm() {
      // const item = this.suburbs.find((s) => s.display === this.searchText);
      // this.propertySearch.province = item.province;
      // this.propertySearch.city = item.city;
      // this.propertySearch.suburb = item.suburb;
      this.propertySearch.propertyUsageType = 'Commercial'
      this.propertySearch.salesType = 'Sale'

      this.$router.push('/property/commercial/searchResult')
    },
    SearchClickRentComm() {
      // const item = this.suburbs.find((s) => s.display === this.searchText);
      // this.propertySearch.province = item.province;
      // this.propertySearch.city = item.city;
      // this.propertySearch.suburb = item.suburb;
      this.propertySearch.propertyUsageType = 'Commercial'
      this.propertySearch.salesType = 'Rent'

      this.$router.push('/property/commercial/searchResult')
    },
    SelectedFilter(item) {
      this.searchText = item
    },
    UpdateAddress(place) {
      this.propertySearch.province = place.province
      this.propertySearch.city = place.city
      this.propertySearch.suburb = place.suburb
    },
  },
}
</script>

<style lang="scss" scoped>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .introContentAdjust {
    margin-top: 140px !important;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .introContentAdjust {
    margin-top: 150px !important;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .introContentAdjust {
    margin-top: 160px !important;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .introContentAdjust {
    margin-top: 160px !important;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .introContentAdjust {
    margin-top: 120px !important;
  }
}
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  margin-left: 10px;
  margin-right: 10px;
  background-color: white;
  border-bottom-color: rgb(27, 117, 187);
  border: 1px solid rgb(27, 117, 187);
}
</style>