index.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. @import url('./iconfont/iconfont.css');
  2. :root {
  3. // Color Palette
  4. // --van-black: #000;
  5. // --van-white: #fff;
  6. // --van-gray-1: #f7f8fa;
  7. // --van-gray-2: #f2f3f5;
  8. // --van-gray-3: #ebedf0;
  9. // --van-gray-4: #dcdee0;
  10. // --van-gray-5: #c8c9cc;
  11. // --van-gray-6: #969799;
  12. // --van-gray-7: #646566;
  13. --van-gray-8: #333;
  14. // --van-red: #ee0a24;
  15. // --van-blue: #1989fa;
  16. --van-primary: #ff8057 !important;
  17. --van-picker-confirm-action-color: #ff8057 !important;
  18. --van-primary-text: #f67146 !important;
  19. // --van-popover-light-text-color: var(--van-primary) !important;
  20. // --van-orange: #ff976a;
  21. // --van-orange-dark: #ed6a0c;
  22. // --van-orange-light: #fffbe8;
  23. // --van-green: #07c160;
  24. // // Gradient Colors
  25. // --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  26. // --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
  27. // // Component Colors
  28. --van-primary-color: var(--van-primary) !important;
  29. // --van-success-color: var(--van-green);
  30. // --van-danger-color: var(--van-red);
  31. // --van-warning-color: var(--van-orange);
  32. // --van-text-color: var(--van-gray-8);
  33. // --van-text-color-2: var(--van-gray-6);
  34. // --van-text-color-3: var(--van-gray-5);
  35. // --van-text-link-color: #576b95;
  36. // --van-active-color: var(--van-gray-2);
  37. // --van-active-opacity: 0.6;
  38. // --van-disabled-opacity: 0.5;
  39. // --van-background-color: var(--van-gray-1);
  40. // --van-background-color-light: var(--van-white);
  41. // // Padding
  42. // --van-padding-base: 4px;
  43. // --van-padding-xs: 8px;
  44. // --van-padding-sm: 12px;
  45. // --van-padding-md: 16px;
  46. // --van-padding-lg: 24px;
  47. // --van-padding-xl: 32px;
  48. // // Font
  49. // --van-font-size-xs: 10px;
  50. // --van-font-size-sm: 12px;
  51. // --van-font-size-md: 14px;
  52. // --van-font-size-lg: 16px;
  53. // --van-font-weight-bold: 500;
  54. // --van-line-height-xs: 14px;
  55. // --van-line-height-sm: 18px;
  56. // --van-line-height-md: 20px;
  57. // --van-line-height-lg: 22px;
  58. // --van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  59. // Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  60. // 'Microsoft Yahei', sans-serif;
  61. // --van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
  62. // Arial, sans-serif;
  63. // // Animation
  64. // --van-animation-duration-base: 0.3s;
  65. // --van-animation-duration-fast: 0.2s;
  66. // --van-animation-timing-function-enter: ease-out;
  67. // --van-animation-timing-function-leave: ease-in;
  68. // // Border
  69. // --van-border-color: var(--van-gray-3);
  70. // --van-border-width-base: 1px;
  71. // --van-border-radius-sm: 2px;
  72. // --van-border-radius-md: 4px;
  73. // --van-border-radius-lg: 8px;
  74. // --van-border-radius-max: 999px;
  75. --van-cell-group-inset-padding: 0 13px;
  76. --van-tag-default-color: #f8f8f8 !important;
  77. --van-tag-text-default-color: #c0c0c0;
  78. --van-tabs-bottom-bar-width: 20px;
  79. --col-background-color: #f6f8f9;
  80. --white: #fff;
  81. --tips-color: #999;
  82. --strong--color: #ff4e19;
  83. --box-shadow-color: rgba(0, 0, 0, 0.05);
  84. --tag-border-color: #2dc7aa;
  85. --tag-bg-color: #e9fff8;
  86. --tag-color: #2dc7aa;
  87. }
  88. * {
  89. padding: 0;
  90. margin: 0;
  91. border: 0;
  92. }
  93. #app {
  94. font-family: Avenir, Helvetica, Arial, sans-serif;
  95. -webkit-font-smoothing: antialiased;
  96. -moz-osx-font-smoothing: grayscale;
  97. color: #2c3e50;
  98. min-height: 100vh;
  99. font-family: PingFangSC-Medium, PingFang SC;
  100. }
  101. body {
  102. background-color: #f6f8f9;
  103. user-select: none;
  104. margin-top: 0 !important;
  105. }
  106. .mb12 {
  107. margin-bottom: 12px !important;
  108. }
  109. .btnGroup {
  110. padding: 0 25px;
  111. padding-bottom: 15px;
  112. }
  113. .btnMore {
  114. padding-left: 13px;
  115. padding-right: 13px;
  116. display: flex !important;
  117. justify-content: center !important;
  118. // :global {
  119. .van-button {
  120. // width: 49% !important;
  121. }
  122. .van-button + .van-button {
  123. margin-left: 15px;
  124. }
  125. // }
  126. }
  127. // .van-sticky {
  128. // transform: translateZ(0);
  129. // -webkit-transform: translateZ(0);
  130. // }
  131. // .van-sticky--fixed {
  132. // .btnGroup {
  133. // background-color: #fff;
  134. // padding-top: 15px;
  135. // }
  136. // }
  137. .sticky {
  138. position: relative;
  139. .van-sticky {
  140. height: inherit !important;
  141. top: var(--van-sticky-z-index) !important;
  142. position: fixed;
  143. width: 100%;
  144. }
  145. :global(.van-sticky--fixed) {
  146. box-shadow: 10px 10px 10px var(--box-shadow-color);
  147. }
  148. }
  149. .van-toast {
  150. z-index: 9999 !important;
  151. }
  152. .van-sticky--fixed {
  153. position: fixed;
  154. z-index: 1999;
  155. }
  156. :root {
  157. --music-list-item-background-color: #fff;
  158. --music-list-item-title-color: #333;
  159. --music-list-item-desc-color: #333;
  160. --music-list-item-mate-color: #6a6a6a;
  161. --music-list-item-border-color: #f1f1f1;
  162. --music-list-item-vip-bg: #fff1cd;
  163. --music-list-item-vip-color: #ff6c00;
  164. --music-list-item-free-bg: #fff1e7;
  165. --music-list-item-free-color: #ff4700;
  166. --music-list-item-charge-bg: #e1f0ff;
  167. --music-list-item-charge-color: #0086ff;
  168. }
  169. .cell-section {
  170. width: auto;
  171. border-radius: 6px;
  172. margin: 0 13px;
  173. padding: 15px 12px;
  174. }