a51bc5a8a2
- Editor HTML aggiunto CSS e Script - Statistiche - CRISBalanceBar - Inizio Sync... (ma disattivato)
94 lines
2.6 KiB
Vue
Executable File
94 lines
2.6 KiB
Vue
Executable File
<template>
|
|
<div class="ris-balance-bar">
|
|
<!-- Label e valore corrente -->
|
|
<div class="balance-header">
|
|
<span class="balance-label">{{ label }}</span>
|
|
|
|
<span :class="['balance-current', balanceClass]">
|
|
<span
|
|
v-if="!small"
|
|
class="balance-text-saldo"
|
|
>Saldo:
|
|
</span>
|
|
{{ currentBalance > 0 ? '+' : '' }}{{ currentBalance }} RIS
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Barra di progressione -->
|
|
<div class="progress-container">
|
|
<!-- Linea di sfondo -->
|
|
<div class="progress-track">
|
|
<!-- Zona negativa (rossa) -->
|
|
<div
|
|
class="progress-zone negative-zone"
|
|
:style="{ width: negativeZoneWidth + '%' }"
|
|
></div>
|
|
<!-- Zona zero (grigia) -->
|
|
<div class="progress-zone zero-marker"></div>
|
|
<!-- Zona positiva (verde) -->
|
|
<div
|
|
class="progress-zone positive-zone"
|
|
:style="{ width: positiveZoneWidth + '%' }"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Indicatore posizione corrente -->
|
|
<div
|
|
class="current-indicator"
|
|
:style="{ left: indicatorPosition + '%' }"
|
|
>
|
|
<div :class="['indicator-dot', balanceClass]"></div>
|
|
<div class="indicator-line"></div>
|
|
</div>
|
|
|
|
<!-- Markers limiti -->
|
|
<div
|
|
class="markers"
|
|
:style="{ '--zero-position': zeroPosition + '%' }"
|
|
>
|
|
<div class="marker min-marker">
|
|
<span class="marker-value">{{ minLimit }}</span>
|
|
<span class="marker-label">Fido</span>
|
|
</div>
|
|
<div class="marker zero-marker-label">
|
|
<span class="marker-value">0</span>
|
|
</div>
|
|
<div class="marker max-marker">
|
|
<span class="marker-value">+{{ maxLimit }}</span>
|
|
<span class="marker-label">Max</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info disponibilità -->
|
|
<div :class="['availability-info', { 'inline-layout': !small }]">
|
|
<div class="availability-item">
|
|
<q-icon
|
|
name="arrow_downward"
|
|
size="xs"
|
|
color="negative"
|
|
/>
|
|
<span class="availability-text">
|
|
Puoi dare ancora: <strong>{{ canGive }} RIS</strong>
|
|
</span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<q-icon
|
|
name="arrow_upward"
|
|
size="xs"
|
|
color="positive"
|
|
/>
|
|
<span class="availability-text">
|
|
Puoi ricevere: <strong>{{ canReceive }} RIS</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CRISBalanceBar.ts"></script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CRISBalanceBar.scss';
|
|
</style>
|