- Chart Maps Nationality

- Username lowercase
- Statistics
- Telegram

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,23 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import MixinBase from '@src/mixins/mixin-base'
+
+@Component({
+  name: 'CCardState'
+})
+
+export default class CCardStat extends MixinBase {
+  @Prop({ required: true, default: '' }) public mytext
+  @Prop({ required: true, default: 0 }) public myval
+  @Prop({ required: false, default: 'primary' }) public mycol
+
+  get getsize() {
+    if (tools.isMobile())
+      return '130px'
+    else
+      return '150px'
+  }
+}

src/components/CCardStat/CCardStat.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="row justify-between q-pa-xs-sm">
+    <div style="font-size:1rem; 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'