- DashBoard, Profile, Order Menu

src/root/testimonianze/testimonianze.vue

@@ -0,0 +1,126 @@
+<template>
+  <q-page>
+    <CMyPage title="">
+      <div class="q-ma-md">
+            <span>{{ setmeta({
+                title: 'Home',
+                description: $t('msg.myAppDescription'),
+                keywords: $t('msg.keywords_base') } ) }}
+            </span>
+
+        <CTitleBanner class="q-pa-xs" :title="$t('text.testimonial')" bgcolor="bg-primary" clcolor="text-white"
+                      mystyle="letter-spacing: 0.25rem; " canopen="true">
+
+
+          <q-carousel
+            v-model="mytestimonianze"
+            transition-prev="slide-right"
+            transition-next="slide-left"
+            swipeable
+            animated
+            control-color="white"
+            padding
+            ref="mytestimonianze"
+            height="100%"
+            class="text-white shadow-1 rounded-borders"
+          >
+            <template v-slot:control>
+              <q-carousel-control
+                position="bottom-left"
+                class="q-gutter-xs"
+                style="opacity: 0.4;">
+                <q-btn
+                  push round color="white" text-color="black" icon="arrow_left"
+                  @click="$refs.mytestimonianze.previous()"></q-btn>
+              </q-carousel-control>
+              <q-carousel-control
+                position="bottom-right"
+                class="q-gutter-xs"
+                style="opacity: 0.4;">
+                <q-btn
+                  push round color="white" text-color="black" icon="arrow_right"
+                  @click="$refs.mytestimonianze.next()"></q-btn>
+              </q-carousel-control>
+            </template>
+            <q-carousel-slide v-for="(rec, index) in gettestimonianze()" :key="index" :name="index"
+                              class="row flex-center">
+              <div class="q-pa-sm text-subtitle2 text-blue">{{ rec.title }}</div>
+              <div v-html="rec.text" class="text-black"></div>
+            </q-carousel-slide>
+          </q-carousel>
+          <div class="row justify-center">
+            <q-btn-toggle
+              glossy
+              v-model="mytestimonianze"
+              :options="gettestimonianze()"
+            ></q-btn-toggle>
+          </div>
+
+
+        </CTitleBanner>
+
+        <CTitleBanner class="q-pa-xs" :title="`AUDIO`" bgcolor="bg-primary" clcolor="text-white"
+                      mystyle="letter-spacing: 0.25rem; " canopen="true">
+
+          <q-carousel
+            v-model="myaudio"
+            transition-prev="slide-right"
+            transition-next="slide-left"
+            swipeable
+            animated
+            control-color="white"
+            padding
+            ref="myaudio"
+            height="150px"
+            class="text-white shadow-1 rounded-borders"
+          >
+            <template v-slot:control>
+              <q-carousel-control
+                position="top-left"
+                class="q-gutter-xs"
+                style="opacity: 0.6;">
+                <q-btn
+                  push round color="white" text-color="black" icon="arrow_left"
+                  @click="$refs.myaudio.previous()"></q-btn>
+              </q-carousel-control>
+              <q-carousel-control
+                position="top-right"
+                class="q-gutter-xs"
+                style="opacity: 0.6;">
+                <q-btn
+                  push round color="white" text-color="black" icon="arrow_right"
+                  @click="$refs.myaudio.next()"></q-btn>
+              </q-carousel-control>
+            </template>
+            <q-carousel-slide v-for="(recaudio, index) in getaudiofiles()" :key="index" :name="index"
+                              class="column no-wrap flex-center">
+              <div class="q-pa-sm text-subtitle2 text-blue">{{ recaudio.title }}</div>
+              <q-media-player
+                type="audio"
+                :sources="[...recaudio]"
+                background-color="deep-purple-3"
+                :playback-rates="[ { label: 'Normal', value: 1 }, { label: '1.15x', value: 1.15 } ]"
+              ></q-media-player>
+            </q-carousel-slide>
+          </q-carousel>
+          <div class="row justify-center">
+            <q-btn-toggle
+              glossy
+              v-model="myaudio"
+              :options="getaudiofiles()"
+            ></q-btn-toggle>
+          </div>
+        </CTitleBanner>
+
+
+      </div>
+    </CMyPage>
+  </q-page>
+</template>
+
+<script lang="ts" src="./testimonianze.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './testimonianze.scss';
+</style>