index.wxss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .list {
  2. position: relative;
  3. display: flex;
  4. flex-wrap: wrap;
  5. padding: 20rpx 10rpx;
  6. }
  7. .list .item {
  8. position: relative;
  9. width: 345rpx;
  10. margin: 0 10rpx 20rpx;
  11. border-radius: 10rpx;
  12. background: #fff;
  13. overflow: hidden;
  14. box-shadow: 0 0 3px #ccc;
  15. }
  16. .list .item .img {
  17. width: 345rpx;
  18. height: 345rpx;
  19. }
  20. .spu-play {
  21. position: absolute;
  22. left: 50%;
  23. width: 150rpx;
  24. height: 150rpx;
  25. z-index: 1;
  26. top: 98rpx;
  27. margin-left: -75rpx;
  28. }
  29. .list .item .cont {
  30. padding: 20rpx;
  31. }
  32. .list .item .tit {
  33. font-size: 28rpx;
  34. font-weight: bold;
  35. line-height: 1.4;
  36. margin-bottom: 15rpx;
  37. display: -webkit-box;
  38. -webkit-box-orient: vertical;
  39. -webkit-line-clamp: 2;
  40. overflow: hidden;
  41. word-break: break-all;
  42. }
  43. .spu-price {
  44. display: flex;
  45. align-items: flex-end;
  46. font-size: 26rpx;
  47. line-height: 26rpx;
  48. overflow: hidden;
  49. margin-top: 10rpx;
  50. }
  51. .spu-price .sale-price {
  52. color: #ff5344;
  53. margin-right: 12rpx;
  54. }
  55. .spu-price .sale-price .span {
  56. font-size: 46rpx;
  57. line-height: 42rpx;
  58. margin: 0;
  59. font-weight: bold;
  60. }
  61. .spu-price .market-price {
  62. text-decoration: line-through;
  63. color: #999;
  64. margin-right: 20rpx;
  65. }