navBar.wxss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. .lxy-nav-bar view,
  2. .lxy-nav-bar text,
  3. .lxy-nav-bar scroll-view,
  4. .lxy-nav-bar input,
  5. .lxy-nav-bar button,
  6. .lxy-nav-bar image,
  7. .lxy-nav-bar cover-view {
  8. box-sizing: border-box;
  9. }
  10. page {
  11. --height: 44px; /* 4*2+32 */
  12. --right: 97px; /* 10+87 */
  13. --navBarExtendHeight: 4px;
  14. box-sizing: border-box;
  15. }
  16. .lxy-nav-bar {
  17. position: fixed;
  18. top: 0;
  19. left: 0;
  20. right: 0;
  21. z-index: 5001;
  22. }
  23. .lxy-nav-bar .ios {
  24. --height: 44px; /* 4*2+32 */
  25. --right: 97px; /* 10+87 */
  26. --navBarExtendHeight: 4px;
  27. box-sizing: border-box;
  28. }
  29. .lxy-nav-bar .android {
  30. --height: 48px; /* 8*2+32 */
  31. --right: 96px; /* 10+87 */
  32. --navBarExtendHeight: 4px;
  33. box-sizing: border-box;
  34. }
  35. .lxy-nav-bar .devtools {
  36. --height: 42px; /* 5*2+32 */
  37. --right: 88px; /* 10+87 */
  38. --navBarExtendHeight: 4px;
  39. box-sizing: border-box;
  40. }
  41. .lxy-nav-bar__inner {
  42. height: var(--height);
  43. display: flex;
  44. align-items: center;
  45. padding-right: var(--right);
  46. width: 100%;
  47. padding-bottom: var(--navBarExtendHeight);
  48. }
  49. .lxy-nav-bar__inner .lxy-nav-bar__left {
  50. position: relative;
  51. width: var(--right);
  52. height: 32px;
  53. /* padding-left: 10px; */
  54. display: flex;
  55. align-items: center;
  56. }
  57. .lxy-nav-bar__buttons {
  58. height: 100%;
  59. width: 100%;
  60. display: flex;
  61. align-items: center;
  62. border-radius: 16px;
  63. border: 1rpx solid rgba(204, 204, 204, 0.6);
  64. position: relative;
  65. }
  66. .lxy-nav-bar__buttons.android {
  67. border: 1rpx solid rgba(234, 234, 234, 0.6);
  68. }
  69. .lxy-nav-bar-line {
  70. position: absolute;
  71. width: 2rpx;
  72. height: 17px;
  73. background: rgba(204, 204, 204, 0.6);
  74. left: 50%;
  75. top: 50%;
  76. transform: translate(-50%, -50%);
  77. }
  78. .lxy-nav-bar__buttons.android::after {
  79. background: rgba(234, 234, 234, 0.6);
  80. }
  81. .lxy-nav-bar__button {
  82. width: 50%;
  83. height: 100%;
  84. display: flex;
  85. font-size: 12px;
  86. background-repeat: no-repeat;
  87. background-position: center center;
  88. background-size: 1em 2em;
  89. }
  90. .lxy-nav-bar_border_radius {
  91. width: 56px;
  92. height: 100%;
  93. display: flex;
  94. align-items: center;
  95. justify-content: center;
  96. border: 1px solid #f5f5f5;
  97. border-radius: 16px;
  98. }
  99. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active,
  100. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active {
  101. opacity: 0.5;
  102. }
  103. .lxy-nav-bar__inner .lxy-nav-bar__center {
  104. text-align: center;
  105. position: relative;
  106. flex: 1;
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. padding-left: 10px;
  111. }
  112. .lxy-nav-bar__inner .lxy-nav-bar__center .lxy-nav-bar__center-title {
  113. font-size: 34rpx;
  114. font-family: PingFangSC-Medium, PingFang SC;
  115. font-weight: 500;
  116. overflow: hidden;
  117. text-overflow: ellipsis;
  118. white-space: nowrap;
  119. min-width: 150px;
  120. }
  121. .lxy-nav-bar__inner .lxy-nav-bar__loading {
  122. font-size: 0;
  123. }
  124. .lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading {
  125. margin-left: 0;
  126. }
  127. .lxy-nav-bar__inner .lxy-nav-bar__right {
  128. margin-right: 10px;
  129. }
  130. .lxy-nav-bar__placeholder {
  131. /* height: var(--height); */
  132. position: relative;
  133. }
  134. .lxy-nav-bar-search {
  135. width: 100%;
  136. height: 100%;
  137. display: flex;
  138. justify-content: center;
  139. align-items: center;
  140. width: 100%;
  141. height: 32px;
  142. border-radius: 16px;
  143. position: relative;
  144. background: #f6f6f6;
  145. }
  146. .lxy-nav-bar-search__input {
  147. /* height: 100%;
  148. display: flex;
  149. align-items: center; */
  150. color: #999;
  151. font-size: 15px;
  152. /* line-height: 32px; */
  153. }
  154. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback {
  155. width: 18px;
  156. height: 18px;
  157. }
  158. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome {
  159. width: 17px;
  160. height: 17px;
  161. }
  162. .lxy-nav-bar-margin-center {
  163. margin: 0 auto;
  164. }
  165. .lxy-nav-bar-search__icon {
  166. width: 22px;
  167. height: 22px;
  168. display: flex;
  169. align-items: center;
  170. justify-content: center;
  171. background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
  172. background-repeat: no-repeat;
  173. background-size: cover;
  174. }