bottomTabs.wxss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /* components/bottomTabs/bottomTabs.wxss */
  2. .bottom-tabs {
  3. position: fixed;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. display: flex;
  8. flex-direction: row;
  9. align-items: center;
  10. justify-content: space-around;
  11. background: rgba(255, 255, 255, 1);
  12. border-top: 1rpx solid #f7f7f7;
  13. padding-top: 10rpx;
  14. padding-left: 20rpx;
  15. padding-right: 20rpx;
  16. padding-bottom: calc(var(--safe-area-inset-bottom, 0) + 20rpx);
  17. }
  18. .item {
  19. flex: 1;
  20. position: relative;
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. }
  25. .share-btn {
  26. padding: 0;
  27. margin: 0;
  28. }
  29. .share-btn::after,
  30. .share-btn::before {
  31. border: 0;
  32. }
  33. .item .icon {
  34. width: 44rpx;
  35. height: 44rpx;
  36. }
  37. .item .text-active {
  38. color: #65d4c3;
  39. }
  40. .item text {
  41. position: absolute;
  42. top: -4rpx;
  43. left: 60%;
  44. font-size: 20rpx;
  45. font-family: PingFangSC-Regular, PingFang SC;
  46. font-weight: 400;
  47. color: rgba(255, 255, 255, 1);
  48. background: rgba(255, 82, 61, 1);
  49. border-radius: 14rpx;
  50. padding: 0 8rpx;
  51. min-width: 10rpx;
  52. }
  53. .input-item {
  54. flex: 3;
  55. display: flex;
  56. align-items: center;
  57. background: rgba(246, 246, 246, 1);
  58. border-radius: 32px;
  59. padding: 10rpx 15rpx;
  60. margin-right: 10rpx;
  61. }
  62. .input-item .txt {
  63. font-size: 28rpx;
  64. font-family: PingFangSC-Regular, PingFang SC;
  65. font-weight: 400;
  66. color: rgba(153, 153, 153, 1);
  67. margin-left: 20rpx;
  68. }
  69. .input-item .input-icon {
  70. width: 28rpx;
  71. height: 28rpx;
  72. }