.header { height: 11.45rem; } .header_top { height: 8.55rem; background-image: url(../img/bj.png); background-position: center top; background-size: 100% 100%; background-repeat: no-repeat; position: relative; } .zz { width: 100%; height: 100%; background: #000000; position: absolute; z-index: -1; } .search { display: flex; align-items: center; justify-content: space-between; height: 2.325rem; } .search img { width: 0.5rem; height: 0.825rem; } .search input { width: 15.775rem; height: 1.5rem; background-color: #ffffff; border-radius: 0.75rem; background-image: url("../img/search.png"); background-repeat: no-repeat; background-size: 0.8rem 0.85rem; background-position: 0.6rem center; padding-left: 1.85rem; box-sizing: border-box; font-size: 0.65rem; color: #808080; } .shop_info { display: flex; justify-content: space-between; margin-top: 0.55rem; } .info_left { display: flex; align-items: center; } .info_left img { width: 2.25rem; height: 2.25rem; border-radius: 100%; } .info_text { display: flex; margin-left: 0.625rem; flex-direction: column; } .info_text p { font-size: 0.75rem; margin-bottom: 0.15rem; color: #ffffff; } .info_text span { font-size: 0.55rem; color: #ffffff; } .info_right { width: 2.7rem; height: 1.2rem; background-color: #ea4e3d; border-radius: 0.6rem; font-size: 0.45rem; color: #ffffff; text-align: center; line-height: 1.1rem; } .tabs_title { display: flex; justify-content: space-between; margin-top: 0.825rem; margin-bottom: 0.8rem; } .active { border-bottom: 0.1rem solid #fff; } .title_item { font-size: 0.65rem; color: #ffffff; padding-bottom: 0.25rem; } .header_bottom { height: 3.625rem; background-image: url("../img/bj.png"), linear-gradient( #fff 0%, #000000a6 100%); background-position: center -52px; background-size: 138% 183%; background-repeat: no-repeat; transform: rotateX(180deg); position: relative; } .yhj { position: absolute; left: 0.6rem; top: 0.85rem; transform: rotateX(180deg); display: flex; overflow-x: scroll; width: calc(100% - 0.6rem); } .yhj_item { background: url("../img/yhj_back.png") no-repeat; width: 7.325rem; height: 3.2rem; border-radius: 0.625rem; background-size: contain; display: flex; justify-content: space-between; padding-left: 0.2rem; padding-right: 0.4rem; box-sizing: border-box; margin-right: 0.275rem; flex-shrink: 0; } .yhj_item_left span:first-child { font-size: 0.886rem; color: #ffffff; padding-left: 0.6rem; } .yhj_item_left span:nth-child(2) { font-size: 1.45rem; color: #ffffff; } .yhj_item_left p { font-size: 0.5rem; color: #ffffff; transform: scale(0.8); } .yhj_item_right { padding-top: 0.1rem; } .yhj_item_right .title { font-size: 0.75rem; color: #659fdc; margin-left: 0.4rem; } .yhj_item_right .lq { width: 2.625rem; height: 0.9rem; background-color: #659fdc; border-radius: 0.45rem; display: flex; justify-content: center; align-items: center; margin-left: 0.25rem; margin-top: 0.425rem; } .yhj_item_right .lq span { font-size: 0.5rem; text-align: center; color: #ffffff; transform: scale(0.7); }