@beeapi/nutui/dist/packages/fixednav/fixednav.css

一套轻量级移动端Vue组件库

/*!
 * @beeapi/nutui v2.2.10 - fixednav.css, 451ed2404bee284b891e, Sat Dec 19 2020 12:06:10 GMT+0800 (中国标准时间)
 * (c) 2017-2020 JDC
 * Released under the MIT License.
 */.nut-fixednav{height:50px;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;position:relative;z-index:0;width:300px}.nut-fixednav.active.left .fixed-btn img{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.nut-fixednav.active.left .fixed-list{left:0}.nut-fixednav.active .fixed-btn img{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.nut-fixednav.active .fixed-list{right:0}.nut-fixednav .fixed-btn{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;right:0;z-index:2;width:50px;padding-left:5px;height:50px;background:-o-linear-gradient(315deg,#f2140c 0,#f2270c 70%,#f24d0c 100%);background:linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);-webkit-border-radius:25px 0 0 25px;border-radius:25px 0 0 25px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.2);box-shadow:0 2px 4px 0 rgba(0,0,0,.2);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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.nut-fixednav .fixed-btn>img{margin-right:5px;width:4px;height:10px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.nut-fixednav .fixed-btn>span{width:24px;line-height:13px;font-size:10px;color:#fff;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.nut-fixednav ul.fixed-list{position:absolute;right:-100%;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;z-index:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:44px;background:#fff;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-border-radius:25px 0 0 25px;border-radius:25px 0 0 25px;-webkit-box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);padding-left:20px;padding-right:50px}.nut-fixednav ul.fixed-list,.nut-fixednav ul.fixed-list li{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nut-fixednav ul.fixed-list li{position:relative;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-width:40px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.nut-fixednav ul.fixed-list li>img{width:20px;height:20px;margin-bottom:2px}.nut-fixednav ul.fixed-list li span{font-size:10px;color:#333}.nut-fixednav ul.fixed-list li b{position:absolute;right:0;top:1px;height:14px;line-height:14px;font-size:10px;padding:0 3px;color:#f0250f;background:#fff;border:1px solid #f0250f;-webkit-border-radius:7px;border-radius:7px;text-align:center;min-width:12px}.nut-fixednav.left .fixed-btn{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;right:auto;left:0;-webkit-border-radius:0 25px 25px 0;border-radius:0 25px 25px 0}.nut-fixednav.left .fixed-btn>img{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.nut-fixednav.left ul.fixed-list{left:-100%;right:auto;-webkit-border-radius:0 25px 25px 0;border-radius:0 25px 25px 0;padding-left:50px;padding-right:20px}