other components...

src/components/CCard/CCard.scss

@@ -0,0 +1,66 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}

src/components/CCard/CCard.ts

@@ -0,0 +1,58 @@
+import { computed, defineComponent, PropType, ref } from 'vue'
+
+import { IOperators } from '../../model'
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CCard',
+  props: {
+    tab: {
+      type: String,
+      required: true,
+      default: 'one',
+    },
+    op: {
+      type: Object as PropType<IOperators>,
+      required: true,
+    },
+  },
+  setup(props) {
+
+    const mytab = ref(props.tab)
+
+    function clicca() {
+      mytab.value = 'two'
+    }
+
+    const myop = computed(() => {
+      if (!!props.op) {
+        return props.op
+      } else {
+        return {
+          tab: '',
+          username: '',
+          name: '',
+          surname: '',
+          qualification: '',
+          usertelegram: '',
+          disciplines: '',
+          certifications: '',
+          img: '',
+          cell: '',
+          email: '',
+          paginaweb: '',
+          paginafb: '',
+          intro: '',
+          info: '',
+        }
+      }
+    })
+
+    return {
+      mytab,
+      myop,
+      tools,
+      clicca,
+    }
+  },
+})

src/components/CCard/CCard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <q-card class="my-card text-center">
+
+      <q-img :src="`statics/images/` + myop.img" class="myimg">
+        <div class="absolute-bottom text-spacetrans text-shadow">
+          <div class="text-h6 text-trans">{{ myop.name }} {{ myop.surname }}</div>
+          <div class="text-subtitle-carica text-trans">{{ myop.qualification }}</div>
+        </div>
+      </q-img>
+
+      <q-tabs v-model="tab" class="text-teal">
+        <q-tab label="Info" name="one"></q-tab>
+        <q-tab v-if="myop.intro" label="Biografia" name="two"></q-tab>
+      </q-tabs>
+
+      <q-separator></q-separator>
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="one">
+          <div class="text-subtitle-carica">{{ myop.disciplines }}</div>
+          <div v-if="myop.certifications" class="text-subtitle-certificato">{{ myop.certifications }}</div>
+          <div class="op__cell">
+            <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
+            <span class="q-ma-sm">{{ myop.cell }}</span>
+
+            <div class="row justify-center margin_buttons q-gutter-lg">
+              <q-btn
+                v-if="myop.email" fab-mini icon="fas fa-envelope"
+                color="blue-grey-6" type="a"
+                size="sm"
+                :href="tools.getemailto(myop.email)" target="__blank">
+              </q-btn>
+              <q-btn
+                v-if="tools.getHttpForWhatsapp(myop.cell)"
+                fab-mini icon="fab fa-whatsapp"
+                color="green" type="a"
+                size="sm"
+                :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+              </q-btn>
+
+              <q-btn
+                v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+                color="blue" type="a"
+                size="sm"
+                :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
+              </q-btn>
+            </div>
+          </div>
+          <div class="op__email">
+            <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
+            <a :href="tools.getemailto(myop.email)" target="_blank">{{ myop.email }}
+            </a>
+          </div>
+
+          <div class="op__facebook" v-if="myop.paginafb">
+            <a :href="myop.paginafb" target="_blank">
+              <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina Facebook
+            </a>
+          </div>
+
+
+          <div class="op__storia" v-html="myop.intro"></div>
+          <q-btn v-if="myop.intro" rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
+        </q-tab-panel>
+
+        <q-tab-panel name="two">
+          <div class="op__storia" v-html="myop.info"></div>
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts" src="./CCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CCard.scss';
+</style>

src/components/CCard/index.ts

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