/** ActionSheet */ .fui-actionsheet { position: fixed; left: 0; bottom: 0; z-index: 11000; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-property: -webkit-transform; transition-property: transform; width: 100%; } .fui-actionsheet.in { -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fui-actionsheet.out { z-index: 11000; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .fui-actionsheet a { width: 100%; display: inline-block; text-align: center; background: #fff; padding: 0.5rem 0; border-top: 1px solid #d9d9d9; color: #666; font-size: 0.8rem; } .fui-actionsheet a:first-child { border: none; } .fui-actionsheet a.cancel { margin-top: 0.3rem; border: none; background: #ef4f4f; color: #fff; } .fui-actionsheet a:not(.cancel):active { background: #e5e5e5; } .fui-actionsheet.fui-actionsheet-o { padding: .3rem; } .fui-actionsheet.fui-actionsheet-o a { border-radius: 0.2rem; margin-bottom: 0.2rem; border: none; } /** According **/ .fui-according-group { margin-top: 0.5rem; background-color: #fff; line-height: 1.4; font-size: 0.8rem; overflow: hidden; position: relative; } .fui-according-group.fui-according-group-o { margin: 0 .5rem; border-radius: .5rem; margin-top: 0.5rem; } .fui-according-group:not(.fui-according-group-o):before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-according-group:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-according { position: relative; } .fui-according:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); left: .5rem; } .fui-according:first-child:before { display: none; } .fui-according-header { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; padding: 0.5rem 0.5rem; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: background-color; transition-property: background-color; } .fui-according-header:active { background: #d9d9d9; } .fui-according-header .text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #000; font-size: 0.8rem; } .fui-according-header .remark { color: #888; text-align: right; font-size: 0.75rem; } .fui-according-header .remark:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 0.3rem; width: 0.3rem; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: .3em; } .fui-according-expanded .remark:after, .fui-according-header:active .remark:after { content: " "; display: inline-block; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); height: 0.3rem; width: 0.3rem; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: .3em; } .fui-according-content .content-block { padding: .5rem .5rem; color: #666; box-sizing: border-box; } .fui-according-content { position: relative; width: 100%; height: 0; overflow: hidden; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fui-picker { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 11500; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); background: #cfd5da; height: 13rem; } .fui-picker-header { height: 2rem; width: 100%; box-sizing: border-box; font-size: .8rem; position: relative; margin: 0; z-index: 500; -webkit-backface-visibility: hidden; backface-visibility: hidden; background:#f7f7f7; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; } .fui-picker-header:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #a8abb0; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin:0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-picker-header:after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #a8abb0; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-picker-header .center { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin:0 .5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 2rem; color:#333; text-align: center; } .fui-picker-header .left { padding-left:.3rem;line-height: 2rem; } .fui-picker-header .right { padding-right:.3rem;line-height: 2rem; } .fui-picker-header a { font-size: 0.rem; padding: 0; margin: 0; top: 0; display: block; padding:0 .2rem; } .fui-picker.in, .fui-picker.out { -webkit-transition-duration: 400ms; transition-duration: 400ms; } .fui-picker.in { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fui-picker.out { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .fui-picker-content{ height: 100%; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; padding: 0; text-align: right; font-size: 1rem; -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); } .fui-picker-col { overflow: hidden; position: relative; max-height: 100%; } .fui-picker-col.fui-picker-col-left { text-align: left; } .fui-picker-col.fui-picker-col-center { text-align: center; } .fui-picker-col.fui-picker-col-right { text-align: right; } .fui-picker-col.fui-picker-col-divider { color: #3d4145; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .fui-picker-col-normal { width: 100%; } .fui-picker-wrapper { -webkit-transition: 300ms; transition: 300ms; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .fui-picker-item { height: 1.5rem; line-height: 1.5rem; padding: 0 10px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; color: #aaa; left: 0; top: 0; box-sizing: border-box; -webkit-transition: 300ms; transition: 300ms; } .fui-picker-item.selected { color: #333; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .fui-picker-highlight { height: 1.5rem; box-sizing: border-box; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -.75rem; pointer-events: none; background: rgba(255,255,255,0.05); } .fui-picker-highlight:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: #a8abb0; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .fui-picker-highlight:after { content: ' '; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #a8abb0; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .fui-picker-highlight:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .fui-picker-highlight:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .fui-swipe { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .fui-swipe-wrapper { box-sizing: content-box; display: flex; height: 100%; position: relative; transform-style: preserve-3d; transition-property: transform; width: 100%; z-index: 1; } .fui-swipe-item { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; float: left; } .fui-swipe-item, .fui-swipe-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .fui-swipe-wrapper .fui-swipe-item img { width:100%; display: block; } .fui-swipe-page { position: absolute; text-align: center; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; bottom:10px; width:100%; } .fui-swipe-bullet { background: #000 none repeat scroll 0 0; border-radius: 100%; display: inline-block; height: 8px; opacity: 0.5; width: 8px; margin:0 1px; } .fui-swipe-bullet.active { background: #ff6600 none repeat scroll 0 0; opacity: 1; } .fui-swipe-button { position: absolute; top:50%; z-index:10; background:rgba(0,0,0,.2); text-align: center; width:2rem; height:2rem; border-radius: .2rem; -webkit-transition: 300ms; transition: 300ms; margin-top:-1rem; } .fui-swipe-button:active{ background:rgba(0,0,0,.5); } .fui-swipe-button.left { left:-10px; } .fui-swipe-button.right { right:-10px; } .fui-swipe-button.left:after, .fui-swipe-button.right:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: .6rem; width: .6rem; border-color: #fff; border-style: solid; position: relative; top: .4rem; opacity: 0.5; } .fui-swipe-button.left:after { margin-left:.8rem; border-width: 0 0 2px 2px; } .fui-swipe-button.right:after { margin-right:.6rem; border-width: 2px 2px 0 0; } .fui-swipe-button:active:after{ opacity: 0.8; } .fui-scroller { position:absolute; width:100%; top:0px; bottom:100px; overflow:hidden; } .fui-scroller-pulldown,.fui-scroller-pullup { position:relative; width:100%; text-align: center; color:#999; height:2.2rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .fui-scroller-pulldown .icon, .fui-scroller-pullup .icon { width: 0.65rem; height: 1rem; position: absolute; top: 50%; margin-left: 0.35rem; margin-top: -0.5rem; background: no-repeat center; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E"); background-size: 0.65rem 1rem; z-index: 10; -webkit-transform: rotate(0deg) translate3d(0, 0, 0); transform: rotate(0deg) translate3d(0, 0, 0); -webkit-transition-duration: 300ms; transition-duration: 300ms; display: inline-block; } .fui-scroller-pulldown .text, .fui-scroller-pullup .text { display: inline-block; font-size:0.85rem; padding-left:.1rem; height:2.2rem; line-height:2.3rem; } .fui-scroller-pullup .icon { -webkit-transform: rotate(180deg) ; transform: rotate(180deg); } .fui-scroller-pulldown .fui-preloader, .fui-scroller-pullup .fui-preloader { visibility: hidden; margin-left: 0.15rem; } .fui-scroller-pulldown .icon.reverse{ -webkit-transform: rotate(-180deg) ; transform: rotate(-180deg) ; } .fui-scroller-pullup .icon.reverse { -webkit-transform: rotate(0deg) ; transform: rotate(0deg) ; } .fui-scroller.transitioning { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; } .fui-scroller.refreshing { -webkit-transform: translate3d(0, 2.2rem, 0); transform: translate3d(0, 2.2rem, 0); } .fui-scroller.loading { -webkit-transform: translate3d(0, -2.2rem, 0); transform: translate3d(0, -2.2rem, 0); } .fui-scroller.refreshing .fui-scroller-pulldown .fui-preloader, .fui-scroller.loading .fui-scroller-pullup .fui-preloader { visibility: visible; } /*壹锋www.9ysw.com*/