@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:var(--nutui-noticebar-height, 40px);padding:var(--nutui-noticebar-box-padding, 0 var(--nutui-spacing-3, 16px));font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 15px));background:var(--nutui-noticebar-background, var(--nutui-color-primary-background, #e6f0ff));color:var(--nutui-noticebar-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:var(--nutui-noticebar-wrapable-padding, var(--nutui-spacing-2, 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, 20px);min-width:var(--nutui-noticebar-left-icon-width, 20px);margin-right:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px));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, 20px);margin-left:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px))}.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, 22px);line-height:var(--nutui-noticebar-line-height, 22px);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:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 15px));overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 var(--nutui-spacing-3, 16px));background:var(--nutui-noticebar-background, var(--nutui-color-primary-background, #e6f0ff));color:var(--nutui-noticebar-color, var(--nutui-color-primary, #006dfc))}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 20px);min-width:var(--nutui-noticebar-left-icon-width, 20px);margin:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px));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:var(--nutui-noticebar-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, 20px);margin-left:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px))}@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, 40px))}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px))}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px))}[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:var(--nutui-noticebar-icon-gap, var(--nutui-spacing-1, 8px))}.mj-noticeBar .iconfont{font-size:var(--nutui-noticebar-left-icon-width, 20px)}.mj-noticeBar .nut-noticebar-box-left-icon{line-height:var(--nutui-noticebar-left-icon-width, 20px);font-size:var(--nutui-noticebar-left-icon-width, 20px);align-items:center}.mj-noticeBar .nut-noticebar-box{font-weight:var(--nutui-font-weight-bold, 700)}.mj-noticeBar-primary .nut-noticebar-box{background:var(--nutui-noticebar-background, var(--nutui-color-primary-background, #e6f0ff));color:var(--nutui-noticebar-color, var(--nutui-color-primary, #006dfc))}.mj-noticeBar-warning .nut-noticebar-box{background:var(--nutui-noticebar-warning-background, var(--nutui-color-warning-background, #fff2e6));color:var(--nutui-noticebar-warning-color, var(--nutui-color-warning, #ff850c))}.mj-noticeBar-danger .nut-noticebar-box{background:var(--nutui-noticebar-error-background, var(--nutui-color-danger-background, var(--nutui-color-error-background, #fff2f0)));color:var(--nutui-noticebar-error-color, var(--nutui-color-danger, var(--nutui-color-error, #ff4949)))}.mj-noticeBar-success .nut-noticebar-box{background:var(--nutui-noticebar-success-background, var(--nutui-color-success-background, #e5f6ec));color:var(--nutui-noticebar-success-color, var(--nutui-color-success, #02ad4a))}