menuIcon.wxss 2.1 KB

1234
  1. .home.opacity{background:#fff;border:1px solid #d7d7d7}.home{color:#333;position:fixed;height:62rpx;z-index:99;left:33rpx;border:1px solid #d7d7d7;background:hsla(0,0%,100%,.8);border-radius:30rpx;display:flex;align-items:center;justify-content:space-around}.home .opacity{color:#000}.home .icon-gengduo4,
  2. .home .icon-guanbi5{position:absolute;width:40rpx;font-weight:700}.home .icon-xiangzuo{font-weight:700;line-height:28rpx}.home .icon-gengduo4{font-size:28rpx;text-align:center}.home .animation-box{position:relative;width:40rpx;height:28rpx}.icon-guanbi5{font-size:28rpx;text-align:center}.home .homeCon{display:flex;flex-direction:column;font-size:26rpx;padding:4rpx;opacity:0;border:1px solid #f2f2f2}.home .homeCon::before{content:"";width:0;height:0;border-left:15rpx solid transparent;border-right:15rpx solid transparent;border-bottom:17rpx solid #fff;position:absolute;top:-15rpx;right:66rpx;border-bottom-color:#f2f2f2}.home .homeCon::after{content:"";width:0;height:0;border-left:15rpx solid transparent;border-right:15rpx solid transparent;border-bottom:17rpx solid #fff;position:absolute;top:-13rpx;right:66rpx}.home .homeCon .homeCon-box{display:flex;align-items:center;flex-wrap:nowrap;width:100%;padding:15rpx 20rpx}.home .homeCon .homeCon-box .text{display:flex;flex-wrap:nowrap}.home .homeCon .iconfont{display:flex;align-items:center;padding:5rpx 3rpx;margin-right:5rpx}.home .homeCon .homeCon-box:nth-child(even){border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2}.home .homeCon.active{position:absolute;opacity:1;top:75rpx;-webkit-animation:bounceInLeft .5s cubic-bezier(.215,.31,.655,1);animation:bounceInLeft .5s cubic-bezier(.215,.31,.655,1);width:-webkit-max-content;width:max-content;display:flex;justify-content:center;align-items:center;border-radius:10rpx;color:#333;background:#fff!important;box-shadow:0rpx 3rpx 10rpx 2rpx rgba(0,0,0,.03)}.home .line{width:2rpx;height:26rpx;margin:0 18rpx 0 16rpx;background:#fff}.home .line.opacity{color:#050505;background-color:#050505}.home .icon-xiangzuo{font-size:28rpx}.fade-enter-active,
  3. .fade-leave-active{transition:opacity .3s}.fade-enter,
  4. .fade-leave-to{opacity:0}.p10{padding:0 25rpx}.p20{padding:0 40rpx}