forked from M3-Academy/m3-academy-template-checkout
desenvolvimento #3
@ -100,7 +100,7 @@ export default class Footer {
|
||||
<h2 class="SLick_title">Você também pode gostar:</h2>
|
||||
<ul class="slick">
|
||||
<li class="quadrado">
|
||||
<img type="image"
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164491/azul-1.jpg?v=637781133812700000"
|
||||
alt="Sandália Azul Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -117,7 +117,7 @@ export default class Footer {
|
||||
<button class="Ver__produto">Ver Produto</button>
|
||||
</li>
|
||||
<li class="quadrado">
|
||||
<img type="image"
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164493/roxo-1.jpg?v=637781136320600000"
|
||||
alt="Sandália Roxo Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -133,7 +133,7 @@ export default class Footer {
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<li class="quadrado">
|
||||
<img type="image"
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/164495/verde-1.jpg?v=63778113885273000"
|
||||
alt="Sandália Verde Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
@ -148,7 +148,7 @@ export default class Footer {
|
||||
</div>
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<li class="quadrado">
|
||||
<li class="quadrado">
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/162369/Rectangle-64.png?v=637363001466570000"
|
||||
alt="Jaqueta Masculina Thermoball Eco" placeholder="Imagem"
|
||||
@ -163,7 +163,7 @@ export default class Footer {
|
||||
<button class="Ver__produto" >Ver Produto</button>
|
||||
</li>
|
||||
<li class="quadrado">
|
||||
<img type="image"
|
||||
<img class="imago" type="image"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/ids/165591/SANDALIA-AMARELA.png?v=63797"
|
||||
alt="Sandália Amarela Spike Amarração" placeholder="Imagem"
|
||||
disabled
|
||||
|
||||
@ -15,6 +15,7 @@ export default class Footer {
|
||||
await this.event();
|
||||
await this.TextTransfer();
|
||||
await this.onUpdate();
|
||||
await this.getPoint();
|
||||
|
||||
}
|
||||
|
||||
@ -67,6 +68,7 @@ export default class Footer {
|
||||
async event() {
|
||||
this.btnCep.addEventListener("click",this.nonExist.bind(this))
|
||||
window.addEventListener("hashchange", this.TextTransfer.bind(this));
|
||||
window.addEventListener('resize', this.getPoint.bind(this));
|
||||
window.addEventListener("hashchange", this.nonExist.bind(this));
|
||||
}
|
||||
async nonExist(){
|
||||
@ -235,6 +237,15 @@ export default class Footer {
|
||||
CONTINUAR COMPRANDO
|
||||
`
|
||||
}
|
||||
async getPoint() {
|
||||
let target = document
|
||||
.getElementsByClassName("summary-cart-template-holder")[0];
|
||||
// let targetsetatrr = target.setAttribute("style","width: 100%;")
|
||||
let targetatrr = target.getAttribute("data-bind")
|
||||
|
||||
console.log(target,
|
||||
"Co-ordinate of the element:",targetatrr);
|
||||
}
|
||||
async onUpdate() {
|
||||
const target = this.Dados_profile_payment_wrapper;
|
||||
const safeP = document.createElement("p");
|
||||
|
||||
@ -154,7 +154,13 @@
|
||||
bottom: 28px;
|
||||
position: relative;
|
||||
z-index: map-get($map:$z-index, $key: level1);
|
||||
width: 94.8%;
|
||||
width: 94.6%;
|
||||
}
|
||||
@media screen and (min-width: 768px) and (max-width: 1280px) {
|
||||
bottom: 28px;
|
||||
position: relative;
|
||||
z-index: map-get($map:$z-index, $key: level1);
|
||||
width: 94.8%
|
||||
}
|
||||
border-top: none;
|
||||
background: $color-white;
|
||||
@ -326,7 +332,8 @@
|
||||
width: max-content !important;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 84px !important;
|
||||
margin-left: 63px !important;
|
||||
width: 66px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
@ -160,6 +160,10 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include mq(xll, max) {
|
||||
}
|
||||
}
|
||||
.SLick_title{
|
||||
font-family: 'Tenor Sans', sans-serif;
|
||||
@ -176,7 +180,8 @@
|
||||
z-index: map-get($map:$z-index, $key: level5);
|
||||
position: absolute;
|
||||
@include mq(xll, max) {
|
||||
left: 29px;
|
||||
top: 49%;
|
||||
left: 6%;
|
||||
}
|
||||
}
|
||||
.Fakebutton-Next{
|
||||
@ -186,7 +191,8 @@
|
||||
z-index: map-get($map:$z-index, $key: level5);
|
||||
top: 227px;
|
||||
@include mq(xll, max) {
|
||||
right: 22px;
|
||||
top: 49%;
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
.quadrado{
|
||||
@ -199,6 +205,11 @@
|
||||
margin-right: 16px;
|
||||
background: transparent;
|
||||
flex-direction: column;
|
||||
background: pink;
|
||||
@include mq(xll, max) {
|
||||
width: 43.7% !important;
|
||||
height: 112.734% !important;
|
||||
}
|
||||
&__btn{
|
||||
button{
|
||||
display: inline-flex;
|
||||
@ -211,9 +222,10 @@
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
@include mq(xll, max) {
|
||||
width: 16px ;
|
||||
@include mq(x, max) {
|
||||
width:17.09%;
|
||||
height: 18px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@ -251,36 +263,26 @@
|
||||
border: 0;
|
||||
background-color: $color-blue-100;
|
||||
@include mq(xll, max) {
|
||||
width: 106px;
|
||||
height: 42px;
|
||||
|
||||
}
|
||||
}
|
||||
.imago{
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
@include mq(xll, max) {
|
||||
width: 112px !important;
|
||||
height: 394px !important;
|
||||
@include mq(xll, max) {
|
||||
width: 100% !important;
|
||||
height: 41.626% !important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slide{
|
||||
position: relative;
|
||||
@include mq(xll, max) {
|
||||
img{
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-list {
|
||||
// width: 1016px;
|
||||
width: 1016px;
|
||||
// left: -49px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 10.78125%;
|
||||
width: 79.375%;
|
||||
height: 466px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
// position: relative;
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
margin: 0 16px 0 16px;
|
||||
width: 92% !important;
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
.container {
|
||||
margin: 30px 0 30px 0;
|
||||
width: auto !important;
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
margin: 16px 0 16px 0;
|
||||
}
|
||||
.progress-bar{
|
||||
@ -143,7 +143,7 @@
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@include mq(desc,max){
|
||||
@include mq(xll,max){
|
||||
height: 16px;
|
||||
span{
|
||||
font-weight: 400;
|
||||
|
||||
@ -30,9 +30,9 @@ $grid-breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
x: 1024px,
|
||||
xl: 1200px,
|
||||
xll:1280px,
|
||||
desc: 1280px,
|
||||
IVK : 2500px
|
||||
) !default;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user