index.less 1019 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .tab-bar {
  2. position: fixed;
  3. bottom: 0;
  4. left: 0;
  5. right: 0;
  6. background: white;
  7. display: flex;
  8. box-sizing: border-box;
  9. padding: 14rpx 0rpx;
  10. padding-bottom: calc(env(safe-area-inset-bottom) + 14rpx);
  11. box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
  12. .tab-bar-item {
  13. position: relative;
  14. flex: 1;
  15. text-align: center;
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. flex-direction: column;
  20. padding-bottom: 10rpx;
  21. .noticeTips {
  22. position: absolute;
  23. left: 100rpx;
  24. top: -12rpx;
  25. width: 28rpx;
  26. padding: 4rpx 0rpx;
  27. border-radius: 40rpx;
  28. color: white;
  29. font-size: 16rpx;
  30. text-align: center;
  31. background-color: #FF0000;
  32. }
  33. image {
  34. width: 48rpx;
  35. height: 48rpx;
  36. }
  37. view {
  38. font-size: 28rpx;
  39. margin-top: 10rpx;
  40. }
  41. }
  42. .mask {
  43. position: absolute;
  44. top: 0rpx;
  45. width: 100%;
  46. height: 100%;
  47. z-index: 9;
  48. background: rgba(0, 0, 0, 0.7);
  49. }
  50. }