other components...

src/components/CCardStat/CCardStat.scss

@@ -0,0 +1,13 @@
+.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;
+}

src/components/CCardStat/CCardStat.ts

@@ -0,0 +1,37 @@
+import { defineComponent } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CCardStat',
+  props: {
+    mytext: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    myval: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    mycol: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  setup() {
+    function getsize() {
+      if (tools.isMobile())
+        return '130px'
+      else
+        return '150px'
+    }
+
+    return {
+      getsize,
+    }
+  },
+})

src/components/CCardStat/CCardStat.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="row justify-between q-pa-xs-sm">
+    <div :style="' padding-right: 8px;'">
+      {{mytext}}
+    </div>
+    <div>
+      <q-badge :color="mycol">{{ myval }}</q-badge>
+    </div>
+  </div>
+
+
+</template>
+
+<script lang="ts" src="./CCardStat.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CCardStat.scss';
+</style>

src/components/CCardStat/index.ts

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