.header { height: 1.3636rem; position: fixed; width: 100%; left: 0; top: 0; background: #f45253; z-index: 999; display: flex; align-items: center; justify-content: space-between; padding: 0 0.29rem; box-sizing: border-box; color: #fff; } .header i { font-size: 0.4242rem; } .header span { font-size: 0.4rem; font-weight: bold; letter-spacing: 0.016rem; color: #ffffff; } .content { padding-top: 1.3636rem; height: 100vh; box-sizing: border-box; } .shop { height: calc(100% - 1.47rem); display: flex; } .shop_menu { height: 100%; width: 2.95rem; overflow-y: scroll; } .shop_menu li { height: 1.3rem; font-size: 0.393rem; color: #2a2a2a; text-align: center; line-height: 1.3rem; border-bottom: 0.03rem solid #ddd; border-right: 0.03rem solid #ddd; position: relative; } .active { border-right: none !important; color: #ff5400 !important; } .active::before { content: ""; position: absolute; left: 0; top: 0; width: 0.13rem; height: 100%; background: #ed1755; } .active::after { content: "2"; width: 0.37rem; height: 0.37rem; background-color: #ff5400; border-radius: 100%; text-align: center; line-height: 0.37rem; color: #fff; font-size: 0.229rem; position: absolute; top:0.16rem; right: 0.19rem; } .shop_list { height: 100%; flex: 1; overflow-y: scroll; padding: 0.38rem 0.31rem; box-sizing: border-box; } .shop_list li { display: flex; border-bottom: 0.03rem solid #eee; padding-bottom: 0.35rem; padding-top: 0.35rem; } .shop_list li:first-child { padding-top: 0 !important; } .shop_list li img{ width: 2.47rem; height: 1.97rem; margin-right: 0.41rem; } .shop_list li .list_r{ flex: 1; } .shop_list li .list_r p{ font-size: 0.426rem; color: #333333; margin-bottom: 0.1rem; } .shop_list li .list_r .price{ display: flex; justify-content: space-between; margin-bottom: 0.12rem; align-items: center; } .shop_list li .price .price_l{ font-size: 0.295rem; color: #333333; } .shop_list li .price .price_l span{ font-size: 0.491rem; color: #ff5400; margin-right: 0.09rem; margin-left: 0.05rem; } .shop_list li .price .price_r{ font-size: 0.295rem; color: #999999; } .shop_list li .list_r .numbers{ display: flex; justify-content: flex-end; align-items: center; } .shop_list li .list_r .numbers .reduce{ width: 0.66rem; height: 0.66rem; background-color: #fff; border-radius: 0.04rem; border: solid 0.03rem #ff7800; position: relative; } .reduce::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%); width: 0.32rem; height: 0.04rem; background: #ff7800; } .shop_list li .list_r .numbers span{ font-size: 0.491rem; color: #333333; margin-left: 0.33rem; margin-right: 0.31rem; } .shop_list li .list_r .numbers .plus{ width: 0.66rem; height: 0.66rem; position: relative; border-radius: 0.04rem; background-color: #ed1755; border: solid 0.03rem #ed1755; color: #fff; text-align: center; line-height: 0.56rem; font-size: 0.6364rem; } .car { height: 1.47rem; position: fixed; bottom: 0; left: 0; border-top: 0.03rem solid #ddd; display: flex; justify-content: space-between; padding-left: 0.46rem; box-sizing: border-box; width: 100%; align-items: center; } .car .car_icon { position: relative; } .car .car_icon i{ color: #ed1755; font-size: 0.8485rem; } .car .car_icon span{ width: 0.37rem; height: 0.37rem; background-color: #ff5400; border-radius: 100%; text-align: center; line-height: 0.37rem; color: #fff; font-size: 0.229rem; position: absolute; top: 0.2424rem; right: -0.303rem; } .car .car_submit{ width: 3.15rem; height: 1.47rem; background-color: #ed1755; font-size: 0.491rem; color: #ffffff; text-align: center; line-height: 1.47rem; }