nav-tab
Version: 
A mobile touch-swappable navigation tabs component for Vue3.x
2 lines (1 loc) • 1.14 kB
CSS
.tabs-head[data-v-53fea821]{overflow:hidden;position:relative;width:100%;border-bottom:1px solid #eee;background:#fff}.tabs-head__tab-list[data-v-53fea821]{position:relative;display:flex;flex-wrap:nowrap;min-width:100%;width:min-content}.tabs-head__active-line[data-v-53fea821]{position:absolute;bottom:3px;left:0;width:30px;height:3px;border-radius:4px}.tabs-head .tab-item[data-v-53fea821-s]{padding:10px 12px;flex:1 1 auto;font-size:14px;text-align:center;white-space:nowrap}.tabs-bottom-wrap[data-v-67349a78]{display:flex;flex-wrap:nowrap;align-items:stretch;min-height:50px;background:#fff}.tabs-bottom .tab-item[data-v-67349a78-s]{flex:1 1;font-size:12px}.tabs-bottom .tab-item__badge[data-v-67349a78-s]{top:2px;right:0}.tab-item[data-v-835892e8]{display:flex;flex-direction:column;justify-content:center;align-items:center}.tab-item__wrap[data-v-835892e8]{position:relative}.tab-item__badge[data-v-835892e8]{position:absolute;top:4px;right:-10px;padding:0 4px;min-width:8px;height:14px;font-size:9px;line-height:14px;color:#fff;background:#ff411c;white-space:nowrap;border-radius:100px;transform:translate(50%,-50%);text-align:center}