music-list.module.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. .accompanyCategory {
  2. box-sizing: border-box;
  3. div {
  4. box-sizing: border-box;
  5. }
  6. .container {
  7. margin: 12px;
  8. height: 140px;
  9. background-repeat: no-repeat;
  10. background-size: 100% 100%;
  11. display: flex;
  12. flex-direction: column;
  13. justify-content: space-evenly;
  14. align-items: flex-start;
  15. }
  16. .title {
  17. font-size: 20px;
  18. font-weight: 600;
  19. color: #ffffff;
  20. text-shadow: 0px 2px 4px #7b63ff;
  21. }
  22. .sub {
  23. font-size: 14px;
  24. font-weight: 500;
  25. color: #ffffff;
  26. text-shadow: 0px 2px 4px #8771ff;
  27. }
  28. .btn {
  29. width: 90px;
  30. height: 34px;
  31. line-height: 28px;
  32. padding-left: 20px;
  33. background-repeat: no-repeat;
  34. background-size: 100% 110%;
  35. margin-left: -10px;
  36. font-size: 18px;
  37. font-weight: 500;
  38. }
  39. }
  40. .accompany-music-list {
  41. :global {
  42. .van-pull-refresh {
  43. min-height: 100vh;
  44. }
  45. }
  46. div {
  47. box-sizing: border-box;
  48. }
  49. .heade {
  50. height: calc(var(--van-dropdown-menu-height) + 1.6rem);
  51. :global {
  52. .van-dropdown-menu__bar {
  53. box-shadow: none;
  54. }
  55. .van-dropdown-menu__title {
  56. font-size: 14px;
  57. font-weight: 400;
  58. color: #333;
  59. font-family: PingFangSC-Regular, PingFang SC;
  60. }
  61. .van-dropdown-menu__title:after {
  62. right: -6px;
  63. margin-top: -5px;
  64. border-width: 3.5px;
  65. border-color: transparent transparent #aaaaaa #aaaaaa;
  66. border-radius: 1.2px;
  67. opacity: 0.8;
  68. content: '';
  69. }
  70. .van-dropdown-menu__title--active:after {
  71. margin-top: -1px;
  72. border-color: transparent transparent currentColor currentColor;
  73. }
  74. }
  75. }
  76. .filter {
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. height: 60px;
  81. background-color: #f8f8f8;
  82. .filterBox {
  83. display: flex;
  84. width: 100%;
  85. }
  86. :global {
  87. .van-search {
  88. display: flex;
  89. align-items: center;
  90. flex: 1;
  91. margin: 0 12px;
  92. padding: 0;
  93. height: 40px;
  94. background: #fff;
  95. border-radius: 20px !important;
  96. .van-search__content {
  97. background: transparent !important;
  98. }
  99. }
  100. .van-dropdown-menu,
  101. .van-dropdown-menu__bar {
  102. height: 100%;
  103. background: transparent;
  104. }
  105. .van-search__field {
  106. background: transparent;
  107. border-radius: 20px 0 0 20px;
  108. padding-left: 20px;
  109. height: 36px;
  110. }
  111. .van-search__action {
  112. border-radius: 0 20px 20px 0;
  113. background-color: #fff;
  114. height: 36px;
  115. display: flex;
  116. align-items: center;
  117. }
  118. }
  119. .searchBtn {
  120. width: 56px;
  121. height: 27px;
  122. line-height: 27px;
  123. border-radius: 20px;
  124. background-color: var(--van-primary);
  125. font-size: 14px;
  126. text-align: center;
  127. color: #fff;
  128. &:active {
  129. opacity: 0.8;
  130. }
  131. }
  132. }
  133. }