body{ background: #e3e3e3; } .oc_logo { width: 67.5px; height: 16.5px; position: absolute; margin: 0 auto; left: 0; right: 0; top: 13.75px; } .search { width: 100%; height: 37px; border-top: 1px solid #EFEFF4; background-color: rgba(255, 255, 255, 1); position: relative; } .search .class { width: 24px; height: 21px; float: left; margin-left: 4%; margin-top: 7.5px; } .oc_search { width: 72%; height: 28px; background-color: rgb(216, 216, 216); position: absolute; margin: 0 auto; left: 0; right: 0; border-radius: 16px; margin-top: 4px; } .oc_class { width: 12.5px; height: 12.5px; float: left; margin-left: 2.7%; margin-top: 7.5px; } #search_p { font-family: "微软雅黑"; font-size: 11px; color: #fff; line-height: 26px; float: left; margin-left: 2.6%; } .oc_shopcar { width: 22.5px; height: 21.5px; float: right; margin-top: 7.5px; margin-right: 2.7%; } .orS { width: 100%; padding: 1% 2% 0 2%; } #top_banner { width: 100%; height: 300px; margin: 20px auto; margin: 0; position: relative; } #top_banner .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #top_banner .swiper-slide img { width: 100%; height: 100%; } #top_banner .swiper-pagination-bullet-active { background: white; } #top_banner .swiper-pagination-bullet { background: #eee; } .recommend { width: 100%; background-color: rgba(255, 255, 255, 1); position: relative; z-index: 111; border-radius: 5px; transform: translateY(-8px); } .recommend .muji { width: 101px; height: 37.5px; margin-left: 42%; float: left; } .recommend .all { float: left; font-family: "微软雅黑"; font-size: 12px; color: #f5364c; right: 5%; top: 20px; position: absolute; } .recommend .all img { width: 13px; height: 13px; transform: translateY(1px); } .mujireco { width: 100%; margin-top: 12px; margin-left: 2%; } .reco_res { width: 30%; float: left; margin-left: 3%; } #reco_1 { margin-left: 0; } .reco_res img { width: 100%; } .reco_res .p1 { width: 100%; font-family: "微软雅黑"; font-size: 13px; color: #000000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; margin-top: 15px; margin-bottom: 17px; height: 40px; } .reco_res .p2{ width: 100%; font-family: "微软雅黑"; font-size: 12px; color:#e51329; margin-bottom: 21px; } .rec_food{ width: 100%; background-color: rgba(255, 255, 255, 1); border-radius: 5px; /*margin-bottom:-10.5px;*/ } .add_top { width: 100%; height: 264px; } .add_top_left { width: 41.5%; border-right: 1px solid #EFEFF4; float: left; height: 264px; position: relative; } .food_p1 { font-size: 15px; position: absolute; } .food_p2 { color: black; font-size: 13px; position: absolute; } .add_top_left .food_p1 { background: linear-gradient(to right, #26a4ce, #ff65ce); -webkit-background-clip: text; color: transparent; margin: 0 auto; left: 0; right: 0; text-align: center; top: 41.5px; } .add_top_left .food_p2 { margin: 0 auto; left: 0; right: 0; text-align: center; top: 69.5px; } .add_top_left img { width: 70%; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 30.5px; } .add_top_right { width: calc(100% - (41.5%+1px)); float: left; height: 264px; } .add_top_right_con { width: 100%; height: 132px; position: relative; } .atrct { border-bottom: 1px solid #EFEFF4; } .food_right_p{ background: linear-gradient(to right, #ffb400, #ff6c00); -webkit-background-clip: text; color: transparent; left:40%; top: 15px; } .add_top_right_con .food_p2{ background: linear-gradient(to right, #00aeff, #01ffcc); -webkit-background-clip: text; } .add_top_right img{ width: 34%; position: absolute; top: 40.5px; } .add_top_right_con .food_right_img1{ left: 14%; } .add_top_right_con .food_right_img2{ left: 55%; } .food_class{ width: 100%; background: #fff; border-radius: 5px; margin-top: 5px ; } .food_class_top{ width: 100%; } .food_class_top ul{ width: 100%; padding: 0; } .food_class_top ul li{ float: left; font-family: "微软雅黑"; font-size: 13px; margin-left: 16px; padding-top:13.5px ; padding-bottom:13.5px ; } .food_class_top .on{ color:#f5364c; border-bottom:3px solid #f5364c; } .food_class_list{ width: 100%; background: #fff; } .recommend_con_block{ margin: 0 1%; width: 48%; border-radius: 5px; background: white; position: relative; float: left; margin-bottom: 5px; overflow: hidden; } .rcb_img{ width: 100%; display: block; } .rcb_con{ width: 100%; height: 105px; padding: 3% 3% 0; } .rcb_title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; height: 43px; } .rcb_title span{ border-radius: 5px; font-size: 11px; color: white; background: #e6132c; padding: 0 2px; } .rcb_pay{ margin-top: 2px; width: 100%; font-size: 14px; color: #e51329; } .rcb_pay span{ border: 1px solid #e51329; font-size: 10px; padding: 0 2px; border-radius: 5px; margin-left: 10px; } .rcb_bottom{ margin-top: 2px; } .rcb_bottom span{ color: #e51329; font-size: 10px; padding: 1px 2px; background: #FFD7D7; }