verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Responsive monitor

This commit is contained in:
Joan Sanchez 2022-03-15 10:35:21 +01:00
parent 49b5ed8003
commit ef073d1c87
1 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/Dashboard/Dashboard.vue
View File

@ -1,6 +1,82 @@
<script lang="ts" setup>
import { ref } from 'vue';
const slide = ref('style');
</script>
<template> <template>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<q-card class="q-pa-md"> Dashboard page.. </q-card> <q-banner
v-if="$q.screen.gt.xs"
inline-actions
rounded
class="bg-orange text-white q-mb-lg"
>
You have lost connection to the internet. This app is offline.
<template #action>
<q-btn flat label="Turn ON Wifi" />
<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">{{ lorem }}</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">{{ lorem }}</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">{{ lorem }}</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">{{ lorem }}</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>
</template> </template>