1 |
- .l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;height:100%}.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}.l-tabs .l-tabs-header .l-tabs-item{font-size:28rpx;text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.l-tabs .l-tabs-header .l-tabs-equal-width{flex:1}.l-tabs .l-tabs-header .l-tabs-unequal-width{padding:0 20rpx}.l-tabs .l-tabs-header .l-icon-active,.l-tabs .l-tabs-header .l-tabs-active{color:#333;font-size:28rpx}.l-tabs .l-tabs-header .l-icon-inactive,.l-tabs .l-tabs-header .l-tabs-inactive{font-size:28rpx;color:#bbb}.l-tabs .l-tabs-header .l-tabsitems-row{flex-direction:row}.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-inactive{margin-right:10rpx}.l-tabs .l-tabs-header .l-tabsitems-row-reverse{flex-direction:row-reverse}.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive{margin-left:10rpx}.l-placement-bottom .l-tabs-header,.l-placement-top .l-tabs-header{height:80rpx}.l-placement-bottom .l-tabs-header .l-tabs-item,.l-placement-top .l-tabs-header .l-tabs-item{min-height:100%}.l-placement-left,.l-placement-right{flex-direction:row}.l-placement-left .l-tabs-header,.l-placement-right .l-tabs-header{flex-direction:column;width:160rpx}.l-placement-left .l-tabs-header>.l-tabs-item,.l-placement-right .l-tabs-header>.l-tabs-item{width:100%;height:80rpx;background:#f6f8fa}.l-placement-left .l-tabs-header>.l-tabs-active,.l-placement-right .l-tabs-header>.l-tabs-active{background:#fff}.l-placement-right{flex-direction:row-reverse}.l-placement-bottom{flex-direction:column-reverse}.l-tabpanel-content{display:flex}.l-placement-left .l-tabpanel-content,.l-placement-right .l-tabpanel-content{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;will-change:transform;transition:transform .3s cubic-bezier(.645,.045,.355,1)}.l-placement-bottom .l-tabpanel-content,.l-placement-top .l-tabpanel-content{width:100%;min-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.l-aminmated.l-placement-bottom .l-tabpanel-content,.l-aminmated.l-placement-top .l-tabpanel-content{will-change:margin-left;-webkit-transition:margin-left .3s cubic-bezier(.645,.045,.355,1);transition:margin-left .3s cubic-bezier(.645,.045,.355,1)}.l-tabpanel{width:100%;height:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;opacity:1;text-overflow:ellipsis}.l-tabpanel-inactive{opacity:0;height:0;padding:0!important;pointer-events:none}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header{-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item{overflow:visible}.l-tabs-vertical .l-tabsscroll{width:160rpx}.l-tabs-vertical .l-tabs-header{height:100%;min-height:80rpx;-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-vertical .l-tabs-header .l-tabs-item{overflow:visible;min-height:80rpx}.l-tabs-item{position:relative}.l-tab-line{position:absolute;bottom:0;left:0;background:#000}.l-tabs-horizontal .l-tab-line{height:4rpx;width:0;left:100%;right:0;margin:0 auto}.l-tabs-horizontal .l-line-aminmated{transition:.2s all linear}.l-tabs-horizontal .l-tabs-active.l-tabs-item~.l-tabs-item .l-tab-line{left:0}.l-tabs-horizontal .l-tabs-active .l-tab-line{width:100%;left:0}.l-tabs-horizontal .l-tabs-active .l-line-aminmated{transition-delay:.1s}.l-placement-top .l-tab-line{bottom:0}.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}.l-placement-bottom .l-tab-line{top:0}.l-placement-bottom .l-tabs-header-line{border-top:1px solid #f3f3f3}.l-tabs-vertical .l-tab-line{width:6rpx;height:0;border-radius:0 6rpx 6rpx 0;top:0;margin:auto 0}.l-tabs-vertical .l-line-aminmated{transition:.2s all linear}.l-tabs-vertical .l-tabs-active .l-tab-line{height:40rpx}.l-tabs-vertical .l-tabs-active .l-line-aminmated{transition-delay:.1s}.l-tabs-vertical .l-tabs-active.l-tabs-item~.l-tabs-item .l-tab-line{height:0;top:0}.l-placement-left .l-tab-line{right:auto}.l-placement-left .l-tabs-header-line{border-left:1px solid #f3f3f3}.l-placement-right .l-tab-line{right:0;left:auto}.l-placement-right .l-tabs-header-line{border-right:1px solid #f3f3f3}.l-tab-image{width:100rpx;height:100rpx}.l-tab-image-placement-top{flex-direction:column}.l-tab-image-placement-bottom{flex-direction:column-reverse}.l-tab-image-placement-left{flex-direction:row}.l-tab-image-placement-right{flex-direction:row-reverse}.l-tabs-header .badge-view{top:-20rpx}
|