sr-iHealthwx/html/rlcx/css/search-bar.css

body{
    background: #F2F3F5;
    font-size: 14px;
    margin: 0;
}
.searchbar {
    /*height: 44px;*/
    box-sizing: border-box;
    padding: 0 8px;
    /*overflow: hidden;*/
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #FFF;
    margin-top: 70px;
}
.searchbar:before{
    content:'';
    top: -70px;
    left: 0;
    width: 100%;
    height: 110px;
    position: absolute;
    overflow: hidden;
    background: url("../images/banner.png");
    background-size: 100%;
}


html.pixel-ratio-2 .searchbar:after {
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
}

html.pixel-ratio-3 .searchbar:after {
    -webkit-transform: scaleY(.33);
    transform: scaleY(.33)
}

.searchbar .searchbar-input {
    width: 100%;
    height: 28px;
    position: relative;
    -webkit-flex-shrink: 1;
    -ms-flex: 0 1 auto;
    flex-shrink: 1;
}

.searchbar .searchbar-input input{
    color: #999;
}


.searchbar input[type=search] {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border-radius: 5px;
    font-family: inherit;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    padding: 0 28px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 8px center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QUE2NTYxNDY1MjMxMUU2OTZFMkZGNTMzRTNEODdCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QUE2NTYxNTY1MjMxMUU2OTZFMkZGNTMzRTNEODdCQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZBQTY1NjEyNjUyMzExRTY5NkUyRkY1MzNFM0Q4N0JDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZBQTY1NjEzNjUyMzExRTY5NkUyRkY1MzNFM0Q4N0JDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+gJ4fKgAAA2tJREFUeNq8mHtoTmEcx887o9XmNvzFXJatMWEIteQaxaa5FP/IZbMSeVOEEGMxauytEYaVkNWQXHLLNUSLVmZu28ztD+WuMdb4/vQ9+vW2ncvO2X716fmdy3v6vud5nt/zfU6goKDAcBjDwHC2SSAS1IMK8BCUgUeGywgGg//zSJt7O4L5YBXo3cw9E1X+BGwHh0GjW2FWYmaB/SCWx1/BA3AbPANfQA++pVS+NcmLwTqQCW76IaYQLGX+HOzgv/1l8azOIAusBP3BDbAB5DoVE9HEuZNKSB5IBAdshBh8U/mgD++X2AJCLRWzD8xgngHWGu5DRC8GS3i8nN3mSoyMkWzm6eC04S32KkHSVSOcipGxU8J8Ezhr+BMi6KjqfkdiVoB24A3IUdfjOCu8xDzQwGfNsRPTHmxW/aujlINxmQcxf8BqNaAtxaSAKNaRU+raZDBSFTMvcYhtAuhmJWY882th18x1Yiu44lHMZ1DOPM1KzBjmV9X5vmAAS3qOT4PZnBSpVmLim+iKOLZVDoqd03iq/mizYqKYf1fnzXMfDf/iG9sYKzF1zKPV+Xq2sT6K6cS2zkpMLfMkdf4123gHNsNpJLCtthJzi/kEdb6GY0gK4UafxKSzvWMlxpxF48JNGNv1rDleu2gI8zNWYso5RrqoFVviEs2UaTm9xEK2Yso+WImpV7Uk3BDP5lKQ51FMvtPlwBTRSJ+7Jmzs7PYopIhj7y044kTMD7WibgNTfBq02bSiEjPdmKtSmmmJC2CqRyFZdI4GvfD9sOpuazsXqTXkHB8ScCkimoa+iMd76PSkXh1knRnt1JCnqyVffM4LdmF3GxG9aMRqlKHPVXkEp7eIuqumuu1WJZO2YSer8HFlHeVBjzkLY7i6y0Zukvp9JevU5TCjLj74OhjLHehQ7kj/RcBme9uBu8kF3AvZRQV9byGPxUXu4lvLUPfdo3GTP5SMLW6VEzE6BrMSS3/3pNCf4BXf1kVlEwy13lUyL+aYNKOMu1BZOAdCUK0bMS0JGSdz1Q6hhMe6+g8Cn6SNMFo3pJAeA9N5LBPhhLqWwiWiq9je1hZjqMVxmip+5mIpW5hkGrvEthIjcV59PkkzTT7GSgNXAKMtxZimP1V913kfCoWq+Wnld1uLMc3VKPCSIvqBdzKu/gowAICpvmijfvwCAAAAAElFTkSuQmCC");
    -webkit-background-size: 13px 13px;
    background-size: 13px 13px;
    background-color: #F2F3F5;
}

