.p-prods{ width: 12.00rem; margin: 0.10rem auto; color:#464646; flex:1; } .p-prods .prod-cat{ padding-left: 0.14rem; position: relative; height: 0.46rem; line-height: 0.46rem; font-size: 0.16rem; color: #5c5b5b; } .p-prods .prod-more{ color:#10848F; font-size: 0.15rem; height: 0.40rem; line-height: 0.40rem; text-align: right; cursor: pointer; padding-right: 0.30rem; } .p-prods .prod-cat::before{ position: absolute; content: ''; z-index: 10; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0.18rem; background-color: #10848F; } .p-prods .prod-item{ margin-right: 0.14rem; margin-bottom: 0.25rem; width: 2.88rem; border: 1px solid #10848F; overflow: hidden; padding-bottom: 15px; cursor: pointer; transition: 0.5s transform; } .p-prods .prod-item:hover{ transform: scale(1.04); } .p-prods .prod-item:nth-child(4n){ margin-right: 0; } .p-prods .prod-item .img{ width: 2.90rem; height: 2.22rem; object-fit: cover; } .p-prods .prod-item .name{ padding: 0 0.20rem; margin-top: 0.10rem; height: 0.36rem; width: 100%; line-height: 0.36rem; font-size: 0.20rem; font-family: PingFang SC; font-weight: 500; color: #333333; } .p-prods .prod-item .price-wrap{ color:#FF0000; padding: 0 0.20rem; margin-top: 0.07rem; } .p-prods .prod-item .price-wrap .val{ padding-left: 0.16rem; font-size: 0.26rem; position: relative; } .p-prods .prod-item .price-wrap .val::before{ content: "¥"; position: absolute; left: 0; bottom: 4px; font-size: 0.16rem; }