+ Registered Users

+ UsersList Online

src/components/CElemStat/CElemStat.scss

@@ -0,0 +1,34 @@
+.my-card-stat {
+  width: 100%;
+  max-width: 200px;
+  min-width: 120px;
+  padding: 1rem 1rem;
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 150px;
+    padding: 0;
+  }
+
+  box-shadow: none;
+}
+
+.my-card-small-stat {
+  width: 100%;
+  max-width: 60px;
+  min-width: 40px;
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 50px;
+    min-width: 40px;
+  }
+
+  box-shadow: none;
+}
+
+
+.text-h5-short {
+  line-height: 1.25rem !important;
+  @media (max-width: 718px) {
+    line-height: 1rem !important;
+  }
+}

src/components/CElemStat/CElemStat.ts

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CElemStat',
+  props: {
+    title: String,
+    icon: String,
+    value_today: Number,
+    mytextval: Number,
+    classColor: String,
+    colBack: String,
+    mystyle: String,
+  },
+  components: {},
+  setup(props) {
+
+    return {
+      tools
+    }
+  },
+})

src/components/CElemStat/CElemStat.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-card :class="` text-center`" :style="mystyle">
+    <div
+      :class="`column q-pa-sm text-center align-center ` + classColor"
+      style="align-items: center"
+    >
+      <div class="elem text-h6">
+        {{ title }}
+      </div>
+      <q-icon :name="icon" size="xl" :class="classColor + ` elem `" />
+      <div>
+        <div>
+        </div>
+      </div>
+
+      <div
+        class="elem full-width elem-value text-h5 boldhigh"
+      >
+        {{ mytextval }}
+          <q-badge
+            v-if="value_today > 0"
+            align="top"
+            :label="`+` + value_today + ` oggi`"
+            :color="colBack"
+          >
+          </q-badge>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script lang="ts" src="./CElemStat.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CElemStat.scss';
+</style>

src/components/CElemStat/index.ts

@@ -0,0 +1 @@
+export {default as CElemStat} from './CElemStat.vue'