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) • 3.81 kB
CSS
.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-page{display:flex;padding:var(--nutui-noticebar-box-padding, 0px 16px);height:var(--nutui-noticebar-height, 30px);font-size:var(--nutui-noticebar-font-size, 14px);font-weight:var(--nutui-noticebar-font-weight, 400);position:relative;align-items:center;background:var(--nutui-noticebar-background, #F6F8FD);color:var(--nutui-noticebar-color, var(--nutui-brand-color, #2C68FF))}.nut-noticebar .nut-noticebar-page.wrapable{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 4px 16px)}.nut-noticebar .nut-noticebar-page.wrapable .wrap{height:auto}.nut-noticebar .nut-noticebar-page.wrapable .wrap .content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-page .withicon{position:relative;padding-right:40px}.nut-noticebar .nut-noticebar-page .left-icon{height:var(--nutui-noticebar-left-icon-height, 30px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 8px 0 0);background-size:100% 100%;display:flex;align-items:center;align-self:flex-start}.nut-noticebar .nut-noticebar-page .right-icon{display:flex;align-items:center;justify-content:center;height:var(--nutui-noticebar-right-icon-height, 30px);width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 0px 0 12px);align-self:flex-start}.nut-noticebar .nut-noticebar-page .wrap{display:flex;align-items:center;flex:1;height:var(--nutui-noticebar-wrap-height, 30px);line-height:var(--nutui-noticebar-wrap-line-height, 22px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-page .content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-page .content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:var(--nutui-noticebar-box-display, flex)}.nut-noticebar .nut-noticebar-page .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-page .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-page .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 30px))}}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 30px);font-size:var(--nutui-noticebar-font-size, 14px);font-weight:var(--nutui-noticebar-font-weight, 400);overflow:hidden;padding:var(--nutui-noticebar-box-vertical-padding, 0 16px);background:var(--nutui-noticebar-background, #F6F8FD);color:var(--nutui-noticebar-color, var(--nutui-brand-color, #2C68FF))}.nut-noticebar .nut-noticebar-vertical .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 8px 0 0);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .horseLamp_list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .horseLamp_list .horseLamp_list_item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 30px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar__inner{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .go{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 0px 0 12px)}