123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- .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;
- }
|