min-project/component/wechatAlertsPop/wechatAlertsPop.wxss
2024-12-12 12:14:09 +08:00

118 lines
2.4 KiB
Plaintext

/* template/wechatAlertsPop/wechatAlertsPop.wxss */
.capsulePop {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0;
z-index: 1100;
display: flex;
justify-content: center;
align-items: center;
}
.capsulePop .capsulePop-box {
position: relative;
width: 487.4rpx;
height: 726rpx;
display: flex;
flex-direction: column;
}
.capsulePop .capsulePop-box .capsulePop-content {
width: 487.4rpx;
height: 649.6rpx;
position: relative;
}
.capsulePop .capsulePop-box .capsulePop-img {
width: 487.4rpx;
height: 649.6rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.capsulePop .capsulePop-box .capsulePop-btn {
width: 361rpx;
height: 73rpx;
border-radius: 37rpx;
background: linear-gradient(90deg, #4FE3C1, #61FEDA);
color: #fff;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 65rpx;
left: 50%;
transform: translate(-50%);
}
.capsulePop .capsulePop-box .capsulePop-hint {
width: 300rpx;
height: 68rpx;
font-size: 26rpx;
color: #555555;
line-height: 42rpx;
position: absolute;
bottom: 180rpx;
left: 50%;
transform: translate(-50%);
text-align: center;
}
.capsulePop .capsulePop-box .capsulePop-title {
color: #323232;
font-size: 36rpx;
font-weight: 600;
width: 266rpx;
position: absolute;
bottom: 280rpx;
left: 50%;
transform: translate(-50%);
text-align: center;
}
.capsulePop .capsulePop-box .capsulePop-close {
width: 44rpx;
height: 44rpx;
align-self: flex-end;
margin-right: -38rpx;
}
.capsulePop .capsulePop-box .capsulePop-operation {
color: #fff;
font-size: 31rpx;
line-height: 42rpx;
display: flex;
align-items: center;
align-self: center;
margin-top: 25rpx;
}
.capsulePop .capsulePop-box .capsulePop-operation .capsulePop-circle {
width: 28rpx;
height: 28rpx;
margin-left: 14rpx;
border: 3rpx solid #fff;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.capsulePop .capsulePop-box .capsulePop-operation .capsulePop-circle-circle {
width: 10rpx;
height: 10rpx;
background-color: #fff;
border-radius: 50%;
}
.offer {
width: 100vw;
}