nutui-taro-upgrade/dist/packages/fixednav/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.overlay-fade-enter-active,.overlay-fade-leave-active{transition-property:opacity;transition-timing-function:ease}.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7))}.nut-overflow-hidden{overflow:hidden !important}.nut-fixed-nav{position:fixed;z-index:var(--nut-fixednav-index, 201);display:inline-block;height:50px;right:0}.nut-fixed-nav.active .nut-icon{transform:rotate(180deg)}.nut-fixed-nav.active .nut-fixed-nav__list{transform:translateX(0%) !important}.nut-fixed-nav.active.left .nut-icon{transform:rotate(0deg) !important}.nut-fixed-nav__btn{box-sizing:border-box;position:absolute;right:0;z-index:calc(var(--nut-fixednav-index, 201) + 1);width:80px;padding-left:12px;height:100%;background:var(--nut-fixednav-btn-bg, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%));border-radius:45px 0px 0px 45px;box-shadow:0px 2px 4px 0px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}.nut-fixed-nav__btn>.text{width:24px;line-height:13px;font-size:10px;color:var(--nut-fixednav-bg-color, var(--nut-white, #fff));flex-shrink:0}.nut-fixed-nav__btn .nut-icon{margin-right:5px;transition:all .3s;transform:rotate(0deg);transition:all .3s}.nut-fixed-nav__list{position:absolute;right:0;transform:translateX(100%);transition:all .5s;box-sizing:border-box;padding:0;margin:0;z-index:var(--nut-fixednav-index, 201);flex-shrink:0;height:100%;background:var(--nut-fixednav-bg-color, var(--nut-white, #fff));display:flex;justify-content:space-between;border-radius:25px 0px 0px 25px;box-shadow:2px 2px 8px 0px rgba(0,0,0,.2);padding-left:20px;padding-right:80px}.nut-fixed-nav__list-item{box-sizing:border-box;padding:0;margin:0;position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:50px;flex-shrink:0}.nut-fixed-nav__list-item.active>.span{color:var(--nut-fixednav-item-active-color, var(--nut-primary-color, #fa2c19))}.nut-fixed-nav__list-item>img{width:20px;height:20px;margin-bottom:2px}.nut-fixed-nav__list-item>.span{font-size:10px;color:var(--nut-fixednav-font-color, var(--nut-black, #000))}.nut-fixed-nav__list-item>.b{position:absolute;right:0;top:1px;height:14px;line-height:14px;font-size:10px;padding:0 3px;color:#fff;background:var(--nut-primary-color, #fa2c19);border-radius:7px;text-align:center;min-width:12px}.nut-fixed-nav.left{right:auto;left:0}.nut-fixed-nav.left .nut-fixed-nav__btn{flex-direction:row-reverse;right:auto;left:0;border-radius:0 45px 45px 0}.nut-fixed-nav.left .nut-fixed-nav__btn .nut-icon{transform:rotate(180deg)}.nut-fixed-nav.left .nut-fixed-nav__list{transform:translateX(-100%);right:auto;border-radius:0px 25px 25px 0px;padding-left:80px;padding-right:20px}