.mall-container { position: relative; } .page-header { background: #06acb3; } .search { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; background: #06acb3; box-sizing: border-box; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; left: 0; padding: 2.667vw 4vw; position: sticky; top: 0; width: 100%; z-index: 3; } .hd-search,.search { align-items: center; } .hd-search { -webkit-box-flex: 1; background-color: #fff; border-radius: 8vw; color: #787878; display: inline-flex; flex: 1; font-size: 3.2vw; height: 8vw; justify-content: center; line-height: 8vw; padding: 0 4vw; text-align: center; } .hd-search image { height: 32rpx; margin: 0 1.333vw 0 0; width: 32rpx; } .user-info { box-sizing: border-box; color: #fff; padding: 4vw; width: 100vw; } .user-info .not-login { align-items: center; box-sizing: border-box; color: #fff; display: flex; font-size: 15px; width: 100%; } .user-info .avatar { border: 1px solid #fff; border-radius: 50%; flex: 0 0 40px; height: 40px; margin-right: 8px; width: 40px; } .user-info .is-login { display: flex; justify-content: space-between; width: 100%; } .user-info .is-login .l { align-items: center; display: inline-flex; flex: 1; justify-content: flex-start; padding-right: 20px; } .user-info .is-login .r { align-items: flex-end; display: inline-flex; flex-direction: column; font-size: 10px; justify-content: flex-end; } .user-info .is-login .r .num { font-family: Impact,Haettenschweiler,Arial Narrow Bold,sans-serif; font-size: 18px; font-weight: 400; margin-bottom: 2px; } .module-wrap { border-color: #f4f4f4; margin: 0 0 2.667vw; padding: 5.333vw 0 0; } .ad-wrap { margin: -1.333vw 0 -2.667vw; padding: 0 4vw; } .ad-wrap .list1 .item:not(:last-child) { margin: 0 0 2.667vw; } .ad-wrap .inner { border-radius: .533vw; display: block; overflow: hidden; position: relative; } .ad-wrap .inner image { display: block; height: 43.49vw; width: 100%; } .recommend-tabs { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; background-color: #fff; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 12.8vw; justify-content: space-between; left: 0; padding: 2.667vw 4vw; position: sticky; top: 13.333vw; z-index: 2; } .recommend-tabs .item { color: #4a4a4a; font-size: 4vw; line-height: 6.133vw; padding: 0 2.667vw; position: relative; transition: all .3s; } .recommend-tabs .item.active { color: #2a2a2a; font-size: 5.333vw; font-weight: 500; line-height: 7.467vw; } .recommend-tabs .item.active:before { background: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#f8864a)); background: linear-gradient(180deg,#efefef,#f8864a); border-radius: 1.067vw; bottom: 1.067vw; content: ""; height: 1.067vw; left: 2.667vw; position: absolute; right: 2.667vw; z-index: -1; } .loading,.van-list__error-text,.van-list__finished-text,.van-list__loading,.van-pull-refresh__head { background: #fafafa; color: #969799; font-size: 14px; line-height: 50px; text-align: center; } swiper { height: 43.49vw; width: 100%; }