Virtual Tour Update

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

@@ -53,9 +53,6 @@
             </div>-->
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border">
-              <i class="fa fa-search"></i>BOOK A VIEWING
-            </div>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
@@ -81,10 +78,9 @@
         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            <div
-              style="display:inline"
-              v-if="property.propertyName !== null"
-            >{{ property.propertyName }} /</div>
+            <div style="display:inline" v-if="property.propertyName !== null">
+              {{ property.propertyName }} /
+            </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
@@ -107,11 +103,26 @@
 
           <div class="mt-5" v-html="property.description"></div>
           <router-link
-            style="float:right"
+            style="float:right; white-space: nowrap;"
             class="btn-solid-blue mt-3"
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-          >MORE INFO...</router-link>
-          <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
+            >ENQUIRE NOW</router-link
+          >
+
+          <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
+          <iframe
+            v-if="property.virtualTour !== null"
+            width="100%"
+            height="500px"
+            :src="property.virtualTour"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
+
+          <h4 v-if="property.video !== null" class="mt-5">Video</h4>
           <iframe
             v-if="property.video !== null"
             width="100%"
@@ -179,11 +190,11 @@
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery,
+    gallery
   },
   props: {
     property: {},
-    propertyImages: {},
+    propertyImages: {}
   },
   mounted() {
     console.log(this.property);
@@ -191,7 +202,7 @@ export default {
   data() {
     return {
       index: null,
-      date: new Date(),
+      date: new Date()
     };
   },
   computed: {
@@ -201,11 +212,11 @@ export default {
         list.push(this.propertyImages[i].image);
       }
       return list;
-    },
+    }
   },
   created() {
     this.$emit("Loaded", true);
-  },
+  }
 };
 </script>
 

src/components/property/residential/singleView/contentSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div class="container pb-5">
+    <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-4">
           <div class="resPortfolioSection">
@@ -111,15 +111,28 @@
               </div>
               <div class="col-md-4">
                 <router-link
-                  style="float:right"
+                  style="float:right; white-space: nowrap;"
                   class="btn-solid-blue mt-3"
                   :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-                  >Enquire Now</router-link
+                  >ENQUIRE NOW</router-link
                 >
               </div>
             </div>
           </div>
-          <h4 v-if="property.video != null" class="mt-5">Video Tour</h4>
+
+          <h4 v-if="property.virtualTour != null" style="margin-top:150px">Virtual Tour</h4>
+          <iframe
+            v-if="property.virtualTour != null"
+            width="100%"
+            :src="property.virtualTour"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
+
+          <h4 v-if="property.video != null" class="mt-5">Video</h4>
           <iframe
             v-if="property.video != null"
             width="100%"
@@ -130,6 +143,7 @@
             style="margin-bottom:-6px"
             class="mt-3"
           ></iframe>
+
           <p></p>
           <div class="d-flex mt-3">
             <iframe