page { height: 100%; overflow-y: hidden; position: relative; } .search-container { width: 100%; height: 100%; overflow: hidden; position: relative; background: #fff; z-index: 3; } .search-tip-bar { display: flex; height: 60rpx; justify-content: space-between; border-bottom: 2rpx solid #e5e5e5; } .search-tip-item { width: 33.333333%; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 28rpx; } .search-tip-item:after { content: ""; display: inline-block; width: 0; height: 0; vertical-align: middle; margin: -2rpx 0 0 6rpx; border-top: 8rpx solid #666; border-left: 8rpx solid transparent; border-right: 8rpx solid transparent; } .search-tip-item.active:after { border-bottom: 8rpx solid #666; border-left: 8rpx solid transparent; border-right: 8rpx solid transparent; border-top: 0; } .scroll-view { position: absolute; top: 60rpx; right: 0; left: 0; bottom: 0; z-index: 4; } .list-container { width: 100%; background: #fff; } .list-wrap { width: 100%; padding: 0 30rpx; box-sizing: border-box; border-top: 1px solid #e1e1e1; } .list-item { display: flex; padding: 30rpx 0; border-bottom: 1px solid #eee; } .list-item .item-pic { width: 220rpx; height: 160rpx; border-radius: 12rpx; } .list-item .item-info { flex: 1; margin-left: 20rpx; } .list-item .item-info .title { max-height: 76rpx; line-height: 38rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 32rpx; } .list-item .item-info .attr{ margin-top:20rpx} .list-item .item-info .attr .tip { display: inline-block; height: 30rpx; /* border: 1rpx solid #ff7362; */ background:#f5f5f5; font-size: 24rpx; /* color: #ff7362; */ color: #999; line-height: 34rpx; margin-right: 12rpx; padding: 10rpx 20rpx; border-radius: 5rpx; text-overflow: ellipsis; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; overflow: hidden; } .list-item .item-info .data { display: flex; margin-top: 15rpx; justify-content: space-between; } .list-item .item-info .data .sell,.list-item .item-info .data .myd { color: #05A9F0; line-height: 40rpx; font-size: 26rpx; } .list-item .item-info .data .sell,.list-item .item-info .data .myd1 { color: #999; line-height: 40rpx; font-size: 28rpx; } .list-item .item-info .data .browsenum { color: #999; line-height: 40rpx; font-size: 24rpx; } .list-item .item-info .data .price .num { color: #ff4f32; line-height: 40rpx; font-size: 32rpx; } .sort-page { position: absolute; top: 62rpx; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0,0,0,.5); } .sort-group { background: #fff; } .sort-item { color: #666; height: 78rpx; line-height: 78rpx; padding: 0 30rpx; position: relative; font-size: 28rpx; border-bottom: 2rpx solid #e5e5e5; } .sort-item-active { color: #eb5e18; } .sort-item-active:after { content: ""; display: inline-block; width: 22rpx; height: 18rpx; position: absolute; top: 50%; right: 20rpx; margin-top: -14rpx; background: url("") center no-repeat; background-size: contain; } .filter-page { position: absolute; top: 62rpx; right: 0; bottom: 0; left: 0; z-index: 10; background: #fff; } .filter-box { display: -webkit-box; position: absolute; top: 0; right: 0; bottom: 108rpx; left: 0; } .filter-hd { width: 220rpx; height: 100%; background: #f2f6f9; } .filter-hd-item { height: 80rpx; line-height: 80rpx; padding: 0 20rpx; position: relative; font-size: 28rpx; } .filter-hd-item-active,.filter-bd-item-active { color: #eb5e18; background: #fff; } .filter-bd-item-active:after { content: ""; display: inline-block; width: 22rpx; height: 18rpx; position: absolute; top: 50%; right: 20rpx; margin-top: -14rpx; background: url("") center no-repeat; background-size: contain; } .filter-bd { height: 100%; -webkit-box-flex: 1; padding: 0 20rpx; } .filter-bd-item { height: 78rpx; line-height: 78rpx; padding: 0 20rpx; position: relative; font-size: 28rpx; border-bottom: 2rpx solid #e5e5e5; } .control-bar-block { display: -webkit-box; height: 80rpx; padding: 14rpx 20rpx; position: absolute; right: 0; bottom: 0; left: 0; background: #fafafa; } .control-back-btn { color: #8a8a8a; width: 170rpx; height: 76rpx; line-height: 76rpx; margin-right: 20rpx; text-align: center; border: 2rpx solid #b8b8b8; border-radius: 10rpx; font-size: 26rpx; } .control-confirm-btn { color: #fff; height: 80rpx; line-height: 80rpx; text-align: center; -webkit-box-flex: 1; font-size: 30rpx; border-radius: 10rpx; background: #eb5e18; } .goTop { height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; right: 30rpx; border-radius: 50%; }