forked from verdnatura/salix-front
88 lines
3.4 KiB
Vue
88 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const slide = ref('style');
|
|
const slideText = 'Description text';
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-page class="q-pa-md">
|
|
<q-banner
|
|
v-if="$q.screen.gt.xs"
|
|
inline-actions
|
|
rounded
|
|
class="bg-orange text-white q-mb-lg"
|
|
>
|
|
Employee notification message
|
|
<template #action>
|
|
<q-btn flat label="Dismiss" />
|
|
</template>
|
|
</q-banner>
|
|
|
|
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-carousel
|
|
v-model="slide"
|
|
transition-prev="scale"
|
|
transition-next="scale"
|
|
swipeable
|
|
animated
|
|
control-color="white"
|
|
navigation
|
|
padding
|
|
arrows
|
|
height="300px"
|
|
class="bg-orange-3 text-white shadow-1 rounded-borders"
|
|
>
|
|
<q-carousel-slide name="style" class="column no-wrap flex-center">
|
|
<q-icon name="style" size="56px" />
|
|
<div class="q-mt-md text-center">{{ slideText }}</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide name="tv" class="column no-wrap flex-center">
|
|
<q-icon name="live_tv" size="56px" />
|
|
<div class="q-mt-md text-center">{{ slideText }}</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide name="layers" class="column no-wrap flex-center">
|
|
<q-icon name="layers" size="56px" />
|
|
<div class="q-mt-md text-center">{{ slideText }}</div>
|
|
</q-carousel-slide>
|
|
<q-carousel-slide name="map" class="column no-wrap flex-center">
|
|
<q-icon name="terrain" size="56px" />
|
|
<div class="q-mt-md text-center">{{ slideText }}</div>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
</div>
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-card class="q-pa-md">Dashboard page..</q-card>
|
|
</div>
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-card class="q-pa-md">Dashboard page..</q-card>
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-md q-mb-lg">
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-card class="q-pa-md">Dashboard page..</q-card>
|
|
</div>
|
|
<div class="col-12 col-md">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-card class="q-pa-md">Dashboard page..</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row items-start q-col-gutter-md q-mb-lg">
|
|
<div class="col">
|
|
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
|
<q-card class="q-pa-md">Dashboard page..</q-card>
|
|
</div>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|