UnivateProperties/src/components/property/commercial/singleView/contentSection.vue

<template>
  <section>
    <div class="container">
      <div class="row" id="resort-profile">
        <div class="col-md-4">
          <div class="resPortfolioSection">
            <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
              <div v-if="i < 3">
                <img
                  v-if="i === 0"
                  style="width:100%; height:201px;object-fit: cover"
                  :src="image"
                />
                <div v-else-if="i !== 0">
                  <img
                    v-if="i % 2 === 0"
                    style="width:50%; height:140px; float:right;"
                    :src="image"
                  />
                  <img v-else style="width:50%; height:140px; float:left" :src="image" />
                </div>
              </div>
            </div>

            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
          </div>

          <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
            <h2>Property Detial</h2>
            <!-- <p>{{ property.addressLine1 }}</p>
            <p>Town, Suburb</p> -->
            <p>{{ property.shortDescription }}</p>
            <!-- <p>{{ property.price }}</p> -->
          </div>
        </div>
        <div class="col-md-8 p-5 resort-profile">
          <h2>{{ property.propertyName }} / {{ property.addressLine1 }}</h2>
          <div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">Reference</th>
                  <th scope="col">Size</th>
                  <th scope="col">Location</th>
                  <th scope="col">Kitchen</th>
                  <th scope="col">Extras</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>#123456</td>
                  <td>#m2</td>
                  <td>Second Floor</td>
                  <td>yes</td>
                  <td>open plan</td>
                  <td>
                    <router-link to="/EnquireNow">More Info</router-link>
                  </td>
                </tr>
                <tr>
                  <td>#123456</td>
                  <td>#m2</td>
                  <td>Top Floor</td>
                  <td>yes</td>
                  <td>open plan</td>
                  <td><router-link to="/EnquireNow">More Info</router-link></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p></p>

          <!-- <div class="d-flex mt-3">
            <iframe
              width="100%"
              height="200"
              id="gmap_canvas"
              src="https://maps.google.com/maps?q=ngwenya%20lodge&t=&z=13&ie=UTF8&iwloc=&output=embed"
              frameborder="0"
              scrolling="no"
              marginheight="0"
              marginwidth="0"
            ></iframe>
          </div> -->
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import gallery from "../../../shared/gallerySlideShow";
export default {
  components: {
    gallery
  },
  props: {
    property: {},
    propertyImages: {}
  },
  data() {
    return {
      index: null,
      date: new Date()
    };
  }
};
</script>

<style lang="scss" scoped>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 575px) {
  .resPortfolioSection {
    margin-bottom: 100px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
  .resPortfolioSection {
    margin-bottom: 140px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .resPortfolioSection {
    margin-bottom: 50px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .resPortfolioSection {
    margin-bottom: 60px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .resPortfolioSection {
    margin-bottom: 80px;
  }
}
</style>