Merge branch 'responsividade' of https://github.com/liftlearning/P2Pix-Front-End into responsividade

This commit is contained in:
EsioFreitas 2023-02-02 18:11:52 -03:00
commit 725f2b6e3b
3 changed files with 22 additions and 10 deletions

View File

@ -10,7 +10,7 @@ const props = defineProps({
<div class="page"> <div class="page">
<div class="text-container"> <div class="text-container">
<span <span
class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] msx-w-[20rem]" class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
> >
{{ props.title ? props.title : "Confirme em sua carteira" }} {{ props.title ? props.title : "Confirme em sua carteira" }}
</span> </span>

View File

@ -115,7 +115,7 @@ watch(networkName, (): void => {
<div class="page"> <div class="page">
<div class="text-container"> <div class="text-container">
<span <span
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] msx-w-[20rem]" class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
> >
Adquira cripto com apenas um Pix</span Adquira cripto com apenas um Pix</span
> >
@ -125,13 +125,14 @@ watch(networkName, (): void => {
> >
</div> </div>
<div class="blur-container"> <div class="blur-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div <div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
> >
<div class="flex justify-between sm:w-full items-center"> <div class="flex justify-between sm:w-full items-center">
<input <input
type="number" type="number"
class="border-none outline-none text-lg text-gray-900 w-2/6" class="border-none outline-none text-lg text-gray-900 w-3/4"
v-bind:class="{ v-bind:class="{
'font-semibold': tokenValue != undefined, 'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined, 'text-xl': tokenValue != undefined,
@ -143,8 +144,12 @@ watch(networkName, (): void => {
<div <div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1" class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
> >
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" /> <img
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span> alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">BRZ</span>
</div> </div>
</div> </div>
@ -221,7 +226,7 @@ watch(networkName, (): void => {
} }
.blur-container { .blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10; @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10;
} }
input[type="number"] { input[type="number"] {

View File

@ -56,6 +56,7 @@ const handleButtonClick = async (
> >
</div> </div>
<div class="blur-container"> <div class="blur-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div <div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
> >
@ -63,7 +64,7 @@ const handleButtonClick = async (
<input <input
type="number" type="number"
v-model="offer" v-model="offer"
class="border-none outline-none sm:text-lg text-sm text-gray-900 sm:w-fit w-1/2" class="border-none outline-none sm:text-lg text-sm text-gray-900 sm:w-fit w-3/4"
v-bind:class="{ v-bind:class="{
'font-semibold': offer != undefined, 'font-semibold': offer != undefined,
'text-xl': offer != undefined, 'text-xl': offer != undefined,
@ -75,8 +76,14 @@ const handleButtonClick = async (
<div <div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1" class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
> >
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" /> <img
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span> alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">
BRZ
</span>
</div> </div>
</div> </div>
@ -135,7 +142,7 @@ const handleButtonClick = async (
} }
.blur-container { .blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto; @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 w-auto;
} }
input[type="number"] { input[type="number"] {