index.module.less 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. .sticky {
  2. :global(.van-sticky--fixed) {
  3. // box-shadow: 10px 10px 10px var(--box-shadow-color);
  4. }
  5. :global {
  6. .van-sticky {
  7. background: url('./icons/bgImg.png') no-repeat top center;
  8. background-size: 100% 214px;
  9. }
  10. input {
  11. caret-color: #2dc7aa;
  12. }
  13. .van-search .van-icon-clear {
  14. color: #fff !important;
  15. }
  16. }
  17. }
  18. .musicList {
  19. background: #fff;
  20. min-height: 100vh;
  21. .alumnList {
  22. height: calc(100vh - var(--header-height));
  23. overflow: hidden;
  24. overflow-y: auto;
  25. &::-webkit-scrollbar {
  26. display: none;
  27. }
  28. }
  29. }
  30. .listContainer {
  31. padding-top: 2px;
  32. height: 42px;
  33. display: flex;
  34. align-items: center;
  35. justify-content: center;
  36. background: #fff;
  37. font-size: 16px;
  38. font-weight: 600;
  39. color: #999999;
  40. line-height: 22px;
  41. .line {
  42. margin: 0 15px;
  43. width: 1px;
  44. height: 10px;
  45. background: #e8e8e8;
  46. }
  47. .active {
  48. color: #333333;
  49. }
  50. }
  51. .searchGroup {
  52. background-color: #f8f9fc;
  53. :global {
  54. .van-search {
  55. padding-top: 0;
  56. // padding-bottom: 0;
  57. padding-bottom: 12px;
  58. }
  59. }
  60. }
  61. .label {
  62. margin-right: 8px;
  63. font-size: 14px;
  64. color: #fff;
  65. &.searchs {
  66. color: #131415;
  67. }
  68. &.labelActive {
  69. :global {
  70. .iconfont-down {
  71. transform: rotate(180deg) translateY(1px);
  72. }
  73. }
  74. }
  75. :global {
  76. .van-list__loading,
  77. .van-list__finished-text,
  78. .van-list__error-text {
  79. width: 100%;
  80. }
  81. .iconfont-down {
  82. margin-left: 4px;
  83. }
  84. }
  85. }
  86. .woringHeader {
  87. display: flex;
  88. align-items: center;
  89. height: var(--van-nav-bar-height);
  90. .leftArrow {
  91. padding: 0 var(--k-padding-md);
  92. margin-right: 0;
  93. color: #fff;
  94. }
  95. .tabSection {
  96. // padding: 0 32px;
  97. flex: 1;
  98. display: flex;
  99. align-items: center;
  100. justify-content: space-between;
  101. --van-tab-font-size: 16px;
  102. --van-tabs-line-height: 28px;
  103. --van-tab-text-color: rgba(51, 51, 51, 0.5);
  104. --van-tab-active-text-color: #333333;
  105. --van-tabs-nav-background: transparent;
  106. --van-padding-xs: 0;
  107. .moreIcon {
  108. display: flex;
  109. align-items: center;
  110. position: relative;
  111. span {
  112. // padding-right: 4px;
  113. }
  114. }
  115. :global {
  116. .van-tabs__nav {
  117. background-color: transparent;
  118. }
  119. .van-tabs__line {
  120. display: inline-block;
  121. width: 30px;
  122. height: 7px;
  123. background: #2dc7aa;
  124. border-radius: 4px;
  125. bottom: 18px;
  126. }
  127. .van-tab {
  128. font-size: 16px;
  129. color: #ffffff;
  130. }
  131. .van-tab--active {
  132. font-weight: bold;
  133. }
  134. .van-tab__text {
  135. line-height: normal;
  136. }
  137. .van-tab--shrink {
  138. padding: 0 22px;
  139. z-index: 9;
  140. }
  141. }
  142. }
  143. }
  144. .alumnList {
  145. padding: 0 12px;
  146. border-radius: 10px 10px 8px 8px;
  147. background-color: #fff;
  148. margin: 0 0 14px;
  149. min-height: 200px;
  150. position: relative;
  151. &.alumnListOnly {
  152. margin-top: 0;
  153. }
  154. }
  155. .bgImg {
  156. position: fixed;
  157. top: 0;
  158. left: 0;
  159. width: 100%;
  160. height: 214px;
  161. // object-fit: cover;
  162. z-index: 0;
  163. }
  164. .tagTabs {
  165. :global {
  166. .van-tabs__nav {
  167. background-color: transparent;
  168. padding: 0;
  169. }
  170. .van-tab {
  171. font-size: 16px;
  172. font-weight: bold;
  173. color: #fff;
  174. }
  175. .van-tab--shrink {
  176. padding: 0;
  177. margin: 15px;
  178. }
  179. .van-tab--active {
  180. color: #fff;
  181. &::after {
  182. content: ' ';
  183. display: inline-block;
  184. width: 96%;
  185. position: absolute;
  186. height: 7px;
  187. background: #2dc7aa;
  188. border-radius: 4px;
  189. bottom: -2px;
  190. left: 2%;
  191. transition: all ease 0.3s;
  192. }
  193. .van-tab__text {
  194. z-index: 1;
  195. }
  196. }
  197. .van-tabs__line {
  198. height: 0;
  199. // bottom: 30px;
  200. // height: 7px;
  201. // background: rgba(45, 199, 170, 0.5);
  202. // border-radius: 4px;
  203. }
  204. }
  205. }
  206. .fleg {
  207. display: flex;
  208. align-items: center;
  209. font-size: 14px;
  210. font-weight: 600;
  211. span {
  212. padding-top: 3px;
  213. }
  214. :global {
  215. .van-switch {
  216. margin-right: 5px;
  217. border-color: rgba(255, 255, 255, 0.3);
  218. // background: rgba(255, 255, 255, 0.2);
  219. background: rgba(158, 198, 250, 1);
  220. }
  221. .van-switch__node {
  222. background: rgba(255, 255, 255, 0.51);
  223. // background: rgba(158, 198, 250, 1);
  224. }
  225. .van-switch--on {
  226. // background: rgba(255, 255, 255, 0.8);
  227. background: rgba(98, 196, 171, 1);
  228. .van-switch__node {
  229. background: rgba(255, 255, 255, 1);
  230. }
  231. }
  232. }
  233. }
  234. .popupContainer {
  235. // max-height: 504px;
  236. // overflow-x: hidden;
  237. // overflow-y: auto;
  238. .popupTitle {
  239. position: sticky;
  240. z-index: 1;
  241. top: 0;
  242. text-align: center;
  243. font-weight: 600;
  244. font-size: 18px;
  245. color: #333333;
  246. line-height: 24px;
  247. padding: 18px 0 12px;
  248. }
  249. .popupSearchList {
  250. min-height: 30vh;
  251. max-height: 50vh;
  252. overflow: hidden auto;
  253. }
  254. .popupSection {
  255. padding: 0 16px 18px;
  256. .title {
  257. display: flex;
  258. justify-content: space-between;
  259. padding-bottom: 10px;
  260. span {
  261. display: flex;
  262. align-items: center;
  263. font-weight: 600;
  264. font-size: 15px;
  265. color: #333333;
  266. line-height: 18px;
  267. &::before {
  268. content: '';
  269. display: inline-block;
  270. width: 3px;
  271. height: 12px;
  272. background: linear-gradient(180deg, #59e5d4 0%, #2dc7aa 100%);
  273. border-radius: 2px;
  274. margin-right: 4px;
  275. }
  276. }
  277. }
  278. .timeCount {
  279. display: flex;
  280. align-items: center;
  281. p {
  282. margin-left: 10px;
  283. flex: 1;
  284. background: #f8f8f8;
  285. border: 1px solid #f8f8f8;
  286. border-radius: 4px;
  287. font-size: 13px;
  288. color: #999999;
  289. line-height: 18px;
  290. text-align: center;
  291. padding: 6px 0;
  292. &:first-child {
  293. margin-left: 0;
  294. }
  295. &.active {
  296. background: #e9fff8;
  297. border-radius: 4px;
  298. border: 1px solid #2dc7aa;
  299. color: #2dc7aa;
  300. }
  301. }
  302. }
  303. .timeSubject {
  304. flex-wrap: wrap;
  305. margin-left: -5px;
  306. margin-right: -5px;
  307. p {
  308. width: calc(25% - 10px);
  309. padding: 6px 3px;
  310. margin: 0 5px;
  311. flex: none;
  312. overflow: hidden;
  313. white-space: nowrap;
  314. text-overflow: ellipsis;
  315. margin-bottom: 9px;
  316. box-sizing: border-box;
  317. &:first-child {
  318. margin-left: 5px;
  319. }
  320. }
  321. }
  322. }
  323. .popupBottom {
  324. position: sticky;
  325. z-index: 1;
  326. bottom: 0;
  327. border-top: 1px solid #f2f2f2;
  328. padding: 20px 13px 30px;
  329. display: flex;
  330. align-items: center;
  331. :global {
  332. .van-button {
  333. font-size: 16px;
  334. }
  335. .van-button + .van-button {
  336. margin-left: 15px;
  337. }
  338. }
  339. }
  340. }
  341. .searchPopup {
  342. :global {
  343. .van-popup__close-icon {
  344. top: 19px;
  345. }
  346. }
  347. }