develop #6

Merged
Rhayllon_Daudt merged 13 commits from develop into main 2022-12-19 02:54:38 +00:00
4 changed files with 128 additions and 12 deletions
Showing only changes of commit a2665465a4 - Show all commits

View File

@ -8,20 +8,53 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); // console.log(this.item);
this.progressBarCronstructor();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { // this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar // //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise // timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe // interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); // });
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement(".progress-bar");
} }
progressBarCronstructor() { progressBarCronstructor() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul class="container-total">
<li class="li-volta-borda-1">
<div class="div-flex1">
<div class="div-itens">
<p class="p-text">Meu Carrinho</p>
<p class="p-bola"></p>
<p class="p-borda-1"></p>
</div>
</div>
</li>
<li class="li-volta-centro">
<div class="div-flex2">
<div class="div-itens">
<p class="p-text">Dados Pessoais</p>
<p class="p-bola"></p>
<p class="p-borda-meio"></p>
</div>
</div>
</li>
<li class="li-volta-borda-2">
<div class="div-flex3">
<div class="div-itens">
<p class="p-text">Pagamento</p>
<p class="p-bola"></p>
<p class="p-borda-2"></p>
</div>
</div>
</li>
</ul>
`;
}
} }
} }

View File

@ -15,9 +15,15 @@
&-title { &-title {
margin: 170px 0 32px 0; margin: 170px 0 32px 0;
font-size: 0px;
line-height: 0px;
&::after{
content: "SEU CARRINHO ESTÁ VAZIO";
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
} }
}
&-links { &-links {
.link-choose-products { .link-choose-products {

View File

@ -30,6 +30,7 @@ header{
.headerCheckout__safeBuy{ .headerCheckout__safeBuy{
display: flex; display: flex;
gap: 8px; gap: 8px;
height: 15px;
} }
body { body {

View File

@ -8,11 +8,87 @@
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.progress-bar{
height: 35px;
.container-total{
display: grid;
padding: 0;
grid-template-columns: 2fr 1fr 2fr;
width: 439px;
/* border: 1px solid rgb(59, 51, 51); */
margin: 0;
.li-volta-borda-1,
.li-volta-borda-2,
.li-volta-centro {
display: flex;
flex-direction: column;
list-style: none;
/* border: 1px solid violet; */
}
.p-text{
width: max-content;
font-weight: 400;
font-size: 12px;
line-height: 14px;
margin-bottom: 9px;
}
.p-bola{
border: 1px solid black;
border-radius: 50%;
width: 10px;
height: 10px;
background-color: white;
}
.div-itens{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div-flex1,
.div-flex2,
.div-flex3 {
display: flex;
position: relative;
width: 100%;
}
.div-flex1{
justify-content: flex-start;
}
.div-flex2{
justify-content: center;
}
.div-flex3{
justify-content: flex-end;
}
.p-borda-1{
border-top: 1.5px solid black;
position: absolute;
left: 25.6%;
bottom: 5px;
margin: 0;
width: 95.9%;
transform: translateY(-7px);
}
.p-borda-2{
border-top: 1.5px solid black;
position: absolute;
right: 22%;
bottom: 5px;
margin: 0;
width: 99.3%;
transform: translateY(-7px);
}
}
}
} }
&__logo { &__logo {
img { img {
height: 52px; height: 37.14px;
width: auto; width: auto;
} }
} }