|
@@ -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,51 @@
|
|
|
</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">
|
|
|
+ {{ $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
|
|
|
- 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
|
|
|
v-for="item in childDestinations"
|
|
|
v-bind:key="item.destinationId"
|
|
@@ -59,7 +71,7 @@
|
|
|
></q-img>
|
|
|
</div>
|
|
|
<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">{{
|
|
|
item.destinationName
|
|
|
}}</a>
|