index.wxss
2.13 KB
.specialColor{color:#009b4d}.flex{display:flex;flex-flow:row wrap}.flex-center{align-items:center;justify-content:center}.flex-column{flex-direction:column}.flex-middle{align-items:center}.font-20{font-size:22rpx}.tab-block{position:fixed;bottom:32rpx;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:999;width:calc(100% - 16rpx);padding:0 24rpx;box-sizing:border-box}.tab-block .tab-list{height:120rpx}.tab-block .tab-list-default{background:hsla(0,0%,100%,.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:28rpx;box-shadow:0rpx 8rpx 32rpx rgba(0,0,0,.12),0 0 0 1px hsla(0,0%,100%,.3) inset;border:1px solid hsla(0,0%,100%,.4);position:relative;transition:all .3s ease}.tab-block .tab-list-middle{position:relative;background:url(https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png) no-repeat 50%;background-size:cover}.tab-block .tab-indicator{position:absolute;bottom:8rpx;height:4rpx;background:linear-gradient(90deg,#43a047,#66bb6a);border-radius:2rpx;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2rpx 8rpx rgba(67,160,71,.4);z-index:1}.tab-block .list-item{flex:1;position:relative;z-index:2;transition:all .3s cubic-bezier(.4,0,.2,1)}.tab-block .list-item .item-img-box{width:40rpx;height:40rpx;margin-bottom:6rpx;position:relative;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.tab-block .list-item .item-img{width:40rpx;height:40rpx;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.tab-block .list-item:active{-webkit-transform:translateY(-2rpx) scale(.95);transform:translateY(-2rpx) scale(.95)}.tab-block .list-item:active .item-img-box{-webkit-transform:scale(1.1);transform:scale(1.1)}.tab-block .mid-button{position:relative}.tab-block .mid-button .item-img-box{width:106rpx;height:106rpx;margin-bottom:9rpx;position:absolute;z-index:1002;top:-104rpx}.tab-block .mid-button .item-img{width:106rpx;height:106rpx}.tab-block .mid-button .item-text{font-size:20rpx;position:absolute;z-index:1002;bottom:-40rpx}