|
|
@@ -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"
|
