modify destination detail page

hichina-main-front-mobile-first/src/pages/DestinationDetailPage.vue

@@ -1,8 +1,7 @@
 <template>
   <q-page>
     <div class="row" style="height: 110px; background-color: #e5f2fa">
-      <div class="col-sm-2"></div>
-      <div class="col-12 col-sm-10 column">
+      <div class="col-12 col-sm-10 column" style="margin-left: 20px">
         <div class="q-pt-md q-pl-md text-black text-weight-bold">
           Home > Destination > {{ destinationName }}
         </div>
@@ -12,38 +11,46 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-12 col-sm-5 row q-px-md q-py-lg" style="height: 450px">
-        <div class="col-12" style="background-color: white">
-          <q-img :src="destinationProfileImage" fit="fill"> </q-img>
-        </div>
+      <!-- Left Column for Image -->
+      <div
+        class="col-12 col-sm-5 row q-px-md q-py-lg d-flex justify-center align-center"
+        style="height: 450px; background-color: white"
+      >
+        <q-img
+          :src="destinationProfileImage"
+          style="width: 100%; max-width: 650px; height: 100%"
+          fit="cover"
+        >
+        </q-img>
       </div>
+
+      <!-- Right Column for Description, Guidebook, and Download Button -->
       <div class="col-12 col-sm-7 row q-px-md q-py-lg" style="height: 450px">
-        <div class="column col-12">
-          <div
-            class="col-9 q-pa-md text-subtitle1"
-            style="background-color: #fff9c6"
-            v-html="description"
-          ></div>
-          <div class="col-3 row">
-            <div class="col-6 text-h4 flex flex-center">
-              Guidbook of {{ destinationName }}
-            </div>
-            <div class="col-6 flex flex-center">
-              <q-btn class="glossy" rounded color="blue-6" @click="goDownload"
-                ><q-icon left size="3em" name="download" />
-                <div>Download</div></q-btn
-              >
-            </div>
+        <div
+          class="column col-12 d-flex flex-column justify-between"
+          style="background-color: #eff6fd; height: 100%"
+        >
+          <div class="q-pa-md text-subtitle1">
+            <div v-html="description"></div>
+          </div>
+          <div class="q-pa-md text-h4" style="margin-top: auto">
+            Guidebook of {{ destinationName }}
+            <q-btn class="primary" color="primary" @click="goDownload">
+              <q-icon left size="3em" name="download" />
+              <div>Download</div>
+            </q-btn>
           </div>
         </div>
       </div>
     </div>
+
     <div
-      class="row flex flex-center text-h4"
-      style="border-top: 1px solid gray; height: 80px"
+      class="row flex flex-left text-h4"
+      style="border-top: 1px solid gray; height: 80px; margin-left: 30px"
     >
       Places to go in {{ destinationName }}
     </div>
+
     <div
       v-for="item in childDestinations"
       v-bind:key="item.destinationId"