body { background: #f2f2f6; } .header { width: 100%; background: #fff; padding: 0.23rem 0.3rem 0 0.21rem; position: fixed; z-index: 999; box-sizing: border-box; } .header .screach { display: flex; align-items: center; justify-content: flex-start } .header .screach .left { width: 0.2rem; height: 0.35rem; margin-right: 0.48rem; } .header .screach div { width: 6.31rem; height: 0.6rem; background-color: #f2f2f2; border-radius: 0.3rem; display: flex; align-items: center; } .header .screach div img { width: 0.32rem; height: 0.34rem; margin-left: 0.24rem; margin-right: 0.18rem; } .header .screach div input { font-family: PingFang-SC-Medium; font-size: 0.26rem; letter-spacing: 0rem; color: #808080; background: #f2f2f2; } .menu { width: 100%; overflow-x: scroll; display: flex; justify-content: space-between; position: relative; padding: 0.47rem 0.36rem 0.31rem 0.36rem; white-space: nowrap; box-sizing: border-box; } .menu li { font-family: SimHei; font-size: 0.3rem; color: #424242; margin-right: 0.39rem; } .menu li:first-child { color: #5697f4; position: relative; } .menu .active::after { content: " "; width: 0.31rem; height: 0.04rem; position: absolute; bottom: 0; left: 0.1rem; background: #5697f4; bottom: -0.27rem; left: 50%; transform: translate(-50%); background: #5697f4; } .content { position: absolute; margin-top: 1.91rem; } .content>ul {} .content ul li { background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0.3rem 0.28rem 0.26rem 0.28rem; margin-top: 0.12rem } .content .title { display: flex; align-items: center; width: 100%; justify-content: space-between; } .content .title div { display: flex; align-items: center; } .content .title div img { width: 0.24rem; height: 0.25rem; } .content .title div span { font-family: PingFang-SC-Bold; font-size: 0.26rem; letter-spacing: 0.006rem; color: #333333; margin: 0 0.18rem } .content .title div img:last-child { width: 0.1rem; height: 0.18rem; } .content .title .comment { font-family: PingFang-SC-Medium; font-size: 0.26rem; letter-spacing: 0.006rem; color: #5697f4; } .product { width: 100% } .product li {} .product li img { width: 1.36rem; height: 1.37rem; } .product li .middle {} .product li .name { width: 3.86rem; display: flex; flex-direction: column; } .product li .name span { font-family: PingFang-SC-Medium; font-size: 0.3rem; color: #444444; margin-bottom: 0.29rem; } .product li .name span:last-child { font-family: PingFang-SC-Medium; font-size: 0.24rem; color: #aaaaaa; } .product li .price { display: flex; flex-direction: column; align-items: flex-end } .product li .price span { font-family: PingFang-SC-Medium; font-size: 0.3rem; color: #000000; } .product li .price span:last-child { font-family: PingFang-SC-Medium; font-size: 0.24rem; color: #aaaaaa; } .content .money { display: flex; flex-direction: column; align-items: flex-end; width: 100%; } .content .money span { font-family: PingFang-SC-Medium; font-size: 0.24rem; color: #000000; } .money .bottom { display: flex; margin-top: 0.2rem; } .content .money .bottom .delete { width: 1.28rem; height: 0.46rem; border-radius: 0.23rem; border: solid 0.01rem #dddddd; display: flex; align-items: center; justify-content: center; margin-right: 0.11rem; } .content .money .bottom .delete span { font-family: PingFang-SC-Medium; font-size: 0.24rem; color: #888888; } .content .money .bottom .pingjia { width: 1.28rem; height: 0.46rem; border-radius: 0.23rem; border: solid 0.01rem #5697f4; display: flex; align-items: center; justify-content: center; } .content .money .bottom span { font-family: PingFang-SC-Medium; font-size: 0.24rem; color: #5697f4; }