First Committ

src/components/CImgText/CImgText.scss

@@ -0,0 +1,56 @@
+
+.imgtext {
+  display: flex;
+  justify-content: space-between;
+  /* flex-flow: row nowrap; */
+
+  padding: 1rem 0 1rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__img {
+    min-width: 250px;
+  }
+  &__imgh100 {
+    max-height: 100px;
+  }
+  &__imgh150 {
+    max-height: 150px;
+  }
+  &__imgw150 {
+    max-width: 150px;
+  }
+  &__imgw100 {
+    max-width: 100px;
+  }
+}
+
+
+@media (max-width: 400px) {
+
+  // PER VERSIONE MOBILE
+  .landing > section.padding_testo {
+    padding-top: 0.5rem;
+    padding-bottom: 0.1rem;
+  }
+
+  .imgtext {
+    padding: 0.25rem 0 0.25rem 0;
+  }
+
+}
+
+.landing > section.padding_testo {
+  padding-top: 1rem;
+  padding-bottom: 0.25rem;
+}
+
+.section_text {
+  padding: 10px;
+}

src/components/CImgText/CImgText.ts

@@ -0,0 +1,53 @@
+import {
+  defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRef, toRefs, watch,
+} from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+
+export default defineComponent({
+  name: 'CImgText',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    src2: {
+      type: String,
+      default: '',
+    },
+    class1: {
+      type: String,
+      default: 'myclimg',
+    },
+    style1: {
+      type: String,
+      default: '',
+    },
+    alt1: {
+      type: String,
+      default: 'image',
+    },
+    alt2: {
+      type: String,
+      default: 'image',
+    },
+  },
+
+  setup() {
+    function clrowcol() {
+      let mycl = 'row'
+      if (tools.isMobile()) mycl = 'column'
+
+      return mycl
+    }
+
+    function myclass() {
+      return `${clrowcol()} items-start q-col-gutter-xs imgtext `
+    }
+
+    return {
+      clrowcol,
+      myclass,
+    }
+  },
+})

src/components/CImgText/CImgText.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <section class="padding_testo bg-white text-grey-10 text-justify">  <!-- v-scroll-reveal.reset -->
+      <div :class="myclass">
+        <div :class="clrowcol + ` q-px-xs`">
+          <q-img v-if="src" :src="src" class="" :style="style1" :alt="alt1"></q-img>
+          <q-img v-if="src2" :src="src2" class="" :style="style1" :alt="alt2"></q-img>
+          <div class="section_text">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" src="./CImgText.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CImgText.scss';
+</style>

src/components/CImgText/index.ts

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