108 lines
3.9 KiB
Vue
108 lines
3.9 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { ref } from 'vue';
|
|
|
|
const slide = ref<string>('welcome');
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
padding
|
|
class="q-pa-md justify-center items-stretch"
|
|
:class="$q.platform.is.mobile ? 'column' : 'row'"
|
|
>
|
|
<!-- left column -->
|
|
<div class="column col flex-center q-pa-md">
|
|
|
|
</div>
|
|
|
|
<!-- center column -->
|
|
<div class="column col-xs-12 col-md-8 col-xl-6 flex-center q-pa-md">
|
|
<q-carousel
|
|
v-model="slide"
|
|
transition-prev="jump-right"
|
|
transition-next="jump-left"
|
|
swipeable
|
|
animated
|
|
navigation
|
|
infinite
|
|
:autoplay="9001"
|
|
control-color="accent"
|
|
class="col-auto bg-dark rounded-15 shadow-18"
|
|
:style="$q.platform.is.mobile ? 'height: 60vh;' : 'height: 50vh;'"
|
|
>
|
|
<!-- welcome slide -->
|
|
<q-carousel-slide
|
|
name="welcome"
|
|
class="q-pa-none q-pb-xl fit"
|
|
>
|
|
<div class="column fit">
|
|
<q-img
|
|
src="src/assets/targo_building.png"
|
|
height="30vh"
|
|
position="50% 25%"
|
|
fit="cover"
|
|
class="col-auto"
|
|
>
|
|
<div class="absolute-bottom text-h6 text-uppercase text-weight-light">
|
|
{{ $t('dashboard.carousel.welcome_title') }}
|
|
</div>
|
|
</q-img>
|
|
|
|
<div class="column col q-mt-md q-px-md flex-center">
|
|
<span class="col-auto">{{ $t('dashboard.carousel.welcome_message') }}</span>
|
|
</div>
|
|
</div>
|
|
</q-carousel-slide>
|
|
|
|
<!-- help page slide -->
|
|
<q-carousel-slide
|
|
name="tv"
|
|
class="q-pa-none q-pb-xl"
|
|
>
|
|
<div class="column fit">
|
|
<q-img
|
|
src="src/assets/targo_help_banner.png"
|
|
height="30vh"
|
|
position="50% 25%"
|
|
fit="none"
|
|
class="col-auto"
|
|
>
|
|
<div class="absolute-bottom text-h6 text-uppercase text-weight-light">
|
|
{{ $t('dashboard.carousel.help_title') }}
|
|
</div>
|
|
</q-img>
|
|
|
|
<div class="col column justify-center q-mt-md q-px-md">
|
|
<span class="col-auto">{{ $t('dashboard.carousel.help_message') }}</span>
|
|
</div>
|
|
</div>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
|
|
<div class="col column">
|
|
<span class="col-auto text-h6 text-uppercase"> </span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- right column -->
|
|
<div class="column col items-center">
|
|
<div
|
|
class="col-auto row full-width within-iframe"
|
|
:class="$q.platform.is.mobile ? 'justify-center' : 'justify-end q-pl-md'"
|
|
style="height: 50vh;"
|
|
>
|
|
<iframe
|
|
title="Environment Canada Weather"
|
|
height="400px"
|
|
src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
|
|
allowtransparency="true"
|
|
style="border: 0;"
|
|
class="col-auto"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</q-page>
|
|
</template> |