118 lines
4.1 KiB
Vue
118 lines
4.1 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { ref } from 'vue';
|
|
import { Notify } from 'quasar';
|
|
|
|
const click_number = ref(1);
|
|
const icon = ref('las la-hand-peace');
|
|
const color = ref('accent');
|
|
|
|
const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et \
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
|
|
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu \
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia \
|
|
deserunt mollit anim id est laborum."
|
|
|
|
const slide = ref<string>('welcome');
|
|
|
|
const clickNotify = () => {
|
|
if (click_number.value % 7 === 0) {
|
|
icon.value = 'las la-hand-middle-finger';
|
|
color.value = 'negative';
|
|
}
|
|
else {
|
|
icon.value = 'las la-hand-peace';
|
|
color.value = 'accent';
|
|
}
|
|
Notify.create({
|
|
color: color.value,
|
|
icon: icon.value,
|
|
iconSize: '5em',
|
|
iconColor: 'white',
|
|
});
|
|
|
|
click_number.value += 1;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
padding
|
|
class="q-pa-md row justify-center"
|
|
>
|
|
<q-card flat class="column col-9 transparent ">
|
|
<div class="col-1"></div>
|
|
<q-carousel
|
|
v-model="slide"
|
|
transition-prev="jump-right"
|
|
transition-next="jump-left"
|
|
swipeable
|
|
animated
|
|
control-color="accent"
|
|
navigation-icon="radio_button_unchecked"
|
|
navigation
|
|
class="col-5 bg-dark rounded-15 shadow-2"
|
|
>
|
|
<q-carousel-slide
|
|
name="welcome"
|
|
class="column no-wrap flex-center q-pa-none q-pb-xl"
|
|
>
|
|
<q-img src="src/assets/line-truck-1.jpg" class="full-height">
|
|
<div class="absolute-bottom text-h5">
|
|
{{ $t('dashboard.welcome') }}
|
|
</div>
|
|
</q-img>
|
|
<div class="q-mt-md text-center">
|
|
{{ LOREM_IPSUM }}
|
|
</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide
|
|
name="tv"
|
|
class="column no-wrap flex-center q-pa-none q-pb-xl"
|
|
>
|
|
<q-icon
|
|
name="live_tv"
|
|
size="56px"
|
|
/>
|
|
<div class="q-mt-md text-center">
|
|
{{ LOREM_IPSUM }}
|
|
</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide
|
|
name="layers"
|
|
class="column no-wrap flex-center q-pa-none q-pb-xl"
|
|
>
|
|
<q-icon
|
|
name="layers"
|
|
size="56px"
|
|
/>
|
|
<div class="q-mt-md text-center">
|
|
{{ LOREM_IPSUM }}
|
|
</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide
|
|
name="map"
|
|
class="column no-wrap flex-center q-pa-none q-pb-xl"
|
|
>
|
|
<q-icon
|
|
name="terrain"
|
|
size="56px"
|
|
/>
|
|
<div class="q-mt-md text-center">
|
|
{{ LOREM_IPSUM }}
|
|
</div>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
<div class="col column flex-center">
|
|
<q-btn
|
|
push
|
|
color="accent"
|
|
label="Click Me"
|
|
@click="clickNotify"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</q-page>
|
|
</template> |