navbar.wxss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-navbar--fixed .t-navbar__content {
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. z-index: 5001;
  33. }
  34. .t-navbar--visible {
  35. display: '';
  36. }
  37. .t-navbar--visible-animation {
  38. opacity: 1;
  39. transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  40. }
  41. .t-navbar--hide-animation {
  42. opacity: 0;
  43. transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  44. }
  45. .t-navbar--hide {
  46. display: none;
  47. }
  48. .t-navbar__placeholder {
  49. height: var(--td-navbar-height, 96rpx);
  50. padding-top: var(--td-navbar-padding-top, 40rpx);
  51. position: relative;
  52. visibility: hidden;
  53. }
  54. .t-navbar__content {
  55. position: relative;
  56. z-index: 1;
  57. height: var(--td-navbar-height, 96rpx);
  58. width: calc(100% - var(--td-navbar-right, 190rpx));
  59. padding-right: var(--td-navbar-right, 190rpx);
  60. padding-top: var(--td-navbar-padding-top, 40rpx);
  61. color: var(--td-navbar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  62. background-color: var(--td-navbar-bg-color, var(--td-bg-color-block, #fff));
  63. display: flex;
  64. align-items: center;
  65. }
  66. .t-navbar__left {
  67. position: relative;
  68. box-sizing: border-box;
  69. display: flex;
  70. align-items: center;
  71. }
  72. .t-navbar__left-arrow {
  73. font-size: var(--td-navbar-left-arrow-size, 48rpx);
  74. }
  75. .t-navbar__capsule {
  76. box-sizing: border-box;
  77. margin-left: 24rpx;
  78. width: var(--td-navbar-capsule-width, 176rpx);
  79. height: var(--td-navbar-capsule-height, 64rpx);
  80. border-radius: var(--td-navbar-capsule-border-radius, 32rpx);
  81. border: 1rpx solid var(--td-navbar-capsule-border-color, #e3e6ea);
  82. display: flex;
  83. align-items: center;
  84. }
  85. .t-navbar__capsule:empty {
  86. display: none;
  87. }
  88. .t-navbar__center {
  89. font-size: 36rpx;
  90. text-align: center;
  91. position: absolute;
  92. left: var(--td-navbar-right, 190rpx);
  93. width: calc(100% - var(--td-navbar-right, 190rpx) * 2);
  94. height: var(--td-navbar-height, 96rpx);
  95. line-height: var(--td-navbar-height, 96rpx);
  96. flex: 1;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. overflow: hidden;
  101. }
  102. .t-navbar__center:empty {
  103. display: none;
  104. }
  105. .t-navbar__center-title {
  106. font-size: var(--td-navbar-title-font-size, 36rpx);
  107. text-overflow: ellipsis;
  108. white-space: nowrap;
  109. overflow: hidden;
  110. font-weight: var(--td-navbar-title-font-weight, 600);
  111. }
  112. .t-navbar__btn {
  113. margin-left: 24rpx;
  114. }