.wrap {
background-color: #fff;
height: 100vh;
box-sizing: border-box;
overflow: hidden;
/* #ifndef H5 */
height: calc(100vh - var(--status-bar-height));
/* #endif */
}
.status_bar {
height: var(--status-bar-height);
}
.search-wrap {
position: relative;
font-size: 30rpx;
padding: 0 32rpx;
margin: 30rpx 0;
box-sizing: border-box;
height: 61rpx;
&.search-wrap_h5 {
padding-left: 62rpx;
.search_icon {
left: 86rpx;
}
.arrowleft {
left: 20rpx;
font-size: 36rpx;
color: #C0C0C0;
top: 10rpx;
}
}
.search-content {
flex: 1;
height: 100%;
position: relative;
box-sizing: border-box;
background-color: #f2f5f7;
border-radius: 31rpx;
font-size: 20rpx;
color: #000;
letter-spacing: 2rpx;
padding-left: 30rpx;
}
.search_btn {
width: 100rpx;
height: 100%;
background-color: #00dd92;
border-radius: 0 31rpx 31rpx 0;
position: absolute;
top: 0rpx;
right: 32rpx;
font-size: 24rpx;
line-height: 61rpx;
color: #fff;
text-align: center;
z-index: 102;
}
.search_icon,
.arrowleft,
.search_icon_del{
position: absolute;
top: 16rpx;
z-index: 100;
color: #C0C0C0;
}
.arrowleft {
position: absolute;
left: 10rpx;
}
.search_icon {
left: 60rpx;
}
.search_icon_del {
right: 144rpx!important;
/deep/.uni-icon-cancel {
color: #C0C0C0;
}
}
.search-input {
float: left;
width: 600rpx;
height: 65rpx;
line-height: 65rpx;
border-radius: 10rpx;
background: #F4F4F4;
font-size: 26rpx;
border-radius: 32rpx;
color: #ADADAD;
padding-left: 91rpx;
box-sizing: border-box;
}
.span {
font-size: 30rpx;
color: #333333;
}
}
.hot_search,
.history {
padding: 0 31rpx;
margin-top: 33rpx;
.title {
color: #333333;
font-size: 26rpx;
justify-content: space-between;
align-items: center;
image {
width: 26rpx;
height: 26rpx;
}
}
.content {
flex-wrap: wrap;
.item {
margin-top: 20rpx;
font-size: 24rpx;
line-height: 24rpx;
padding: 16rpx 20rpx;
background-color: #f2f5f7;
border-radius: 27rpx;
margin-right: 20rpx;
}
}
}
