酷炫小程序

music.wxss 953B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .container {
  2. width: 100%;
  3. height: 100%;
  4. background: url("https://small-app.oss-cn-beijing.aliyuncs.com/black-white/gequliebiaoditu%20.png") repeat no-repeat;
  5. background-size:100% 100% ;
  6. background-attachment: fixed;
  7. }
  8. .music {
  9. padding-top: 44rpx;
  10. }
  11. .musicItem{
  12. width: 614rpx;
  13. height: 140rpx;
  14. background-color: rgba(255,255,255,1);
  15. border-radius: 24rpx;
  16. display: flex;
  17. justify-content: space-between;
  18. align-items: center;
  19. margin: auto;
  20. opacity: 0.8;
  21. margin-bottom: 44rpx;
  22. }
  23. .musicItem .note {
  24. width: 48rpx;
  25. height: 68rpx;
  26. }
  27. .musicItem .note image{
  28. width: 48rpx;
  29. height: 68rpx;
  30. margin-left: 36rpx;
  31. }
  32. .musicItem .musicName {
  33. width: 400rpx;
  34. height: 56rpx;
  35. line-height: 56rpx;
  36. font-size: 40rpx;
  37. font-family:PingFangSC-Medium;
  38. margin-left: 10rpx;
  39. }
  40. .musicItem .checkMark {
  41. width: 48rpx;
  42. height: 68rpx;
  43. margin-right: 40rpx;
  44. }
  45. .musicItem .checkMark image{
  46. width: 48rpx;
  47. height: 68rpx;
  48. }