Files
bodyWeight/miniprogram/components/userInfoConfirmModal/userInfoConfirmModal.less
T

140 lines
2.1 KiB
Plaintext

.confirm-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
&.anim-visible {
opacity: 1;
}
}
.modal-content {
position: relative;
width: 660rpx;
background-color: #ffffff;
border-radius: 24rpx;
overflow: hidden;
transform: scale(0.9);
opacity: 0;
transition: all 0.3s ease;
&.anim-visible {
transform: scale(1);
opacity: 1;
}
}
.modal-header {
padding-top: 50rpx;
width: 100%;
margin-bottom: 30rpx;
.modal-title {
width: 100%;
height: 36rpx;
font-weight: bolder;
font-size: 36rpx;
color: #252535;
line-height: 36rpx;
text-align: center;
margin-bottom: 24rpx;
}
.modal-sub-title {
width: 100%;
height: 32rpx;
font-weight: 400;
font-size: 32rpx;
color: #1385FA;
line-height: 32rpx;
text-align: center;
}
}
.modal-body {
width: 100%;
box-sizing: border-box;
padding: 0 30rpx;
margin-bottom: 30rpx;
.modal-body-box {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
border-radius: 16rpx;
background-color: #F6F6F6;
.info-row {
width: 100%;
height: 80rpx;
display: flex;
padding: 10rpx 0;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-bottom: 1px solid #EAECF1;
.info-label {
color: #77849E;
height: 80rpx;
font-size: 28rpx;
line-height: 80rpx;
}
.info-value {
color: #252535;
height: 80rpx;
font-weight: 500;
font-size: 28rpx;
line-height: 80rpx;
}
&:last-of-type {
border-bottom: none;
}
}
}
}
.modal-footer {
width: 100%;
height: 110rpx;
display: flex;
border-top: 1rpx solid #EAECF1;
.modal-btn {
flex: 1;
height: 110rpx;
line-height: 110rpx;
font-size: 36rpx;
text-align: center;
}
.modal-btn-cancel {
color: #77849E;
border-right: 1rpx solid #EAECF1;
}
.modal-btn-confirm {
color: #1385FA;
font-weight: 500;
}
}