test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 2.55 kB
CSS
.nut-badge{position:relative;display:inline-block}.nut-badge__icon{display:flex;position:absolute;background:var(--nutui-badge-background-color, #FF2C33);top:-20%;right:-20%;padding:var(--nutui-badge-icon-padding, 3px);text-align:center;min-width:16px;border:var(--nutui-badge-border, 0px solid #FF2C33);border-radius:var(--nutui-badge-border-radius, 14px);z-index:var(--nutui-badge-z-index, 1)}.nut-badge__sup{position:absolute;background:var(--nutui-badge-background-color, #FF2C33);color:var(--nutui-badge-color, var(--nsui-white-color-1, #FFFFFF));padding:var(--nutui-badge-padding, 0 4px);font-size:var(--nutui-badge-font-size, var(--nsui-font-size-2, 12px));font-weight:400;text-align:center;line-height:16px;min-width:16px;border:var(--nutui-badge-border, 0px solid #FF2C33);border-radius:var(--nutui-badge-border-radius, 14px)}.nut-badge__content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(50%))}.nut-badge__dot{min-width:auto;width:var(--nutui-badge-dot-width, 8px);height:var(--nutui-badge-dot-width, 8px);border:var(--nutui-badge-border, 0px solid #FF2C33);border-radius:var(--nutui-badge-dot-width, 8px);padding:0}.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nsui-gray-color-8, #595959));height:100%}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nsui-brand-color-guide, #2C68FF))}.nut-tabbar-item__icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item__icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-0, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 2px)}.nut-tabbar-item__icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-3, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px)}.nut-tabbar{border:0px;box-shadow:var(--nutui-tabbar-box-shadow, none);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;background:var(--nutui-gray-6, #ffffff)}.nut-tabbar__wrap{width:100%;height:var(--nutui-tabbar-height, 50px);display:flex;flex-direction:row;justify-content:center;align-items:center}.nut-tabbar:last-child{border-right:0}.nut-tabbar__fixed{position:fixed;bottom:0px;left:0px}.nut-tabbar__safe-area{display:block;width:100%;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}