no message

src/pages/scattered/hotelDetails.vue

 <template>
-  <!--  class="row items-center justify-center q-pt-lg q-pb-lg" -->
-    <div class="q-pt-lg">
-      <q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 1300px; height: 88vh;margin: auto;">
-        <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
+    <div class="q-py-lg">
+      <div class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 1300px;margin: auto;">
+        <div class="row q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
           <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
             <div class="mobile-only row items-center">
               <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ hotelSummary.hotelName }}</div>
@@ -20,7 +19,7 @@
             </div>
           </div>
         </div>
-        <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
+        <div class="col q-px-lg">
           <div class="row nowrap">
             <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
             <span class="col fz14 text-weight-bold text-blick">{{ hotelSummary.address }}</span>
@@ -33,7 +32,7 @@
                   <div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86"></div>
                 </div>
               </div>
-              <div class="col-7" :class="{ 'col-7': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
+              <div :class="{ 'col-5': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
                 <q-img @click="showImageHandler(h.List[0])" :src="h.List[0]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
               </div>
               <div class="col q-pl-sm" v-if="h.List.length > 1">
@@ -42,9 +41,18 @@
                 </div>
                 <div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 2">
                   <q-img @click="showImageHandler(h.List[2])" :src="h.List[2]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
-                    <div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 3">
+                  </q-img>
+                </div>
+              </div>
+              <div class="col q-pl-sm" v-if="h.List.length > 3">
+                <div :style="{ height: h.List.length > 4 ? '50%' : '100%' }">
+                  <q-img @click="showImageHandler(h.List[3])" :src="h.List[3]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
+                </div>
+                <div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 4">
+                  <q-img @click="showImageHandler(h.List[4])" :src="h.List[4]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
+                    <div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 5">
                       <span class="fz20 text-weight-bold">+</span>
-                      <span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
+                      <span class="text-h5 text-weight-bold">{{ h.List.length - 5 }}</span>
                     </div>
                   </q-img>
                 </div>
@@ -141,8 +149,8 @@
               <div class="text-grey-700 q-mt-sm">{{ h.hotelDescription }}</div>
             </div>
           </div>
-        </q-scroll-area>
-      </q-card>
+        </div>
+      </div>
       <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
     </div>
     <q-dialog class="no-padding" v-model="showImagePriview" persistent v-if="images && images.length > 0">