|  | @@ -1,8 +1,7 @@
 | 
											
												
													
														|  |  <template>
 |  |  <template>
 | 
											
												
													
														|  |    <q-page>
 |  |    <q-page>
 | 
											
												
													
														|  |      <div class="row" style="height: 110px; background-color: #e5f2fa">
 |  |      <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">
 |  |          <div class="q-pt-md q-pl-md text-black text-weight-bold">
 | 
											
												
													
														|  |            Home > Destination > {{ destinationName }}
 |  |            Home > Destination > {{ destinationName }}
 | 
											
												
													
														|  |          </div>
 |  |          </div>
 | 
											
										
											
												
													
														|  | @@ -12,38 +11,51 @@
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  |      <div class="row">
 |  |      <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>
 |  |        </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="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">
 | 
											
												
													
														|  | 
 |  | +            {{ $t("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>
 |  |        </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 text-weight-bold"
 | 
											
												
													
														|  | 
 |  | +      style="
 | 
											
												
													
														|  | 
 |  | +        background-color: #eff6fd;
 | 
											
												
													
														|  | 
 |  | +        border-top: 1px solid gray;
 | 
											
												
													
														|  | 
 |  | +        height: 55px;
 | 
											
												
													
														|  | 
 |  | +        margin-left: 30px;
 | 
											
												
													
														|  | 
 |  | +      "
 | 
											
												
													
														|  |      >
 |  |      >
 | 
											
												
													
														|  | -      Places to go in {{ destinationName }}
 |  | 
 | 
											
												
													
														|  | 
 |  | +      {{ $t("place_to_go_in") }} {{ destinationName }}
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |      <div
 |  |      <div
 | 
											
												
													
														|  |        v-for="item in childDestinations"
 |  |        v-for="item in childDestinations"
 | 
											
												
													
														|  |        v-bind:key="item.destinationId"
 |  |        v-bind:key="item.destinationId"
 | 
											
										
											
												
													
														|  | @@ -59,7 +71,7 @@
 | 
											
												
													
														|  |          ></q-img>
 |  |          ></q-img>
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  |        <div class="col-9 column q-pa-md">
 |  |        <div class="col-9 column q-pa-md">
 | 
											
												
													
														|  | -        <div class="text-h4 text-weight-bold">
 |  | 
 | 
											
												
													
														|  | 
 |  | +        <div class="text-h4 text-weight-bold" style="background-color: #f3f6f8">
 | 
											
												
													
														|  |            <a :href="'./destination-detail/' + item.destinationId">{{
 |  |            <a :href="'./destination-detail/' + item.destinationId">{{
 | 
											
												
													
														|  |              item.destinationName
 |  |              item.destinationName
 | 
											
												
													
														|  |            }}</a>
 |  |            }}</a>
 |