.pickerMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .mpvue-picker-content { position: fixed; bottom: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(100%); transform: translateY(100%); z-index: 3000; } .mpvue-picker-view-show { -webkit-transform: translateY(0); transform: translateY(0); } .mpvue-picker__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding: 9px 15px; background-color: #fff; position: relative; text-align: center; font-size: 17px; } .mpvue-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); } .mpvue-picker__action { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #1aad19; } .mpvue-picker__action:first-child { text-align: left; color: #888; } .mpvue-picker__action:last-child { text-align: right; } .picker-item { text-align: center; line-height: 40px; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; } .mpvue-picker-view { position: relative; bottom: 0; left: 0; width: 100%; height: 238px; background-color: rgba(255, 255, 255, 1); }