weui-navbar.less 936 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. @import "../../base/fn.less";
  2. @weuiNavBarColor: #F16E24;
  3. .weui-navbar {
  4. display: flex;
  5. position: absolute;
  6. z-index: 500;
  7. top: 0;
  8. width: 100%;
  9. border-bottom: 1rpx solid #CCCCCC;
  10. }
  11. .weui-navbar__item {
  12. position: relative;
  13. display: block;
  14. flex: 1;
  15. padding: 8px 0;
  16. text-align: center;
  17. font-size: 0;
  18. font-weight: bold;
  19. margin:0 5px;
  20. color: #9A9FAA;
  21. &.weui-bar__item_on {
  22. background: none;
  23. z-index: 2;
  24. color: @weuiNavBarColor;
  25. }
  26. }
  27. .weui-navbar__slider {
  28. position: absolute;
  29. z-index: 1;
  30. left: 50%;
  31. bottom: 0;
  32. // width: 100px;
  33. border-radius: 15px;
  34. left: 0;
  35. bottom: 0;
  36. width: 6em;
  37. height: 3px;
  38. background-color: @weuiNavBarColor;
  39. transform: translateX(-50%);
  40. transition: transform .3s;
  41. }
  42. .weui-navbar__title{
  43. display: inline-block;
  44. font-size: 15px;
  45. max-width: 8em;
  46. .ellipsis();
  47. }