index.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. :root:root {
  2. --k-primary: #1CACF1; // 主题色
  3. --k-font-primary: #1CACF1; // 字体色
  4. --van-pull-refresh-head-height: 55px;
  5. --van-skeleton-paragraph-background: #ECEEF3;
  6. --van-skeleton-avatar-background: #ECEEF3;
  7. }
  8. // 默认输入框光标颜色
  9. input,
  10. textarea {
  11. caret-color: var(--k-font-primary) !important;
  12. }
  13. .van-skeleton {
  14. padding: 0;
  15. }
  16. * {
  17. padding: 0;
  18. margin: 0;
  19. border: 0;
  20. box-sizing: border-box;
  21. }
  22. #app {
  23. -webkit-font-smoothing: antialiased;
  24. -moz-osx-font-smoothing: grayscale;
  25. color: #333;
  26. min-height: 100vh;
  27. }
  28. body {
  29. background-color: #f8f9fc;
  30. user-select: none;
  31. }
  32. // tab 选项卡样式
  33. .van-picker .van-picker-column__item--selected {
  34. color: var(--k-font-primary);
  35. }
  36. // 下拉框样式重置
  37. .van-dropdown-menu__bar {
  38. box-shadow: none;
  39. --van-dropdown-menu-title-font-size: 14px;
  40. --van-button-normal-font-size: 16px;
  41. --van-dropdown-menu-height: 44px;
  42. }
  43. .van-dropdown-item {
  44. // 在某些浏览器上面会显示一条线
  45. margin-top: -1px;
  46. }
  47. .van-dropdown-item__content {
  48. border-radius: 0px 0px 12px 12px;
  49. .van-dropdown-item__option {
  50. margin: 0 13px;
  51. height: 44px;
  52. border-radius: 8px;
  53. width: auto;
  54. ;
  55. &:first-child {
  56. margin-top: 12px;
  57. }
  58. &:last-child {
  59. margin-bottom: 12px;
  60. }
  61. &:after {
  62. border: none;
  63. }
  64. .van-cell__title {
  65. white-space: nowrap;
  66. width: 100%;
  67. overflow: hidden;
  68. text-overflow: ellipsis;
  69. font-size: 16px;
  70. color: var(--k-gray-4);
  71. text-align: center;
  72. }
  73. .van-cell__value {
  74. display: none;
  75. }
  76. }
  77. .van-dropdown-item__option--active {
  78. background: #F6F6F6;
  79. .van-cell__title {
  80. font-weight: 600;
  81. color: var(--k-font-primary);
  82. }
  83. }
  84. }
  85. // 固定底部按钮样式
  86. .btnGroupFixed {
  87. padding: 0 25px;
  88. padding-bottom: calc(20px + constant(safe-area-inset-bottom));
  89. padding-bottom: calc(20px + env(safe-area-inset-bottom));
  90. }
  91. // 搜索公用样式
  92. .popupBottomSearch {
  93. --van-picker-toolbar-height: 44px !important;
  94. .van-picker__toolbar {
  95. position: relative;
  96. &::after {
  97. position: absolute;
  98. box-sizing: border-box;
  99. content: ' ';
  100. pointer-events: none;
  101. right: var(--van-padding-md);
  102. bottom: 0;
  103. left: var(--van-padding-md);
  104. border-bottom: 1px solid var(--van-cell-border-color);
  105. transform: scaleY(0.5);
  106. }
  107. }
  108. .van-picker__columns {
  109. padding: 0 24px;
  110. }
  111. .van-picker-column {
  112. position: relative;
  113. z-index: 1;
  114. }
  115. .van-picker__frame {
  116. z-index: 0;
  117. &::after {
  118. background: #f2f2f2;
  119. border-radius: 8px;
  120. }
  121. }
  122. }
  123. .btnGroupPopup {
  124. display: flex;
  125. align-items: center;
  126. justify-content: space-between;
  127. padding: 18px 13px;
  128. .van-button {
  129. font-weight: 400;
  130. width: 48%;
  131. font-size: 16px;
  132. }
  133. }
  134. .myClassM2 {
  135. .amap-marker-label {
  136. background: #FF5A56;
  137. }
  138. }
  139. // 地图样式
  140. .amap-marker-label {
  141. // border: 0;
  142. background: #00B2A7;
  143. border: 0;
  144. color: #fff;
  145. line-height: 18px;
  146. font-size: 12px;
  147. padding: 2px 4px;
  148. border-radius: 4px;
  149. }
  150. // 自定义动画基类
  151. .popup-custom {
  152. transition: all 0.25s;
  153. background: transparent;
  154. overflow: initial;
  155. }
  156. .popup-custom.van-scale {
  157. transform-origin: center -25%;
  158. }
  159. /* 缩放动画 */
  160. .van-scale-enter-from,
  161. .van-scale-leave-to {
  162. opacity: 0;
  163. transform: scale(0.3);
  164. }
  165. .van-scale-enter-active,
  166. .van-scale-leave-active {
  167. transition: all 0.25s;
  168. }
  169. .mb12 {
  170. margin-bottom: 12px !important;
  171. }
  172. .btnGroup {
  173. padding: 0 25px;
  174. padding-bottom: calc(20px + env(safe-area-inset-bottom));
  175. .van-button {
  176. font-size: 18px !important;
  177. font-weight: 500;
  178. }
  179. }
  180. .btnMore {
  181. padding-left: 13px;
  182. padding-right: 13px;
  183. display: flex !important;
  184. justify-content: center !important;
  185. // :global {
  186. .van-button {
  187. width: 100% !important;
  188. }
  189. .van-button+.van-button {
  190. margin-left: 15px;
  191. }
  192. }