- Statistiche
- Menu e Sottomenu - Lista ultimi Movimenti
This commit is contained in:
Surya Paolo
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,446 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home_tdv',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Elisa e Cristina insieme',
|
||||
img: '../../statics/images/eventi_esterni/IMG_6035.jpg'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
:height="tools.heightgallery()">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_tdv.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_tdv.scss';
|
||||
</style>
|
||||
@@ -127,6 +127,7 @@ const msg_website_it = {
|
||||
only_residenti: 'Solo Residenti',
|
||||
only_consiglio: 'Solo Consiglieri',
|
||||
color: 'Colore',
|
||||
sottomenu: 'SottoMenu',
|
||||
},
|
||||
msg: {
|
||||
myAppName: 'FreePlanet',
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,446 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home_tdv',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Elisa e Cristina insieme',
|
||||
img: '../../statics/images/eventi_esterni/IMG_6035.jpg'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
:height="tools.heightgallery()">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_tdv.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_tdv.scss';
|
||||
</style>
|
||||
@@ -94,6 +94,7 @@ const msg_website_it = {
|
||||
reg: 'Partecipanti',
|
||||
verifieds: 'Verificati',
|
||||
online_today: 'On Line Oggi',
|
||||
activeusers: 'Utenti Attivi',
|
||||
autorizzati: 'Autorizzati',
|
||||
autorizzare: 'In attesa di Abilitazione',
|
||||
passeggeri: 'Passeggeri Navi',
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home_tdv',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Elisa e Cristina insieme',
|
||||
img: '../../statics/images/eventi_esterni/IMG_6035.jpg'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
:height="tools.heightgallery()">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_tdv.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_tdv.scss';
|
||||
</style>
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,446 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home_tdv',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Elisa e Cristina insieme',
|
||||
img: '../../statics/images/eventi_esterni/IMG_6035.jpg'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
:height="tools.heightgallery()">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_tdv.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_tdv.scss';
|
||||
</style>
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -1,446 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home_tdv',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Elisa e Cristina insieme',
|
||||
img: '../../statics/images/eventi_esterni/IMG_6035.jpg'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
:height="tools.heightgallery()">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_tdv.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_tdv.scss';
|
||||
</style>
|
||||
@@ -138,6 +138,7 @@ export const shared_consts = {
|
||||
CHECKAPPRUNNING: 135,
|
||||
DASHBOARD: 140,
|
||||
DASHGROUP: 145,
|
||||
MOVEMENTS: 148,
|
||||
CSENDRISTO: 150,
|
||||
STATUSREG: 160,
|
||||
CHECKIFISLOGGED: 170,
|
||||
@@ -1654,6 +1655,10 @@ export const shared_consts = {
|
||||
value: 145,
|
||||
label: 'DashGroup',
|
||||
},
|
||||
{
|
||||
value: 148,
|
||||
label: 'Lista Movimenti',
|
||||
},
|
||||
{
|
||||
value: 150,
|
||||
label: 'SendCoinTo',
|
||||
@@ -1799,10 +1804,12 @@ export const shared_consts = {
|
||||
value: 7,
|
||||
label: 'Scheda (IMG + Testo)',
|
||||
},
|
||||
/*
|
||||
Disattivato perchè attualmente non funziona bene
|
||||
{
|
||||
value: 9,
|
||||
label: 'Poster (IMG + Testo)',
|
||||
},
|
||||
},*/
|
||||
{
|
||||
value: 195,
|
||||
label: 'Bottone',
|
||||
@@ -2241,5 +2248,11 @@ export const shared_consts = {
|
||||
|
||||
],
|
||||
|
||||
AccountType: {
|
||||
USER: 0,
|
||||
COLLECTIVE_ACCOUNT: 1,
|
||||
COMMUNITY_ACCOUNT: 2,
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
max-width: 200px;
|
||||
min-width: 120px;
|
||||
padding: 1rem 1rem;
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
max-width: 150px;
|
||||
@@ -16,6 +17,7 @@
|
||||
width: 100%;
|
||||
max-width: 60px;
|
||||
min-width: 40px;
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
max-width: 50px;
|
||||
@@ -28,7 +30,24 @@
|
||||
|
||||
.text-h5-short {
|
||||
line-height: 1.25rem !important;
|
||||
|
||||
@media (max-width: 718px) {
|
||||
line-height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-size {
|
||||
width: 160px;
|
||||
/* Larghezza fissa */
|
||||
height: 150px;
|
||||
/* Altezza fissa */
|
||||
display: flex;
|
||||
/* Assicura che il contenuto sia centralizzato */
|
||||
flex-direction: column;
|
||||
/* Impila gli elementi verticalmente */
|
||||
justify-content: center;
|
||||
/* Centra verticalmente */
|
||||
align-items: center;
|
||||
/* Centra orizzontalmente */
|
||||
margin: 4px;
|
||||
}
|
||||
@@ -12,6 +12,7 @@ export default defineComponent({
|
||||
classColor: String,
|
||||
colBack: String,
|
||||
mystyle: String,
|
||||
myclass: String,
|
||||
},
|
||||
components: {},
|
||||
setup(props) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<q-card :class="` text-center`" :style="mystyle">
|
||||
<q-card :class="myclass" :style="mystyle" class="fixed-size">
|
||||
<div
|
||||
:class="`column q-pa-sm text-center align-center ` + classColor"
|
||||
style="align-items: center"
|
||||
@@ -9,21 +9,18 @@
|
||||
</div>
|
||||
<q-icon :name="icon" size="xl" :class="classColor + ` elem `" />
|
||||
<div>
|
||||
<div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="elem full-width elem-value text-h5 boldhigh"
|
||||
>
|
||||
<div class="elem full-width elem-value text-h5 boldhigh">
|
||||
{{ mytextval }}
|
||||
<q-badge
|
||||
v-if="value_today > 0"
|
||||
align="top"
|
||||
:label="`+` + value_today + ` oggi`"
|
||||
:color="colBack"
|
||||
>
|
||||
</q-badge>
|
||||
<q-badge
|
||||
v-if="value_today > 0"
|
||||
align="top"
|
||||
:label="`+` + value_today + ` oggi`"
|
||||
:color="colBack"
|
||||
>
|
||||
</q-badge>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
@@ -52,6 +52,7 @@ export default defineComponent({
|
||||
costanti,
|
||||
slide,
|
||||
autoplay,
|
||||
t,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
:src="directory + '/' + selectedImage.imagefile"
|
||||
:alt="selectedImage.imagefile"
|
||||
/>
|
||||
<q-btn color="primary" label="Close" @click="closeDialog" />
|
||||
<q-btn color="primary" :label="t('dialog.close')" @click="closeDialog" />
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -366,7 +366,7 @@ export default defineComponent({
|
||||
const editOn = computed({
|
||||
get: () => globalStore.editOn,
|
||||
set: val => {
|
||||
globalStore.editOn = val
|
||||
tools.updateEditOn(val)
|
||||
},
|
||||
})
|
||||
|
||||
@@ -923,7 +923,7 @@ export default defineComponent({
|
||||
objitem[item.key] = item.value
|
||||
filtersearch.push(objitem)
|
||||
|
||||
} else if (item.arrvalue.length > 0) {
|
||||
} else if (item.arrvalue && item.arrvalue.length > 0) {
|
||||
|
||||
const myarr = item.arrvalue.filter((value: any) => {
|
||||
if (typeof value === 'number') {
|
||||
@@ -1617,16 +1617,21 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function created() {
|
||||
mytable.value = props.prop_mytable
|
||||
mytitle.value = props.prop_mytitle
|
||||
mycolumns.value = props.prop_mycolumns
|
||||
colkey.value = props.prop_colkey
|
||||
pagination.value = props.prop_pagination
|
||||
|
||||
myvertical.value = props.vertical
|
||||
// myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
|
||||
try {
|
||||
mytable.value = props.prop_mytable
|
||||
mytitle.value = props.prop_mytitle
|
||||
mycolumns.value = props.prop_mycolumns
|
||||
colkey.value = props.prop_colkey
|
||||
pagination.value = props.prop_pagination
|
||||
|
||||
showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
|
||||
myvertical.value = props.vertical
|
||||
|
||||
showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
|
||||
|
||||
} catch (e) {
|
||||
console.error('ERRORE', e)
|
||||
}
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
@@ -1919,7 +1924,8 @@ export default defineComponent({
|
||||
} else if (visib === '0') {
|
||||
// Se da togliere, lo togli
|
||||
if (colVisib.value.includes(field))
|
||||
colVisib.value = colVisib.value.filter((myrec: any) => myrec !== field)
|
||||
if (colVisib.value)
|
||||
colVisib.value = colVisib.value.filter((myrec: any) => myrec !== field)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
:optval="fieldsTable.getKeyByTable(item.table)"
|
||||
:optlab="fieldsTable.getLabelByTable(item.table)"
|
||||
:options="valoriopt(item, false, false)"
|
||||
:filter="item.filter"
|
||||
:filter="item && item.filter ? item.filter : ''"
|
||||
:filter_extra="item.filter_extra"
|
||||
:useinput="
|
||||
item.useinput &&
|
||||
@@ -568,7 +568,10 @@
|
||||
</q-infinite-scroll>
|
||||
<q-table
|
||||
v-else-if="
|
||||
!shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && !loading
|
||||
!shared_consts.VERTIC_SHOW_GRID.includes(myvertical) &&
|
||||
!loading &&
|
||||
serverData &&
|
||||
mycolumns
|
||||
"
|
||||
:grid="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
|
||||
:grid-header="
|
||||
|
||||
@@ -324,7 +324,7 @@ export default defineComponent({
|
||||
const editOn = computed({
|
||||
get: () => globalStore.editOn,
|
||||
set: val => {
|
||||
globalStore.editOn = val
|
||||
tools.updateEditOn(val)
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
145
src/components/CMenuItem/CMenuItem.scss
Executable file
145
src/components/CMenuItem/CMenuItem.scss
Executable file
@@ -0,0 +1,145 @@
|
||||
.prova {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.q-list-header {
|
||||
min-height: 12px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.menu-hr {
|
||||
border-color: #dedede;
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
|
||||
.list-label:first-child {
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
|
||||
.router-link-active .item-primary {
|
||||
color: #027be3;
|
||||
}
|
||||
|
||||
.menu_freccina {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 0;
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.my-menu,
|
||||
.my-menu>i {
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-small,
|
||||
.my-menu-small>i {
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.isAdmin {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.isSocioResidente {
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
.isCalendar {}
|
||||
|
||||
.isManager {
|
||||
color: green !important;
|
||||
}
|
||||
|
||||
.isFacilitatore {
|
||||
color: #201a80;
|
||||
}
|
||||
|
||||
.my-menu-icon {
|
||||
min-width: 2px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon>i {
|
||||
min-width: 26px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.clexpansion {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.my-menu-active {
|
||||
background-color: rgba(174, 189, 241, 0.71);
|
||||
}
|
||||
|
||||
.my-menu-separat>i {
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon-none>i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clicon img,
|
||||
.clicon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.q-item__section--avatar {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.OLD_q-item__section--side {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.imgicon img {
|
||||
font-size: 2.5rem !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.menu-enter-active, .scale-enter {
|
||||
-webkit-animation: moveFromTopFade .5s ease both;
|
||||
animation: moveFromTopFade .5s ease both;
|
||||
}
|
||||
|
||||
.menu-leave-to, .scale-leave-active {
|
||||
-webkit-animation: moveToBottom .5s ease both;
|
||||
animation: moveToBottom .5s ease both;
|
||||
}
|
||||
*/
|
||||
|
||||
.bigmenu {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0.0512rem 0.052rem .01rem #555;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-style: italic;
|
||||
}
|
||||
61
src/components/CMenuItem/CMenuItem.ts
Executable file
61
src/components/CMenuItem/CMenuItem.ts
Executable file
@@ -0,0 +1,61 @@
|
||||
import { computed, defineComponent, onMounted, PropType, ref, toRef, watch } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { costanti } from '@costanti'
|
||||
import { fieldsTable } from '@store/Modules/fieldsTable'
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { IColGridTable, IOperators } from 'model'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { static_data } from '@/db/static_data'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMenuItem',
|
||||
props: {
|
||||
item: Object,
|
||||
getroute: Function,
|
||||
getmymenuclass: Function,
|
||||
getimgiconclass: Function,
|
||||
clBase: String,
|
||||
mainMenu: Boolean,
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
|
||||
components: {},
|
||||
setup(props, { emit }) {
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
function mounted() {
|
||||
// ...
|
||||
|
||||
}
|
||||
|
||||
function getmenuByPath(pathoobj: any) {
|
||||
let mymenufind = null
|
||||
if (tools.isObject(pathoobj)) {
|
||||
mymenufind = pathoobj
|
||||
} else {
|
||||
mymenufind = static_data.routes.find((menu: any) => menu.path === '/' + pathoobj)
|
||||
}
|
||||
|
||||
return mymenufind
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
|
||||
return {
|
||||
tools,
|
||||
getmenuByPath,
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
64
src/components/CMenuItem/CMenuItem.vue
Executable file
64
src/components/CMenuItem/CMenuItem.vue
Executable file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div :style="{ paddingLeft: `${level * 4}px` }">
|
||||
<q-separator v-if="item.isseparator" />
|
||||
<q-expansion-item
|
||||
v-else-if="item.routes2 || item.sottoMenu"
|
||||
:content-inset-level="item.level_parent"
|
||||
:header-class="getmymenuclass(item)"
|
||||
:header-inset-level="item.level_parent"
|
||||
:icon="item.materialIcon"
|
||||
:label="tools.getLabelByItem(item)"
|
||||
active-class="my-menu-active"
|
||||
:expand-icon-class="item.mainMenu ? 'my-menu-separat' : ''"
|
||||
:expand-icon="
|
||||
item.mainMenu || item.routes2 ? 'fas fa-chevron-down' : 'none'
|
||||
"
|
||||
>
|
||||
<c-menu-item
|
||||
v-for="(childItem, childIndex) in item.routes2 || item.sottoMenu"
|
||||
:key="childIndex"
|
||||
:item="getmenuByPath(childItem)"
|
||||
:tools="tools"
|
||||
:getroute="getroute"
|
||||
:getmymenuclass="getmymenuclass"
|
||||
:getimgiconclass="getimgiconclass"
|
||||
:clBase="clBase"
|
||||
:mainMenu="item.mainMenu"
|
||||
:level="level + 1"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
clickable
|
||||
:to="getroute(item)"
|
||||
:content-inset-level="item.level_parent"
|
||||
:header-inset-level="item.level_parent"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none"
|
||||
>
|
||||
<q-item-section thumbnail>
|
||||
<q-avatar
|
||||
:icon="item.materialIcon"
|
||||
:size="!!item.iconsize ? item.iconsize : '2rem'"
|
||||
:font-size="!!item.iconsize ? item.iconsize : '2rem'"
|
||||
text-color="primary"
|
||||
square
|
||||
rounded
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<span :class="item.extraclass">{{ tools.getLabelByItem(item) }}</span>
|
||||
<span v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMenuItem.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMenuItem.scss';
|
||||
</style>
|
||||
1
src/components/CMenuItem/index.ts
Executable file
1
src/components/CMenuItem/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CMenuItem } from './CMenuItem.vue'
|
||||
17
src/components/CMovements/CMovements.scss
Executable file
17
src/components/CMovements/CMovements.scss
Executable file
@@ -0,0 +1,17 @@
|
||||
.myfrom {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.myto {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.circuit {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: gray;
|
||||
}
|
||||
89
src/components/CMovements/CMovements.ts
Executable file
89
src/components/CMovements/CMovements.ts
Executable file
@@ -0,0 +1,89 @@
|
||||
import { defineComponent, ref, computed, PropType, toRef, onMounted } from 'vue'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
|
||||
import { CMyImgUser } from '@/components/CMyImgUser'
|
||||
import { CCurrencyValue } from '@/components/CCurrencyValue'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { IMovQuery, IMovement } from '@src/model'
|
||||
|
||||
import { shared_consts } from '@src/common/shared_vuejs'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMovements',
|
||||
components: { CMyImgUser, CCurrencyValue },
|
||||
props: {
|
||||
numcol: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 3
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
|
||||
const userStore = useUserStore()
|
||||
const $router = useRouter()
|
||||
const globalStore = useGlobalStore()
|
||||
const { t } = useI18n();
|
||||
|
||||
const datastat = ref(<any>{})
|
||||
|
||||
const mylist = computed(() => {
|
||||
if (globalStore.datastat)
|
||||
return globalStore.datastat.last_transactions
|
||||
else
|
||||
return []
|
||||
})
|
||||
|
||||
async function mounted() {
|
||||
|
||||
}
|
||||
|
||||
function getFromToStr(mov: any) {
|
||||
|
||||
let mystr = ''
|
||||
if (mov) {
|
||||
|
||||
mystr += mov.str
|
||||
}
|
||||
return mystr
|
||||
}
|
||||
|
||||
function navigabyMov(mov: IMovQuery, from: boolean) {
|
||||
let link = ''
|
||||
if (from) {
|
||||
if (mov.tipocontofrom === shared_consts.AccountType.USER) {
|
||||
link = `/my/` + mov.userfrom.username
|
||||
} else if (mov.tipocontofrom === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
link = tools.getPathByGroup(mov.groupfrom)
|
||||
} else if (mov.tipocontofrom === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
link = '' // mov.contocomfrom.name
|
||||
}
|
||||
} else {
|
||||
if (mov.tipocontoto === shared_consts.AccountType.USER) {
|
||||
link = `/my/` + mov.userto.username
|
||||
} else if (mov.tipocontoto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
link = tools.getPathByGroup(mov.groupto)
|
||||
} else if (mov.tipocontoto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
link = ''
|
||||
}
|
||||
}
|
||||
$router.push(link)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mounted()
|
||||
})
|
||||
|
||||
return {
|
||||
userStore,
|
||||
tools,
|
||||
mylist,
|
||||
getFromToStr,
|
||||
t,
|
||||
navigabyMov,
|
||||
}
|
||||
}
|
||||
})
|
||||
61
src/components/CMovements/CMovements.vue
Executable file
61
src/components/CMovements/CMovements.vue
Executable file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<q-list bordered>
|
||||
<q-item
|
||||
v-for="mov in mylist"
|
||||
:key="mov._id"
|
||||
class="q-mb-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar @click="navigabyMov(mov, true)">
|
||||
<CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label v-if="mov.causal">{{ mov.causal }}</q-item-label>
|
||||
<q-item-label lines="1">
|
||||
{{ t('movement.from') }} <span class="myfrom">{{ mov.myfrom }}</span>
|
||||
</q-item-label>
|
||||
<q-item-label lines="1">
|
||||
{{ t('movement.to') }}
|
||||
<span class="myto">{{ mov.myto }}</span></q-item-label
|
||||
>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
v-if="mov.circuitfrom"
|
||||
class="circuit"
|
||||
>{{ mov.circuitfrom.name }}</q-item-label
|
||||
>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
v-if="mov.transactionDate"
|
||||
class="date"
|
||||
>{{ tools.getstrDateTime(mov.transactionDate) }}</q-item-label
|
||||
>
|
||||
<q-item-label caption lines="1" style="text-align: center">
|
||||
<CCurrencyValue
|
||||
:symbol="mov.circuitfrom.symbol"
|
||||
color="red"
|
||||
v-model="mov.amount"
|
||||
:small="true"
|
||||
label=""
|
||||
>
|
||||
</CCurrencyValue
|
||||
></q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side @click="navigabyMov(mov, false)">
|
||||
<CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMovements.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMovements.scss';
|
||||
</style>
|
||||
1
src/components/CMovements/index.ts
Executable file
1
src/components/CMovements/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CMovements } from './CMovements.vue'
|
||||
@@ -83,7 +83,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function condividipag() {
|
||||
const msg = self.location.host + tools.getPathByGroup(myrec.value, props.table)
|
||||
const msg = self.location.host + tools.getPathByGroup(myrec.value)
|
||||
return tools.copyStringToClipboard($q, msg, true)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="myrec && myrec._id"
|
||||
:class="$q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog'"
|
||||
:class="
|
||||
$q.screen.lt.md || nopopup ? ' fulldiv ' : ' well-positioned-dialog'
|
||||
"
|
||||
>
|
||||
<div
|
||||
:class="'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')"
|
||||
@@ -553,14 +555,7 @@
|
||||
"
|
||||
class="my-card clBorderUser"
|
||||
bordered
|
||||
@click="
|
||||
naviga(
|
||||
tools.getPathByGroup(
|
||||
myrec.mygrp,
|
||||
shared_consts.TABLES_MYGROUPS
|
||||
)
|
||||
)
|
||||
"
|
||||
@click="naviga(tools.getPathByGroup(myrec.mygrp))"
|
||||
>
|
||||
<CMyGroup
|
||||
:mygrp="myrec.mygrp"
|
||||
|
||||
@@ -92,6 +92,8 @@ export default defineComponent({
|
||||
const visuadd = ref(false)
|
||||
const direzadd = ref(1)
|
||||
|
||||
const selectedClasses = ref(<any>[])
|
||||
|
||||
watch(() => myel.value.order, (value, oldval) => {
|
||||
mounted()
|
||||
})
|
||||
@@ -222,6 +224,11 @@ export default defineComponent({
|
||||
|
||||
if (props.myelem)
|
||||
newtype.value = props.myelem.type
|
||||
|
||||
if (myel.value.class4) {
|
||||
selectedClasses.value = myel.value.class4.split(' ').filter(Boolean)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function clickOnElem() {
|
||||
@@ -237,6 +244,27 @@ export default defineComponent({
|
||||
modifElem()
|
||||
|
||||
|
||||
}
|
||||
|
||||
function dupNewCard() {
|
||||
if (!myel.value.listcards)
|
||||
return
|
||||
|
||||
const myfindcard = myel.value.listcards[tabCard.value]
|
||||
|
||||
if (myfindcard) {
|
||||
let mycard = { ...myfindcard }
|
||||
delete mycard._id
|
||||
mycard._id = objectId()
|
||||
|
||||
const bakcard = [...myel.value.listcards]
|
||||
|
||||
myel.value.listcards = []
|
||||
myel.value.listcards = [...bakcard, mycard]
|
||||
modifElem()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function addNewElemText() {
|
||||
@@ -284,7 +312,12 @@ export default defineComponent({
|
||||
if (props.myelem.listcards) {
|
||||
props.myelem.listcards.forEach((rec: IMyCard) => {
|
||||
if (recpass._id === rec._id) {
|
||||
rec.imagefile = myval
|
||||
if (myval.imagefile) {
|
||||
rec.imagefile = myval.imagefile
|
||||
rec.vers_img = tools.getGenerateVersionImage()
|
||||
} else {
|
||||
rec.imagefile = myval
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -292,7 +325,11 @@ export default defineComponent({
|
||||
if (props.myelem.elemsText) {
|
||||
props.myelem.elemsText.forEach((rec: IElemText) => {
|
||||
if (recpass._id === rec._id) {
|
||||
rec.text = myval
|
||||
if (myval.imagefile) {
|
||||
rec.text = myval.imagefile
|
||||
} else {
|
||||
rec.text = myval
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -335,6 +372,11 @@ export default defineComponent({
|
||||
modifElem()
|
||||
}
|
||||
|
||||
function updateSizeHeight(value: any) {
|
||||
myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
|
||||
modifElem()
|
||||
}
|
||||
|
||||
function toggleSize() {
|
||||
emit('toggleSize', null)
|
||||
}
|
||||
@@ -402,6 +444,30 @@ export default defineComponent({
|
||||
emit('saveElem', myelem)
|
||||
}
|
||||
|
||||
function classiImmagineOptions() {
|
||||
// Ritorna l'array delle classi, ad esempio:
|
||||
return [
|
||||
{ label: 'Tonda', value: 'image-circle' },
|
||||
{ label: 'Sbordata', value: 'image-round-bordered' },
|
||||
{ label: 'Ombrata', value: 'image-ombra' },
|
||||
// Aggiungi altre classi se necessario
|
||||
];
|
||||
}
|
||||
|
||||
function updateClass4(selectedOptions: any) {
|
||||
|
||||
// Aggiorna selectedClasses
|
||||
selectedClasses.value = selectedOptions;
|
||||
|
||||
if (myel.value) {
|
||||
// Imposta myel.class2 come stringa
|
||||
myel.value.class4 = selectedOptions.join(' '); // Converte l'array in una stringa separata da spazi
|
||||
|
||||
saveElem()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
@@ -449,6 +515,11 @@ export default defineComponent({
|
||||
orderOptions,
|
||||
addOrder,
|
||||
moveElem,
|
||||
updateSizeHeight,
|
||||
dupNewCard,
|
||||
updateClass4,
|
||||
selectedClasses,
|
||||
classiImmagineOptions,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -173,16 +173,20 @@
|
||||
dense
|
||||
style="width: 150px"
|
||||
/>
|
||||
<q-input
|
||||
<q-select
|
||||
label="Altezza:"
|
||||
@update:model-value="modifElem"
|
||||
style="width: 100px"
|
||||
v-model="myel.heightimg"
|
||||
emit-value
|
||||
map-options
|
||||
:options="generateSizeOptions()"
|
||||
use-input
|
||||
use-chips
|
||||
@input="saveElem"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
@new-value="updateSizeHeight"
|
||||
style="width: 150px"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
||||
@@ -281,6 +285,42 @@
|
||||
>
|
||||
</CSelectAnimation>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
dense
|
||||
dense-toggle
|
||||
expand-separator
|
||||
label="Banner Iniziale"
|
||||
icon="fas fa-play-circle"
|
||||
>
|
||||
<div>Banner:</div>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
label="Titolo Banner:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.titleBanner"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
dense
|
||||
label="Classe Banner:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.classBanner"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
style="min-width: 150px"
|
||||
v-model="myel.color"
|
||||
@update:model-value="modifElem"
|
||||
title="Colore Titolo"
|
||||
>
|
||||
</CSelectColor>
|
||||
</q-expansion-item>
|
||||
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
||||
<div v-if="enableEdit">
|
||||
<q-input
|
||||
@@ -302,16 +342,22 @@
|
||||
dense
|
||||
dense-toggle
|
||||
expand-separator
|
||||
label="Animazione"
|
||||
label="Classi per l'Immagine"
|
||||
icon="fas fa-expand-alt"
|
||||
>
|
||||
<CSelectAnimation
|
||||
v-if="enableEdit && showAnimation"
|
||||
v-model="myel.anim2"
|
||||
@update:model-value="modifElem"
|
||||
label="Animazione Immagini"
|
||||
>
|
||||
</CSelectAnimation>
|
||||
<q-select
|
||||
label="Classi:"
|
||||
v-model="selectedClasses"
|
||||
emit-value
|
||||
map-options
|
||||
:options="classiImmagineOptions()"
|
||||
use-chips
|
||||
multiple
|
||||
@update:model-value="updateClass4"
|
||||
filled
|
||||
dense
|
||||
style="width: 350px"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
<div class="row">
|
||||
<q-input
|
||||
@@ -333,6 +379,15 @@
|
||||
@click="addNewCard"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
label="Scheda"
|
||||
icon="fas fa-copy"
|
||||
@click="dupNewCard"
|
||||
>
|
||||
</q-btn>
|
||||
|
||||
<q-tabs
|
||||
v-model="tabCard"
|
||||
@@ -346,7 +401,7 @@
|
||||
<q-tab
|
||||
v-for="(rec, ind) in myel.listcards"
|
||||
:key="ind"
|
||||
:name="`card` + ind"
|
||||
:name="ind"
|
||||
:label="`Scheda ` + (ind + 1)"
|
||||
icon="fas fa-pencil-alt"
|
||||
/>
|
||||
@@ -356,11 +411,11 @@
|
||||
<q-tab-panel
|
||||
v-for="(rec, ind) in myel.listcards"
|
||||
:key="ind"
|
||||
:name="`card` + ind"
|
||||
:name="ind"
|
||||
>
|
||||
<div v-if="enableEdit" class="column bordered q-ma-xs">
|
||||
<q-bar class="bg-primary text-white">
|
||||
Card {{ ind + 1 }}
|
||||
Scheda {{ ind + 1 }}
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="fas fa-trash-alt"
|
||||
@@ -411,6 +466,17 @@
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
dense
|
||||
style="min-width: 450px"
|
||||
label="Link:"
|
||||
class="fa-border"
|
||||
@update:model-value="modifElem"
|
||||
v-model="rec.link"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<CSelectColor
|
||||
v-if="enableEdit"
|
||||
style="min-width: 150px"
|
||||
@@ -602,15 +668,20 @@
|
||||
style="width: 150px"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
<q-select
|
||||
label="Altezza Logo:"
|
||||
@update:model-value="modifElem"
|
||||
v-model="myel.height"
|
||||
v-model="myel.heightimg"
|
||||
emit-value
|
||||
map-options
|
||||
:options="generateSizeOptions()"
|
||||
use-input
|
||||
use-chips
|
||||
@input="saveElem"
|
||||
filled
|
||||
dense
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
@new-value="updateSizeHeight"
|
||||
style="width: 150px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
@@ -869,27 +940,34 @@
|
||||
>
|
||||
</q-input>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
|
||||
<q-input
|
||||
dense
|
||||
<q-select
|
||||
label="Lunghezza:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.widthimg"
|
||||
emit-value
|
||||
map-options
|
||||
:options="generateSizeOptions()"
|
||||
use-input
|
||||
use-chips
|
||||
@input="saveElem"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
<q-input
|
||||
dense
|
||||
@new-value="updateSizeWidth"
|
||||
style="width: 150px"
|
||||
/>
|
||||
<q-select
|
||||
label="Altezza:"
|
||||
type="number"
|
||||
@update:model-value="modifElem"
|
||||
debounce="1000"
|
||||
v-model="myel.heightimg"
|
||||
emit-value
|
||||
map-options
|
||||
:options="generateSizeOptions()"
|
||||
use-input
|
||||
use-chips
|
||||
@input="saveElem"
|
||||
filled
|
||||
v-on:keyup.enter="saveElem"
|
||||
>
|
||||
</q-input>
|
||||
dense
|
||||
@new-value="updateSizeHeight"
|
||||
style="width: 150px"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
label="Link:"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import {
|
||||
computed,
|
||||
defineComponent, onMounted, PropType, ref, toRef, watch,
|
||||
defineComponent, onMounted, PropType, ref, toRef, watch, nextTick,
|
||||
} from 'vue'
|
||||
|
||||
import { ICoordGPS, IMyCard, IMyElem, IMyPage, IOperators, ISocial } from '@src/model'
|
||||
@@ -34,6 +34,7 @@ import { CMyProfileTutorial } from '@src/components/CMyProfileTutorial'
|
||||
import { CSendRISTo } from '@src/components/CSendRISTo'
|
||||
import { CDashboard } from '@src/components/CDashboard'
|
||||
import { CDashGroup } from '@src/components/CDashGroup'
|
||||
import { CMovements } from '@src/components/CMovements'
|
||||
import { CCheckAppRunning } from '@src/components/CCheckAppRunning'
|
||||
import { CStatusReg } from '@src/components/CStatusReg'
|
||||
import { CTitleBanner } from '@src/components/CTitleBanner'
|
||||
@@ -65,7 +66,7 @@ export default defineComponent({
|
||||
CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
|
||||
CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
|
||||
CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
|
||||
CDashGroup,
|
||||
CDashGroup, CMovements,
|
||||
// , //CMapMarker,
|
||||
},
|
||||
emits: ['selElemClick'],
|
||||
@@ -125,6 +126,11 @@ export default defineComponent({
|
||||
|
||||
const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] })
|
||||
|
||||
const carouselRef = ref(<any>null)
|
||||
const isAtStart = ref(true)
|
||||
const isAtEnd = ref(false)
|
||||
const activeIndex = ref(0)
|
||||
|
||||
watch(() => myel.value.order, (value, oldval) => {
|
||||
mounted()
|
||||
})
|
||||
@@ -173,14 +179,28 @@ export default defineComponent({
|
||||
disableSave.value = false
|
||||
}
|
||||
|
||||
const checkScrollPosition = () => {
|
||||
const container = carouselRef.value
|
||||
if (!container || !myel.value || !myel.value.listcards) return
|
||||
|
||||
isAtStart.value = container.scrollLeft <= 0
|
||||
isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
|
||||
|
||||
const cardWidth = container.scrollWidth / myel.value.listcards.length
|
||||
activeIndex.value = Math.round(container.scrollLeft / cardWidth)
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
//console.log('mounted elem ')
|
||||
//console.log(props.myelem.type)
|
||||
myel.value = props.myelem
|
||||
neworder.value = props.myelem.order
|
||||
|
||||
if (props.myelem)
|
||||
newtype.value = props.myelem.type
|
||||
|
||||
nextTick(() => {
|
||||
checkScrollPosition()
|
||||
carouselRef.value?.addEventListener('scroll', checkScrollPosition)
|
||||
})
|
||||
}
|
||||
|
||||
function clickOnElem() {
|
||||
@@ -271,6 +291,10 @@ export default defineComponent({
|
||||
clickshare,
|
||||
isAppRunning,
|
||||
coordaddr,
|
||||
isAtStart,
|
||||
isAtEnd,
|
||||
activeIndex,
|
||||
carouselRef,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -31,65 +31,71 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
|
||||
:class="myel.span ? '' : ''"
|
||||
class="card-carousel-container"
|
||||
>
|
||||
<div
|
||||
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
|
||||
@click="clickOnElem"
|
||||
class="card-carousel"
|
||||
ref="carouselRef"
|
||||
>
|
||||
<div v-for="(rec, ind) in myel.listcards" :key="ind">
|
||||
<q-card
|
||||
:class="`my-card center_img bordered ` + myel.class3"
|
||||
:style="rec.style"
|
||||
<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;`"
|
||||
>
|
||||
<q-img
|
||||
:class="tools.getClassAnim(myel.anim2)"
|
||||
:class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
|
||||
:src="tools.getImgFileByElem(myel, rec)"
|
||||
/>
|
||||
<q-card-section>
|
||||
<div :class="rec.size" :style="`color: ` + rec.color">
|
||||
{{ 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-actions>
|
||||
<q-btn flat color="dark" label="Share"/>
|
||||
<q-btn flat color="primary" label="Book"/>
|
||||
|
||||
<q-space/>
|
||||
|
||||
<q-btn
|
||||
color="grey"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
:icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
|
||||
@click="expanded = !expanded"
|
||||
/>
|
||||
</q-card-actions>-->
|
||||
|
||||
<!--<q-slide-transition>
|
||||
<div v-show="expanded">
|
||||
<q-separator />
|
||||
<q-card-section class="text-subtitle2">
|
||||
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
-->
|
||||
</q-card>
|
||||
</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="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>
|
||||
</div>
|
||||
|
||||
@@ -468,6 +474,10 @@
|
||||
<div v-if="editOn" class="elemEdit">CDashGroup</div>
|
||||
<CDashGroup></CDashGroup>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
|
||||
<div v-if="editOn" class="elemEdit">Lista Movimenti</div>
|
||||
<CMovements></CMovements>
|
||||
</div>
|
||||
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
|
||||
<div v-if="editOn" class="elemEdit">CSendRISTo</div>
|
||||
<CSendRISTo></CSendRISTo>
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<div v-if="tools.isUserOk()">
|
||||
|
||||
<div v-if="grp">
|
||||
<q-item class="q-my-sm" clickable>
|
||||
<q-item-section
|
||||
avatar
|
||||
@click="naviga(tools.getPathByGroup(grp, table))"
|
||||
>
|
||||
<q-item-section avatar @click="naviga(tools.getPathByGroup(grp))">
|
||||
<q-avatar size="60px">
|
||||
<q-img
|
||||
:src="getImgGroup(grp)"
|
||||
@@ -17,7 +13,7 @@
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section @click="naviga(tools.getPathByGroup(grp, table))">
|
||||
<q-item-section @click="naviga(tools.getPathByGroup(grp))">
|
||||
<q-item-label
|
||||
><strong>{{ grp.title }}</strong> ({{ grp.groupname }})
|
||||
</q-item-label>
|
||||
@@ -33,7 +29,6 @@
|
||||
:saldo="grp.account.saldo"
|
||||
>
|
||||
</CSaldo>
|
||||
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
|
||||
@@ -2,10 +2,7 @@
|
||||
<div v-if="tools.isUserOk()">
|
||||
<div v-if="grp">
|
||||
<q-item class="q-my-sm" clickable>
|
||||
<q-item-section
|
||||
avatar
|
||||
@click="naviga(tools.getPathByGroup(grp, table))"
|
||||
>
|
||||
<q-item-section avatar @click="naviga(tools.getPathByGroup(grp))">
|
||||
<q-item-label v-if="labelextra"
|
||||
><strong>{{ labelextra }}</strong></q-item-label
|
||||
>
|
||||
@@ -19,7 +16,7 @@
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section @click="naviga(tools.getPathByGroup(grp, table))">
|
||||
<q-item-section @click="naviga(tools.getPathByGroup(grp))">
|
||||
<q-item-label
|
||||
><strong>{{ grp.title }}</strong> ({{ grp.groupname }})
|
||||
</q-item-label>
|
||||
|
||||
4
src/components/CMyImgUser/CMyImgUser.scss
Executable file
4
src/components/CMyImgUser/CMyImgUser.scss
Executable file
@@ -0,0 +1,4 @@
|
||||
.myflex{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
100
src/components/CMyImgUser/CMyImgUser.ts
Executable file
100
src/components/CMyImgUser/CMyImgUser.ts
Executable file
@@ -0,0 +1,100 @@
|
||||
import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { ICircuit, IImgGallery, IMovQuery, IUserFields, IUserProfile } from 'model'
|
||||
import { costanti } from '@costanti'
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { CSendCoins } from '@/components/CSendCoins'
|
||||
import { CSaldo } from '@/components/CSaldo'
|
||||
import { CUserInfoAccount } from '@/components/CUserInfoAccount'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useCircuitStore } from '@store/CircuitStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyImgUser',
|
||||
components: { CSendCoins, CSaldo, CUserInfoAccount },
|
||||
emits: ['setCmd', 'showInnerDialog'],
|
||||
props: {
|
||||
mycontact: {
|
||||
type: Object as PropType<IUserFields | null>,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
mov: {
|
||||
type: Object as PropType<IMovQuery | null>,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
from: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
myusername: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
groupname: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
|
||||
const userStore = useUserStore()
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const $router = useRouter()
|
||||
const $route = useRoute()
|
||||
|
||||
const showsendCoinTo = ref(false)
|
||||
|
||||
const showAccountInfo = ref(false)
|
||||
|
||||
const contact = ref(<IUserFields | null>null)
|
||||
const circuit = ref(<ICircuit | null | undefined>null)
|
||||
|
||||
watch(() => props.mycontact, (newval, oldval) => {
|
||||
mounted()
|
||||
})
|
||||
|
||||
function mounted() {
|
||||
if (props.mycontact) {
|
||||
contact.value = props.mycontact
|
||||
}
|
||||
}
|
||||
|
||||
function getImgUser(profile: IUserFields) {
|
||||
return userStore.getImgByProfile(profile)
|
||||
}
|
||||
|
||||
function getImgUserMov(tipoconto: number, from: boolean) {
|
||||
return userStore.getImgByMov(props.mov!, tipoconto, from, true)
|
||||
}
|
||||
|
||||
function naviga(path: string) {
|
||||
$router.push(path)
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
contact,
|
||||
costanti,
|
||||
getImgUser,
|
||||
getImgUserMov,
|
||||
naviga,
|
||||
shared_consts,
|
||||
userStore,
|
||||
tools,
|
||||
circuit,
|
||||
showAccountInfo,
|
||||
showsendCoinTo,
|
||||
}
|
||||
},
|
||||
})
|
||||
22
src/components/CMyImgUser/CMyImgUser.vue
Executable file
22
src/components/CMyImgUser/CMyImgUser.vue
Executable file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<q-avatar size="60px">
|
||||
<q-img
|
||||
v-if="contact || mov"
|
||||
:src="
|
||||
mov
|
||||
? getImgUserMov(from ? mov.tipocontofrom : mov.tipocontoto, from)
|
||||
: getImgUser(contact)
|
||||
"
|
||||
:alt="contact ? contact.username : ''"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyImgUser.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyImgUser.scss';
|
||||
</style>
|
||||
1
src/components/CMyImgUser/index.ts
Executable file
1
src/components/CMyImgUser/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CMyImgUser } from './CMyImgUser.vue'
|
||||
@@ -7,6 +7,7 @@ import { IMyElem, IMyPage } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { LandingFooter } from '@/components/LandingFooter'
|
||||
import { CMyElem } from '@/components/CMyElem'
|
||||
import { CTitleBanner } from '@/components/CTitleBanner'
|
||||
import { CMyEditElem } from '@/components/CMyEditElem'
|
||||
import { CMyPageElem2 } from '@/components/CMyPageElem2'
|
||||
|
||||
@@ -21,7 +22,10 @@ import { useRouter } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyPageElem',
|
||||
components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem, CMyPageElem2 },
|
||||
components: {
|
||||
LandingFooter, CImgTitle, CTitle, CMyElem,
|
||||
CMyEditElem, CMyPageElem2, CTitleBanner,
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
mypath: {
|
||||
@@ -73,7 +77,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
set(value: boolean) {
|
||||
return globalStore.editOn = value
|
||||
return tools.updateEditOn(value)
|
||||
}
|
||||
})
|
||||
const visuEditor = ref(false)
|
||||
|
||||
@@ -83,8 +83,32 @@
|
||||
<div v-for="myelem in myelems" :key="myelem._id">
|
||||
<div>
|
||||
<transition :duration="1000" appear>
|
||||
<CTitleBanner
|
||||
v-if="
|
||||
(myelem.active || editOn) && !!rec.path && myelem.titleBanner
|
||||
"
|
||||
:class="`q-pa-xs `"
|
||||
:title="myelem.titleBanner"
|
||||
bgcolor="bg-primary"
|
||||
:clcolor="myelem.color ? `` : `text-white`"
|
||||
:mystyle="
|
||||
myelem.color ? `color: ${myelem.color} !important;` : ``
|
||||
"
|
||||
:myclass="myelem.classBanner"
|
||||
:canopen="true"
|
||||
>
|
||||
<CMyElem
|
||||
:myelem="myelem"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
:path="!!rec.path ? rec.path : ''"
|
||||
:selElem="selElem"
|
||||
@selElemClick="selElemClick"
|
||||
>
|
||||
</CMyElem>
|
||||
</CTitleBanner>
|
||||
<CMyElem
|
||||
v-if="(myelem.active || editOn) && !!rec.path"
|
||||
v-else-if="(myelem.active || editOn) && !!rec.path"
|
||||
:myelem="myelem"
|
||||
:editOn="editOn"
|
||||
:addOn="addOn"
|
||||
|
||||
@@ -41,7 +41,9 @@
|
||||
>
|
||||
<q-item-label caption lines="1"></q-item-label>
|
||||
<div v-if="visu === costanti.ASK_TRUST">
|
||||
<span class="text-italic">Reg: {{ tools.getstrDateShort(contact.date_reg) }}</span>
|
||||
<span class="text-italic"
|
||||
>Reg: {{ tools.getstrDateShort(contact.date_reg) }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-item-label v-if="labelFooter" lines="1"
|
||||
@@ -63,7 +65,9 @@
|
||||
:symbol="tools.getSymbolByCircuit(circuit)"
|
||||
:color="tools.getColorByCircuit(circuit)"
|
||||
:saldo="contact.account.saldo_pend"
|
||||
:valueextra="contact.account.saldo_pend !== contact.account.saldo ? '*': ''"
|
||||
:valueextra="
|
||||
contact.account.saldo_pend !== contact.account.saldo ? '*' : ''
|
||||
"
|
||||
>
|
||||
</CSaldo>
|
||||
</div>
|
||||
@@ -418,7 +422,7 @@
|
||||
clickable
|
||||
v-close-popup
|
||||
dense
|
||||
@click="naviga(`/my/` + contact.username + '?sendris=1')"
|
||||
@click="naviga(`/my/` + contact.username + '?sendris=0')"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="positive" name="fas fa-coins" />
|
||||
@@ -807,7 +811,7 @@
|
||||
clickable
|
||||
v-close-popup
|
||||
dense
|
||||
@click="naviga(`/my/` + contact.username + '?sendris=1')"
|
||||
@click="naviga(`/my/` + contact.username + '?sendris=0')"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="positive" name="fas fa-coins" />
|
||||
|
||||
@@ -92,10 +92,10 @@ export default defineComponent({
|
||||
const arrTypesAccounts = ref(<any>[
|
||||
{
|
||||
label: t('circuit.user'),
|
||||
value: costanti.AccountType.USER,
|
||||
value: shared_consts.AccountType.USER,
|
||||
},
|
||||
])
|
||||
const tipoConto = ref(costanti.AccountType.USER)
|
||||
const tipoConto = ref(shared_consts.AccountType.USER)
|
||||
|
||||
const priceLabel = computed(() => circuitloaded.value ? `${qty.value} ` + circuitloaded.value.symbol : '')
|
||||
const arrayMarkerLabel = ref(<any>[])
|
||||
@@ -114,7 +114,7 @@ export default defineComponent({
|
||||
|
||||
watch(() => tipoConto.value, (newval, oldval) => {
|
||||
|
||||
if (tipoConto.value === costanti.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
if (tipoConto.value === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
if (arrGroupsList.value.length >= 1)
|
||||
from_groupname.value = arrGroupsList.value[0].value
|
||||
}
|
||||
@@ -157,7 +157,7 @@ export default defineComponent({
|
||||
arrTypesAccounts.value = [
|
||||
{
|
||||
label: t('circuit.user'),
|
||||
value: costanti.AccountType.USER,
|
||||
value: shared_consts.AccountType.USER,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -165,13 +165,13 @@ export default defineComponent({
|
||||
if (!!datasaved.value.circuit) {
|
||||
circuitloaded.value = datasaved.value.circuit
|
||||
|
||||
if (tipoConto.value === costanti.AccountType.USER) {
|
||||
if (tipoConto.value === shared_consts.AccountType.USER) {
|
||||
accountloaded.value = userStore.getAccountByCircuitId(circuitloaded.value._id)
|
||||
} else if (tipoConto.value === costanti.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
} else if (tipoConto.value === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
groupSel.value = userStore.my.profile.manage_mygroups.find((group: IMyGroup) => from_groupname.value === group.groupname)
|
||||
|
||||
accountloaded.value = groupSel.value ? groupSel.value.account : null
|
||||
} else if (tipoConto.value === costanti.AccountType.COMMUNITY_ACCOUNT) {
|
||||
} else if (tipoConto.value === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
from_contocom.value = circuitloaded.value.path
|
||||
accountloaded.value = circuitloaded.value ? circuitloaded.value.account : null
|
||||
}
|
||||
@@ -197,14 +197,14 @@ export default defineComponent({
|
||||
arrTypesAccounts.value.push(
|
||||
{
|
||||
label: t('circuit.conticollettivi'),
|
||||
value: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
value: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
})
|
||||
}
|
||||
|
||||
if (tools.iCanSendCoinsSuperUserCircuit(circuitsel.value) && (!props.to_contocom)) {
|
||||
arrTypesAccounts.value.push({
|
||||
label: t('circuit.contocom'),
|
||||
value: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
value: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -253,7 +253,7 @@ export default defineComponent({
|
||||
arrTypesAccounts.value = [
|
||||
{
|
||||
label: t('circuit.user'),
|
||||
value: costanti.AccountType.USER,
|
||||
value: shared_consts.AccountType.USER,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -341,8 +341,8 @@ export default defineComponent({
|
||||
|
||||
myrecsendcoin.groupdest = props.to_group ? props.to_group.groupname : ''
|
||||
myrecsendcoin.contoComDest = props.to_contocom
|
||||
myrecsendcoin.grouporig = tipoConto.value === costanti.AccountType.COLLECTIVE_ACCOUNT ? from_groupname.value : ''
|
||||
myrecsendcoin.contoComOrig = tipoConto.value === costanti.AccountType.COMMUNITY_ACCOUNT ? from_contocom.value : ''
|
||||
myrecsendcoin.grouporig = tipoConto.value === shared_consts.AccountType.COLLECTIVE_ACCOUNT ? from_groupname.value : ''
|
||||
myrecsendcoin.contoComOrig = tipoConto.value === shared_consts.AccountType.COMMUNITY_ACCOUNT ? from_contocom.value : ''
|
||||
|
||||
myrecsendcoin.dest = props.to_user ? props.to_user.username : ''
|
||||
|
||||
|
||||
@@ -12,13 +12,9 @@
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-bar>
|
||||
<q-card-section class="q-px-xs inset-shadow">
|
||||
<CCheckCircuitsEnabled
|
||||
:to_user="to_user"
|
||||
:to_group="to_group"
|
||||
>
|
||||
<CCheckCircuitsEnabled :to_user="to_user" :to_group="to_group">
|
||||
</CCheckCircuitsEnabled>
|
||||
|
||||
|
||||
<q-select
|
||||
v-if="!circuitname"
|
||||
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
|
||||
@@ -69,14 +65,16 @@
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
v-if="tipoConto === costanti.AccountType.USER"
|
||||
v-if="tipoConto === shared_consts.AccountType.USER"
|
||||
v-model="from_username"
|
||||
class="full-width"
|
||||
readonly
|
||||
>
|
||||
</q-input>
|
||||
<div
|
||||
v-else-if="tipoConto === costanti.AccountType.COLLECTIVE_ACCOUNT"
|
||||
v-else-if="
|
||||
tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT
|
||||
"
|
||||
>
|
||||
<q-select
|
||||
v-model="from_groupname"
|
||||
@@ -89,7 +87,11 @@
|
||||
<!-- Mostra i gruppi su cui sei Admin -->
|
||||
</q-select>
|
||||
</div>
|
||||
<div v-else-if="tipoConto === costanti.AccountType.COMMUNITY_ACCOUNT">
|
||||
<div
|
||||
v-else-if="
|
||||
tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT
|
||||
"
|
||||
>
|
||||
<q-input
|
||||
v-model="from_contocom"
|
||||
:label="$t('circuit.contocom')"
|
||||
@@ -247,16 +249,16 @@
|
||||
? !(
|
||||
qtyRef.hasError ||
|
||||
!circuitloaded.transactionsEnabled ||
|
||||
(tipoConto === costanti.AccountType.USER &&
|
||||
(tipoConto === shared_consts.AccountType.USER &&
|
||||
to_user &&
|
||||
from_username === to_user.username) ||
|
||||
(tipoConto === costanti.AccountType.COLLECTIVE_ACCOUNT &&
|
||||
(tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT &&
|
||||
!from_groupname) ||
|
||||
(tipoConto === costanti.AccountType.COLLECTIVE_ACCOUT &&
|
||||
(tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUT &&
|
||||
to_group &&
|
||||
from_groupname &&
|
||||
to_group.groupname === from_groupname) ||
|
||||
(tipoConto === costanti.AccountType.COMMUNITY_ACCOUNT &&
|
||||
(tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT &&
|
||||
!from_contocom)
|
||||
)
|
||||
: true)
|
||||
|
||||
@@ -34,7 +34,7 @@ export default defineComponent({
|
||||
|
||||
const usersList = ref(<any>{ show: false, title: '', list: [], listgroup: [] })
|
||||
|
||||
const tipoConto = ref(costanti.AccountType.USER)
|
||||
const tipoConto = ref(shared_consts.AccountType.USER)
|
||||
const loading = ref(false)
|
||||
const circuitpath = computed(() => {
|
||||
const circ = circuitStore.getCircuitByProvinceAndCard(userStore.my.profile.resid_province, userStore.my.profile.resid_card)
|
||||
@@ -46,11 +46,11 @@ export default defineComponent({
|
||||
const arrTypesAccounts = ref(<any>[
|
||||
{
|
||||
label: t('circuit.user'),
|
||||
value: costanti.AccountType.USER,
|
||||
value: shared_consts.AccountType.USER,
|
||||
},
|
||||
{
|
||||
label: t('circuit.conticollettivi'),
|
||||
value: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
value: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
:options="arrTypesAccounts"
|
||||
/>
|
||||
|
||||
<div v-if="tipoConto === costanti.AccountType.USER">
|
||||
<div v-if="tipoConto === shared_consts.AccountType.USER">
|
||||
<div v-for="(rec, i) in usersList.list" :key="i">
|
||||
<CMyUser
|
||||
:mycontact="rec"
|
||||
@@ -86,7 +86,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="tipoConto === costanti.AccountType.COLLECTIVE_ACCOUNT"
|
||||
v-else-if="
|
||||
tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT
|
||||
"
|
||||
>
|
||||
<div v-for="(grp, i) in usersList.listgroup" :key="i">
|
||||
<CMyGroup :mygrp="grp" :visu="costanti.USER_GROUPS" :noaut="true">
|
||||
|
||||
@@ -113,7 +113,7 @@ export default defineComponent({
|
||||
tools.checkApp()
|
||||
|
||||
if ($q.screen.lt.sm) {
|
||||
globalStore.setleftDrawerOpen(false)
|
||||
// globalStore.setleftDrawerOpen(false)
|
||||
}
|
||||
if (riscode === tools.OK) {
|
||||
if (userStore.isLogged) {
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
.index_diffusore {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Distribuisce gli elementi uniformemente */
|
||||
}
|
||||
@@ -28,8 +28,10 @@ import { useRouter } from 'vue-router'
|
||||
export default defineComponent({
|
||||
name: 'CStatusReg',
|
||||
props: {},
|
||||
components: { CTitleBanner, CElemStat,
|
||||
CCardState, CCardStat, CLineChart, CMyFieldRec, CTimeAgo },
|
||||
components: {
|
||||
CTitleBanner, CElemStat,
|
||||
CCardState, CCardStat, CLineChart, CMyFieldRec, CTimeAgo
|
||||
},
|
||||
setup(props, { attrs, slots, emit }) {
|
||||
const { t } = useI18n()
|
||||
const $q = useQuasar()
|
||||
@@ -52,6 +54,7 @@ export default defineComponent({
|
||||
num_reg: 0,
|
||||
num_reg_today: 0,
|
||||
online_today: 0,
|
||||
activeusers: 0,
|
||||
num_passeggeri: 0,
|
||||
num_imbarcati: 0,
|
||||
num_teleg_attivo: 0,
|
||||
@@ -66,7 +69,13 @@ export default defineComponent({
|
||||
strettelist: [],
|
||||
receiveRislist: [],
|
||||
receiveRislistgroup: [],
|
||||
checkuser: { verified_email: false }
|
||||
checkuser: { verified_email: false },
|
||||
num_transaz_tot: 0,
|
||||
tot_RIS_transati: 0,
|
||||
num_circuiti_attivi: 0,
|
||||
num_circuiti: 0,
|
||||
num_annunci: 0,
|
||||
last_transactions: [],
|
||||
})
|
||||
|
||||
const visustat = computed(() => {
|
||||
@@ -113,7 +122,7 @@ export default defineComponent({
|
||||
function checkifpolling() {
|
||||
if (userStore.my.profile) {
|
||||
//if (!tools.isUserOk() && tools.appid() === tools.IDAPP_RISO)
|
||||
// NUMSEC_TO_POLLING.value = 10
|
||||
// NUMSEC_TO_POLLING.value = 10
|
||||
}
|
||||
|
||||
if (eseguipolling.value) {
|
||||
|
||||
@@ -7,28 +7,78 @@
|
||||
bgcolor="bg-primary"
|
||||
clcolor="text-white"
|
||||
mystyle=""
|
||||
myclass="myshad"
|
||||
myclass="sfondo_gradiente_blu myshad"
|
||||
:canopen="true"
|
||||
>
|
||||
<div class="flex flex-center">
|
||||
<CElemStat
|
||||
myclass="fixed-size"
|
||||
:title="$t('statusreg.reg')"
|
||||
icon="fas fa-users"
|
||||
:value_today="datastat.num_reg_today"
|
||||
:mytextval="datastat.num_reg"
|
||||
classColor="text-blue"
|
||||
:mytextval="
|
||||
datastat.activeusers + ' su ' + tools.numtostr(datastat.num_reg)
|
||||
"
|
||||
classColor="text-red"
|
||||
colBack="green"
|
||||
>
|
||||
</CElemStat>
|
||||
|
||||
<CElemStat
|
||||
v-if="true"
|
||||
myclass="fixed-size"
|
||||
:title="$t('statusreg.online_today')"
|
||||
icon="fas fa-wifi"
|
||||
:mytextval="datastat.online_today"
|
||||
classColor="text-orange"
|
||||
colBack="yellow"
|
||||
>
|
||||
</CElemStat>
|
||||
<CElemStat
|
||||
myclass="fixed-size"
|
||||
v-f="datastat.num_annunci > 0"
|
||||
:title="$t('statusreg.num_annunci')"
|
||||
icon="fas fa-tshirt"
|
||||
:value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.num_annunci)"
|
||||
classColor="text-green"
|
||||
colBack="orange"
|
||||
>
|
||||
</CElemStat>
|
||||
<CElemStat
|
||||
myclass="fixed-size"
|
||||
v-f="datastat.num_circuiti_attivi > 0"
|
||||
:title="$t('statusreg.num_circuiti_attivi')"
|
||||
icon="fas fa-map-marker-alt"
|
||||
:value_today="0"
|
||||
:mytextval="
|
||||
datastat.num_circuiti_attivi + ' su ' + datastat.num_circuiti
|
||||
"
|
||||
classColor="text-blue"
|
||||
colBack="red"
|
||||
>
|
||||
</CElemStat>
|
||||
<CElemStat
|
||||
myclass="fixed-size"
|
||||
v-f="datastat.num_transaz_tot > 0"
|
||||
:title="$t('statusreg.numtransazioni')"
|
||||
icon="fas fa-sync-alt"
|
||||
:value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.num_transaz_tot)"
|
||||
classColor="text-indigo"
|
||||
colBack="green"
|
||||
>
|
||||
</CElemStat>
|
||||
<CElemStat
|
||||
myclass="fixed-size"
|
||||
v-f="datastat.tot_RIS_transati > 0"
|
||||
:title="$t('statusreg.totristransati')"
|
||||
icon="img: images/1ris_rosso_100.png"
|
||||
:value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.tot_RIS_transati) + ' RIS'"
|
||||
classColor="text-blueviolet"
|
||||
colBack="green"
|
||||
>
|
||||
</CElemStat>
|
||||
|
||||
<!--<CCardState :mytext="$t('statusreg.autorizzare')" :myval="datastat.num_autorizzare"
|
||||
mycolor="yellow" :myperc="(datastat.num_autorizzare / datastat.num_teleg_attivo) * 100"></CCardState>
|
||||
@@ -78,7 +128,7 @@
|
||||
|
||||
<q-tab-panels v-model="mytab" animated>
|
||||
<q-tab-panel name="reg">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto;">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<transition-group
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
@@ -117,7 +167,7 @@
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="online">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto;">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<q-list bordered>
|
||||
<transition-group
|
||||
name="fade"
|
||||
@@ -171,7 +221,7 @@
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="diffusori">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto;">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Aiuta RISO a crescere
|
||||
</div>
|
||||
@@ -234,7 +284,7 @@
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="strettelist">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto;">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Strette di Mano
|
||||
</div>
|
||||
|
||||
@@ -6,3 +6,31 @@
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
|
||||
.profile-image {
|
||||
width: 28px;
|
||||
/* Puoi modificare la dimensione in base alle tue esigenze */
|
||||
height: 28px;
|
||||
/* Stesso valore per altezza */
|
||||
border-radius: 50%;
|
||||
/* Questo rende l'immagine rotonda */
|
||||
object-fit: cover;
|
||||
/* Questo mantiene le proporzioni dell'immagine */
|
||||
margin-right: 8px;
|
||||
/* Spazio tra l'immagine e il testo */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.my-route-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* Allineamento verticale */
|
||||
}
|
||||
|
||||
.profile-label {
|
||||
text-align: center;
|
||||
/* Centra il testo sotto l'immagine */
|
||||
font-size: 0.9rem;
|
||||
/* Dimensione del testo */
|
||||
}
|
||||
@@ -29,7 +29,8 @@ export default defineComponent({
|
||||
|
||||
const site = computed(() => globalStore.site)
|
||||
|
||||
const { getMyUsername, Username } = MixinUsers()
|
||||
|
||||
const { getMyUsername, Username, getMyImg } = MixinUsers()
|
||||
|
||||
function mounted() {
|
||||
// mounted
|
||||
@@ -45,6 +46,7 @@ export default defineComponent({
|
||||
Username,
|
||||
tools,
|
||||
site,
|
||||
getMyImg,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<q-footer
|
||||
v-if="tools.isUserOk() && site && site.confpages" :class="($q.dark.isActive
|
||||
? `bg-black` : `bg-white`) + ` small-screen-only`" bordered >
|
||||
v-if="tools.isUserOk() && site && site.confpages"
|
||||
:class="($q.dark.isActive ? `bg-black` : `bg-white`) + ` small-screen-only`"
|
||||
bordered
|
||||
>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
<q-tabs
|
||||
@@ -77,8 +79,8 @@
|
||||
v-if="site.confpages.showViewProfile"
|
||||
class="mylabfooter"
|
||||
:label="$t('tabdown.profile')"
|
||||
:to="`/my/` + getMyUsername()"
|
||||
icon="person"
|
||||
@click="globalStore.rightDrawerOpen = true"
|
||||
:icon="getMyImg() ? `img: ` + getMyImg() : `fas fa-user`"
|
||||
/>
|
||||
</q-tabs>
|
||||
</q-toolbar-title>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useQuasar } from 'quasar'
|
||||
import {
|
||||
defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch, inject, computed,
|
||||
defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch, inject, computed, nextTick,
|
||||
} from 'vue'
|
||||
|
||||
import { tools } from '@store/Modules/tools'
|
||||
@@ -80,6 +80,8 @@ export default defineComponent({
|
||||
|
||||
const dark = ref(false)
|
||||
|
||||
const leftDrawerOpen = ref(globalStore.leftDrawerOpen)
|
||||
|
||||
const getClassColorHeader = computed(() => {
|
||||
// if (tools.isTest()) return 'bg-light-blue'
|
||||
// if (tools.isDebug()) return 'bg-info'
|
||||
@@ -261,12 +263,13 @@ export default defineComponent({
|
||||
globalStore.rightCoinsOpen = false
|
||||
}
|
||||
|
||||
const leftDrawerOpen = computed({
|
||||
/*const leftDrawerOpen = computed({
|
||||
get: () => globalStore.leftDrawerOpen,
|
||||
set: val => {
|
||||
globalStore.leftDrawerOpen = val
|
||||
|
||||
},
|
||||
})
|
||||
})*/
|
||||
|
||||
const rightDrawerOpen = computed({
|
||||
get: () => globalStore.rightDrawerOpen,
|
||||
@@ -447,6 +450,7 @@ export default defineComponent({
|
||||
// Test this by running the code snippet below and then
|
||||
// use the "TableOnlyView" checkbox in DevTools Network panel
|
||||
|
||||
|
||||
// console.log('Event LOAD')
|
||||
if (window) {
|
||||
window.addEventListener('load', () => {
|
||||
@@ -470,6 +474,23 @@ export default defineComponent({
|
||||
window.addEventListener('offline', updateOnlineStatus)
|
||||
})
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
if (tools.getCookie('menu3oriz') === '1') {
|
||||
if ($q.screen.width < 800) {
|
||||
leftDrawerOpen.value = false
|
||||
// globalStore.leftDrawerOpen = false
|
||||
} else {
|
||||
leftDrawerOpen.value = true
|
||||
globalStore.leftDrawerOpen = true
|
||||
}
|
||||
}
|
||||
else if (tools.getCookie('menu3oriz') === '0') {
|
||||
leftDrawerOpen.value = false
|
||||
globalStore.leftDrawerOpen = false
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function imglogo() {
|
||||
@@ -535,6 +556,14 @@ export default defineComponent({
|
||||
globalStore.changeCmdClick(value)
|
||||
}
|
||||
|
||||
function clickMenu3Orizz() {
|
||||
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
||||
globalStore.leftDrawerOpen = leftDrawerOpen.value
|
||||
|
||||
tools.setCookie('menu3oriz', globalStore.leftDrawerOpen ? '1' : '0')
|
||||
}
|
||||
|
||||
onBeforeMount(BeforeMount)
|
||||
onMounted(mounted)
|
||||
|
||||
@@ -600,6 +629,7 @@ export default defineComponent({
|
||||
toHome,
|
||||
products,
|
||||
userStore,
|
||||
clickMenu3Orizz,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -13,13 +13,7 @@
|
||||
:inverted="$q.theme === 'ios'"
|
||||
class="toolbar"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<q-btn flat dense round @click="clickMenu3Orizz" aria-label="Menu">
|
||||
<q-icon name="menu" />
|
||||
</q-btn>
|
||||
|
||||
@@ -196,7 +190,8 @@
|
||||
site.confpages &&
|
||||
site.confpages.showUserMenu &&
|
||||
tools.isLogged() &&
|
||||
getMyImg()
|
||||
getMyImg() &&
|
||||
$q.screen.gt.sm
|
||||
"
|
||||
size="36px"
|
||||
class="center_img cursor-pointer"
|
||||
@@ -212,7 +207,7 @@
|
||||
/>
|
||||
</q-avatar>
|
||||
<q-btn
|
||||
v-else
|
||||
v-else-if="$q.screen.gt.sm"
|
||||
class="q-mx-xs iconprofile_small"
|
||||
round
|
||||
dense
|
||||
@@ -228,7 +223,7 @@
|
||||
<q-drawer
|
||||
side="left"
|
||||
bordered
|
||||
show-if-above
|
||||
:show-if-above="globalStore.leftDrawerOpen"
|
||||
:breakpoint="800"
|
||||
v-model="leftDrawerOpen"
|
||||
:content-class="['bg-grey-1', 'q-pa-sm']"
|
||||
@@ -257,7 +252,7 @@
|
||||
</q-btn>
|
||||
|
||||
<CSelectUserActive></CSelectUserActive>
|
||||
|
||||
|
||||
<div v-if="tools.isLogged()" class="text-weight-bold text-cart">
|
||||
{{ $t('ecomm.carrello_di', { user: products.userActive.username }) }}
|
||||
</div>
|
||||
@@ -287,7 +282,7 @@
|
||||
`text-center q-ma-xs boldhigh text-` + getColorText + ` text-h7`
|
||||
"
|
||||
>
|
||||
Area Personale
|
||||
{{ t('header.area_personale') }}
|
||||
</div>
|
||||
|
||||
<q-avatar size="80px" class="center_img q-ma-md">
|
||||
@@ -400,7 +395,7 @@
|
||||
>
|
||||
{{ t('otherpages.myactivities') }}
|
||||
</q-btn>
|
||||
<!--<q-btn round color="warning" icon="lock"></q-btn>-->
|
||||
|
||||
<q-btn
|
||||
rounded
|
||||
color="negative"
|
||||
|
||||
184
src/css/app.scss
184
src/css/app.scss
@@ -336,13 +336,12 @@ h3 {
|
||||
|
||||
.my-card {
|
||||
width: 100%;
|
||||
max-width: 700px !important;
|
||||
min-width: 350px;
|
||||
padding: 1rem 1rem;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@media (max-width: 1024px) {
|
||||
/* Versione Mobile */
|
||||
max-width: 400px !important;
|
||||
max-width: 1024px !important;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
@@ -962,11 +961,10 @@ h3 {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 700px;
|
||||
min-width: 800px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
max-width: 350px;
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 1024px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@@ -1837,12 +1835,12 @@ h3 {
|
||||
|
||||
.fulldiv {
|
||||
min-height: 100% !important;
|
||||
max-width: 700px !important;
|
||||
min-width: 700px !important;
|
||||
max-width: 1024px !important;
|
||||
min-width: 1024px !important;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@media (max-width: 1024px) {
|
||||
/* Versione Mobile */
|
||||
max-width: 400px !important;
|
||||
max-width: 1024px !important;
|
||||
min-width: 300px !important;
|
||||
}
|
||||
}
|
||||
@@ -2106,4 +2104,170 @@ h3 {
|
||||
/* Distanza dal lato */
|
||||
z-index: 1000;
|
||||
/* Opzionale: assicura che il bottone sia sopra altri elementi */
|
||||
}
|
||||
|
||||
.text-blueviolet {
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
$verde: #008000;
|
||||
$blu: blue;
|
||||
$rosso: #ff0000;
|
||||
$trasparenza: 0.15;
|
||||
$coloreprincipale: lightblue;
|
||||
|
||||
.sfondo_gradiente_blu {
|
||||
background: linear-gradient(180deg, rgba(0, 70, 255, 0.25), rgba(0, 70, 275, 0.55), rgba(0, 70, 255, 0.75)) !important;
|
||||
}
|
||||
|
||||
.sfondo_gradiente_fuchsia {
|
||||
background: linear-gradient(180deg, rgba(255, 0, 150, 0.25), rgba(255, 0, 150, 0.55), rgba(255, 0, 150, 0.75)) !important;
|
||||
}
|
||||
|
||||
.sfondo_gradiente_verde {
|
||||
background: linear-gradient(180deg, rgba(12, 181, 12, 0.852)rgba(4, 185, 4, 0.55), rgba(12, 181, 12, 0.852)) !important;
|
||||
}
|
||||
|
||||
.sfondo_trasparente {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.sfondo_gradiente_arancione {
|
||||
background: linear-gradient(180deg, rgba(255, 165, 0, 0.25), rgba(255, 165, 0, 0.55), rgba(255, 165, 0, 0.75)) !important;
|
||||
}
|
||||
|
||||
.sfondo_gradiente_giallo {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 0, 0.25), rgba(255, 255, 0, 0.55), rgba(255, 255, 0, 0.75)) !important;
|
||||
}
|
||||
|
||||
.sfondo_gradiente_rosso {
|
||||
background: linear-gradient(180deg, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza), $coloreprincipale, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza)) !important;
|
||||
}
|
||||
|
||||
.card-carousel-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-carousel {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.card-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.my-card-elem {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 1rem;
|
||||
scroll-snap-align: start;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.my-card-elem:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.img-container {
|
||||
/*height: 150px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-container .q-img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.swipe-indicator {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.swipe-indicator.left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.swipe-indicator.right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc;
|
||||
margin: 0 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.image-circle {
|
||||
border-radius: 50%;
|
||||
/* Rende l'immagine rotonda */
|
||||
object-fit: cover;
|
||||
/* Mantiene le proporzioni dell'immagine */
|
||||
overflow: hidden;
|
||||
/* Nasconde eventuali parti in eccesso */
|
||||
}
|
||||
|
||||
.image-ombra {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.image-round-bordered {
|
||||
border-radius: 22px;
|
||||
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
object-fit: cover;
|
||||
|
||||
border: 2px solid #6b6e68a1;
|
||||
}
|
||||
|
||||
/* Per aggiungere un effetto di transizione al passaggio del mouse */
|
||||
.image-round-bordered:hover {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
|
||||
/* Ombra più marcata al passaggio del mouse */
|
||||
transform: scale(1.05);
|
||||
/* Effetto di zoom al passaggio del mouse */
|
||||
transition: all 0.3s ease;
|
||||
/* Transizione fluida */
|
||||
}
|
||||
|
||||
.titolo_card:hover {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mylabfooter img {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
@@ -121,6 +121,12 @@ const msg_website_it = {
|
||||
only_residenti: 'Solo Residenti',
|
||||
only_consiglio: 'Solo Consiglieri',
|
||||
color: 'Colore',
|
||||
mainMenu: 'Menu Principale',
|
||||
subtitle: 'Sottotitolo',
|
||||
lang: 'Lingua',
|
||||
keywords: 'Parole Chiave',
|
||||
desctiption: 'Descrizione',
|
||||
heightimg: 'Altezza Immagine',
|
||||
},
|
||||
msg: {
|
||||
myAppName: 'Riso',
|
||||
|
||||
@@ -209,7 +209,7 @@ function getDynamicPages(site: ISites): IListRoutes[] {
|
||||
meta: { requiresAuth: true, newpage: true },
|
||||
inmenu: false,
|
||||
infooter: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
order: 137,
|
||||
@@ -276,7 +276,7 @@ function getDynamicPages(site: ISites): IListRoutes[] {
|
||||
{
|
||||
active: true,
|
||||
order: 150,
|
||||
path: '/fundraising',
|
||||
path: '/sostieniilprogetto',
|
||||
materialIcon: 'fas fa-hand-holding-heart',
|
||||
name: 'pages.fundraising',
|
||||
component: () => import('@src/root/fundraising/fundraising.vue'),
|
||||
|
||||
356
src/layouts/menuone/menuOne copy.vue
Executable file
356
src/layouts/menuone/menuOne copy.vue
Executable file
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div v-if="finishLoading" class="no-border">
|
||||
<q-list class="rounded-borders text-primary">
|
||||
<div v-for="ind1 in getmenu" :key="ind1">
|
||||
<!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
|
||||
<div v-for="(myitemmenu, ind2) in myroutes" :key="ind2">
|
||||
<div v-if="myitemmenu.active">
|
||||
<div
|
||||
v-if="
|
||||
myitemmenu.routes2 &&
|
||||
myitemmenu.inmenu &&
|
||||
tools.visumenu(myitemmenu)
|
||||
"
|
||||
>
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:header-class="getmymenuclass(myitemmenu)"
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:icon="myitemmenu.materialIcon"
|
||||
:label="tools.getLabelByItem(myitemmenu)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
<div
|
||||
v-for="(child2, index) in myitemmenu.routes2"
|
||||
:key="index"
|
||||
>
|
||||
<div v-if="child2.active && tools.visumenu(child2)">
|
||||
<span v-if="child2.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
v-if="!child2.routes2"
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:header-inset-level="child2.level_child"
|
||||
:icon="child2.materialIcon"
|
||||
:label="tools.getLabelByItem(child2)"
|
||||
:to="getroute(child2)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar v-if="child2.img">
|
||||
<div
|
||||
:class="getimgiconclass(child2)"
|
||||
:icon="`img:` + child2.img"
|
||||
style="font-size: 2rem"
|
||||
></div>
|
||||
</q-avatar>
|
||||
<div v-else>
|
||||
<q-avatar
|
||||
:icon="child2.materialIcon"
|
||||
:size="child2.iconsize"
|
||||
class="clicon"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
{{ tools.getLabelByItem(child2) }}
|
||||
</q-item-section>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
v-else
|
||||
:content-inset-level="child2.level_parent"
|
||||
:header-class="getmymenuclass(child2)"
|
||||
:header-inset-level="child2.level_parent"
|
||||
:icon="child2.materialIcon"
|
||||
:label="tools.getLabelByItem(child2)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
<div
|
||||
v-for="(child3, index) in child2.routes2"
|
||||
:key="index"
|
||||
>
|
||||
<div v-if="child3.active">
|
||||
<q-expansion-item
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:header-inset-level="child3.level_child"
|
||||
:icon="child3.materialIcon"
|
||||
:label="tools.getLabelByItem(child3)"
|
||||
:to="getroute(child3)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
>
|
||||
<div
|
||||
v-for="(child4, index) in child3.routes2"
|
||||
:key="index"
|
||||
>
|
||||
<q-expansion-item
|
||||
v-if="!!child3.routes2 && child3.active"
|
||||
:key="index"
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:expand-icon="child4.icon"
|
||||
:header-inset-level="child4.level_child"
|
||||
:icon="child4.materialIcon"
|
||||
:label="tools.getLabelByItem(child4)"
|
||||
:to="getroute(child4)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
myitemmenu.mainMenu &&
|
||||
myitemmenu.inmenu &&
|
||||
tools.visumenu(myitemmenu)
|
||||
"
|
||||
>
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
:content-inset-level="myitemmenu.level_parent + 1"
|
||||
:header-class="getmymenuclass(myitemmenu)"
|
||||
:header-inset-level="myitemmenu.level_parent + 1"
|
||||
:icon="myitemmenu.materialIcon"
|
||||
:label="tools.getLabelByItem(myitemmenu)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
<div
|
||||
v-for="(child2, index) in myitemmenu.sottoMenu"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
getmenuByPath(child2).active &&
|
||||
tools.visumenu(getmenuByPath(child2))
|
||||
"
|
||||
>
|
||||
<span v-if="getmenuByPath(child2).isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
v-if="true"
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:header-inset-level="
|
||||
getmenuByPath(child2).level_child + 3
|
||||
"
|
||||
:icon="getmenuByPath(child2).materialIcon"
|
||||
:label="tools.getLabelByItem(getmenuByPath(child2))"
|
||||
:to="getroute(getmenuByPath(child2))"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar v-if="getmenuByPath(child2).img">
|
||||
<div
|
||||
:class="getimgiconclass(getmenuByPath(child2))"
|
||||
:icon="`img:` + getmenuByPath(child2).img"
|
||||
style="font-size: 2rem"
|
||||
></div>
|
||||
</q-avatar>
|
||||
<div v-else>
|
||||
<q-avatar
|
||||
:icon="getmenuByPath(child2).materialIcon"
|
||||
:size="getmenuByPath(child2).iconsize"
|
||||
class="clicon"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
{{ tools.getLabelByItem(getmenuByPath(child2)) }}
|
||||
</q-item-section>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
v-else
|
||||
:content-inset-level="
|
||||
getmenuByPath(child2).level_parent + 1
|
||||
"
|
||||
:header-class="getmymenuclass(getmenuByPath(child2))"
|
||||
:header-inset-level="
|
||||
getmenuByPath(child2).level_parent + 2
|
||||
"
|
||||
:icon="getmenuByPath(child2).materialIcon"
|
||||
:label="tools.getLabelByItem(getmenuByPath(child2))"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
<div
|
||||
v-for="(child3, index) in getmenuByPath(child2)
|
||||
.sottoMenu"
|
||||
:key="index"
|
||||
>
|
||||
<div v-if="getmenuByPath(child3).active">
|
||||
<q-expansion-item
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:header-inset-level="
|
||||
getmenuByPath(child3).level_child + 1
|
||||
"
|
||||
:icon="getmenuByPath(child3).materialIcon"
|
||||
:label="
|
||||
tools.getLabelByItem(getmenuByPath(child3))
|
||||
"
|
||||
:to="getroute(getmenuByPath(child3))"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
>
|
||||
<div
|
||||
v-for="(child4, index) in getmenuByPath(
|
||||
child3
|
||||
).sottoMenu"
|
||||
:key="index"
|
||||
>
|
||||
<q-expansion-item
|
||||
v-if="
|
||||
!!getmenuByPath(child3).sottoMenu &&
|
||||
getmenuByPath(child3).active
|
||||
"
|
||||
:key="index"
|
||||
:class="
|
||||
`item item-link drawer-closer cursor-pointer ` +
|
||||
clBase
|
||||
"
|
||||
:duration="300"
|
||||
:expand-icon="child4.icon"
|
||||
:header-inset-level="child4.level_child + 4"
|
||||
:icon="child4.materialIcon"
|
||||
:label="tools.getLabelByItem(child4)"
|
||||
:to="getroute(child4)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat"
|
||||
>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-if="
|
||||
myitemmenu.inmenu &&
|
||||
!myitemmenu.submenu &&
|
||||
tools.visumenu(myitemmenu)
|
||||
"
|
||||
>
|
||||
<q-slide-transition :duration="200">
|
||||
<div v-show="true">
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator inset></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:to="getroute(myitemmenu)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none"
|
||||
>
|
||||
<q-item-section thumbnail>
|
||||
<q-avatar
|
||||
:icon="myitemmenu.materialIcon"
|
||||
:size="
|
||||
!!myitemmenu.iconsize
|
||||
? myitemmenu.iconsize
|
||||
: '2.5rem'
|
||||
"
|
||||
:font-size="
|
||||
!!myitemmenu.iconsize
|
||||
? myitemmenu.iconsize
|
||||
: '2.5rem'
|
||||
"
|
||||
text-color="primary"
|
||||
style="margin-left: 4px"
|
||||
square
|
||||
rounded
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<span :class="myitemmenu.extraclass">{{
|
||||
tools.getLabelByItem(myitemmenu)
|
||||
}}</span>
|
||||
<span v-if="myitemmenu.subtitle" class="subtitle">{{
|
||||
myitemmenu.subtitle
|
||||
}}</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</span>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./menuOne.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './menuOne.scss';
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
.prova{
|
||||
.prova {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.q-list-header {
|
||||
min-height: 12px;
|
||||
padding: 5px 8px;
|
||||
@@ -42,13 +43,15 @@
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.my-menu, .my-menu > i{
|
||||
.my-menu,
|
||||
.my-menu>i {
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-small, .my-menu-small > i{
|
||||
.my-menu-small,
|
||||
.my-menu-small>i {
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 0.75rem;
|
||||
@@ -56,35 +59,39 @@
|
||||
|
||||
.isAdmin {
|
||||
color: red !important;
|
||||
background: linear-gradient(180deg, rgba(255, 0, 0, 0.15), white, rgba(255, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.isSocioResidente {
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
.isCalendar {
|
||||
.isCalendar {}
|
||||
|
||||
.isDoc {
|
||||
background: linear-gradient(180deg, rgba(152, 198, 226, 0.45), white, rgba(152, 198, 226, 0.45));
|
||||
}
|
||||
|
||||
.isManager {
|
||||
color: green !important;
|
||||
background: linear-gradient(180deg, rgba(125, 151, 125, 0.273), white, rgba(0, 128, 0, 0.273));
|
||||
}
|
||||
|
||||
.isFacilitatore {
|
||||
color: #201a80;
|
||||
}
|
||||
|
||||
.my-menu-icon{
|
||||
.my-menu-icon {
|
||||
min-width: 2px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon > i{
|
||||
.my-menu-icon>i {
|
||||
min-width: 26px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.clexpansion{
|
||||
.clexpansion {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
@@ -92,24 +99,25 @@
|
||||
background-color: rgba(174, 189, 241, 0.71);
|
||||
}
|
||||
|
||||
.my-menu-separat > i{
|
||||
.my-menu-separat>i {
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon-none > i{
|
||||
.my-menu-icon-none>i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clicon img, .clicon {
|
||||
.clicon img,
|
||||
.clicon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.q-item__section--avatar{
|
||||
.q-item__section--avatar {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.OLD_q-item__section--side{
|
||||
.OLD_q-item__section--side {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
@@ -137,6 +145,7 @@
|
||||
font-weight: bold;
|
||||
text-shadow: 0.0512rem 0.052rem .01rem #555;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@@ -6,16 +6,12 @@ import { useRoute } from 'vue-router'
|
||||
import { static_data } from '@/db/static_data'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { CMenuItem } from '../../components/CMenuItem'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuOne',
|
||||
props: {
|
||||
clBase: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'my-menu',
|
||||
},
|
||||
},
|
||||
|
||||
components: { CMenuItem },
|
||||
setup(props) {
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
@@ -29,10 +25,12 @@ export default defineComponent({
|
||||
|
||||
const myroutes = ref(<IListRoutes[]>[])
|
||||
|
||||
const getmenu = computed(() => globalStore.getmenu )
|
||||
const getmenu = computed(() => globalStore.getmenu)
|
||||
|
||||
const islogged = computed(() => userStore.isLogged)
|
||||
|
||||
const clBase = ref('my-menu')
|
||||
|
||||
function setParentVisibilityBasedOnRoute(parent: any) {
|
||||
parent.routes.forEach((item: any) => {
|
||||
if (path.value === item.path) {
|
||||
@@ -51,11 +49,11 @@ export default defineComponent({
|
||||
myroutes.value = static_data.routes
|
||||
}
|
||||
|
||||
watch(() => islogged.value,(to, from) => {
|
||||
watch(() => islogged.value, (to, from) => {
|
||||
updatemenu()
|
||||
})
|
||||
|
||||
watch(() => finishLoading.value,(to, from) => {
|
||||
watch(() => finishLoading.value, (to, from) => {
|
||||
updatemenu()
|
||||
})
|
||||
|
||||
@@ -78,7 +76,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function getmymenuclass(elem: IListRoutes) {
|
||||
let menu: string = props.clBase
|
||||
let menu: string = clBase.value
|
||||
|
||||
if (elem.color) {
|
||||
menu += ` ${elem.color}`
|
||||
@@ -111,6 +109,12 @@ export default defineComponent({
|
||||
return 'clBase'
|
||||
}
|
||||
|
||||
function getmenuByPath(path: string) {
|
||||
const mymenufind = static_data.routes.find((menu: any) => menu.path === '/' + path)
|
||||
|
||||
return mymenufind
|
||||
}
|
||||
|
||||
myroutes.value = static_data.routes
|
||||
|
||||
return {
|
||||
@@ -124,7 +128,8 @@ export default defineComponent({
|
||||
myroutes,
|
||||
getimgiconclass,
|
||||
getimgiconclass2,
|
||||
|
||||
getmenuByPath,
|
||||
clBase,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,153 +1,24 @@
|
||||
<template>
|
||||
<div v-if="finishLoading" class="no-border">
|
||||
<q-list class="rounded-borders text-primary">
|
||||
<div v-for="ind1 in getmenu" :key="ind1">
|
||||
<!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
|
||||
<div v-for="(myitemmenu, ind2) in myroutes" :key="ind2">
|
||||
<div v-if="myitemmenu.active">
|
||||
<div v-if="myitemmenu.routes2 && myitemmenu.inmenu && tools.visumenu(myitemmenu)">
|
||||
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
|
||||
<q-expansion-item
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:header-class="getmymenuclass(myitemmenu)"
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:icon="myitemmenu.materialIcon"
|
||||
:label="tools.getLabelByItem(myitemmenu)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat">
|
||||
|
||||
<div v-for="(child2, index) in myitemmenu.routes2" :key="index">
|
||||
<div v-if="child2.active && tools.visumenu(child2)">
|
||||
<span v-if="child2.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
|
||||
<q-expansion-item
|
||||
v-if="!child2.routes2"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBase"
|
||||
:duration="300"
|
||||
:header-inset-level="child2.level_child"
|
||||
:icon="child2.materialIcon"
|
||||
:label="tools.getLabelByItem(child2)"
|
||||
:to="getroute(child2)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none"
|
||||
expand-icon-class="my-menu-icon-none">
|
||||
|
||||
<q-item-section avatar>
|
||||
<q-avatar v-if="child2.img">
|
||||
<div :class="getimgiconclass(child2)" :icon="`img:`+child2.img" style="font-size:2rem;"></div>
|
||||
</q-avatar>
|
||||
<div v-else>
|
||||
<q-avatar
|
||||
:icon="child2.materialIcon" :size="child2.iconsize" class="clicon"
|
||||
color="primary"
|
||||
text-color="white">
|
||||
</q-avatar>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
{{ tools.getLabelByItem(child2) }}
|
||||
</q-item-section>
|
||||
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
v-else
|
||||
:content-inset-level="child2.level_parent"
|
||||
:header-class="getmymenuclass(child2)"
|
||||
:header-inset-level="child2.level_parent"
|
||||
:icon="child2.materialIcon"
|
||||
:label="tools.getLabelByItem(child2)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat">
|
||||
|
||||
<div v-for="(child3, index) in child2.routes2" :key="index">
|
||||
<div v-if="child3.active">
|
||||
|
||||
<q-expansion-item
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBase"
|
||||
:duration="300"
|
||||
:header-inset-level="child3.level_child"
|
||||
:icon="child3.materialIcon"
|
||||
:label="tools.getLabelByItem(child3)"
|
||||
:to="getroute(child3)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-icon-none">
|
||||
<div v-for="(child4, index) in child3.routes2" :key="index">
|
||||
|
||||
<q-expansion-item
|
||||
v-if="!!child3.routes2 && child3.active"
|
||||
:key="index"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBase"
|
||||
:duration="300"
|
||||
:expand-icon="child4.icon"
|
||||
:header-inset-level="child4.level_child"
|
||||
:icon="child4.materialIcon"
|
||||
:label="tools.getLabelByItem(child4)"
|
||||
:to="getroute(child4)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-separat">
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="myitemmenu.inmenu && !myitemmenu.submenu && tools.visumenu(myitemmenu)">
|
||||
<q-slide-transition :duration=200>
|
||||
<div v-show="true">
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator inset></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-list>
|
||||
<q-item clickable
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:to="getroute(myitemmenu)"
|
||||
active-class="my-menu-active"
|
||||
expand-icon="none">
|
||||
|
||||
<q-item-section thumbnail>
|
||||
<q-avatar
|
||||
:icon="myitemmenu.materialIcon" :size="!!myitemmenu.iconsize ? myitemmenu.iconsize: '2.5rem'" :font-size="!!myitemmenu.iconsize ? myitemmenu.iconsize: '2.5rem'"
|
||||
text-color="primary"
|
||||
style="margin-left: 4px"
|
||||
square
|
||||
rounded>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<span :class="myitemmenu.extraclass">{{ tools.getLabelByItem(myitemmenu) }}</span>
|
||||
<span v-if="myitemmenu.subtitle" class="subtitle">{{ myitemmenu.subtitle }}</span>
|
||||
</q-item-section>
|
||||
|
||||
</q-item>
|
||||
</q-list>
|
||||
</span>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="menuItem in getmenu" :key="menuItem">
|
||||
<template v-for="(route, index) in myroutes" :key="index">
|
||||
<CMenuItem
|
||||
v-if="
|
||||
route.active &&
|
||||
!route.submenu &&
|
||||
route.inmenu &&
|
||||
tools.visumenu(route)
|
||||
"
|
||||
:item="route"
|
||||
:getroute="getroute"
|
||||
:getmymenuclass="getmymenuclass"
|
||||
:getimgiconclass="getimgiconclass"
|
||||
:clBase="clBase"
|
||||
:level="1"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</q-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,6 +20,7 @@ export interface INotData {
|
||||
num_reg?: number
|
||||
num_reg_today?: number
|
||||
online_today?: number
|
||||
activeusers?: number
|
||||
num_passeggeri?: number
|
||||
num_imbarcati?: number
|
||||
email_non_verif?: number
|
||||
@@ -41,9 +42,13 @@ export interface INotData {
|
||||
checkuser?: any // ICheckUser
|
||||
numreg_untilday?: number
|
||||
reg_daily?: string
|
||||
imbarcati_daily?: string
|
||||
imbarcati_weekly?: string
|
||||
reg_weekly?: string
|
||||
num_transaz_tot?: number
|
||||
tot_RIS_transati?: number
|
||||
num_circuiti?: number
|
||||
num_circuiti_attivi?: number
|
||||
num_annunci?: number
|
||||
last_transactions?: IMovement[]
|
||||
}
|
||||
|
||||
|
||||
@@ -160,6 +165,8 @@ export interface IMyElem {
|
||||
listcards?: IMyCard[]
|
||||
catalogo?: ICatalogo
|
||||
elemsText?: IElemText[]
|
||||
titleBanner: string
|
||||
classBanner: string
|
||||
}
|
||||
|
||||
export interface IElemText {
|
||||
@@ -210,6 +217,8 @@ export interface IMyPage {
|
||||
extraclass?: string
|
||||
loadFirst?: boolean
|
||||
showFooter?: boolean
|
||||
mainMenu?: boolean
|
||||
sottoMenu?: String[]
|
||||
|
||||
//Memory
|
||||
loaded?: boolean
|
||||
@@ -563,6 +572,8 @@ export interface IListRoutes {
|
||||
idelem?: string
|
||||
urlroute?: string
|
||||
img?: string
|
||||
mainMenu?: boolean
|
||||
sottoMenu?: String[]
|
||||
// ------------------------
|
||||
faIcon?: string
|
||||
text?: string
|
||||
@@ -657,6 +668,7 @@ export interface IMyCard {
|
||||
color?: string
|
||||
content?: string
|
||||
colorsub?: string
|
||||
link?: string
|
||||
}
|
||||
|
||||
export interface ICatalogo {
|
||||
@@ -1201,6 +1213,56 @@ export interface ICircuit {
|
||||
account?: IAccount | null
|
||||
}
|
||||
|
||||
export interface IMovUserProfile {
|
||||
img: string
|
||||
}
|
||||
|
||||
export interface IMovUserQuery {
|
||||
verified_by_aportador: boolean
|
||||
username: string
|
||||
profile: IMovUserProfile
|
||||
}
|
||||
|
||||
|
||||
export interface IMovGroupQuery {
|
||||
verified_by_aportador: boolean
|
||||
groupname: string
|
||||
title: string
|
||||
photos: string
|
||||
}
|
||||
|
||||
|
||||
export interface IMovContoComQuery {
|
||||
path: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface IMovCircuitQuery {
|
||||
name: string
|
||||
symbol: string
|
||||
}
|
||||
|
||||
export interface IMovQuery {
|
||||
tipocontofrom: number
|
||||
tipocontoto: number
|
||||
userfrom: IMovUserQuery
|
||||
userto: IMovUserQuery
|
||||
|
||||
groupfrom: IMovGroupQuery
|
||||
groupto: IMovGroupQuery
|
||||
|
||||
contocomfrom: IMovContoComQuery
|
||||
contocomto: IMovContoComQuery
|
||||
|
||||
circuitfrom: IMovCircuitQuery
|
||||
|
||||
transactionDate: Date
|
||||
amount: number
|
||||
causal: string
|
||||
notifId: string
|
||||
}
|
||||
|
||||
|
||||
export interface IMovement {
|
||||
_id: string
|
||||
transactionDate: Date
|
||||
@@ -1226,6 +1288,18 @@ export interface IMovVisu {
|
||||
expiringDate: Date
|
||||
}
|
||||
|
||||
export interface ITransaction {
|
||||
_id: string
|
||||
transacDate: Date
|
||||
mitt_username: string
|
||||
mitt_group: string
|
||||
dest_username: string
|
||||
dest_group: string
|
||||
circuito: string
|
||||
amount: number
|
||||
causale: string
|
||||
}
|
||||
|
||||
export interface IAccount {
|
||||
_id: string
|
||||
username: string
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
}
|
||||
|
||||
.landing > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.icon_contact:hover {
|
||||
color: blue;
|
||||
border-color: white;
|
||||
border-width: .0625rem;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link {
|
||||
color: $textcol;
|
||||
}
|
||||
|
||||
.landing__footer .doc-link:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.landing__swirl-bg {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: top;
|
||||
background-size: contain !important;
|
||||
background-image: url(../../../public/images/landing_first_section.png) !important
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../../public/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
|
||||
.landing__footer-icons a {
|
||||
margin: 0 .5rem .5rem;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $textcol;
|
||||
transition: color .28s
|
||||
}
|
||||
|
||||
.landing__footer-icons a:hover {
|
||||
color: $textcol_scuro;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mylist {
|
||||
background: #3fdaff;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.clgutter {
|
||||
margin-top: 1.25rem;
|
||||
padding: .62rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: cover !important;
|
||||
background-position: 50% center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
|
||||
.landing__hero {
|
||||
text-align: center
|
||||
}
|
||||
.landing__header {
|
||||
height: 7vh
|
||||
}
|
||||
.clgutter {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.landing__hero .text-h1, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_testo {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 5.625rem;
|
||||
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1.25rem 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.4;
|
||||
text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing .feature-item {
|
||||
text-align: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.landing__hero-content {
|
||||
padding-bottom: 11.25rem;
|
||||
}
|
||||
.landing__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../public/images/cibo_sano.jpg);
|
||||
background-size: 620px 620px !important;
|
||||
background-position: 50% top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-caption {
|
||||
text-align: center;
|
||||
padding: .75rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.mycontacts {
|
||||
color: gray;
|
||||
letter-spacing: 0.078rem;
|
||||
}
|
||||
|
||||
.mycontacts_title {
|
||||
text-shadow: 0.125rem 0.125rem 0.125rem #555;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
letter-spacing: 0.125rem;
|
||||
}
|
||||
|
||||
.mycontacts_text {
|
||||
color: #999;
|
||||
letter-spacing: 0.093rem;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
|
||||
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { LandingFooter } from '../../components/LandingFooter'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import { CCardCarousel, CEventsCalendar, COpenStreetMap } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { firstimagehome } from '@src/db/static_data'
|
||||
import MixinMetaTags from '@/mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'home_arcadei',
|
||||
components: { Logo, LandingFooter, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap },
|
||||
|
||||
setup() {
|
||||
const animare = ref(0)
|
||||
const slide = ref('first')
|
||||
const slide2 = ref(1)
|
||||
|
||||
const getImmagini = ref([
|
||||
{
|
||||
title: '', subtitle: '',
|
||||
alt: 'Arcadei',
|
||||
img: 'images/arcadei/img1.png'
|
||||
},
|
||||
])
|
||||
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const { setValDb, getValDb } = MixinBase()
|
||||
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
||||
|
||||
function getheightgallery() {
|
||||
if (tools.isMobile())
|
||||
return '400px'
|
||||
else
|
||||
return '600px'
|
||||
}
|
||||
|
||||
function created() {
|
||||
//
|
||||
}
|
||||
|
||||
function getArrDisciplines() {
|
||||
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
toolsext,
|
||||
static_data,
|
||||
animare,
|
||||
slide,
|
||||
slide2,
|
||||
getheightgallery,
|
||||
getArrDisciplines,
|
||||
getImmagini,
|
||||
getValDb,
|
||||
firstimagehome,
|
||||
getsrcbyimg,
|
||||
setmeta,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="Home">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="animare"
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
:height="getheightgallery()"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg(firstimagehome())">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{tools.getappname()}}</h1>
|
||||
<h2 class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-subtitle1 shadow-max big text-italic q-pl-sm">
|
||||
<strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</h2>
|
||||
<h2 class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{tools.getappname()}}</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CCardCarousel :myarr="getArrDisciplines()">
|
||||
|
||||
</CCardCarousel>
|
||||
|
||||
<CEventsCalendar :mysingleevent="null" :showfirstN="getValDb('SHOW_LAST_EVENTS', false, 3)">
|
||||
|
||||
</CEventsCalendar>
|
||||
|
||||
|
||||
<div v-if="getValDb('VIDEO_HOME', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('VIDEO_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
<video :width="tools.getwidthscale(mythis, 320, 800)"
|
||||
:height="tools.getheightbywidth(mythis, 320, 180, 800)" controls>
|
||||
<source :src="getValDb('VIDEO_HOME', false)" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="getValDb('YT_VIDEO', false)" class="row justify-evenly items-center q-gutter-md ">
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="subtitle text-blue" v-html="getValDb('YT_TITLE', false)"></h4>
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getValDb('YT_VIDEO', false)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--<q-video src="../../statics/video/Intervista_Cristina_Barattoni.mp4">-->
|
||||
|
||||
<!--</q-video>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section :class="`maxwidth padding_gallery `+ ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-grey-10 text-center`" >
|
||||
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="8000"
|
||||
v-model="slide2"
|
||||
arrows
|
||||
thumbnails
|
||||
infinite
|
||||
height="600">
|
||||
<q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index"
|
||||
:img-src="rec.img"
|
||||
:alt="rec.alt"
|
||||
class="carousel_slide">
|
||||
<div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
|
||||
<div class="text-h5"><span
|
||||
class="text-h6 text-grey-1 shadow-max">{{index + 1}}. </span><span
|
||||
class="text-h6 text-grey-2 shadow">{{rec.title}}</span></div>
|
||||
<div class="text-subtitle1"><span class="text-grey-4 shadow">{{rec.subtitle}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</section>
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
||||
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
||||
|
||||
</COpenStreetMap>
|
||||
|
||||
|
||||
<div class="q-ma-md"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home_arcadei.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home_arcadei.scss';
|
||||
</style>
|
||||
@@ -435,6 +435,17 @@ function getRoutesAd(site: ISites) {
|
||||
inmenu: false,
|
||||
infooter: false,
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
order: 145,
|
||||
path: '/attivita/:username',
|
||||
materialIcon: 'fas fa-user',
|
||||
name: 'mypages.attivita',
|
||||
component: () => import('@/views/user/myactivities/myactivities.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
inmenu: false,
|
||||
infooter: false,
|
||||
},
|
||||
|
||||
{
|
||||
active: true,
|
||||
|
||||
@@ -1205,6 +1205,7 @@ const msg_it = {
|
||||
date_updated: 'Ult. Aggiornamento',
|
||||
},
|
||||
mypages: {
|
||||
attivita: 'Attività',
|
||||
find_people: 'Cerca Persone',
|
||||
find_group: 'Cerca Gruppo',
|
||||
manage_my_groups: 'Amministratore',
|
||||
@@ -1537,6 +1538,8 @@ const msg_it = {
|
||||
allmov: 'Vedi i movimenti di Tutto il Circuito',
|
||||
showsaldi: 'Mostra i Saldi dei membri',
|
||||
updatewallet: 'Aggiorna',
|
||||
from: 'Mittente:',
|
||||
to: 'Destinatario:',
|
||||
},
|
||||
editor: {
|
||||
showtool: 'Mostra strumenti per formattare il testo',
|
||||
@@ -1648,9 +1651,10 @@ const msg_it = {
|
||||
},
|
||||
|
||||
statusreg: {
|
||||
reg: 'Partecipanti',
|
||||
reg: 'Utenti Attivi',
|
||||
verifieds: 'Verificati',
|
||||
online_today: 'On Line Oggi',
|
||||
activeusers: 'Utenti Attivi',
|
||||
autorizzati: 'Autorizzati',
|
||||
autorizzare: 'In attesa di Abilitazione',
|
||||
passeggeri: 'Passeggeri Navi',
|
||||
@@ -1669,6 +1673,11 @@ const msg_it = {
|
||||
req: 'Passi',
|
||||
people: 'Inv.',
|
||||
peoplelegend: 'Numero d\'Invitati',
|
||||
numtransazioni: 'Scambi in RIS',
|
||||
totristransati: 'RIS transati',
|
||||
num_circuiti_attivi: 'Circuiti Attivi',
|
||||
num_annunci: 'Annunci Attivi',
|
||||
last_transactions: 'Ultime transazioni in RIS',
|
||||
},
|
||||
|
||||
tutorial: {
|
||||
@@ -1855,7 +1864,11 @@ const msg_it = {
|
||||
err_removed: 'Errore durante la rimozione della casella di posta ',
|
||||
err_addemail: 'Errore durante la creazione della nuova casella di posta',
|
||||
err_setmailuserpwd: 'Errore durante la modifica della password',
|
||||
}
|
||||
},
|
||||
|
||||
header: {
|
||||
area_personale: 'Area Personale',
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
@@ -29,11 +29,6 @@ export const costanti = {
|
||||
ENABLE_FRIENDS: false,
|
||||
ENABLE_CONTI_COLLETTIVI: true,
|
||||
|
||||
AccountType: {
|
||||
USER: 0,
|
||||
COLLECTIVE_ACCOUNT: 1,
|
||||
COMMUNITY_ACCOUNT: 2,
|
||||
},
|
||||
|
||||
Lang: {
|
||||
IT: 1,
|
||||
@@ -115,6 +110,7 @@ export const costanti = {
|
||||
visuonstat: true,
|
||||
small: false,
|
||||
showfavorite: true,
|
||||
showinoptions: true,
|
||||
},
|
||||
{
|
||||
visible: true,
|
||||
@@ -129,6 +125,7 @@ export const costanti = {
|
||||
visuonstat: true,
|
||||
small: false,
|
||||
showfavorite: true,
|
||||
showinoptions: true,
|
||||
},
|
||||
{
|
||||
visible: true,
|
||||
@@ -145,6 +142,7 @@ export const costanti = {
|
||||
table: 'myhosps',
|
||||
visuonstat: true,
|
||||
showfavorite: true,
|
||||
showinoptions: true,
|
||||
},
|
||||
{
|
||||
visible: false,
|
||||
@@ -201,6 +199,7 @@ export const costanti = {
|
||||
visuonstat: true,
|
||||
small: false,
|
||||
showfavorite: true,
|
||||
showinoptions: true,
|
||||
},
|
||||
{
|
||||
visible: false,
|
||||
@@ -276,6 +275,7 @@ export const costanti = {
|
||||
small: false,
|
||||
showfavorite: true,
|
||||
forgroup: true,
|
||||
showinoptions: false,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -430,6 +430,7 @@ export const costanti = {
|
||||
currency: 15000,
|
||||
cards: 16000,
|
||||
color: 17000,
|
||||
arrmenu: 18000,
|
||||
|
||||
},
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@ function AddCol(params: IColGridTable) {
|
||||
allowNewValue: (params.allowNewValue === undefined) ? false : params.allowNewValue,
|
||||
showpicprofile_ifnotset: (params.showpicprofile_ifnotset === undefined) ? false : params.showpicprofile_ifnotset,
|
||||
extrafield: (params.extrafield === undefined) ? '' : params.extrafield,
|
||||
tipoconto: (params.tipoconto === undefined) ? costanti.AccountType.USER : params.tipoconto,
|
||||
tipoconto: (params.tipoconto === undefined) ? shared_consts.AccountType.USER : params.tipoconto,
|
||||
visible: (params.visible === undefined) ? true : params.visible,
|
||||
icon: (params.icon === undefined) ? '' : params.icon,
|
||||
action: (params.action === undefined) ? '' : params.action,
|
||||
@@ -144,6 +144,7 @@ export const colmylistcards = [
|
||||
AddCol({ name: 'color', label_trans: 'color' }),
|
||||
AddCol({ name: 'content', label_trans: 'content' }),
|
||||
AddCol({ name: 'colorsub', label_trans: 'colorsub' }),
|
||||
AddCol({ name: 'link', label_trans: 'link' }),
|
||||
]
|
||||
|
||||
export const colmyelems = [
|
||||
@@ -220,9 +221,15 @@ export const colmypage = [
|
||||
AddCol({ name: 'order', label_trans: 'pages.order', fieldtype: costanti.FieldType.number }),
|
||||
AddCol({ name: 'active', label_trans: 'pages.active', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'inmenu', label_trans: 'pages.inmenu', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'infooter', label_trans: 'pages.infooter', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'title', label_trans: 'pages.title' }),
|
||||
AddCol({ name: 'subtitle', label_trans: 'pages.subtitle' }),
|
||||
AddCol({ name: 'mainMenu', label_trans: 'pages.mainMenu', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({
|
||||
name: 'sottoMenu', label_trans: 'pages.sottoMenu',
|
||||
fieldtype: costanti.FieldType.multiselect,
|
||||
jointable: 'mypages',
|
||||
}),
|
||||
AddCol({ name: 'infooter', label_trans: 'pages.infooter', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'img1', label_trans: 'pages.img1' }),
|
||||
AddCol({ name: 'content', label_trans: 'pages.contentfield', fieldtype: costanti.FieldType.html }),
|
||||
AddCol({ name: 'video1', label_trans: 'pages.video1' }),
|
||||
@@ -732,7 +739,7 @@ export const colmyMovement = [
|
||||
link: '/my/userfrom.username',
|
||||
noshowlabel: true,
|
||||
extrafield: 'movement.from',
|
||||
tipoconto: costanti.AccountType.USER,
|
||||
tipoconto: shared_consts.AccountType.USER,
|
||||
}),
|
||||
AddCol({
|
||||
name: 'groupfrom.groupname',
|
||||
@@ -745,7 +752,7 @@ export const colmyMovement = [
|
||||
link: '/grp/groupfrom.groupname',
|
||||
noshowlabel: true,
|
||||
extrafield: 'movement.fromCColl',
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
}),
|
||||
AddCol({
|
||||
name: 'contocomfrom.path',
|
||||
@@ -758,7 +765,7 @@ export const colmyMovement = [
|
||||
link: '/circuit/contocomfrom.path',
|
||||
noshowlabel: true,
|
||||
extrafield: 'movement.fromCCom',
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
}),
|
||||
AddCol({
|
||||
name: 'userto.username',
|
||||
@@ -771,7 +778,7 @@ export const colmyMovement = [
|
||||
link: '/my/userto.username',
|
||||
extrafield: 'movement.to',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.USER,
|
||||
tipoconto: shared_consts.AccountType.USER,
|
||||
}),
|
||||
|
||||
AddCol({
|
||||
@@ -785,7 +792,7 @@ export const colmyMovement = [
|
||||
link: '/grp/groupto.groupname',
|
||||
extrafield: 'movement.toCColl',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
}),
|
||||
AddCol({
|
||||
name: 'contocomfto.path',
|
||||
@@ -798,7 +805,7 @@ export const colmyMovement = [
|
||||
link: '/circuit/contocomto.path',
|
||||
noshowlabel: true,
|
||||
extrafield: 'movement.toCCom',
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
}),
|
||||
|
||||
AddCol({
|
||||
@@ -820,7 +827,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/my/userfrom.username',
|
||||
tipoconto: costanti.AccountType.USER,
|
||||
tipoconto: shared_consts.AccountType.USER,
|
||||
required: true,
|
||||
}),
|
||||
AddCol({
|
||||
@@ -832,7 +839,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/grp/groupfrom.groupname',
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
required: true,
|
||||
}),
|
||||
AddCol({
|
||||
@@ -844,7 +851,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/circuit/contocomfrom.path',
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
required: true,
|
||||
}),
|
||||
AddCol({
|
||||
@@ -856,7 +863,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/my/userto.username',
|
||||
tipoconto: costanti.AccountType.USER,
|
||||
tipoconto: shared_consts.AccountType.USER,
|
||||
required: true,
|
||||
}),
|
||||
|
||||
@@ -869,7 +876,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/grp/groupto.groupname',
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
required: true,
|
||||
}),
|
||||
AddCol({
|
||||
@@ -881,7 +888,7 @@ export const colmyMovementTable = [
|
||||
tipovisu: costanti.TipoVisu.LINK,
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/circuit/contocomto.path',
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
required: true,
|
||||
}),
|
||||
|
||||
@@ -2658,8 +2665,8 @@ export const fields = {
|
||||
name: 'type', label_trans: 'col.type', fieldtype: costanti.FieldType.select, jointable: 'fieldstype',
|
||||
}),
|
||||
AddCol({ name: 'value_str', label_trans: 'col.value', fieldtype: costanti.FieldType.string }),
|
||||
AddCol({ name: 'value_date', label_trans: 'cal.data', fieldtype: costanti.FieldType.date }),
|
||||
AddCol({ name: 'value_num', label_trans: 'cal.num', fieldtype: costanti.FieldType.number }),
|
||||
AddCol({ name: 'value_date', label_trans: 'cal.data', fieldtype: costanti.FieldType.date }),
|
||||
AddCol({ name: 'value_bool', label_trans: 'cal.bool', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'serv', label_trans: 'cal.serv', fieldtype: costanti.FieldType.boolean }),
|
||||
AddCol({ name: 'crypted', label_trans: 'cal.crypted', fieldtype: costanti.FieldType.boolean }),
|
||||
@@ -3682,7 +3689,7 @@ export const colmyUserCircuit = [
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/circuit/contocom',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
}),
|
||||
|
||||
AddCol({
|
||||
@@ -3693,7 +3700,7 @@ export const colmyUserCircuit = [
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/circuit/groupname',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
}),
|
||||
|
||||
AddCol({ name: 'deperibile', label_trans: 'account.deperibile', fieldtype: costanti.FieldType.boolean }),
|
||||
@@ -3726,7 +3733,7 @@ export const colTableNotifCoins = [
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/my/extrarec.dest',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.USER,
|
||||
tipoconto: shared_consts.AccountType.USER,
|
||||
}),
|
||||
|
||||
AddCol({
|
||||
@@ -3739,7 +3746,7 @@ export const colTableNotifCoins = [
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/grp/extrarec.groupdest',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.COLLECTIVE_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COLLECTIVE_ACCOUNT,
|
||||
}),
|
||||
AddCol({
|
||||
name: 'extrarec.contoComDest',
|
||||
@@ -3751,7 +3758,7 @@ export const colTableNotifCoins = [
|
||||
fieldtype: costanti.FieldType.username_chip,
|
||||
link: '/circuit/extrarec.contoComDest',
|
||||
noshowlabel: true,
|
||||
tipoconto: costanti.AccountType.COMMUNITY_ACCOUNT,
|
||||
tipoconto: shared_consts.AccountType.COMMUNITY_ACCOUNT,
|
||||
}),
|
||||
AddCol({ name: 'extrarec.qty', field: 'extrarec', subfield: 'qty', label_trans: 'movement.amount', fieldtype: costanti.FieldType.currency }),
|
||||
AddCol({ name: 'extrarec.causal', field: 'extrarec', subfield: 'causal', label_trans: 'movement.causal', tipovisu: costanti.TipoVisu.TESTO_BORDATO }),
|
||||
@@ -3936,6 +3943,13 @@ export const fieldsTable = {
|
||||
colkey: 'path',
|
||||
collabel: 'title',
|
||||
},
|
||||
{
|
||||
value: 'mypages',
|
||||
label: 'Pagine Web',
|
||||
columns: colmypage,
|
||||
colkey: 'path',
|
||||
collabel: 'title',
|
||||
},
|
||||
{
|
||||
value: 'products',
|
||||
label: 'Prodotti',
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
IUserFields,
|
||||
Privacy,
|
||||
TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard, ILabelValue, ILabelValueStr, IAnim, ILang, IGroupShort, IPagination, IFavorite, IBookmark,
|
||||
IMovQuery,
|
||||
} from '@model'
|
||||
|
||||
import MixinBase from '@/mixins/mixin-base'
|
||||
@@ -489,7 +490,7 @@ export const tools = {
|
||||
{ label: 'sienna', value: '#a0522d' },
|
||||
{ label: 'silver', value: '#c0c0c0' },
|
||||
{ label: 'skyblue', value: '#87ceeb' },
|
||||
{ label: 'slateblue', value: '#6a5acd' },
|
||||
{ label: 'slateblue', value: '#6a5acdd' },
|
||||
{ label: 'slategray', value: '#708090' },
|
||||
{ label: 'snow', value: '#fffafa' },
|
||||
{ label: 'springgreen', value: '#00ff7f' },
|
||||
@@ -7352,8 +7353,8 @@ export const tools = {
|
||||
return this.getPathByTableAndRec(table, rec)
|
||||
},
|
||||
|
||||
getPathByGroup(grp: any, table: string) {
|
||||
return '/' + shared_consts.getDirectoryByTable(table) + '/' + grp.groupname
|
||||
getPathByGroup(grp: any) {
|
||||
return '/' + shared_consts.getDirectoryByTable(shared_consts.TABLES_MYGROUPS) + '/' + grp.groupname
|
||||
},
|
||||
|
||||
getPathByCircuit(circuit: any, table: string) {
|
||||
@@ -7369,7 +7370,7 @@ export const tools = {
|
||||
if (shared_consts.TABLES_REC_ID.includes(table)) {
|
||||
return '/' + shared_consts.getDirectoryByTable(table) + '/' + rec['_id']
|
||||
} else if (table === toolsext.TABMYGROUPS) {
|
||||
return this.getPathByGroup(rec, table)
|
||||
return this.getPathByGroup(rec)
|
||||
} else if (table === toolsext.TABCIRCUITS) {
|
||||
return this.getPathByCircuit(rec, table)
|
||||
}
|
||||
@@ -8009,7 +8010,7 @@ export const tools = {
|
||||
let obj = { label: '', value: '', icon: '' }
|
||||
for (let i = 0; i < costanti.MAINCARDS.length; i++) {
|
||||
let rec: any = costanti.MAINCARDS[i]
|
||||
if (rec.table) {
|
||||
if (rec.table && rec.showinoptions) {
|
||||
obj.label = rec.title
|
||||
obj.value = rec.table
|
||||
obj.icon = rec.icon
|
||||
@@ -8561,10 +8562,26 @@ export const tools = {
|
||||
|
||||
openUrl(url: string) {
|
||||
|
||||
url = url.replace('{link_chat_territoriale}', this.getLinkChatTerritoriale())
|
||||
|
||||
window.open(url, '_blank');
|
||||
|
||||
},
|
||||
|
||||
getText(mystr: string) {
|
||||
|
||||
mystr = mystr.replace('{miaprovincia}', this.getProvincia())
|
||||
|
||||
if (mystr.includes('{titolo_prov_riso}')) {
|
||||
let titleprovincia = translate('dashboard.link_gruppo_telegram')
|
||||
titleprovincia = titleprovincia.replace('{prov}', this.getProvincia())
|
||||
|
||||
mystr = mystr.replace('{titolo_prov_riso}', titleprovincia)
|
||||
}
|
||||
|
||||
return mystr
|
||||
},
|
||||
|
||||
getCircuitYourProvince() {
|
||||
|
||||
const circuitStore = useCircuitStore()
|
||||
@@ -8737,6 +8754,15 @@ export const tools = {
|
||||
return shared_consts.VERSIONI_PRODOTTO.find((rec: any) => rec.value === versione)
|
||||
},
|
||||
|
||||
numtostr(value: number): string {
|
||||
try {
|
||||
value = Math.round(value)
|
||||
return value.toLocaleString('it-IT')
|
||||
} catch (e) {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
|
||||
convertToDecimal6(stringValue: string) {
|
||||
// Converti la stringa in un numero
|
||||
try {
|
||||
@@ -8876,6 +8902,63 @@ export const tools = {
|
||||
|
||||
},
|
||||
|
||||
updateEditOn(value: boolean) {
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
globalStore.editOn = value
|
||||
|
||||
if (this.getCookie('edn') === '1' && !value) {
|
||||
this.setCookie('edn', '0')
|
||||
}
|
||||
if (this.getCookie('edn') !== '1' && value) {
|
||||
this.setCookie('edn', '1')
|
||||
}
|
||||
},
|
||||
|
||||
replaceStringCaseInsensitive(originalString: string, searchString: string, replaceString: string) {
|
||||
// Crea una regex con il flag 'i' per la ricerca case-insensitive
|
||||
const regex = new RegExp(searchString, 'gi'); // 'g' per global, 'i' per case-insensitive
|
||||
return originalString.replace(regex, replaceString);
|
||||
},
|
||||
|
||||
getStringaConto(mov: IMovQuery) {
|
||||
|
||||
let mystr = ''
|
||||
let mystrfrom = ''
|
||||
let mystrto = ''
|
||||
|
||||
let tipocontofrom = shared_consts.AccountType.USER
|
||||
let tipocontoto = shared_consts.AccountType.USER
|
||||
|
||||
if (mov.contocomfrom && mov.contocomfrom.name) {
|
||||
mystrfrom += mov.contocomfrom.name + ' '
|
||||
tipocontofrom = shared_consts.AccountType.COMMUNITY_ACCOUNT
|
||||
}
|
||||
if (mov.groupfrom) {
|
||||
mystrfrom += mov.groupfrom.groupname + ' '
|
||||
tipocontofrom = shared_consts.AccountType.COLLECTIVE_ACCOUNT
|
||||
}
|
||||
if (mov.userfrom) {
|
||||
mystrfrom += mov.userfrom.username + ' '
|
||||
}
|
||||
|
||||
if (mov.contocomto && mov.contocomto.name) {
|
||||
mystrto += mov.contocomto.name + ' '
|
||||
tipocontoto = shared_consts.AccountType.COMMUNITY_ACCOUNT
|
||||
}
|
||||
if (mov.groupto) {
|
||||
mystrto += mov.groupto.groupname + ' '
|
||||
tipocontoto = shared_consts.AccountType.COLLECTIVE_ACCOUNT
|
||||
}
|
||||
if (mov.userto) {
|
||||
mystrto += mov.userto.username + ' '
|
||||
}
|
||||
|
||||
mystr = t('movement.from') + mystrfrom + ' ' + t('movement.to') + mystrto
|
||||
|
||||
return { str: mystr.trim(), tipocontofrom, tipocontoto }
|
||||
},
|
||||
|
||||
// FINE !
|
||||
|
||||
// getLocale() {
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Router } from 'vue-router'
|
||||
import { ISpecialField } from 'model'
|
||||
|
||||
export const func_tools = {
|
||||
getLocale(vero ?: boolean): string {
|
||||
getLocale(vero?: boolean): string {
|
||||
const userStore = useUserStore()
|
||||
if (userStore) {
|
||||
return userStore.lang
|
||||
@@ -85,7 +85,7 @@ export const toolsext = {
|
||||
TABGALLERY: 'gallery',
|
||||
TABMAILINGLIST: 'mailinglist',
|
||||
TABGROUPS: 'groups',
|
||||
TABMYPAGE: 'mypage',
|
||||
TABMYPAGE: 'mypages',
|
||||
TABMYELEMS: 'myelems',
|
||||
TABMYBOT: 'bots',
|
||||
TABCALZOOM: 'calzoom',
|
||||
@@ -201,21 +201,21 @@ export const toolsext = {
|
||||
return userStore.my[keystr]
|
||||
}
|
||||
} else if (table === 'todos') {
|
||||
// console.log('id', id, 'idmain', idmain)
|
||||
const indcat = todos.categories.indexOf(idmain)
|
||||
console.log('indcat', indcat)
|
||||
if (indcat >= 0) {
|
||||
const myrec = todos.todos[indcat].find((rec: any) => rec._id === id)
|
||||
// console.log('myrec', myrec)
|
||||
let ris = null
|
||||
if (myrec) {
|
||||
ris = myrec[keystr]
|
||||
}
|
||||
console.log('ris', ris)
|
||||
return ris
|
||||
// console.log('id', id, 'idmain', idmain)
|
||||
const indcat = todos.categories.indexOf(idmain)
|
||||
console.log('indcat', indcat)
|
||||
if (indcat >= 0) {
|
||||
const myrec = todos.todos[indcat].find((rec: any) => rec._id === id)
|
||||
// console.log('myrec', myrec)
|
||||
let ris = null
|
||||
if (myrec) {
|
||||
ris = myrec[keystr]
|
||||
}
|
||||
console.log('ris', ris)
|
||||
return ris
|
||||
}
|
||||
|
||||
return ''
|
||||
return ''
|
||||
|
||||
} else {
|
||||
const ris = globalStore.getValueSettingsByKey(keystr, serv)
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
ISignupIscrizioneConacreisOptions,
|
||||
ISignupIscrizioneArcadeiOptions,
|
||||
ISettings,
|
||||
IMovQuery,
|
||||
} from '@src/model'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import translate from '@src/globalroutines/util'
|
||||
@@ -415,16 +416,16 @@ export const useUserStore = defineStore('UserStore', {
|
||||
if (row.hasOwnProperty(col.name)) {
|
||||
value = row[col.name]
|
||||
}
|
||||
let tipoconto = costanti.AccountType.USER
|
||||
let tipoconto = shared_consts.AccountType.USER
|
||||
if (col.hasOwnProperty('tipoconto') && col.tipoconto) {
|
||||
tipoconto = col.tipoconto
|
||||
}
|
||||
let img = ''
|
||||
if (tipoconto === costanti.AccountType.USER) {
|
||||
if (tipoconto === shared_consts.AccountType.USER) {
|
||||
img = this.getImgByUsername(value)
|
||||
} else if (tipoconto === costanti.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
} else if (tipoconto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
img = this.getImgByGroupname(value)
|
||||
} else if (tipoconto === costanti.AccountType.COMMUNITY_ACCOUNT) {
|
||||
} else if (tipoconto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
img = this.getImgByCircuitpath(value)
|
||||
}
|
||||
|
||||
@@ -445,14 +446,14 @@ export const useUserStore = defineStore('UserStore', {
|
||||
if (!reale)
|
||||
img = 'images/noimg-user.svg'
|
||||
|
||||
let tipoconto = costanti.AccountType.USER
|
||||
let tipoconto = shared_consts.AccountType.USER
|
||||
if (col && col.hasOwnProperty('tipoconto') && col.tipoconto) {
|
||||
tipoconto = col.tipoconto
|
||||
}
|
||||
|
||||
if (tipoconto === costanti.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
if (tipoconto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
img = this.getImgByGroupname(myrec.groupname)
|
||||
} else if (tipoconto === costanti.AccountType.COMMUNITY_ACCOUNT) {
|
||||
} else if (tipoconto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
img = this.getImgByCircuitpath(myrec.path)
|
||||
} else {
|
||||
if (myrec.profile && myrec.profile.img) {
|
||||
@@ -470,6 +471,35 @@ export const useUserStore = defineStore('UserStore', {
|
||||
return ''
|
||||
},
|
||||
|
||||
getImgByMov(mov: IMovQuery, tipoconto: number, from: boolean, reale: boolean): string {
|
||||
try {
|
||||
|
||||
let img = ''
|
||||
if (!reale)
|
||||
img = 'images/noimg-user.svg'
|
||||
|
||||
if (tipoconto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
img = this.getImgByGroup(from ? mov.groupfrom : mov.groupto)
|
||||
// img = this.getImgByGroupname(from ? mov.groupfrom.groupname : mov.groupto.groupname)
|
||||
} else if (tipoconto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
img = this.getImgByCircuitpath(from ? mov.contocomfrom.path : mov.contocomto.path)
|
||||
} else {
|
||||
let myuser = from ? mov.userfrom : mov.userto
|
||||
if (myuser && myuser.profile.img) {
|
||||
img = costanti.DIR_UPLOAD + 'profile/' + myuser.username + '/' + myuser.profile.img
|
||||
}
|
||||
}
|
||||
|
||||
return img
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
if (!reale)
|
||||
return 'images/noimg-user.svg'
|
||||
else
|
||||
return ''
|
||||
},
|
||||
|
||||
|
||||
IsAskedCircuitByName(name: string): boolean {
|
||||
if (this.my.profile.asked_circuits && this.my.profile.asked_circuits.length > 0)
|
||||
@@ -621,7 +651,7 @@ export const useUserStore = defineStore('UserStore', {
|
||||
return this.getImgByCircuit(mycirc)
|
||||
},
|
||||
|
||||
getImgByGroup(group: IMyGroup | null): string {
|
||||
getImgByGroup(group: any): string {
|
||||
|
||||
try {
|
||||
// ++Todo: Sistemare!
|
||||
@@ -718,12 +748,12 @@ export const useUserStore = defineStore('UserStore', {
|
||||
let name = ''
|
||||
let myrec = this.getRecByCol(user, col)
|
||||
|
||||
let tipoconto = costanti.AccountType.USER
|
||||
let tipoconto = shared_consts.AccountType.USER
|
||||
if (col && col.hasOwnProperty('tipoconto')) {
|
||||
tipoconto = col.tipoconto
|
||||
}
|
||||
|
||||
if (tipoconto === costanti.AccountType.USER) {
|
||||
if (tipoconto === shared_consts.AccountType.USER) {
|
||||
if (!!myrec.name)
|
||||
name = myrec.name + ' '
|
||||
if (!!myrec.surname)
|
||||
@@ -735,14 +765,14 @@ export const useUserStore = defineStore('UserStore', {
|
||||
if (col && col.field === 'extrarec' && !name) {
|
||||
name = myrec.dest
|
||||
}
|
||||
} else if (tipoconto === costanti.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
} else if (tipoconto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
|
||||
if (myrec.hasOwnProperty('descr'))
|
||||
return myrec.descr
|
||||
else if (myrec.hasOwnProperty('groupname'))
|
||||
return myrec.groupname
|
||||
else if (myrec.hasOwnProperty('grouporig'))
|
||||
return myrec.grouporig
|
||||
} else if (tipoconto === costanti.AccountType.COMMUNITY_ACCOUNT) {
|
||||
} else if (tipoconto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
|
||||
if (myrec.hasOwnProperty('name'))
|
||||
return myrec.name
|
||||
else if (myrec.hasOwnProperty('contocom'))
|
||||
@@ -1451,8 +1481,8 @@ export const useUserStore = defineStore('UserStore', {
|
||||
if (isLogged) {
|
||||
// console.log('this.isLogged', this.isLogged)
|
||||
|
||||
if (!tools.isMobile)
|
||||
globalStore.setleftDrawerOpen(localStorage.getItem(toolsext.localStorage.leftDrawerOpen) === 'true')
|
||||
//if (!tools.isMobile)
|
||||
// globalStore.setleftDrawerOpen(localStorage.getItem(toolsext.localStorage.leftDrawerOpen) === 'true')
|
||||
globalStore.setCategorySel(localStorage.getItem(toolsext.localStorage.categorySel))
|
||||
|
||||
await globalStore.checkUpdates()
|
||||
|
||||
@@ -575,6 +575,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
|
||||
level_parent: page.l_par,
|
||||
submenu: page.submenu,
|
||||
extraclass: page.extraclass,
|
||||
mainMenu: page.mainMenu,
|
||||
sottoMenu: page.sottoMenu,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -985,6 +987,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
|
||||
|
||||
await globalroutines('readall', 'config', null)
|
||||
|
||||
this.editOn = tools.getCookie('edn', '0') === '1'
|
||||
|
||||
return isok
|
||||
},
|
||||
|
||||
|
||||
@@ -37,7 +37,9 @@
|
||||
<!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
|
||||
<q-toolbar-title>
|
||||
{{ circuit.name }}
|
||||
<div v-if="groupnameSel">Gruppo: {{ groupnameSel.groupname }}</div>
|
||||
<div v-if="groupnameSel">
|
||||
Gruppo: {{ groupnameSel.groupname }}
|
||||
</div>
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
@@ -45,9 +47,17 @@
|
||||
<div v-html="t('circuit.disclaimer')"></div>
|
||||
</q-card-section>
|
||||
<q-card-section class="inset-shadow">
|
||||
<div style="font-weight: bold; font-size: 1.25rem">Regolamento:</div>
|
||||
<q-btn label="vedi Regolamento" @click="showrules = !showrules"></q-btn>
|
||||
<div v-if="showrules && circuit" v-html="getRegulation(circuit.regulation)"></div>
|
||||
<div style="font-weight: bold; font-size: 1.25rem">
|
||||
Regolamento:
|
||||
</div>
|
||||
<q-btn
|
||||
label="vedi Regolamento"
|
||||
@click="showrules = !showrules"
|
||||
></q-btn>
|
||||
<div
|
||||
v-if="showrules && circuit"
|
||||
v-html="getRegulation(circuit.regulation)"
|
||||
></div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="center">
|
||||
<q-btn
|
||||
@@ -56,17 +66,22 @@
|
||||
color="positive"
|
||||
:label="$t('circuit.acceptregulation')"
|
||||
@click="
|
||||
requestToEnterCircuit = false;
|
||||
tools.setRequestCircuit(
|
||||
$q,
|
||||
userStore.my.username,
|
||||
circuit.name,
|
||||
true,
|
||||
groupnameSel ? groupnameSel.groupname : ''
|
||||
);
|
||||
requestToEnterCircuit = false;
|
||||
tools.setRequestCircuit(
|
||||
$q,
|
||||
userStore.my.username,
|
||||
circuit.name,
|
||||
true,
|
||||
groupnameSel ? groupnameSel.groupname : ''
|
||||
);
|
||||
"
|
||||
/>
|
||||
<q-btn outline :label="$t('dialog.cancel')" icon="close" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
outline
|
||||
:label="$t('dialog.cancel')"
|
||||
icon="close"
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
@@ -79,7 +94,10 @@ tools.setRequestCircuit(
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="circuit">
|
||||
<div class="absolute-top-right q-mr-sm q-my-md" style="margin-top: 50px !important">
|
||||
<div
|
||||
class="absolute-top-right q-mr-sm q-my-md"
|
||||
style="margin-top: 50px !important"
|
||||
>
|
||||
<div class="column">
|
||||
<q-btn
|
||||
v-if="userStore.IsMyCircuitByName(circuit.name)"
|
||||
@@ -88,33 +106,37 @@ tools.setRequestCircuit(
|
||||
icon="fas fa-ellipsis-h"
|
||||
style="z-index: 1"
|
||||
>
|
||||
|
||||
<q-menu>
|
||||
<q-list v-if="true" style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
v-if="true"
|
||||
@click="(saldo !== 0) ?
|
||||
tools.showNegativeNotif($q, t('circuit.per_uscire_dal_circuito_occorre_essere_a_zero'), 30000) :
|
||||
tools.removeFromMyCircuits(
|
||||
$q,
|
||||
userStore.my.username,
|
||||
circuit.name,
|
||||
'',
|
||||
$t('circuit.domanda_exit_fromcircuit', {
|
||||
circuitname: circuit.name,
|
||||
})
|
||||
)
|
||||
@click="
|
||||
saldo !== 0
|
||||
? tools.showNegativeNotif(
|
||||
$q,
|
||||
t(
|
||||
'circuit.per_uscire_dal_circuito_occorre_essere_a_zero'
|
||||
),
|
||||
30000
|
||||
)
|
||||
: tools.removeFromMyCircuits(
|
||||
$q,
|
||||
userStore.my.username,
|
||||
circuit.name,
|
||||
'',
|
||||
$t('circuit.domanda_exit_fromcircuit', {
|
||||
circuitname: circuit.name,
|
||||
})
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="negative" name="fas fa-user-minus" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{
|
||||
$t('circuit.exit_circuit')
|
||||
}}
|
||||
{{ $t('circuit.exit_circuit') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
@@ -153,9 +175,17 @@ tools.setRequestCircuit(
|
||||
</div>
|
||||
|
||||
<div style="align-self: center; vertical-align: middle">
|
||||
<q-btn label="Lista Circuiti" to="/circuits" rounded icon="fas fa-arrow-circle-left" />
|
||||
<q-btn
|
||||
label="Lista Circuiti"
|
||||
to="/circuits"
|
||||
rounded
|
||||
icon="fas fa-arrow-circle-left"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="circuit.name" class="fit column no-wrap justify-evenly items-center content-start">
|
||||
<div
|
||||
v-if="circuit.name"
|
||||
class="fit column no-wrap justify-evenly items-center content-start"
|
||||
>
|
||||
<div class="row justify-center">
|
||||
<q-avatar v-if="getImgCircuit()" size="70px">
|
||||
<q-img
|
||||
@@ -186,11 +216,24 @@ tools.setRequestCircuit(
|
||||
<q-bar dense class="bg-primary text-white">
|
||||
{{ t('circuit.movements') }}:
|
||||
<q-space />
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
</q-bar>
|
||||
<q-card-section class="q-px-xs inset-shadow">
|
||||
<q-option-group v-model="showwhommov" :options="optionsmov" color="primary" />
|
||||
<q-toggle v-model="tabellare" label="Formato Tabella"></q-toggle>
|
||||
<q-option-group
|
||||
v-model="showwhommov"
|
||||
:options="optionsmov"
|
||||
color="primary"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="tabellare"
|
||||
label="Formato Tabella"
|
||||
></q-toggle>
|
||||
|
||||
<CGridTableRec
|
||||
v-if="tabellare && !loading"
|
||||
@@ -269,7 +312,12 @@ tools.setRequestCircuit(
|
||||
</q-dialog>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<q-spinner v-if="loadSaldo" color="primary" size="3em" :thickness="2" />
|
||||
<q-spinner
|
||||
v-if="loadSaldo"
|
||||
color="primary"
|
||||
size="3em"
|
||||
:thickness="2"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="account && !loadSaldo"
|
||||
@@ -317,7 +365,9 @@ tools.setRequestCircuit(
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="fas fa-info" color="red" size="sm" />
|
||||
</template>
|
||||
<span v-html="$t('circuit.entra_italia_solo_dopo_aver_fido')"></span>
|
||||
<span
|
||||
v-html="$t('circuit.entra_italia_solo_dopo_aver_fido')"
|
||||
></span>
|
||||
</q-banner>
|
||||
<q-banner
|
||||
v-if="circuitStore.IsNationalAndNotEnterInLocal(circuit.name)"
|
||||
@@ -326,20 +376,24 @@ tools.setRequestCircuit(
|
||||
style="text-align: center"
|
||||
>
|
||||
<template v-slot:avatar>
|
||||
<q-icon class="vertical-align center" name="fas fa-info" color="white" size="sm" />
|
||||
<q-icon
|
||||
class="vertical-align center"
|
||||
name="fas fa-info"
|
||||
color="white"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<em style="font-weight: bold">
|
||||
{{
|
||||
$t('circuit.beforeentertolocalcircuit')
|
||||
}}
|
||||
{{ $t('circuit.beforeentertolocalcircuit') }}
|
||||
</em>
|
||||
<br />
|
||||
</q-banner>
|
||||
<q-banner
|
||||
v-if="
|
||||
userStore.my.profile &&
|
||||
userStore.my.profile.calc && userStore.my.profile.calc.numGoodsAndServices <= 0 &&
|
||||
userStore.my.profile.calc &&
|
||||
userStore.my.profile.calc.numGoodsAndServices <= 0 &&
|
||||
globalStore.site.confpages.showRIS &&
|
||||
userStore.IsMyCircuitByName(circuit.name)
|
||||
"
|
||||
@@ -352,29 +406,31 @@ tools.setRequestCircuit(
|
||||
</template>
|
||||
|
||||
<em style="font-weight: bold">
|
||||
{{
|
||||
$t('db.insertgoodorservices_to_enter_circuit')
|
||||
}}
|
||||
{{ $t('db.insertgoodorservices_to_enter_circuit') }}
|
||||
</em>
|
||||
<br />
|
||||
</q-banner>
|
||||
<q-banner
|
||||
v-else-if="
|
||||
globalStore.site.confpages.showRIS &&
|
||||
userStore.my.profile.calc && userStore.my.profile.calc.numGoodsAndServices <= 0
|
||||
userStore.my.profile.calc &&
|
||||
userStore.my.profile.calc.numGoodsAndServices <= 0
|
||||
"
|
||||
rounded
|
||||
class="bg-deep-purple text-white"
|
||||
style="text-align: center"
|
||||
>
|
||||
<template v-slot:avatar>
|
||||
<q-icon class="vertical-align center" name="fas fa-info" color="red" size="sm" />
|
||||
<q-icon
|
||||
class="vertical-align center"
|
||||
name="fas fa-info"
|
||||
color="red"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<em style="font-weight: bold">
|
||||
{{
|
||||
$t('db.insertgoodorservices_to_enter_circuit')
|
||||
}}
|
||||
{{ $t('db.insertgoodorservices_to_enter_circuit') }}
|
||||
</em>
|
||||
<br />
|
||||
</q-banner>
|
||||
@@ -394,8 +450,8 @@ tools.setRequestCircuit(
|
||||
color="primary"
|
||||
:label="$t('circuit.ask')"
|
||||
@click="
|
||||
requestToEnterCircuit = true;
|
||||
groupnameSel = null;
|
||||
requestToEnterCircuit = true;
|
||||
groupnameSel = null;
|
||||
"
|
||||
/>
|
||||
|
||||
@@ -415,9 +471,17 @@ groupnameSel = null;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="circuit.name" class="no-wrap justify-evenly items-center content-start">
|
||||
<div
|
||||
v-if="circuit.name"
|
||||
class="no-wrap justify-evenly items-center content-start"
|
||||
>
|
||||
<q-tabs v-model="tabcircuit" class="text-blue" no-caps>
|
||||
<q-tab :label="t('shared.info1')" name="info" icon="fas fa-info" @click="loadCircuit()"></q-tab>
|
||||
<q-tab
|
||||
:label="t('shared.info1')"
|
||||
name="info"
|
||||
icon="fas fa-info"
|
||||
@click="loadCircuit()"
|
||||
></q-tab>
|
||||
<q-tab
|
||||
v-if="
|
||||
tools.iCanShowCircuitsMember(circuit) ||
|
||||
@@ -484,7 +548,11 @@ groupnameSel = null;
|
||||
<q-btn rounded icon="fas fa-user-plus" class="text-center">
|
||||
<q-menu>
|
||||
<q-item>Chiedi di Entrare nei Circuiti:</q-item>
|
||||
<q-list v-for="(group, ind) of groupsListAdmin" :key="ind" class="q-pa-sm">
|
||||
<q-list
|
||||
v-for="(group, ind) of groupsListAdmin"
|
||||
:key="ind"
|
||||
class="q-pa-sm"
|
||||
>
|
||||
<q-item
|
||||
v-if="
|
||||
!userStore.IsMyCircuitByNameAndGroup(
|
||||
@@ -511,8 +579,8 @@ groupnameSel = null;
|
||||
color="primary"
|
||||
:label="group.groupname"
|
||||
@click="
|
||||
requestToEnterCircuit = true;
|
||||
groupnameSel = group;
|
||||
requestToEnterCircuit = true;
|
||||
groupnameSel = group;
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
@@ -682,7 +750,10 @@ groupnameSel = group;
|
||||
|
||||
<q-card-section>
|
||||
<div class="col-12 text-h8">
|
||||
<span v-if="checkifShow('descr')" v-html="circuit.longdescr"></span>
|
||||
<span
|
||||
v-if="checkifShow('descr')"
|
||||
v-html="circuit.longdescr"
|
||||
></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
@@ -704,7 +775,11 @@ groupnameSel = group;
|
||||
})
|
||||
}}:
|
||||
<div class="row justify-center">
|
||||
<q-icon name="fas fa-hand-point-right" class="iconcirc" size="lg"></q-icon>
|
||||
<q-icon
|
||||
name="fas fa-hand-point-right"
|
||||
class="iconcirc"
|
||||
size="lg"
|
||||
></q-icon>
|
||||
|
||||
<q-btn
|
||||
v-if="circuit.link_group"
|
||||
@@ -714,7 +789,17 @@ groupnameSel = group;
|
||||
size="md"
|
||||
rounded
|
||||
:label="
|
||||
$t('circuit.link_chat', { name: circuit.name })
|
||||
$t('circuit.link_chat', {
|
||||
name: tools.replaceStringCaseInsensitive(
|
||||
tools.replaceStringCaseInsensitive(
|
||||
circuit.name,
|
||||
'circuito',
|
||||
''
|
||||
),
|
||||
'RIS',
|
||||
'RISO'
|
||||
),
|
||||
})
|
||||
"
|
||||
:href="circuit.link_group"
|
||||
target="__blank"
|
||||
@@ -730,7 +815,11 @@ groupnameSel = group;
|
||||
}}
|
||||
</div>
|
||||
<div v-for="(user, index) of circuit.admins" :key="index">
|
||||
<CMyUser :mycontact="user" :visu="costanti.FIND_PEOPLE" @setCmd="tools.setCmd"></CMyUser>
|
||||
<CMyUser
|
||||
:mycontact="user"
|
||||
:visu="costanti.FIND_PEOPLE"
|
||||
@setCmd="tools.setCmd"
|
||||
></CMyUser>
|
||||
</div>
|
||||
<div class="sezioni">
|
||||
<q-icon name="fas fa-coins" class="iconcirc"></q-icon>
|
||||
@@ -742,7 +831,8 @@ groupnameSel = group;
|
||||
`background-color: ` +
|
||||
tools.getColorByCircuit(circuit)
|
||||
"
|
||||
>{{ tools.getSymbolByCircuit(circuit) }}</em>
|
||||
>{{ tools.getSymbolByCircuit(circuit) }}</em
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div :class="$q.screen.lt.sm ? '' : 'row'">
|
||||
@@ -832,8 +922,7 @@ groupnameSel = group;
|
||||
? t('dialog.yes')
|
||||
: t('dialog.no')
|
||||
}}
|
||||
{{
|
||||
}}
|
||||
{{}}
|
||||
</span>
|
||||
</div>
|
||||
<!--<div
|
||||
@@ -866,7 +955,10 @@ groupnameSel = group;
|
||||
|
||||
<q-card-section>
|
||||
<div class="centermydiv">
|
||||
<q-btn label="vedi Regolamento" @click="showrules = !showrules"></q-btn>
|
||||
<q-btn
|
||||
label="vedi Regolamento"
|
||||
@click="showrules = !showrules"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div class="col-12 text-h8">
|
||||
<span
|
||||
@@ -887,7 +979,7 @@ groupnameSel = group;
|
||||
v-if="
|
||||
!!circuit.date_updated &&
|
||||
tools.getstrDate(circuit.date_updated) !==
|
||||
tools.getstrDate(circuit.date_created)
|
||||
tools.getstrDate(circuit.date_created)
|
||||
"
|
||||
class="container text-h8"
|
||||
>
|
||||
@@ -914,7 +1006,10 @@ groupnameSel = group;
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="members" v-if="tools.iCanShowCircuitsMember(circuit)">
|
||||
<q-tab-panel
|
||||
name="members"
|
||||
v-if="tools.iCanShowCircuitsMember(circuit)"
|
||||
>
|
||||
<q-tabs
|
||||
v-show="tools.iAmAdminCircuit(circuit.name)"
|
||||
v-model="tabmembers"
|
||||
@@ -1004,7 +1099,9 @@ groupnameSel = group;
|
||||
<q-card v-if="circuit.name">
|
||||
<q-card-section>
|
||||
<div class="text-h7">{{ t('circuit.contocomunitario') }}:</div>
|
||||
<div class="text-h8 q-mb-sm">{{ $t('circuit.info_contocom') }}</div>
|
||||
<div class="text-h8 q-mb-sm">
|
||||
{{ $t('circuit.info_contocom') }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
@@ -1025,8 +1122,8 @@ groupnameSel = group;
|
||||
:qtarem="
|
||||
circuit.account
|
||||
? circuitStore.getRemainingCoinsToSend(
|
||||
circuit.account
|
||||
)
|
||||
circuit.account
|
||||
)
|
||||
: 0
|
||||
"
|
||||
></CSaldo>
|
||||
@@ -1084,8 +1181,16 @@ groupnameSel = group;
|
||||
></CGridTableRec>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="fit column no-wrap justify-evenly items-center content-start">
|
||||
<q-skeleton type="QAvatar" size="140px" height="140px" animation="fade" />
|
||||
<div
|
||||
v-else
|
||||
class="fit column no-wrap justify-evenly items-center content-start"
|
||||
>
|
||||
<q-skeleton
|
||||
type="QAvatar"
|
||||
size="140px"
|
||||
height="140px"
|
||||
animation="fade"
|
||||
/>
|
||||
<q-card flat bordered style="width: 250px">
|
||||
<div class="text-h7">
|
||||
<q-skeleton :animation="animation" />
|
||||
@@ -1114,6 +1219,6 @@ groupnameSel = group;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./mycircuit.scss";
|
||||
@import './mycircuit.scss';
|
||||
</style>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user