Components Gallery, Book, Card, CImgText .... continue...

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,52 @@
+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 { IPerson } from '../../model/GlobalStore'
+
+@Component({
+  name: 'CCard',
+  filters: {
+    firstchars(value) {
+      return tools.firstchars(value, 250)
+    }
+  }
+})
+
+export default class CCard extends Vue {
+  @Prop({ required: true, default: 'one' }) public tab
+
+  public clicca() {
+    this.tab = 'two'
+  }
+
+  @Prop({ required: true }) public op: IPerson
+
+  get tools() {
+    return tools
+  }
+
+  get myop() {
+    if (!!this.op) {
+      return this.op
+    } else {
+      return {
+        index: 0,
+        tab: '',
+        name: '',
+        sub1: '',
+        sub2: '',
+        sub3: '',
+        img: '',
+        cell: '',
+        email: '',
+        paginaweb: '',
+        paginafb: '',
+        intro: '',
+        info: ''
+      }
+    }
+  }
+
+}

src/components/CCard/CCard.vue

@@ -0,0 +1,59 @@
+<template>
+    <q-card class="my-card text-center">
+        <q-img :src="myop.img" class="myimg">
+            <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.sub1}}</div>
+            </div>
+        </q-img>
+
+        <q-tabs v-model="tab" class="text-teal">
+            <q-tab label="Info" name="one"></q-tab>
+            <q-tab label="Storia" 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.sub2}}</div>
+                <div v-if="myop.sub3" class="text-subtitle-certificato">{{myop.sub3}}</div>
+                <div class="op__cell">
+                    <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
+                    {{myop.cell}}
+                </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 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.sub2}}</div>-->
+        <!--{{myop.info}}-->
+        <!--</q-card-section>-->
+    </q-card>
+</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'