menu-bar.wxss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @charset "UTF-8";
  2. .plv-mp-menubar-wrap {
  3. font-size: 0;
  4. text-align: left;
  5. box-shadow: 0 6rpx 10rpx 0 rgba(0, 0, 0, 0.05);
  6. box-sizing: border-box;
  7. white-space: nowrap;
  8. overflow: auto;
  9. width: 100%;
  10. -webkit-overflow-scrolling: touch;
  11. background: #44434e;
  12. }
  13. /**
  14. 默认皮肤
  15. */
  16. .plv-mp-menubar-item {
  17. display: inline-block;
  18. line-height: 74rpx;
  19. font-size: 26rpx;
  20. color: #bfbfbf;
  21. letter-spacing: 0;
  22. padding: 0 10rpx;
  23. text-align: center;
  24. overflow: hidden;
  25. }
  26. .plv-mp-menubar-item__on {
  27. color: #fff;
  28. box-shadow: inset 0 -4rpx #fff;
  29. }
  30. .plv-mp-menubar-wrap__less {
  31. display: flex;
  32. justify-content: center;
  33. }
  34. .plv-mp-menubar-wrap__less > .plv-mp-menubar-item {
  35. flex-grow: 1;
  36. text-align: center;
  37. }
  38. .plv-mp-menubar-wrap__less .plv-mp-quiz__tips {
  39. position: relative;
  40. }
  41. .plv-mp-menubar-wrap__less .plv-mp-quiz__tips:after {
  42. content: '';
  43. position: absolute;
  44. width: 8px;
  45. height: 8px;
  46. background: #f24453;
  47. border-radius: 4px;
  48. top: 16px;
  49. margin-left: 4px;
  50. }
  51. /**
  52. 白天皮肤
  53. */
  54. .plv-mp-skin__white {
  55. box-shadow: 0 10rpx 20rpx 0 rgba(4, 0, 0, 0.15);
  56. }
  57. .plv-mp-skin__white > .plv-mp-menubar-item {
  58. color: #212121;
  59. background: #fff;
  60. }
  61. .plv-mp-skin__white > .plv-mp-menubar-item__on {
  62. color: #009aff;
  63. }