prod.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .p-prods{
  2. width: 12.00rem;
  3. margin: 0.25rem auto;
  4. color:#464646;
  5. flex:1;
  6. flex-wrap: wrap;
  7. }
  8. .p-prods .prod-item{
  9. margin-right: 0.14rem;
  10. margin-bottom: 0.25rem;
  11. width: 2.88rem;
  12. border: 1px solid #10848F;
  13. overflow: hidden;
  14. padding-bottom: 15px;
  15. cursor: pointer;
  16. transition: 0.5s transform;
  17. }
  18. .p-prods .prod-item:hover{
  19. transform: scale(1.04);
  20. }
  21. .p-prods .prod-item:nth-child(4n){
  22. margin-right: 0;
  23. }
  24. .p-prods .prod-item .img{
  25. width: 2.90rem;
  26. height: 2.22rem;
  27. object-fit: cover;
  28. }
  29. .p-prods .prod-item .name{
  30. padding: 0 0.20rem;
  31. margin-top: 0.10rem;
  32. height: 0.36rem;
  33. width: 100%;
  34. line-height: 0.36rem;
  35. font-size: 0.20rem;
  36. font-family: PingFang SC;
  37. font-weight: 500;
  38. color: #333333;
  39. }
  40. .p-prods .prod-item .price-wrap{
  41. color:#FF0000;
  42. padding: 0 0.20rem;
  43. margin-top: 0.07rem;
  44. }
  45. .p-prods .prod-item .price-wrap .val{
  46. padding-left: 0.16rem;
  47. font-size: 0.26rem;
  48. position: relative;
  49. }
  50. .p-prods .prod-item .price-wrap .val::before{
  51. content: "¥";
  52. position: absolute;
  53. left: 0;
  54. bottom: 4px;
  55. font-size: 0.16rem;
  56. }