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) • 12.7 kB
CSS
.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);padding:var(--nutui-popup-title-padding, 16px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 8px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0 0}.nut-popup-right{top:0;right:0;width:80%;height:100%}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 8px) 0 0 var(--nutui-popup-border-radius, 8px)}.nut-popup-left{top:0;left:0;width:80%;height:100%}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .65)))}.nut-overflow-hidden{overflow:hidden}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #595959))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-picker-item__content{max-height:var(--nutui-picker-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-picker-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-picker-item__content--multi{height:var(--nutui-picker-item-content-multi-height, 50px);position:sticky;top:0;box-sizing:border-box;padding:var(--nutui-picker-item-content-multi-padding, 14px 16px);display:flex;width:100%;z-index:9;justify-content:space-between;background:var(--nutui-picker-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-picker-item__content--multi-all-text{font-weight:400;font-size:14px;color:#595959;margin-right:24px}.nut-picker-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-picker-item__option{color:var(--nutui-picker-item-option-color, var(--nsui-gray-color-8, #595959));font-size:var(--nutui-font-size-2, 14px);padding:var(--nutui-picker-item-option-padding, 14px 16px);display:flex;align-items:center;justify-content:space-between;line-height:var(--nutui-picker-item-option-line-height, 22px);font-weight:400}.nut-picker-item__option.active{font-weight:500;color:var(--nutui-picker-item-active-text-color, var(--nsui-gray-color-9, #262626));font-size:14px}.nut-picker-item__option--description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80vw;font-weight:400;font-size:var(--nutui-picker-item-description-font-size, var(--nsui-font-size-2, 12px));color:var(--nutui-picker-item-description-color, var(--nsui-gray-color-7, #8C8C8C))}.nut-picker-item__option.disabled,.nut-picker-item__option.disabled .nut-picker-item__option--description{color:var(--nutui-picker-item-disabled-text-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-picker-item__wrap,.nut-picker-item__wrap-up{width:100%;z-index:2052;overflow:hidden}.overlay-fade-enter-active.nut-picker__overlay{top:auto;z-index:2052}.nut-picker__pop.nut-popup{transition:all 0s ease 0s;transform:none}.picker-item-enter{opacity:0;transform:translateY(-30px)}.picker-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.picker-item-exit{opacity:1;transition:all .1s}.picker-item-exit-done{opacity:0;transition:all .1s}.picker-item-up-enter{opacity:0;transform:translateY(30px)}.picker-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.picker-item-up-exit{opacity:1;transition:all .1s}.picker-item-up-exit-done{opacity:0;transition:all .1s}picker-view-column+picker-view-column .nut-picker-indicator-with-separato-weapp:after,picker-view-column+picker-view-column .nut-picker-indicator-with-separato-weapp:before{border-color:#f0f0f0}picker-view-column+picker-view-column .nut-picker-indicator-with-separato-weapp:after{content:":";position:absolute;left:0px;color:#262626;font-size:18px;font-weight:500;top:50%;height:50px;line-height:50px;transform:translateY(-50%)}.nut-picker{background-color:var(--nutui-gray-6, #ffffff);width:100%;border-radius:var(--nutui-picker-border-radius, 8px)}.nut-picker__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-picker__loading--modal{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.96;background:rgba(255,255,255,.8509803922);filter:blur(0);z-index:11}.nut-picker__control{display:flex;height:50px;font-size:16px;align-items:center;justify-content:space-between;padding:var(--nutui-picker-bar-button-padding, 0 16px)}.nut-picker__cancel-btn{color:var(--nutui-picker-cancel-color, var(--nsui-gray-color-7, #8C8C8C));font-size:var(--nutui-picker-bar-cancel-font-size, var(--nsui-font-size-5, 16px));padding-right:var(--nutui-picker-bar-cancel-padding-right, 16px);min-width:80px}.nut-picker__confirm-btn{color:var(--nutui-picker-ok-color, var(--nutui-brand-color, #2C68FF));font-size:var(--nutui-picker-bar-ok-font-size, var(--nsui-font-size-5, 16px));padding-left:var(--nutui-picker-bar-ok-padding-left, 16px);min-width:80px;text-align:right}.nut-picker__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--nutui-picker-bar-title-color, var(--nsui-gray-color-9, #262626));font-size:var(--nutui-picker-bar-title-font-size, var(--nsui-font-size-6, 18px));font-weight:var(--nutui-picker-bar-title-font-weight, 500)}.nut-picker__panel{display:flex;position:relative}.nut-picker-indicator{position:absolute;top:var(--nutui-picker-indicator-top, 108px);height:var(--nutui-picker-item-height, 50px);width:100%;border:var(--nutui-picker-item-active-line-border, 1px solid var(--nsui-gray-color-3, #F0F0F0));border-left:0;border-right:0;color:var(--nutui-picker-item-text-color, var(--nsui-gray-color-9, #262626));font-weight:500;font-size:var(--nutui-picker-item-text-font-size, var(--nsui-font-size-6, 18px));z-index:3}.nut-picker-list{flex:1;position:relative;height:var(--nutui-picker-list-height, 252px);overflow:hidden;text-align:center}.nut-picker-list+.nut-picker-list .nut-picker-indicator-with-separato:after{content:":";position:absolute;left:0;color:#262626;font-size:18px;font-weight:500;top:50%;transform:translateY(-50%)}.nut-picker-list-panel{transform-style:preserve-3d}.nut-picker-mask{position:absolute;top:0;left:0;right:0;bottom:0;background-image:var(--picker-mask-bg-img, linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)));background-position:top,bottom;background-size:100% var(--nutui-picker-indicator-top, 108px);background-repeat:no-repeat;z-index:3}.nut-picker-view-panel{height:var(--nutui-picker-list-height, 252px);flex-grow:1}.nut-picker-content,.nut-picker-roller{position:absolute;top:var(--nutui-picker-indicator-top, 108px);width:100%;height:var(--nutui-picker-item-height, 50px)}.nut-picker-content{background:#fff;z-index:2;overflow:hidden}.nut-picker-item,.nut-picker-roller-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:var(--nutui-picker-item-height, 50px);line-height:var(--nutui-picker-item-height, 50px);color:var(--nutui-picker-item-text-color, var(--nsui-gray-color-9, #262626));font-size:var(--nutui-picker-item-text-font-size, var(--nsui-font-size-6, 18px));text-align:center}.nut-picker-item{font-size:16px;background:#fff}.nut-picker-roller{z-index:1;transform-style:preserve-3d}.nut-picker-roller-item{backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;top:0;width:100%;color:var(--nsui-gray-color-7, #8C8C8C)}.nut-picker-roller-item-title{display:block;width:100%;height:50px;line-height:50px;text-align:center;color:var(--nutui-picker-roller-title-color, var(--nsui-gray-color-7, #8C8C8C));font-size:var(--nutui-picker-roller-title-font-size, var(--nsui-font-size-5, 16px));font-weight:400;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;white-space:nowrap}.nut-picker-roller-item-active{font-size:var(--nutui-picker-roller-title-active-font-size, var(--nsui-font-size-6, 18px));color:var(--nutui-picker-roller-title-active-color, var(--nsui-gray-color-9, #262626));font-weight:500}.nut-picker-roller-item-hidden{visibility:hidden;opacity:0}.nut-picker-placeholder{height:1px}