other components... (2)

src/components/CBook/CBook.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/CBook/CBook.ts

@@ -0,0 +1,52 @@
+import { defineComponent, ref, computed, PropType, toRef } from 'vue'
+import { IOperators } from 'model'
+
+export default defineComponent({
+  name: 'CBook',
+  props: {
+    tab: {
+      type: String,
+      required: true,
+    },
+    op: {
+      type: Object as PropType<IOperators>,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+
+    const mytab = toRef(props, 'tab')
+
+    function clicca() {
+      mytab.value = 'two'
+    }
+
+    function myop() {
+      if (!!props.op) {
+        return props.op
+      } else {
+        return {
+          index: 0,
+          tab: '',
+          name: '',
+          qualification: '',
+          sub2: '',
+          certifications: '',
+          img: '',
+          cell: '',
+          email: '',
+          paginaweb: '',
+          paginafb: '',
+          intro: '',
+          info: ''
+        }
+      }
+    }
+
+    return {
+      myop,
+      clicca,
+      mytab,
+    }
+  }
+})

src/components/CBook/CBook.vue

@@ -0,0 +1,47 @@
+<template>
+    <q-card class="my-card text-center">
+        <q-img :src="myop.img" class="myimg" :alt="`${myop.name} ${myop.surname}`">
+            <div class="absolute-bottom text-spacetrans text-shadow">
+                <div class="text-h6 text-trans">{{myop.name}}</div>
+                <div class="text-subtitle-carica text-trans">{{myop.qualification}}</div>
+            </div>
+        </q-img>
+
+        <q-tabs v-model="mytab" class="text-teal">
+            <q-tab label="Info" name="one"></q-tab>
+            <q-tab label="Biografia" name="two"></q-tab>
+        </q-tabs>
+
+        <q-separator></q-separator>
+
+        <q-tab-panels v-model="mytab" 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>
+                    {{myop.cell}}
+                </div>
+
+                <div class="op__storia" v-html="myop.intro"></div>
+                <q-btn 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-section>-->
+        <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
+        <!--{{myop.info}}-->
+        <!--</q-card-section>-->
+    </q-card>
+</template>
+
+<script lang="ts" src="./CBook.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CBook.scss';
+</style>

src/components/CBook/index.ts

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