navBar.wxss 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. view,
  2. text,
  3. scroll-view,
  4. input,
  5. button,
  6. image,
  7. 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 .ios {
  17. --height: 44px; /* 4*2+32 */
  18. --right: 97px; /* 10+87 */
  19. --navBarExtendHeight: 4px;
  20. box-sizing: border-box;
  21. }
  22. .lxy-nav-bar .android {
  23. --height: 48px; /* 8*2+32 */
  24. --right: 96px; /* 10+87 */
  25. --navBarExtendHeight: 4px;
  26. box-sizing: border-box;
  27. }
  28. .lxy-nav-bar .devtools {
  29. --height: 42px; /* 5*2+32 */
  30. --right: 88px; /* 10+87 */
  31. --navBarExtendHeight: 4px;
  32. box-sizing: border-box;
  33. }
  34. .lxy-nav-bar__inner {
  35. position: fixed;
  36. top: 0;
  37. left: 0;
  38. z-index: 5001;
  39. height: var(--height);
  40. display: flex;
  41. align-items: center;
  42. padding-right: var(--right);
  43. width: 100%;
  44. padding-bottom: var(--navBarExtendHeight);
  45. }
  46. .lxy-nav-bar__inner .lxy-nav-bar__left {
  47. position: relative;
  48. width: var(--right);
  49. height: 32px;
  50. /* padding-left: 10px; */
  51. display: flex;
  52. align-items: center;
  53. }
  54. .lxy-nav-bar__buttons {
  55. height: 100%;
  56. width: 100%;
  57. display: flex;
  58. align-items: center;
  59. border-radius: 16px;
  60. border: 1rpx solid rgba(204, 204, 204, 0.6);
  61. position: relative;
  62. }
  63. .lxy-nav-bar__buttons.android {
  64. border: 1rpx solid rgba(234, 234, 234, 0.6);
  65. }
  66. .lxy-nav-bar__buttons::after {
  67. position: absolute;
  68. content: '';
  69. width: 1rpx;
  70. height: 18.4px;
  71. background: rgba(204, 204, 204, 0.6);
  72. left: 50%;
  73. top: 50%;
  74. transform: translate(-50%, -50%);
  75. }
  76. .lxy-nav-bar__buttons.android::after {
  77. background: rgba(234, 234, 234, 0.6);
  78. }
  79. .lxy-nav-bar__button {
  80. width: 50%;
  81. height: 100%;
  82. display: flex;
  83. font-size: 12px;
  84. background-repeat: no-repeat;
  85. background-position: center center;
  86. background-size: 1em 2em;
  87. }
  88. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active,
  89. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active {
  90. opacity: 0.5;
  91. }
  92. .lxy-nav-bar__inner .lxy-nav-bar__center {
  93. font-size: 17px;
  94. line-height: 17px;
  95. text-align: center;
  96. position: relative;
  97. flex: 1;
  98. display: -webkit-box;
  99. display: -webkit-flex;
  100. display: flex;
  101. align-items: center;
  102. justify-content: center;
  103. padding-left: 10px;
  104. }
  105. .lxy-nav-bar__inner .lxy-nav-bar__center .lxy-nav-bar__center-title {
  106. margin-top: -2px;
  107. }
  108. .lxy-nav-bar__inner .lxy-nav-bar__loading {
  109. font-size: 0;
  110. }
  111. .lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading {
  112. margin-left: 0;
  113. }
  114. .lxy-nav-bar__inner .lxy-nav-bar__right {
  115. margin-right: 10px;
  116. }
  117. .lxy-nav-bar__placeholder {
  118. height: var(--height);
  119. background: #f8f8f8;
  120. position: relative;
  121. z-index: 50;
  122. }
  123. .lxy-nav-bar-search {
  124. width: 100%;
  125. height: 100%;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. width: 100%;
  130. height: 32px;
  131. border-radius: 16px;
  132. position: relative;
  133. background: #f6f6f6;
  134. }
  135. .lxy-nav-bar-search__input {
  136. height: 100%;
  137. display: flex;
  138. align-items: center;
  139. color: #999;
  140. font-size: 15px;
  141. line-height: 15px;
  142. }
  143. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback {
  144. background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
  145. }
  146. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.white {
  147. background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
  148. }
  149. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome {
  150. background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  151. background-size: 22px 22px;
  152. }
  153. .lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome.white {
  154. background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  155. background-size: 22px 22px;
  156. }
  157. .lxy-nav-bar-search__icon {
  158. width: 22px;
  159. height: 22px;
  160. display: flex;
  161. align-items: center;
  162. justify-content: center;
  163. 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");
  164. background-repeat: no-repeat;
  165. background-size: cover;
  166. }