hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve search component css

Browse Source
This commit is contained in:
RcleydsonR 2022-11-24 15:00:39 -03:00
parent 0b1a59b333
commit 3e177cdc63
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/polygon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM14.7232 9.76501C15.0157 9.6188 15.3446 9.6188 15.6005 9.76501L18.5614 11.483C18.8538 11.6658 19 11.9582 19 12.2507V15.7232C19 16.0522 18.8172 16.3446 18.5614 16.4909L15.6005 18.2089C15.3081 18.3551 14.9791 18.3551 14.7232 18.2089L11.7624 16.4909C11.47 16.3081 11.3238 16.0157 11.3238 15.7232V14.517L12.7128 13.7128V14.8825C12.7128 15.2115 12.8956 15.5039 13.1514 15.6501L14.7232 16.564C15.0157 16.7102 15.3446 16.7102 15.6005 16.564L17.1358 15.6501C17.4282 15.4674 17.5744 15.1749 17.5744 14.8825V13.0548C17.5744 12.7258 17.3916 12.4334 17.1358 12.2872L15.564 11.3734C15.2715 11.2272 14.9426 11.2272 14.6867 11.3734L12.6762 12.5431L11.2872 13.3473L9.27676 14.517C8.98433 14.6632 8.65535 14.6632 8.39948 14.517L5.43864 12.799C5.14621 12.6162 5 12.3238 5 12.0313V8.5953C5 8.30287 5.14621 8.01044 5.43864 7.86423L8.43603 6.10966C8.72846 5.96345 9.05744 5.96345 9.31332 6.10966L12.2376 7.82768C12.53 8.01044 12.6762 8.30287 12.6762 8.5953V9.83812L11.2872 10.6423V9.43603C11.2872 9.10705 11.1044 8.81462 10.8486 8.66841L9.27676 7.71802C8.98433 7.5718 8.65535 7.5718 8.39948 7.71802L6.82768 8.63185C6.53525 8.81462 6.38903 9.10705 6.38903 9.39948V11.2272C6.38903 11.5561 6.5718 11.8486 6.82768 11.9948L8.39948 12.9452C8.69191 13.0914 9.02089 13.0914 9.27676 12.9452L11.2872 11.7389L12.6762 10.9713L14.7232 9.76501Z" fill="#6366F1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

40
src/views/HomeView.vue
View File

@ -1,8 +1,11 @@
<script setup lang="ts">
import { ref } from "vue";
import CustomButton from "../components/CustomButton.vue";
const searchClick = () => {
console.log("oferta selecionada");
console.log(value);
};
const value = ref<Number>()
</script>
<template>
@ -20,27 +23,29 @@ const searchClick = () => {
class="flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-1/3 mt-10"
>
<div
class="flex justify-between w-full bg-white px-10 py-5 rounded-lg border-y-10 relative"
class="flex justify-between w-full bg-white px-10 py-5 rounded-lg border-y-10 relative gap-1"
>
<p class="text-xl font-normal text-gray-900 mr-1" v-if="value != undefined && value.toString() != ''">R$</p>
<input
type="number"
class="border-none outline-none text-lg"
class="border-none outline-none text-lg text-gray-900 w-full"
v-bind:class="{ 'font-semibold': value != undefined, 'text-xl': value != undefined}"
placeholder="Digite o valor que deseja pagar"
v-model="value"
/>
<p class="text-lg font-bold">R$</p>
<p class="text-xl font-normal text-gray-900" v-if="value == undefined || value.toString() == ''">R$</p>
</div>
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
<div
class="bg-emerald-400 px-4 py-3 rounded-lg absolute bottom-position"
class="bg-emerald-400 px-3 py-2.5 rounded-lg absolute bottom-position w-8 h-8"
>
<img alt="Ethereum image" src="@/assets/arrow.svg" />
<img alt="Ethereum image" src="@/assets/arrow.svg"/>
</div>
<div class="flex justify-between w-full items-center">
<p class="text-3xl">0</p>
<p class="text-3xl text-gray-900">0</p>
<div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
<img alt="Ethereum image" class="mr-3" src="@/assets/brz.svg" />
<p class="text-gray-900 text-lg">BRZ</p>
@ -48,11 +53,17 @@ const searchClick = () => {
</div>
<div class="custom-divide py-2"></div>
<p class="text-gray-500 text-lg pt-2">~ ETH 0,00 (+0,121%)</p>
<div class="flex justify-between pt-2">
<p class="text-gray-500 font-normal text-sm w-fit">~ ETH 0,00 (+0,121%)</p>
<div class="flex gap-2">
<img alt="Polygon image" src="@/assets/polygon.svg" width="24px" height="24px"/>
<img alt="Ethereum image" src="@/assets/ethereum.svg" width="24px" height="24px"/>
</div>
</div>
</div>
<CustomButton
:text="'Selecionar Oferta'"
:is-disabled="true"
:is-disabled="false"
@clicked="searchClick()"
/>
</div>
@ -81,4 +92,13 @@ const searchClick = () => {
.text {
@apply text-gray-800 text-center;
}
input[type='number'] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>