estilo visual computado

souzaolmo · Aug 7, 2023 · d0971d3 · d0971d3
1 parent 33146ac
commit d0971d3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/comuns/IndicadorVaga.vue b/src/components/comuns/IndicadorVaga.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-100 p-5 rounded-3 border bg-dark text-white">
+    <div :class="estilo">
         <p>{{ titulo }}</p>
         <h2>{{indicador}}</h2>
     </div>
@@ -8,6 +8,11 @@
 <script>
 export default {
     name:'IndicadorVaga',
-    props: ['titulo', 'indicador']
+    props: ['titulo', 'indicador', 'bg', 'color'],
+    computed: {
+        estilo() {
+            return `h-100 p-5 rounded-3 border ${this.bg} ${this.color}`
+        }
+    }
 }
 </script>
diff --git a/src/components/views/HomePage.vue b/src/components/views/HomePage.vue
@@ -8,13 +8,14 @@
 
           <div class="row mt-5">
             <div class="col-4">
-              <IndicadorVaga titulo="Vagas abertas" indicador="100"></IndicadorVaga>
+              <IndicadorVaga titulo="Vagas abertas" indicador="100" bg="bg-dark" color="text-white"></IndicadorVaga>
             </div>
             <div class="col-4">
-              <IndicadorVaga titulo="Profissionais Cadastrados" indicador="225"></IndicadorVaga>
+              <IndicadorVaga titulo="Profissionais Cadastrados" indicador="225" bg="bg-dark" color="text-white"></IndicadorVaga>
             </div>
             <div class="col-4">
-              <IndicadorVaga titulo="Visitantes online" indicador="25"></IndicadorVaga>
+              <IndicadorVaga titulo="Visitantes online" :indicador="usuariosOnline" bg="bg-ligth" color="text-dark"></IndicadorVaga>
+
             </div>
           </div>
     </div>
@@ -31,6 +32,17 @@
       PesquisarVaga,
       IndicadorVaga
     },
+    data: () => ({
+      usuariosOnline: 0
+    }),
+    methods: {
+      getUsuariosOnline() {
+        this.usuariosOnline = Math.floor(Math.random() *101) // entre 0 e 100
+      }
+    },
+    created() {
+      setInterval(this.getUsuariosOnline, 1000) // 1 segundo
+    }
   }
   </script>