101 lines
1.6 KiB
Plaintext
101 lines
1.6 KiB
Plaintext
.tab-bar {
|
|
position: relative;
|
|
height: 110rpx;
|
|
width: 750rpx;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS */
|
|
}
|
|
|
|
.tab-bar-bottom {
|
|
position: fixed !important;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.tab-bar-border {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 1rpx;
|
|
background: #f6f6f6;
|
|
box-shadow: 0 -1px 3px 1px #f6f6f6;
|
|
}
|
|
|
|
.tab-bar-item {
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.item-circle{
|
|
width:120rpx;
|
|
height:60rpx;
|
|
background-color:#fff;
|
|
border-radius:200rpx 200rpx 0 0;
|
|
/* border:1px solid #ccc; */
|
|
border-bottom:none;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: -40rpx;
|
|
/* border: 1px solid #ccc;
|
|
border-bottom:none; */
|
|
box-shadow: 0px -1px 1px 0px #f6f6f6;
|
|
}
|
|
|
|
|
|
.tab-bar-item-image {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.tab-bar-item view {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.reddot{
|
|
height: 20rpx;
|
|
width: 20rpx;
|
|
background: red;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 15rpx;
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
.badge{
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
padding: 0rpx 6rpx;
|
|
background: red;
|
|
border-radius: 16rpx;
|
|
position: absolute;
|
|
font-size: 18rpx;
|
|
color: #fff;
|
|
top: 10rpx;
|
|
margin-left: 25rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.center-circle{
|
|
/* background: #ccc; */
|
|
height: 100rpx;
|
|
width: 100rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -30rpx;
|
|
}
|
|
|
|
|