.scp-tab-bar {
width: 100%;
height: calc(120rpx + env(safe-area-inset-bottom));
background-color: transparent;
}
.tabbar-container {
position: fixed;
// bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
z-index: 999;
width: 100%;
height: 120rpx;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
// box-shadow: 0px 15px 20px #000000;
.tabbar-item {
position: relative;
color: #7A7E83;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex: 1;
.scp-icon {
font-size: 50rpx;
height: 50rpx;
line-height: 50rpx;
&.shequ {
font-size: 44rpx;
}
}
&.active {
color: #269C78;
}
.large {
width: 130rpx;
height: 130rpx;
border-radius: 130rpx;
position: absolute;
background: #f6f6f6;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
// box-shadow: 0px -4px 10px -8px #000000;
.icon-container {
width: 114rpx;
height: 114rpx;
border-radius: 114rpx;
background-color: $-color-active-press;
display: flex;
align-items: center;
justify-content: center;
}
.scp-icon {
font-size: 1.4rem;
height: 1.4rem;
line-height: 1.4rem;
}
}
.tabbar-text {
margin-top: 6rpx;
font-size: 30rpx;
}
.tabbar-badge {
color: $-color-font;
position: absolute;
right: 10rpx;
top: 10rpx;
background: red;
text-align: center;
font-size: 0.6rem;
&.large-badge {
// top: 40rpx;
}
&.text {
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
border-radius: 35rpx;
}
&.dot {
width: 20rpx;
height: 20rpx;
line-height: 20rpx;
border-radius: 20rpx;
}
}
} }
.image-icon {
width: 24px;
height: 24px;
image {
width: 100%;
height: 100%;
}
}
.safa-area {
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #f6f6f6;
}
