У меня есть три блока , как сделать так , чтобы можно было переключаться между ними, первый блок , в котором есть кнопка продать, при нажатии на нее , будет отображаться следующий блок: "Вы уверены что хотите продать?" и затем две кнопки: "Да" и "Нет" , если да , то перейдет к третьему блоку, если нет , то к первому ?
const app = new Vue({
el: '#app',
data() {
return {
}
},
methods: {
},
});
body {
background: blue;
}
.sell__right-up {
width: 361px;
height: 40px;
background: rgba(255, 255, 255, 0.12);
border-radius: 25px;
display: flex;
}
.sell__right-up-block {
width: 18.7963vh;
height: 5vh;
margin-top: 1.11111vh;
margin-left: 1.66667vh;
}
.sell__right-up-title {
font-style: normal;
font-weight: 600;
font-size: 1.85185vh;
line-height: 1.66667vh;
display: flex;
align-items: center;
letter-spacing: -0.06em;
color: #FFFFFF;
}
.sell__right-up-subtitle {
font-style: normal;
font-weight: 600;
font-size: 2.96296vh;
line-height: 3.61111vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
letter-spacing: -0.07em;
color: #FFFFFF;
}
.sell__right-up-btn {
width: 9.25926vh;
height: 4.44444vh;
background: rgba(255, 255, 255, 0.12);
border-radius: 1.48148vh;
margin-top: 1.38889vh;
margin-left: 0.92593vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 1.66667vh;
line-height: 1.48148vh;
letter-spacing: -0.04em;
color: #FFFFFF;
}
.sell__right-up-btn:hover {
-webkit-transition: .7s;
transition: .7s;
background: linear-gradient(135deg, rgba(189, 255, 0, 0.5) 0%, rgba(3, 149, 0, 0.5) 100%);
}
.sell__right-offer {
width: 31.85185vh;
height: 7.22222vh;
background: rgba(255, 255, 255, 0.12);
border-radius: 2.22222vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
.sell__right-title-offer {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 2.22222vh;
line-height: 2.03704vh;
letter-spacing: -0.04em;
color: #FFFFFF;
}
.sell__right-offer-btn {
margin-top: 0.74074vh;
}
.sell__right-offer-btone {
width: 13.88889vh;
height: 2.77778vh;
background: rgba(255, 255, 255, 0.15);
border-radius: 2.31481vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 1.66667vh;
line-height: 1.48148vh;
letter-spacing: -0.04em;
color: #FFFFFF;
margin-right: 0.92593vh;
}
.sell__right-offer-btone:hover {
background: rgba(255, 255, 255, 0.3);
}
.sell__right-offer-bttwo {
width: 6.48148vh;
height: 2.77778vh;
background: rgba(255, 255, 255, 0.15);
border-radius: 2.31481vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 1.66667vh;
line-height: 1.48148vh;
letter-spacing: -0.04em;
color: #FFFFFF;
}
.sell__right-offer-bttwo:hover {
background: rgba(255, 255, 255, 0.3);
}
.sell__right-sold {
width: 31.85185vh;
height: 7.22222vh;
background: rgba(255, 255, 255, 0.12);
border-radius: 2.22222vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
.sell__right-title-sold {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 2.59259vh;
line-height: 2.31481vh;
letter-spacing: -0.04em;
color: #FFFFFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="sell__right-up" v-if="true">
<div class="sell__right-up-block">
<div class="sell__right-up-title">Продать за:</div>
<div class="sell__right-up-subtitle">1000</div>
</div>
<button class="sell__right-up-btn">Продать</button>
</div>
<div class="sell__right-offer" v-if="true">
<div class="sell__right-title-offer">Вы уверены?</div>
<div class="sell__right-offer-btn">
<button class="sell__right-offer-btone">Да</button>
<button class="sell__right-offer-bttwo">Нет</button>
</div>
</div>
<div class="sell__right-sold" v-if="true">
<div class="sell__right-title-sold">Продано</div> </div>
</div>