100 lines
4.1 KiB
Vue
100 lines
4.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import LeftMenu from 'src/components/LeftMenu.vue';
|
|
|
|
const slide = ref('style');
|
|
const slideText = 'Description text';
|
|
const drawer = ref(false);
|
|
const miniState = ref(true);
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
v-model="drawer"
|
|
show-if-above
|
|
:mini="miniState"
|
|
@mouseover="miniState = false"
|
|
@mouseout="miniState = true"
|
|
mini-to-overlay
|
|
:width="200"
|
|
:breakpoint="500"
|
|
>
|
|
<q-scroll-area class="fit text-grey-8">
|
|
<LeftMenu />
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<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>
|
|
</q-page-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|