- Card
This commit is contained in:
Surya Paolo
@@ -33,70 +33,117 @@
|
||||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||||
class="card-carousel-container"
|
||||
>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
class="card-carousel"
|
||||
ref="carouselRef"
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
v-model="slide"
|
||||
navigation
|
||||
control-text-color="white"
|
||||
ref="carousel"
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
:height="myel.heightcarousel"
|
||||
width="100%"
|
||||
control-type="flat"
|
||||
class="bg-primary shadow-2 rounded-borders"
|
||||
@mouseenter="animare = false"
|
||||
@mouseleave="animare = true"
|
||||
@transition="handleTransition"
|
||||
>
|
||||
<q-card
|
||||
v-for="(rec, ind) in myel.listcards"
|
||||
:key="ind"
|
||||
:class="
|
||||
`my-card-elem center_img bordered ` +
|
||||
myel.class3 +
|
||||
(rec.link ? ' titolo_card' : '')
|
||||
"
|
||||
:style="
|
||||
rec.style +
|
||||
`; height: ${myel.heightimg || `300px`} !important; width: ${
|
||||
myel.widthimg || `300px`
|
||||
} !important;`
|
||||
"
|
||||
@click="rec.link ? tools.openUrl(rec.link) : undefined"
|
||||
>
|
||||
<div
|
||||
class="img-container"
|
||||
:style="`height: ${
|
||||
myel.heightimg.replace('px', '') * 0.7
|
||||
}px; overflow: hidden;`"
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="top-left"
|
||||
:offset="[-10, -10]"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.7"
|
||||
>
|
||||
<q-img
|
||||
:class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
|
||||
:src="tools.getImgFileByElem(myel, rec)"
|
||||
/>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<div :class="rec.size" :style="`color: ` + rec.color">
|
||||
{{ tools.getText(rec.alt) }}
|
||||
<q-btn
|
||||
push
|
||||
round
|
||||
:color="$q.dark.isActive ? `black` : `white`"
|
||||
:text-color="$q.dark.isActive ? `white` : `black`"
|
||||
icon="keyboard_arrow_left"
|
||||
@click="$refs.carousel.previous()"
|
||||
></q-btn>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="top-right"
|
||||
class="q-gutter-xs"
|
||||
:offset="[-10, -10]"
|
||||
style="opacity: 0.7"
|
||||
>
|
||||
<q-btn
|
||||
push
|
||||
round
|
||||
:color="$q.dark.isActive ? `black` : `white`"
|
||||
:text-color="$q.dark.isActive ? `white` : `black`"
|
||||
icon="keyboard_arrow_right"
|
||||
@click="$refs.carousel.next()"
|
||||
></q-btn>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
<!-- Iteriamo sui gruppi di card invece che sulle singole card -->
|
||||
<q-carousel-slide
|
||||
v-for="(group, groupIndex) in cardGroups"
|
||||
:key="groupIndex"
|
||||
:name="groupIndex"
|
||||
>
|
||||
<div class="row no-wrap justify-start items-center q-px-md full-width">
|
||||
<template v-for="(rec, cardIndex) in group" :key="cardIndex">
|
||||
<div :class="cardColumnClass">
|
||||
<q-card
|
||||
:class="
|
||||
`flex-card bordered ` +
|
||||
myel.class3 +
|
||||
(rec.link ? ' titolo_card' : '')
|
||||
"
|
||||
:style="
|
||||
rec.style +
|
||||
`; height: ${
|
||||
myel.heightimg || `300px`
|
||||
} !important; width: ${
|
||||
myel.widthimg || `300px`
|
||||
} !important;`
|
||||
"
|
||||
@click="rec.link ? tools.openUrl(rec.link) : undefined"
|
||||
>
|
||||
<div
|
||||
class="img-container"
|
||||
:style="`height: ${
|
||||
myel.heightimg.replace('px', '') * 0.7
|
||||
}px; overflow: hidden;`"
|
||||
>
|
||||
<q-img
|
||||
:class="
|
||||
tools.getClassAnim(myel.anim2) + ` ` + myel.class4
|
||||
"
|
||||
:src="tools.getImgFileByElem(myel, rec)"
|
||||
/>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<div :class="rec.size" :style="`color: ` + rec.color">
|
||||
{{ tools.getText(rec.alt) }}
|
||||
</div>
|
||||
<div
|
||||
:class="
|
||||
`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
|
||||
"
|
||||
v-html="rec.content"
|
||||
></div>
|
||||
<div
|
||||
v-if="rec.description"
|
||||
class="text-caption"
|
||||
:style="`color: ` + rec.colorsub"
|
||||
>
|
||||
{{ rec.description }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
|
||||
v-html="rec.content"
|
||||
></div>
|
||||
<div
|
||||
v-if="rec.description"
|
||||
class="text-caption"
|
||||
:style="`color: ` + rec.colorsub"
|
||||
>
|
||||
{{ rec.description }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="swipe-indicator left" v-if="!isAtStart">
|
||||
<q-icon name="chevron_left" size="2rem" color="white" />
|
||||
</div>
|
||||
<div class="swipe-indicator right" v-if="!isAtEnd">
|
||||
<q-icon name="chevron_right" size="2rem" color="white" />
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<div
|
||||
v-for="(_, index) in myel.listcards"
|
||||
:key="index"
|
||||
:class="['dot', { active: index === activeIndex }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
||||
@@ -489,13 +536,14 @@
|
||||
<CSendRISTo></CSendRISTo>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
|
||||
<div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
|
||||
<div v-if="editOn" class="elemEdit">Visualizzatore Tabelle</div>
|
||||
<CGridOriz
|
||||
:table="myel.container"
|
||||
:tipovisu="myel.number"
|
||||
:prop_search="myel.parambool"
|
||||
:finder="myel.parambool2"
|
||||
:showMap="myel.parambool3"
|
||||
:heightcarousel="myel.heightcarousel"
|
||||
></CGridOriz>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
|
||||
|
||||
Reference in New Issue
Block a user