wecui/lib/wecui-css/picker.css

一款基于Vue2.x版本的移动端web组件

@charset "UTF-8";.wec-picker{position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.5)}.wec-picker__wrapper{position:absolute;bottom:0;left:0;right:0;background-color:#fff}.wec-picker__wrapper--toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;line-height:40px;font-size:14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#eee;padding:0 15px}.wec-picker__wrapper--content{position:relative;min-height:180px}.wec-picker__wrapper--content .picker-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;max-height:100%}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot{font-size:18px;overflow:hidden;position:relative;max-height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .picker-slot--highlight{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;left:0;width:100%;top:50%;height:36px;margin-top:-18px;pointer-events:none}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .picker-slot--highlight::before{content:"";position:absolute;left:0;top:0;bottom:auto;right:auto;height:1px;width:100%;background-color:#eaeaea;display:block;z-index:15;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .picker-slot--highlight:after{content:"";position:absolute;left:0;bottom:0;right:auto;top:auto;height:1px;width:100%;background-color:#eaeaea;display:block;z-index:15;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .divider-item{color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .content-item{-webkit-box-flex:1;-ms-flex:1;flex:1}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .picker-slot--item{height:36px;line-height:36px;color:#707274;-webkit-transform:translate(0,0);transform:translate(0,0)}.wec-picker__wrapper--content .picker-wrapper .scroll-wrapper .picker-slot .picker-selected{color:#000;-webkit-transform:translateZ(0) rotateX(0);transform:translateZ(0) rotateX(0)}