add default page layout with header
Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>
This commit is contained in:
RcleydsonR
@@ -1,30 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import ethers from "../utils/ethers";
|
||||
|
||||
const connectMetaMask = () => {
|
||||
ethers.connectProvider();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="about">
|
||||
<button
|
||||
class="rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500 mt-4"
|
||||
@click="connectMetaMask()"
|
||||
>
|
||||
Conectar metaMask
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import TheWelcome from "../components/TheWelcome.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -49,145 +49,150 @@ const submit = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
pixModel QR Code
|
||||
</h2>
|
||||
<form>
|
||||
<div class="grid gap-4 grid-cols-1 p-2">
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="pixKey" class="form-label">Chave PIX</label>
|
||||
<span v-if="errors['pixRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
<div class="page">
|
||||
<div class="form-container">
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
pixModel QR Code
|
||||
</h2>
|
||||
<form>
|
||||
<div class="grid gap-4 grid-cols-1 p-2">
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="pixKey" class="form-label">Chave PIX</label>
|
||||
<span v-if="errors['pixRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="pixKey"
|
||||
id="pixKey"
|
||||
class="form-input"
|
||||
v-model="pixModel.pixKey"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="name" class="form-label">Nome do beneficiário</label>
|
||||
<span v-if="errors['nameRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="form-input"
|
||||
v-model="pixModel.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="city" class="form-label">Cidade do beneficiário</label>
|
||||
<span v-if="errors['cityRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
class="form-input"
|
||||
v-model="pixModel.city"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="value" class="form-label"
|
||||
>Valor de transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
name="value"
|
||||
id="value"
|
||||
class="form-input"
|
||||
v-model="pixModel.value"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="pixKey"
|
||||
id="pixKey"
|
||||
class="form-input"
|
||||
v-model="pixModel.pixKey"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="name" class="form-label">Nome do beneficiário</label>
|
||||
<span v-if="errors['nameRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
<div class="col-div">
|
||||
<label for="code" class="form-label"
|
||||
>Código da transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
id="code"
|
||||
class="form-input"
|
||||
v-model="pixModel.transactionId"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="form-input"
|
||||
v-model="pixModel.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="city" class="form-label">Cidade do beneficiário</label>
|
||||
<span v-if="errors['cityRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
<div class="col-div">
|
||||
<label for="message" class="form-label">Mensagem (Opcional)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
id="message"
|
||||
class="form-input"
|
||||
v-model="pixModel.message"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
class="form-input"
|
||||
v-model="pixModel.city"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="value" class="form-label"
|
||||
>Valor de transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
name="value"
|
||||
id="value"
|
||||
class="form-input"
|
||||
v-model="pixModel.value"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="code" class="form-label"
|
||||
>Código da transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
id="code"
|
||||
class="form-input"
|
||||
v-model="pixModel.transactionId"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="message" class="form-label">Mensagem (Opcional)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
id="message"
|
||||
class="form-input"
|
||||
v-model="pixModel.message"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" class="button" @click="submit">
|
||||
Gerar QR code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="relative mx-auto w-auto max-w-2xl">
|
||||
<div
|
||||
class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
|
||||
>
|
||||
<img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
|
||||
<div>
|
||||
<span class="text-black font-semibold mr-1">Chave pix:</span>
|
||||
<span class="text-gray-700">{{ pixModel.pixKey }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.name.trim() != ''">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Nome do Beneficiário:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.name }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.value != 0">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Valor da transferência:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.value }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-auto break-all justify-center items-center"
|
||||
>
|
||||
<span class="text-black font-semibold mb-2">Código QR Code:</span>
|
||||
<span class="text-gray-700">{{ qrCodePayload }}</span>
|
||||
</div>
|
||||
<button type="button" class="button" @click="toggleModal = false">
|
||||
Fechar
|
||||
<button type="button" class="button" @click="submit">
|
||||
Gerar QR code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="relative mx-auto w-auto max-w-2xl">
|
||||
<div
|
||||
class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
|
||||
>
|
||||
<img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
|
||||
<div>
|
||||
<span class="text-black font-semibold mr-1">Chave pix:</span>
|
||||
<span class="text-gray-700">{{ pixModel.pixKey }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.name.trim() != ''">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Nome do Beneficiário:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.name }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.value != 0">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Valor da transferência:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.value }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-auto break-all justify-center items-center"
|
||||
>
|
||||
<span class="text-black font-semibold mb-2">Código QR Code:</span>
|
||||
<span class="text-gray-700">{{ qrCodePayload }}</span>
|
||||
</div>
|
||||
<button type="button" class="button" @click="toggleModal = false">
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed z-40 inset-0 opacity-25 bg-black"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed z-40 inset-0 opacity-25 bg-black"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
.page {
|
||||
@apply mt-8 w-full flex justify-center self-center;
|
||||
}
|
||||
|
||||
.form-container{
|
||||
background-color: var(--color-background-indigo);
|
||||
@apply rounded-md p-2 mt-8;
|
||||
@apply rounded-md w-full p-2 w-1/2
|
||||
}
|
||||
|
||||
.col-div {
|
||||
|
||||
Reference in New Issue
Block a user