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.71 kB
CSS
.nut-swiper-item{height:100%}.nut-swiper{position:relative;z-index:1;display:flex;transition-property:transform;box-sizing:content-box;overflow:hidden}.nut-swiper__inner{display:flex;height:100%}.nut-swiper__vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-swiper__indicator{display:flex;position:absolute;left:50%;bottom:var(--nutui-swiper-indicator-bottom, 8px);transform:translate(-50%);z-index:1}.nut-swiper__indicator-vertical{top:50%;bottom:auto;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;transform:translateY(-50%)}.nut-swiper__indicator-vertical--left{left:var(--nutui-swiper-indicator-vertical-gap, 8px)}.nut-swiper__indicator-vertical--right{left:unset;right:var(--nutui-swiper-indicator-vertical-gap, 8px)}.nut-image{display:block;position:relative}.nut-image .nut-img{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image .nut-img-loading{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#F6F6F6;z-index:2;color:#fff;background-size:100% 100%}.nut-image .nut-img-loading-custom{background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .65)))}.nut-image .nut-img-error{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#F6F6F6;background-size:100% 100%}.nut-image .nut-img-default{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#F6F6F6;color:var(--nsui-gray-color-6, #BFBFBF);font-size:12px;background-size:100% 100%}.nut-image .nut-img-default span{margin-top:8px}.nut-indicator__dot{display:inline-block;vertical-align:middle;width:var(--nutui-indicator-dot-point-size, 6px);height:var(--nutui-indicator-dot-point-size, 6px);border-radius:50%;background-color:var(--nutui-indicator-dot-color, var(--nutui-gray-3, #e5e5e5))}.nut-indicator__point{display:flex}.nut-indicator__point .nut-indicator__dot{margin:0 var(--nutui-indicator-dot-point-margin, 4px)}.nut-indicator__block{display:flex}.nut-indicator__block .nut-indicator__dot{margin:0 var(--nutui-indicator-dot-block-margin, 2px);width:var(--nutui-indicator-dot-block-width, 12px);height:var(--nutui-indicator-dot-block-height, 3px);border-radius:var(--nutui-indicator-border-size, 1px)}.nut-indicator__block .nut-indicator__active{width:var(--nutui-indicator-dot-block-active-width, 20px)}.nut-indicator__dot:first-child{margin-left:0}.nut-indicator__dot:last-child{margin-right:0}.nut-indicator__active{width:var(--nutui-indicator-dot-point-active-size, 6px);background-color:var(--nutui-indicator-dot-active-color, var(--nutui-gray-5, #ffffff))}.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-point-margin, 4px) 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-point-size, 6px);height:var(--nutui-indicator-dot-point-size, 6px)}.nut-indicator__vertical.nut-indicator__block .nut-indicator__dot{margin:var(--nutui-indicator-dot-block-margin, 2px) 0;width:var(--nutui-indicator-dot-block-height, 3px);height:var(--nutui-indicator-dot-block-width, 12px)}.nut-indicator__vertical.nut-indicator__block .nut-indicator__dot.nut-indicator__active{height:var(--nutui-indicator-dot-block-active-width, 20px)}