127 lines
4.4 KiB
Vue
Executable File
127 lines
4.4 KiB
Vue
Executable File
<template>
|
|
<q-page>
|
|
<CMyPage title="">
|
|
<div class="q-ma-md">
|
|
<span>{{ setmeta({
|
|
title: 'Testimonanze',
|
|
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=" " 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="`TESTIMONIANZE AUDIO DELLA BILLETTERA`" bgcolor="bg-primary" clcolor="text-white"
|
|
mystyle=" " 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>
|