769 lines
21 KiB
Vue
769 lines
21 KiB
Vue
|
<template>
|
||
|
|
<div class="riso-modern-home">
|
||
|
|
<!-- Hero Section: Card Principali -->
|
||
|
|
<section class="hero-cards">
|
||
|
|
<!-- Card Annunci -->
|
||
|
|
<div
|
||
|
|
class="hero-card gradient-primary"
|
||
|
|
@click="openAnnunciDialog"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="campaign"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="card-title">Annunci</span>
|
||
|
|
<span class="card-subtitle">Beni, Servizi, Ospitalità</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card Circuiti RIS -->
|
||
|
|
<div
|
||
|
|
class="hero-card gradient-success"
|
||
|
|
@click="goToCircuits"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="fas fa-coins"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="card-title">Circuiti RIS</span>
|
||
|
|
<span class="card-subtitle">Gestisci i tuoi RIS</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card Eventi -->
|
||
|
|
<div
|
||
|
|
class="hero-card gradient-accent"
|
||
|
|
@click="goToEvents"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="card-title">Eventi</span>
|
||
|
|
<span class="card-subtitle">{{ upcomingEventsCount }} prossimi</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card Profilo -->
|
||
|
|
<div
|
||
|
|
class="hero-card gradient-orange"
|
||
|
|
@click="goToProfile"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="account_circle"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="card-title">Profilo</span>
|
||
|
|
<span class="card-subtitle">Gestisci account</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Azioni RIS -->
|
||
|
|
<section class="ris-actions-section">
|
||
|
|
<div class="ris-actions-grid">
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="ris-action-btn send-btn"
|
||
|
|
icon="arrow_upward"
|
||
|
|
label="Invia RIS"
|
||
|
|
@click="sendRIS"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="ris-action-btn receive-btn"
|
||
|
|
icon="arrow_downward"
|
||
|
|
label="Ricevi RIS"
|
||
|
|
@click="receiveRIS"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Wallet Card Dettagliata con 2 Circuiti -->
|
||
|
|
<section class="wallet-section">
|
||
|
|
<div class="wallet-card">
|
||
|
|
<div class="wallet-header">
|
||
|
|
<h2 class="section-title-white">
|
||
|
|
<q-icon name="fas fa-coins" />
|
||
|
|
I Tuoi RIS - Circuiti di Scambio
|
||
|
|
</h2>
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
icon="refresh"
|
||
|
|
text-color="white"
|
||
|
|
@click="refreshWallet"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Saldi Entrambi Circuiti -->
|
||
|
|
<div class="circuits-balance-overview">
|
||
|
|
<div class="circuit-balance-mini">
|
||
|
|
<CRISBalanceBar
|
||
|
|
:current-balance="circuits.provinciale.realBalance"
|
||
|
|
:min-limit="circuits.provinciale.trustLimit"
|
||
|
|
:max-limit="circuits.provinciale.maxAccumulation"
|
||
|
|
:label="circuits.provinciale.title"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="circuit-balance-mini">
|
||
|
|
<CRISBalanceBar
|
||
|
|
:current-balance="circuits.italia.realBalance"
|
||
|
|
:min-limit="circuits.italia.trustLimit"
|
||
|
|
:max-limit="circuits.italia.maxAccumulation"
|
||
|
|
:label="circuits.italia.title"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Selettore Circuito -->
|
||
|
|
<div class="circuit-selector">
|
||
|
|
<q-btn-toggle
|
||
|
|
v-model="selectedCircuit"
|
||
|
|
dense
|
||
|
|
no-caps
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
toggle-color="white"
|
||
|
|
toggle-text-color="primary"
|
||
|
|
:options="[
|
||
|
|
{ label: 'RIS Provinciale', value: 'provinciale' },
|
||
|
|
{ label: 'RIS Italia', value: 'italia' },
|
||
|
|
]"
|
||
|
|
class="circuit-toggle"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Statistiche transazioni del circuito selezionato -->
|
||
|
|
<div class="wallet-transactions">
|
||
|
|
<div class="transaction-stat total">
|
||
|
|
<q-icon
|
||
|
|
name="repeat"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ currentCircuitData.totalTransactions }}</span>
|
||
|
|
<span class="stat-label">Transazioni</span>
|
||
|
|
</div>
|
||
|
|
<div class="transaction-stat sent">
|
||
|
|
<q-icon
|
||
|
|
name="arrow_upward"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ currentCircuitData.sentCount }}</span>
|
||
|
|
<span class="stat-label">Inviate</span>
|
||
|
|
</div>
|
||
|
|
<div class="transaction-stat received">
|
||
|
|
<q-icon
|
||
|
|
name="arrow_downward"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ currentCircuitData.receivedCount }}</span>
|
||
|
|
<span class="stat-label">Ricevute</span>
|
||
|
|
</div>
|
||
|
|
<div class="transaction-stat members">
|
||
|
|
<q-icon
|
||
|
|
name="people"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
|
||
|
|
<span class="stat-label">Membri coinvolti</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Saldi compatti circuito selezionato -->
|
||
|
|
<div class="wallet-balances-compact">
|
||
|
|
<div class="balance-row">
|
||
|
|
<span class="balance-label-compact">Saldo:</span>
|
||
|
|
<span class="balance-value-compact"
|
||
|
|
>{{ currentCircuitData.realBalance }} RIS</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<CRISBalanceBar
|
||
|
|
:current-balance="currentCircuitData.realBalance"
|
||
|
|
:min-limit="currentCircuitData.trustLimit"
|
||
|
|
:max-limit="currentCircuitData.maxAccumulation"
|
||
|
|
:label="currentCircuitData.title"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Ultime 3 transazioni del circuito selezionato -->
|
||
|
|
<div class="recent-transactions">
|
||
|
|
<h4 class="transactions-title">Ultime Tue Transazioni</h4>
|
||
|
|
<div class="transaction-list">
|
||
|
|
<div
|
||
|
|
v-for="(tx, idx) in currentCircuitData.recentTransactions.slice(0, 3)"
|
||
|
|
:key="idx"
|
||
|
|
class="transaction-item"
|
||
|
|
@click="openTransaction(tx)"
|
||
|
|
>
|
||
|
|
<q-avatar
|
||
|
|
size="32px"
|
||
|
|
:color="tx.amount > 0 ? 'positive' : 'negative'"
|
||
|
|
text-color="white"
|
||
|
|
>
|
||
|
|
{{ tx.userInitial }}
|
||
|
|
</q-avatar>
|
||
|
|
<div class="transaction-content">
|
||
|
|
<span class="transaction-desc">{{ tx.description }}</span>
|
||
|
|
<span class="transaction-time">{{ tx.time }}</span>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
:class="['transaction-amount', tx.amount > 0 ? 'positive' : 'negative']"
|
||
|
|
>
|
||
|
|
{{ tx.amount > 0 ? '+' : '' }}{{ tx.amount }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Focus su attività di scambio -->
|
||
|
|
<div class="wallet-activity-focus">
|
||
|
|
<div class="activity-message">
|
||
|
|
<q-icon
|
||
|
|
name="swap_horiz"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="activity-text"
|
||
|
|
>Continua a scambiare con più persone per far crescere la comunità!</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="last-trade">
|
||
|
|
<q-icon
|
||
|
|
name="schedule"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
<span>Ultimo scambio: {{ currentCircuitData.lastTradeTime }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="wallet-detail-btn"
|
||
|
|
label="Dettaglio Transazioni"
|
||
|
|
icon-right="arrow_forward"
|
||
|
|
@click="goToTransactions"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- Prossimi Eventi -->
|
||
|
|
<section
|
||
|
|
v-if="hasEvents"
|
||
|
|
class="content-section"
|
||
|
|
>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<q-icon name="event" />
|
||
|
|
Prossimi Eventi
|
||
|
|
</h2>
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
icon="arrow_forward"
|
||
|
|
@click="goToAllEvents"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-for="(event, idx) in recentEvents"
|
||
|
|
:key="idx"
|
||
|
|
class="event-card"
|
||
|
|
@click="openEvent(event)"
|
||
|
|
>
|
||
|
|
<q-img
|
||
|
|
:src="event.image || '/images/event-placeholder.png'"
|
||
|
|
class="event-image"
|
||
|
|
ratio="1"
|
||
|
|
>
|
||
|
|
<template
|
||
|
|
v-if="!event.image"
|
||
|
|
v-slot:error
|
||
|
|
>
|
||
|
|
<div class="event-image-placeholder">
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
size="2rem"
|
||
|
|
color="grey-5"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</q-img>
|
||
|
|
<div class="event-date">
|
||
|
|
<span class="event-day">{{ event.day }}</span>
|
||
|
|
<span class="event-month">{{ event.month }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="event-info">
|
||
|
|
<span class="event-title">{{ event.title }}</span>
|
||
|
|
<span class="event-location">{{ event.location }}</span>
|
||
|
|
</div>
|
||
|
|
<q-icon name="chevron_right" />
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Community Actions -->
|
||
|
|
<section class="community-actions-section">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<q-icon name="people" />
|
||
|
|
Community
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="invite-banner">
|
||
|
|
<div class="invite-message">
|
||
|
|
<q-icon
|
||
|
|
name="campaign"
|
||
|
|
size="md"
|
||
|
|
color="positive"
|
||
|
|
/>
|
||
|
|
<div class="invite-text">
|
||
|
|
<span class="invite-main"
|
||
|
|
>Aiuta la community a crescere, parla di RISO ed invita le persone alla
|
||
|
|
App</span
|
||
|
|
>
|
||
|
|
<span class="invite-count"
|
||
|
|
>Hai già inviato <strong>{{ invitesSent }}</strong> inviti</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="community-actions-grid">
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="community-action-btn"
|
||
|
|
icon="person_add"
|
||
|
|
label="Invita Amici"
|
||
|
|
color="positive"
|
||
|
|
@click="inviteFriend"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="community-action-btn"
|
||
|
|
icon="list"
|
||
|
|
label="Lista Iscritti"
|
||
|
|
color="info"
|
||
|
|
@click="showMembers"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Organizzazioni -->
|
||
|
|
<section
|
||
|
|
v-if="hasOrganizations"
|
||
|
|
class="content-section"
|
||
|
|
>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<q-icon name="fas fa-users" />
|
||
|
|
Organizzazioni
|
||
|
|
</h2>
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
icon="arrow_forward"
|
||
|
|
@click="goToAllOrganizations"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="org-scroll">
|
||
|
|
<div
|
||
|
|
v-for="(org, idx) in organizations.slice(0, 10)"
|
||
|
|
:key="idx"
|
||
|
|
class="org-card-scroll"
|
||
|
|
@click="openOrganization(org)"
|
||
|
|
>
|
||
|
|
<q-avatar
|
||
|
|
size="50px"
|
||
|
|
color="blue-6"
|
||
|
|
text-color="white"
|
||
|
|
>
|
||
|
|
{{ org.initial }}
|
||
|
|
</q-avatar>
|
||
|
|
<span class="org-name">{{ org.name }}</span>
|
||
|
|
<span class="org-members">{{ org.membersCount }} membri</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Statistiche Generali -->
|
||
|
|
<section class="stats-section">
|
||
|
|
<h2 class="section-title-center">
|
||
|
|
<q-icon name="analytics" />
|
||
|
|
Statistiche RISO
|
||
|
|
</h2>
|
||
|
|
<div class="stats-grid">
|
||
|
|
<div class="stat-card">
|
||
|
|
<q-icon
|
||
|
|
name="people"
|
||
|
|
color="primary"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ totalMembers }}</span>
|
||
|
|
<span class="stat-text">Membri</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<q-icon
|
||
|
|
name="swap_horiz"
|
||
|
|
color="positive"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ totalTrades }}</span>
|
||
|
|
<span class="stat-text">Scambi</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<q-icon
|
||
|
|
name="event"
|
||
|
|
color="accent"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="stat-number">{{ totalEvents }}</span>
|
||
|
|
<span class="stat-text">Eventi</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Circuiti RIS Overview -->
|
||
|
|
<section class="circuits-overview-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<q-icon name="account_balance" />
|
||
|
|
Circuiti RIS
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="circuits-cards">
|
||
|
|
<div class="circuit-info-card">
|
||
|
|
<q-icon
|
||
|
|
name="check_circle"
|
||
|
|
color="positive"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
|
||
|
|
<span class="circuit-stat-label">Circuiti Attivi</span>
|
||
|
|
</div>
|
||
|
|
<div class="circuit-info-card">
|
||
|
|
<q-icon
|
||
|
|
name="public"
|
||
|
|
color="primary"
|
||
|
|
size="lg"
|
||
|
|
/>
|
||
|
|
<span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
|
||
|
|
<span class="circuit-stat-label">Circuiti Disponibili</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="view-all-btn"
|
||
|
|
label="Esplora tutti i Circuiti"
|
||
|
|
icon-right="arrow_forward"
|
||
|
|
color="primary"
|
||
|
|
@click="goToAllCircuits"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Attività Community -->
|
||
|
|
<section class="community-section">
|
||
|
|
<!-- Strette di Mano -->
|
||
|
|
<div class="community-card">
|
||
|
|
<div class="community-header">
|
||
|
|
<h3 class="community-title">
|
||
|
|
<q-icon name="handshake" />
|
||
|
|
Strette di Mano
|
||
|
|
</h3>
|
||
|
|
<q-btn-toggle
|
||
|
|
v-model="handshakesView"
|
||
|
|
dense
|
||
|
|
no-caps
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
size="sm"
|
||
|
|
toggle-color="primary"
|
||
|
|
:options="[
|
||
|
|
{ label: 'Tue', value: 'mine' },
|
||
|
|
{ label: 'Generali', value: 'all' },
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="handshakesView === 'mine'"
|
||
|
|
class="activity-list"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(handshake, idx) in myHandshakes.slice(0, 5)"
|
||
|
|
:key="idx"
|
||
|
|
class="activity-item"
|
||
|
|
@click="openHandshake(handshake)"
|
||
|
|
>
|
||
|
|
<q-avatar
|
||
|
|
size="40px"
|
||
|
|
color="purple-6"
|
||
|
|
text-color="white"
|
||
|
|
>
|
||
|
|
{{ handshake.userInitial }}
|
||
|
|
</q-avatar>
|
||
|
|
<div class="activity-content">
|
||
|
|
<span class="activity-title">{{ handshake.name }}</span>
|
||
|
|
<span class="activity-time">Stretta di mano {{ handshake.time }}</span>
|
||
|
|
</div>
|
||
|
|
<q-icon
|
||
|
|
name="handshake"
|
||
|
|
color="purple-6"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="handshakesView === 'all'"
|
||
|
|
class="activity-list"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(handshake, idx) in allHandshakes.slice(0, 5)"
|
||
|
|
:key="idx"
|
||
|
|
class="activity-item"
|
||
|
|
@click="openHandshake(handshake)"
|
||
|
|
>
|
||
|
|
<div class="handshake-avatars">
|
||
|
|
<q-avatar
|
||
|
|
size="32px"
|
||
|
|
color="purple-6"
|
||
|
|
text-color="white"
|
||
|
|
>
|
||
|
|
{{ handshake.user1Initial }}
|
||
|
|
</q-avatar>
|
||
|
|
<q-avatar
|
||
|
|
size="32px"
|
||
|
|
color="purple-4"
|
||
|
|
text-color="white"
|
||
|
|
class="avatar-overlap"
|
||
|
|
>
|
||
|
|
{{ handshake.user2Initial }}
|
||
|
|
</q-avatar>
|
||
|
|
</div>
|
||
|
|
<div class="activity-content">
|
||
|
|
<span class="activity-title"
|
||
|
|
>{{ handshake.user1Name }} e {{ handshake.user2Name }}</span
|
||
|
|
>
|
||
|
|
<span class="activity-time">{{ handshake.time }}</span>
|
||
|
|
</div>
|
||
|
|
<q-icon
|
||
|
|
name="handshake"
|
||
|
|
color="purple-6"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Ultimi Scambi -->
|
||
|
|
<div class="community-card">
|
||
|
|
<div class="community-header">
|
||
|
|
<h3 class="community-title">
|
||
|
|
<q-icon name="swap_horiz" />
|
||
|
|
Ultimi Scambi
|
||
|
|
</h3>
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
icon="arrow_forward"
|
||
|
|
@click="goToAllTrades"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="activity-list">
|
||
|
|
<div
|
||
|
|
v-for="(trade, idx) in recentTrades.slice(0, 3)"
|
||
|
|
:key="idx"
|
||
|
|
class="activity-item"
|
||
|
|
@click="openTrade(trade)"
|
||
|
|
>
|
||
|
|
<q-avatar
|
||
|
|
size="40px"
|
||
|
|
color="primary"
|
||
|
|
text-color="white"
|
||
|
|
>
|
||
|
|
{{ trade.userInitial }}
|
||
|
|
</q-avatar>
|
||
|
|
<div class="activity-content">
|
||
|
|
<span class="activity-title">{{ trade.description }}</span>
|
||
|
|
<span class="activity-time">{{ trade.time }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="activity-amount">
|
||
|
|
<span :class="trade.amount > 0 ? 'positive' : 'negative'">
|
||
|
|
{{ trade.amount > 0 ? '+' : '' }}{{ trade.amount }} RIS
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Canali Telegram -->
|
||
|
|
<section
|
||
|
|
v-if="hasTelegramLinks"
|
||
|
|
class="content-section"
|
||
|
|
>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<q-icon name="telegram" />
|
||
|
|
Unisciti ai Canali
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="telegram-grid-modern">
|
||
|
|
<a
|
||
|
|
v-for="(link, idx) in telegramLinks.slice(0, 3)"
|
||
|
|
:key="idx"
|
||
|
|
:href="link.url"
|
||
|
|
target="_blank"
|
||
|
|
class="telegram-card-modern"
|
||
|
|
>
|
||
|
|
<q-img
|
||
|
|
v-if="link.image"
|
||
|
|
:src="link.image"
|
||
|
|
class="telegram-card-image"
|
||
|
|
ratio="16/9"
|
||
|
|
>
|
||
|
|
<div class="telegram-overlay">
|
||
|
|
<q-icon
|
||
|
|
name="telegram"
|
||
|
|
size="3rem"
|
||
|
|
color="white"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</q-img>
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="telegram-icon-wrapper"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="telegram"
|
||
|
|
size="3rem"
|
||
|
|
color="white"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="telegram-content-modern">
|
||
|
|
<span class="telegram-title">{{ link.title }}</span>
|
||
|
|
<q-icon
|
||
|
|
name="open_in_new"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer Links -->
|
||
|
|
<section class="footer-section-modern">
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="footer-btn-modern"
|
||
|
|
icon="help_outline"
|
||
|
|
label="FAQ"
|
||
|
|
color="primary"
|
||
|
|
@click="openFAQ"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="footer-btn-modern"
|
||
|
|
icon="school"
|
||
|
|
label="Guida"
|
||
|
|
color="secondary"
|
||
|
|
@click="openGuide"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
unelevated
|
||
|
|
rounded
|
||
|
|
class="footer-btn-modern"
|
||
|
|
icon="support_agent"
|
||
|
|
label="Assistenza"
|
||
|
|
color="positive"
|
||
|
|
@click="openInfo"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Dialog Annunci -->
|
||
|
|
<q-dialog
|
||
|
|
v-model="showAnnunciDialog"
|
||
|
|
transition-show="slide-up"
|
||
|
|
transition-hide="slide-down"
|
||
|
|
>
|
||
|
|
<q-card class="annunci-dialog">
|
||
|
|
<q-card-section class="dialog-header">
|
||
|
|
<h3 class="dialog-title">Scegli Categoria</h3>
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="close"
|
||
|
|
v-close-popup
|
||
|
|
/>
|
||
|
|
</q-card-section>
|
||
|
|
|
||
|
|
<q-card-section class="dialog-content">
|
||
|
|
<div class="annunci-options-mobile">
|
||
|
|
<div
|
||
|
|
class="annuncio-option gradient-indigo"
|
||
|
|
@click="goToGoods"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="fas fa-tshirt"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="option-title">Beni</span>
|
||
|
|
<span class="option-subtitle">Autoproduzioni, cibo</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="annuncio-option gradient-red"
|
||
|
|
@click="goToServices"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="fas fa-house-user"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="option-title">Servizi</span>
|
||
|
|
<span class="option-subtitle">Competenze, aiuti</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="annuncio-option gradient-lime"
|
||
|
|
@click="goToHospitality"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="fas fa-bed"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="option-title">Ospitalità</span>
|
||
|
|
<span class="option-subtitle">Ospitare viaggiatori</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="annuncio-option gradient-teal"
|
||
|
|
@click="goToTransport"
|
||
|
|
>
|
||
|
|
<q-icon
|
||
|
|
name="directions_car"
|
||
|
|
size="2.5rem"
|
||
|
|
/>
|
||
|
|
<span class="option-title">Trasporti</span>
|
||
|
|
<span class="option-subtitle">Condivisione viaggi</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</q-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" src="./Riso_Home_Modern.ts"></script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './Riso_Home_Modern.scss';
|
||
|
|
</style>
|