antonioandre/nuxt-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: atualiza todo design interno da aplicacao

Browse Source
This commit is contained in:
Antonio Andre
2026-05-28 18:23:00 -05:00
parent 6cc39725fa
commit dfe8eb3a80
11 changed files with 978 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/pages/(protected)/gift-card/index.vue
View File

@@ -19,11 +19,6 @@
Crie cartões, consulte saldo por código e realize resgates com segurança.
</p>
</div>
<NuxtLink to="/home"
class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
Voltar
</NuxtLink>
</header>
<div class="grid gap-8 lg:grid-cols-2">
@@ -76,7 +71,7 @@
Código do cartão
</label>
<input id="code" v-model="operationForm.code" type="text" required maxlength="10"
class="h-11 rounded-xl border border-[#e7e5e4] px-4 uppercase text-[15px] text-[#0c0a09] outline-none transition focus:border-[#0c0a09]"
class="h-11 rounded-xl border border-[#e7e5e4] px-4 text-[15px] uppercase text-[#0c0a09] outline-none transition focus:border-[#0c0a09]"
placeholder="AB12CD34EF" />
</div>
<button type="submit" :disabled="isConsulting"
@@ -105,7 +100,9 @@
<div v-if="selectedCard"
class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-4 text-[15px] leading-[1.47] text-[#292524]">
<p class="m-0"><strong>Código:</strong> {{ selectedCard.code }}</p>
<p class="m-0 mt-2"><strong>Saldo:</strong> {{ formatCurrency(selectedCard.balance) }}</p>
<p class="m-0 mt-2">
<strong>Saldo:</strong> {{ formatCurrency(selectedCard.balance) }}
</p>
<p class="m-0 mt-2">
<strong>Status:</strong>
{{ selectedCard.is_active ? 'Ativo' : 'Desativado' }}
@@ -147,13 +144,19 @@
<li v-for="card in giftCards" :key="card.id"
class="flex flex-col gap-3 bg-white p-4 sm:flex-row sm:items-center sm:justify-between">
<div class="grid gap-1">
<span class="font-mono text-base font-medium tracking-wider text-[#0c0a09]">{{ card.code }}</span>
<span class="font-mono text-base font-medium tracking-wider text-[#0c0a09]">{{
card.code
}}</span>
<span class="text-xs text-[#777169]">Criado em {{ formatDate(card.created_at) }}</span>
</div>
<div class="flex flex-wrap items-center gap-3">
<span class="text-[15px] font-medium text-[#292524]">{{ formatCurrency(card.balance) }}</span>
<span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold uppercase"
:class="card.is_active ? 'bg-[rgba(167,229,211,0.62)] text-[#0c0a09]' : 'bg-[#f0efed] text-[#777169]'">
<span class="text-[15px] font-medium text-[#292524]">{{
formatCurrency(card.balance)
}}</span>
<span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold uppercase" :class="card.is_active
? 'bg-[rgba(167,229,211,0.62)] text-[#0c0a09]'
: 'bg-[#f0efed] text-[#777169]'
">
{{ card.is_active ? 'Ativo' : 'Inativo' }}
</span>
<button type="button" class="text-[15px] font-medium text-[#0c0a09] underline-offset-2 hover:underline"
@@ -168,8 +171,8 @@
<div class="flex flex-col items-center gap-2 text-center text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
<p>
Microsserviço consumido: <span
class="font-medium text-[#4e4e4e]">https://giftcardapipedro-production.up.railway.app/api</span>
Microsserviço consumido:
<span class="font-medium text-[#4e4e4e]">https://giftcardapipedro-production.up.railway.app/api</span>
&nbsp;·&nbsp; Feito por Pedro Henrique e João Vitor
</p>
<span class="inline-flex items-center gap-1.5">
@@ -183,7 +186,8 @@
<script setup>
definePageMeta({
middleware: 'auth'
middleware: 'auth',
layout: 'protected'
})
const GIFT_CARD_API_BASE_URL = 'https://giftcardapipedro-production.up.railway.app/api'