.cancel-popup {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 99999;
|
|
.cancel-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.cancel-content {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
border-radius: 60px 60px 0px 0px;
|
background: #F1F5FA;
|
padding: 48px 48px 80px 48px;
|
|
.cancel-box {
|
position: absolute;
|
top: 32px;
|
right: 32px;
|
display: flex;
|
justify-content: flex-end;
|
|
.cancel-icon {
|
width: 40px;
|
height: 40px;
|
}
|
}
|
|
.cancel-tip-box {
|
|
.cancel-tip-box-title {
|
font-size: 36px;
|
font-weight: 500;
|
line-height: normal;
|
letter-spacing: normal;
|
color: #141E27;
|
}
|
|
.cancel-tip-box-desc {
|
margin-top: 14px;
|
font-size: 28px;
|
font-weight: normal;
|
line-height: 32px;
|
letter-spacing: normal;
|
color: rgba(20, 30, 39, 0.4);
|
}
|
|
.color1 {
|
color: rgba(0, 0, 0, 0.4)
|
}
|
}
|
|
.cancel-site-box {
|
margin-top: 48px;
|
border-radius: 40px;
|
background: rgba(204, 208, 215, 0.25);
|
padding: 48px 32px 42px 32px;
|
display: flex;
|
gap: 16px;
|
height: fit-content;
|
|
.cancel-site-box-icon {
|
padding: 16px 0;
|
flex-shrink: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.cancel-site-box-icon-start {
|
width: 16px;
|
height: 16px;
|
background: #DFB369;
|
border-radius: 50%;
|
}
|
|
.cancel-site-box-icon-end {
|
width: 16px;
|
height: 16px;
|
background: #141E27;
|
border-radius: 50%;
|
}
|
|
image {
|
flex: 1;
|
width: 2px;
|
margin: 7px 0;
|
height: fit-content;
|
}
|
}
|
|
.cancel-site-box-content {
|
flex: 1;
|
font-size: 32px;
|
line-height: 48px;
|
letter-spacing: normal;
|
color: #141E27;
|
.cancel-site-box-divider {
|
margin: 34px 32px 40px 0px;
|
border-top: 1px solid rgba(204, 208, 215, 0.25);
|
}
|
}
|
}
|
|
.cancel-animation {
|
width: 100%;
|
height: 262px;
|
margin-top: 48px;
|
}
|
|
.cancel-btn-box {
|
display: flex;
|
margin-top: 48px;
|
|
.cancel-btn-cancel {
|
flex: 1;
|
border: 4px solid #141E27;
|
border-radius: 1000px;
|
font-size: 32px;
|
line-height: 104px;
|
text-align: center;
|
letter-spacing: normal;
|
color: #141E27;
|
height: 104px;
|
width: 310px;
|
}
|
|
.cancel-btn-again {
|
flex: 1;
|
text-align: center;
|
border-radius: 1000px;
|
border: 4px solid #141E27;
|
font-size: 32px;
|
line-height: 104px;
|
text-align: center;
|
color: #141E27;
|
height: 104px;
|
width: 310px;
|
}
|
.wait-btn {
|
margin-left: 22px;
|
color: #FFFFFF;
|
background: #141E27;
|
}
|
}
|
}
|
}
|
