.activeColour { color: #ffa300; } .close-icon { position: absolute; right: 20rpx; top: 0; } .search_box { position: fixed; width: 100%; z-index: 100; } .search_box .search { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 28rpx; z-index: 99; margin: auto; background: #fff; text-align: center; height: 88rpx; line-height: 88rpx; } .search_box image { width: 10%; float: left; max-height: 2.5rem; } .search_box .left { color: #ffa300; font-size: 16px; display: flex; } .search_box .left text { display: block; margin: 0 8rpx; max-width: 184rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search_box .left i:last-child { font-size: 36rpx; } .search_box .left .icon-back { font-size: 41.6rpx; color: #000; margin-right: 32rpx; } .search_box .right { width: 460rpx; height: 60rpx; background: #f5f5f5; display: flex; line-height: 60rpx; border-radius: 32rpx; padding: 0 20rpx; font-size: 14; } .search_box .right i { font-size: 36rpx; color: #999; margin-right: 12rpx; } .search_box .right input { border: none; width: 100%; } .search-popup-box { position: absolute; top: 73.6rpx; left: 64rpx; width: 25%; color: #3c3c3c; background: #fff; border-radius: 10rpx; border-bottom: 1.0016rpx solid #eee; border-left: 1.0016rpx solid #eee; border-right: 1.0016rpx solid #eee; } .popup-box { position: relative; background: #fff; display: flex; flex-wrap: wrap; padding: 32rpx; } .popup-box .p { padding: 3.2rpx 16rpx; display: inline-block; background-color: #fff2e6; color: #f4a82e; border-radius: 35.008rpx; } .box { padding-top: 16rpx; display: flex; background: #fff; line-height: 48rpx; position: relative; } .box-left { flex: 1; color: #ffa300; text-align: center; } .box-right { flex: 1; display: flex; margin: 0 auto; width: 112rpx; color: #ccc; } .icon-box { display: flex; flex-direction: column; margin-top: -6.4rpx; } .icon-member-top { height: 16rpx; } .list { background: #fff; } .list-item { display: flex; padding: 16rpx; } .item-left { flex: 0 0 160rpx; height: 160rpx; margin-right: 16rpx; } .item-left image { width: 100%; height: 100%; border-radius: 12px; } .item-right { padding: 9.6rpx; display: flex; flex-direction: column; text-align: left; justify-content: space-between; } .item-right .title { font-weight: bold; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; } .item-right .talk { color: #ccc; } .describe { font-size: 12px; color: #ccc; text-align: left; padding-top: 9.6rpx; border-top: 1.0016rpx solid #ffc29d; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; } .blue { display: inline-block; padding: 0 3.2rpx; border-radius: 2.4992rpx; background-color: #6eabff; color: #fff; } .technician-list { background-color: #fff; padding: 32rpx 0; } .tag { display: inline-block; border-radius: 12rpx; border: solid 0.4992rpx #f4a82e; padding: 3.2rpx 9.6rpx; color: #f4a82e; font-size: 12px; width: 96rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .technician-item { display: flex; padding: 16px 0; border-bottom: 1.0016rpx solid #f2f2f7; } .technician-item .number { font-size: 22px; font-weight: bold; flex: 0 0 96rpx; line-height: 128rpx; } .technician-item .pic { width: 96rpx; height: 96rpx; flex: 0 0 96rpx; margin: 16rpx; } .technician-item .pic image { width: 100%; height: 100%; border-radius: 50%; } .technician-item .technician-right { display: flex; flex-direction: column; } .technician-item .technician-right .gray { flex: 1; } .technician-item .technician-right .address { color: #ccc; } .technician-item .top { display: flex; } .technician-item .top .p { font-weight: bold; line-height: 41.6rpx; margin-right: 16rpx; } .technician-item .top .star { flex: 1; text-align: right; } .technician-item .gray { font-size: 12px; color: #b0b0b0; text-align: left; } .technician-item .describe1 { font-size: 12px; color: #ccc; text-align: left; padding-top: 9.6rpx; width: 512rpx; } .search_box .search .right input { border: none; width: 100%; height: 100%; display: flex; align-items: center; }