First Committ

src/components/CTitle/CTitle.scss

@@ -0,0 +1,29 @@
+
+.cltitlebg{
+
+}
+
+.titletext {
+  color: white;
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 3rem;
+  text-shadow: .25rem .25rem .5rem black;
+  letter-spacing: .00937em;
+  opacity: 0.9;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .titletext {
+    color: white;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 2rem;
+    text-shadow: .25rem .25rem .5rem black;
+  }
+}
+
+.q-img__content > div{
+  background: rgba(0,0,0,0.17) !important;
+}

src/components/CTitle/CTitle.ts

@@ -0,0 +1,56 @@
+import {
+  defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRef, toRefs, watch,
+} from 'vue'
+
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CTitle',
+  props: {
+    headtitle: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    imgbackground: {
+      type: String,
+      default: '',
+    },
+    imghead: {
+      type: String,
+      default: '',
+    },
+    sizes: {
+      type: String,
+      default: '',
+    },
+    styleadd: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { attrs, slots, emit }) {
+    const { headtitle } = toRefs(props) // REQUIRED PROP !
+    const imgbackground = toRef(props, 'imgbackground') // OPTIONAL PROP
+
+    function getsrc(): string {
+      const filefull = tools.getimgFullpathbysize(imgbackground.value)
+
+      return tools.getimgbysize(filefull.path, filefull.file)
+    }
+
+    function getaltimg(): string {
+      if (headtitle.value) {
+        return headtitle.value
+      }
+      const filefull = tools.getimgFullpathbysize(imgbackground.value)
+      return tools.getaltimg(filefull.path, filefull.file, headtitle.value)
+    }
+
+    return {
+      getsrc,
+      getaltimg,
+    }
+  },
+})

src/components/CTitle/CTitle.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <q-img
+v-if="imgbackground" :src="getsrc" :alt="getaltimg"
+               :style="tools.styles_imgtitle(sizes)">
+
+            <div class="absolute-bottom text-body1 text-center" :style="styleadd">
+                <h1 class="titletext" v-html="headtitle"></h1>
+            </div>
+        </q-img>
+
+        <!--
+        <q-parallax :height="tools.myheight_imgtitle()" :width="tools.mywidth_imgtitle()">
+            <template v-slot:media>
+                <img :src="imgbackground" class="cltitlebg">
+            </template>
+            <h2 class="titletext">{{headtitle}}</h2>
+        </q-parallax>
+        -->
+
+    </div>
+</template>
+
+<script lang="ts" src="./CTitle.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CTitle.scss';
+</style>

src/components/CTitle/index.ts

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