.header { background-image: linear-gradient(90deg,#0af,#0085ff); padding: 10px 14px; } .location { height: 34.5px; line-height: 34.5px; } .location i { color: #fff; } .location span { color: #fff; font-size: 15px; } .content { margin-bottom: 60px; } .content .type{ display: flex; justify-content: space-around; flex-wrap: wrap; margin: 10px; } .content .item{ width: 20%; text-align: center; margin-bottom: 10px; } .content .item img{ width: 45px; height: 45px; } .content .item p{ font-size: 12px; color: #666; } .adv { display: flex; justify-content: space-between; padding: 15px 18px; background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%); margin: 0 14px; } .adv .adv_mess{ } .adv .adv_mess h3{ color: #333; font-size: 17px; margin-bottom: 5px; } .adv .adv_mess span { color: #777; font-size: 13px; margin-bottom: 7px; } .adv .adv_mess p{ color: #af8260; font-size: 12px; font-weight: 700; } .adv .adv_img{ width: 141px; height: 94px; } .vip { background: linear-gradient(90deg,#ffefc4,#f3dda0); display: flex; justify-content: space-between; margin: 0 14px; padding: 0 18px; height: 40px; margin-top: 8px; align-items: center; } .vip .vip_tips{ display: flex; align-items: center; } .vip .vip_tips img{ width: 17px; height: 17px; margin-right: 7.5px; } .vip .vip_tips span{ color: #644f1b; font-size: 14px; font-weight: 700; vertical-align: middle; margin-right: 4px; } .vip .vip_tips label{ color: #644f1b; font-size: 11px; font-weight: 700; } .vip .vip_mes{ color: #644f1b; font-size: 12px; } .vip i{ font-size: 12px; } .search { display: inline-block; width: 100%; height: 36px; line-height: 36px; background: #fff; text-align: center; } .search i{ color: #999; font-size: 14px; } .search span{ color: #999; font-size: 14px; } .screen { display: flex; justify-content: space-around; padding: 0 18px; align-items: center; height: 52px; } .screen .screen_item{ width: 25%; } .screen .screen_item span{ font-size: 13px; color: #666; } .screen .screen_item i{ font-size: 12px; color: #b6b2b2; } .food .list_item{ display: flex; justify-content: space-between; padding: 0 18px; margin-bottom: 23px; } .food .list_item .item_left{ width: 64px; height: 64px; margin-right: 10px; } .food .list_item .item_right{ width: calc(100% - 74px); } .food .list_item .r_title{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; width: 95%; } .food .list_item .r_title .title{ font-size: 15px; font-weight: 700; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 91%; } .food .list_item .r_title .icon-down{ font-size: 12px; } .food .list_item .comment{ margin-bottom: 5px; } .food .list_item .comment img{} .food .list_item .comment span{ font-size: 12px; color: #666; } .food .list_item .time{ display: flex; justify-content: space-between; width: 95%; } .food .list_item .time span{ } .food .list_item .time .time_left, .food .list_item .time .time_right{ font-size: 12px; color: #666; } .food .list_item .tip{ margin-top: 5px; } .food .list_item .tip .tip_item{ width: 26px; height: 14px; text-align: center; line-height: 15px; font-size: 10px; color: rgb(102, 102, 102); border: 1px solid rgb(221, 221, 221); padding: 1px 7px; border-radius: 3px; } .food .list_item .discount { margin-top: 20px; } .food .list_item .discount .discount_item{ display: flex; justify-content: space-between; align-items: center; } .food .list_item .discount p{ width: 15px; height: 15px; border-radius: 4px; background: rgb(240, 115, 115); color: #fff; text-align: center; font-size: 10px; line-height: 15px; padding: 2px; transform: scale(0.8); } .food .list_item .discount span{ font-size: 12px; color: #ccc; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .discount_item .item_lefts{ display: flex; width: 70%; } .discount_item .item_rights { display: flex; } .item_rights .icon-play { font-size: 10px; color: #ccc; transform: scale(0.6); } .footer { position: fixed; width: 100%; height: 50px; background: #fff; display: flex; justify-content: space-around; bottom: 0; box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 4px; align-items: center; } .footer_item { text-align: center; } .footer_item i{ font-size: 18px; } .footer_item p{ font-size: 12px; color: #8e8e93; }