@mijadesign/mjui-react-taro/dist/esm/NoticeBar/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-box{position:relative;display:flex;align-items:center;height:40px;padding:0 16px;font-size:15px;background:var(--nutui-color-primary-background, #E6F5FF);color:var(--nutui-color-primary, #006DFC);border-radius:var(--nutui-noticebar-border-radius, 0)}.nut-noticebar .nut-noticebar-box-wrapable,.nut-noticebar .nut-noticebar-box-center{height:auto;padding:12px}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap,.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{height:auto}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-box-center{justify-content:center}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{flex:initial}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;display:initial}.nut-noticebar .nut-noticebar-box-left-icon{display:flex;height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin-right:4px;background-size:100% 100%}.nut-noticebar .nut-noticebar-box-right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:4px}.nut-noticebar .nut-noticebar-box-right-icon .nut-icon{width:12px;height:12px}.nut-noticebar .nut-noticebar-box-wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-box .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:40px;font-size:15px;overflow:hidden;padding:0 16px;background:var(--nutui-color-primary-background, #E6F5FF);color:var(--nutui-color-primary, #006DFC)}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:4px;background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item{display:flex;align-items:center;height:40px;width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:4px}@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(40px)}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:4px}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:4px}[dir=rtl] .nut-noticebar .nut-noticebar-box .play,.nut-rtl .nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play-rtl linear both running}[dir=rtl] .nut-noticebar .nut-noticebar-box .play-infinite,.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite-rtl linear infinite both running}@keyframes nut-notice-bar-play-rtl{to{transform:translate3d(100%,0,0)}}@keyframes nut-notice-bar-play-infinite-rtl{to{transform:translate3d(100%,0,0)}}[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{margin-left:0;margin-right:4px}