/* pages/discover/discover.wxss */ .discover_container { padding-top: 88rpx; padding-bottom: 6rpx; } .discover_tab { position: fixed; top: 0; width: 100%; z-index: 999; display: -webkit-box; display: -webkit-flex; display: flex; background-color: #fff; height: 88rpx; } .discover_tab_item { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; height: 100%; box-sizing: border-box; background: -webkit-linear-gradient(top, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat; background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat; background-size: 100% 1rpx; font-size: 28rpx; text-align: center; line-height: 88rpx; color: #666; } .discover_tab_selected { color: #eb4e4f; border-bottom: 3rpx solid #eb4e4f; } .discover_tab_ink-bar { position: absolute; height: 4rpx; bottom: 0; background-color: #eb4e4f; text-align: center; } .ink-bar-transition-backward { left: 0; right: 50%; -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1); transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1); } .ink-bar-transition-forward { left: 50%; right: 0%; -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s; transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s; } .hide { display: none; }