index.module.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .item {
  2. background-color: var(--music-list-item-background-color);
  3. // margin: 10px 14px;
  4. margin-bottom: 12px;
  5. padding: 10px;
  6. border-radius: 9px;
  7. .header {
  8. display: flex;
  9. align-items: center;
  10. // border-bottom: 1px solid var(--music-list-item-border-color);
  11. // padding-bottom: 12px;
  12. .mate {
  13. display: flex;
  14. flex: 1;
  15. .icon {
  16. width: 98px;
  17. height: 98px;
  18. border-radius: 10px;
  19. overflow: hidden;
  20. }
  21. .info {
  22. margin-left: 14px;
  23. flex: 1;
  24. >h4 {
  25. font-size: 14px;
  26. font-weight: 500;
  27. color: #131415;
  28. line-height: 24px;
  29. }
  30. >p {
  31. font-size: 12px;
  32. color: #777777;
  33. line-height: 18px;
  34. }
  35. }
  36. }
  37. .btn {
  38. width: 54px;
  39. height: 22px;
  40. font-size: 12px;
  41. border-radius: 11px;
  42. padding: 0;
  43. border: none;
  44. &.vip {
  45. background-color: var(--music-list-item-vip-bg);
  46. color: var(--music-list-item-vip-color);
  47. }
  48. &.free {
  49. background-color: var(--music-list-item-free-bg);
  50. color: var(--music-list-item-free-color);
  51. }
  52. &.charge {
  53. background-color: var(--music-list-item-charge-bg);
  54. color: var(--music-list-item-charge-color);
  55. }
  56. }
  57. }
  58. .tags {
  59. padding-top: 7px;
  60. display: flex;
  61. align-items: center;
  62. --van-tag-default-color: #FFEAF2;
  63. --van-tag-text-color: #FE2451;
  64. font-size: 12px;
  65. color: #FE2451;
  66. line-height: 16px;
  67. :global {
  68. .van-tag {
  69. padding: 2px 6px 1px;
  70. }
  71. }
  72. }
  73. .footer {
  74. display: flex;
  75. padding-top: 8px;
  76. align-items: center;
  77. justify-content: space-between;
  78. .user {
  79. display: flex;
  80. align-items: center;
  81. padding: 0 10px;
  82. .userIcon {
  83. width: 20px;
  84. height: 20px;
  85. margin-right: 8px;
  86. }
  87. }
  88. .favorite {
  89. font-size: 16px;
  90. }
  91. }
  92. --van-button-disabled-opacity: 1;
  93. }