@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
2 lines (1 loc) • 2.59 kB
CSS
.nut-indicator{display:flex;width:auto;flex-wrap:nowrap;align-items:center}.nut-indicator-dot{display:inline-block;vertical-align:middle;width:var(--nutui-indicator-dot-size, 4px);height:var(--nutui-indicator-dot-size, 4px);border-radius:50%;background-color:var(--nutui-indicator-dot-color, var(--nutui-black-3, rgba(0, 0, 0, .06)));margin:0 var(--nutui-indicator-dot-margin, 2px)}.nut-indicator-dot:first-child{margin-left:0}.nut-indicator-dot:last-child{margin-right:0}.nut-indicator-active{width:var(--nutui-indicator-dot-active-size, 8px);border-radius:var(--nutui-indicator-border-radius, 2px);background:var(--nutui-indicator-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%))}.nut-indicator-vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-indicator-vertical .nut-indicator-dot{margin:var(--nutui-indicator-dot-margin, 2px) 0}.nut-indicator-vertical .nut-indicator-dot:first-child{margin-top:0}.nut-indicator-vertical .nut-indicator-dot:last-child{margin-bottom:0}.nut-indicator-vertical .nut-indicator-active{width:var(--nutui-indicator-dot-size, 4px);height:var(--nutui-indicator-dot-active-size, 8px)}[dir=rtl] .nut-indicator-dot:first-child,.nut-rtl .nut-indicator-dot:first-child{margin-left:var(--nutui-indicator-dot-margin, 2px);margin-right:0}[dir=rtl] .nut-indicator-dot:last-child,.nut-rtl .nut-indicator-dot:last-child{margin-right:var(--nutui-indicator-dot-margin, 2px);margin-left:0}.nut-swiper{width:100%;height:100%;overflow:hidden;touch-action:none;position:relative}.nut-swiper-canmove-horizontal{touch-action:pan-y}.nut-swiper-canmove-vertical{touch-action:pan-x}.nut-swiper-indicator{display:flex;position:absolute;left:50%;bottom:var(--nutui-swiper-indicator-bottom, 12px);transform:translate(-50%);z-index:1}.nut-swiper-indicator-vertical{top:50%;left:12px;bottom:auto;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;transform:translateY(-50%);z-index:1}.nut-swiper-inner{width:100%;height:100%;display:flex;position:relative}.nut-swiper-inner-horizontal{transform:translate(var(--swiper-offset))}.nut-swiper-inner-vertical{transform:translateY(var(--swiper-offset));flex-direction:column}.nut-swiper-slide{width:100%;height:100%;position:relative;flex-shrink:0}.nut-swiper-item{width:100%;height:100%}[dir=rtl] .nut-swiper-indicator,.nut-rtl .nut-swiper-indicator{left:auto;right:50%;transform:translate(50%)}[dir=rtl] .nut-swiper-indicator-vertical,.nut-rtl .nut-swiper-indicator-vertical{left:auto;right:12px}