.searchbar input[type=search]::-webkit-input-placeholder {
    color: #939398;
    opacity: 1
}

.searchbar input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.searchbar .searchbar-clear {
    position: absolute;
    width: 28px;
    height: 28px;
    right: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%238e8e93'%2F%3E%3Cline%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E");
    -webkit-background-size: 14px 14px;
    background-size: 14px 14px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    cursor: pointer
}

.searchbar .searchbar-cancel {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
}

.searchbar.searchbar-active .searchbar-cancel {
    margin-left: 8px;
    opacity: 1;
    pointer-events: auto
}

.searchbar.searchbar-active .searchbar-cancel.active-state,html:not(.watch-active-state) .searchbar.searchbar-active .searchbar-cancel:active {
    opacity: .3;
    -webkit-transition-duration: 0s;
    transition-duration: 0s
}

.search-list-box {
    box-sizing: border-box;
    padding:0 10px;
    width: 100%;
    margin-top: 20px;
}

.search-list-item {
    overflow: hidden;
    width: 25%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #333;
    margin-top: 20px;
}

.search-list-item-txt {
    padding-top: 20px;
}

.search-list-item-img img{
    width: 40px;
    height: 40px;
}

.search-result {
    position: relative;
    background: #fff;
    margin-top: 40px;
    display: none;
}

.search-result-main {
    margin: 0 20px;
    position: relative;
    height: 70px;
}
.search-main-box {
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 1px 6px 6px rgba(0,0,0,0.1);
    position: absolute;
    top: -10px;
    background: #fff;
    width: 100%;
    display: flex;
    padding: 10px;
}
.search-result-img img{
    border-radius:5px;
    width: 50px;
    height: 50px;
}

.search-result-tit {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
.search-result-tit .line1{
    font-size: 14px;
}
.search-result-tit .line2{
    font-size: 20px;
}

.search-result-msg-list li{
    border-bottom: 1px solid #e1e1e1;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    font-size: 14px;
}

.search-result-msg-list li:last-child{
    border: none;
}

/*分类详细*/
.category-box-head {
    display: flex;
    align-items: center;
    height: 60px;
    overflow: hidden;
}

.category-box-head-img{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.category-box-head-img img{
    float: left;
}
.category-box-head-txt {
    display: flex;
    flex: 1;
    height: 50px;
    line-height: 50px;
}

.category-box-head-txt strong{

}

.category-box-main {
    padding: 10px 0;
    height: 70px;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0 10px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.category-box-main-left {
    overflow: hidden;
    flex: 3;
    display: flex;
    align-items: center;
}
.category-box-main-left span{
    color: #0ad800;
}
.category-box-main-left i{
    margin: 0 5px;
}
.category-box-main-left i:last-child{
    display: none;
}

.category-box-center {
    width: 16px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-box-right{
    display: flex;
    flex: 1;
    line-height: 50px;
    justify-content: center;
}

.category-box-right span{
    color: #f00;
}

.category-list-box {
    margin-top: 20px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.category-list-txt {
    margin-top: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.category-list-img{
    text-align: center;
}
.category-list-img img{
    border-radius: 5px;
    width: 80%;
}

.category-list-txt span{
    display: block;
    text-align: center;
    font-size: 12px;
}

.category-list-item {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
}

.common-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8888;
    background: rgba(0,0,0,.8);
    display: none;
}
.index9999{
    z-index: 9999;
}

.searchbar-result-list {
    overflow: hidden;
    background: #fff;
    position: relative;
    margin-top: 10px;
}
.searchbar-result-item {
    padding: 10px;
    background: #fff;
    border-top: 1px solid #e1e1e1;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.searchbar-result-item:last-child {
    border-bottom: 1px solid #e1e1e1;
}