.weui-mask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .weui-mask_transparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; } .weui-picker { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 5000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .weui-picker__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding: 9px 15px; background-color: var(--White); position: relative; text-align: center; font-size: 17px; } .weui-picker__hd:after { content: ' '; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #e5e5e5; color: #e5e5e5; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .weui-picker__action { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #1aad19; } .weui-picker__action:first-child { text-align: left; color: #888; } .weui-picker__action:last-child { text-align: right; } .weui-picker__bd { display: -webkit-box; display: -webkit-flex; display: flex; position: relative; background-color: var(--White); height: 238px; overflow: hidden; } .weui-picker__group { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; position: relative; height: 100%; } .weui-picker__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 auto; z-index: 3; background: -webkit-linear-gradient( top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) ), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) ), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background-position: top, bottom; background-size: 100% 102px; background-repeat: no-repeat; -webkit-transform: translateZ(0); transform: translateZ(0); } .weui-picker__indicator { width: 100%; height: 34px; position: absolute; left: 0; top: 102px; z-index: 3; } .weui-picker__indicator:before { content: ' '; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e5e5e5; color: #e5e5e5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .weui-picker__indicator:after { content: ' '; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #e5e5e5; color: #e5e5e5; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .weui-picker__content { position: absolute; top: 0; left: 0; width: 100%; } .weui-picker__item { padding: 0; height: 34px; line-height: 34px; text-align: center; color: var(--DarkBlack); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .weui-picker__item_disabled { color: #808080; } @-webkit-keyframes slideUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .weui-animate-slide-up { -webkit-animation: slideUp ease 0.3s forwards; animation: slideUp ease 0.3s forwards; } @-webkit-keyframes slideDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .weui-animate-slide-down { -webkit-animation: slideDown ease 0.3s forwards; animation: slideDown ease 0.3s forwards; }