index.wxss 986 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. }
  13. .tab-bar .tab-bar-item {
  14. position: relative;
  15. flex: 1;
  16. text-align: center;
  17. display: flex;
  18. justify-content: center;
  19. align-items: center;
  20. flex-direction: column;
  21. padding-bottom: 10rpx;
  22. }
  23. .tab-bar .tab-bar-item .noticeTips {
  24. position: absolute;
  25. left: 100rpx;
  26. top: -12rpx;
  27. width: 28rpx;
  28. padding: 4rpx 0rpx;
  29. border-radius: 40rpx;
  30. color: white;
  31. font-size: 16rpx;
  32. text-align: center;
  33. background-color: #FF0000;
  34. }
  35. .tab-bar .tab-bar-item image {
  36. width: 48rpx;
  37. height: 48rpx;
  38. }
  39. .tab-bar .tab-bar-item view {
  40. font-size: 28rpx;
  41. margin-top: 10rpx;
  42. }
  43. .tab-bar .mask {
  44. position: absolute;
  45. top: 0rpx;
  46. width: 100%;
  47. height: 100%;
  48. z-index: 9;
  49. background: rgba(0, 0, 0, 0.7);
  50. }