- Nuova Home Page RISO Moderna! Passo 1 - la struttura

src/components/CRISBalanceBar/CRISBalanceBar.vue

@@ -0,0 +1,87 @@
+<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]">
+        {{ 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">
+      <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>