Vue实现搜索结果高亮显示关键字

2023-08-22 22:31:04 261

.re_search{ background:#0096ff; line-height:0; padding:.2rem; svg{ width:.6rem; height:.6rem; } input[type="search"]{ display:inline-block; height:.9rem; width:8rem; outline:none; border:none; border-radius:.45rem; background:#f2f2f2; box-sizing:border-box; padding:0.5rem; font-size:.4rem; } }

@baseBlue:#0096ff; @com_gray1:#666; @com_gray2:#999; .search-text{ color:#52250a; background:#ffd930; font-size:.2rem; padding:.02rem; border-radius:2px; vertical-align:top; margin-right:.04rem; } .com_gray1{ color:@com_gray1; } .com_gray2{ color:@com_gray2; } .com_blue{ color:@baseBlue; } /*单个商家*/ .one_business{ background:#fff; .business_img{ width:1.6rem; height:1.6rem; padding:0.4rem; float:left; img{ width:100%; height:100%; } } .business_info{ float:right; width:7.4rem; height:1.6rem; padding:0.4rem.2rem.4rem0; .business_name{ font-size:.35rem; line-height:.45rem; vertical-align:top; h3{ width:5rem; display:inline-block; /*span{*/ /*color:#52250a;*/ /*background:#ffd930;*/ /*font-size:.2rem;*/ /*padding:.02rem;*/ /*border-radius:2px;*/ /*vertical-align:top;*/ /*margin-right:.04rem;*/ /*}*/ } .bzp{ width:.3rem; height:.3rem; font-size:.26rem; text-align:center; line-height:.3rem; display:inline-block; color:@com_gray2; border:0.01remsolid#ddd; padding:0.01rem; border-radius:3px; i{ font-style:normal; } } } .business_code,.business_other{ font-size:.25rem; margin-top:.3rem; line-height:.25rem; } } .code_num{ svg{ width:.3rem; height:.3rem; fill:#ffaa0c; } } .zsd{ font-size:.25rem; height:.35rem; line-height:.3rem; padding:00.05rem; display:inline-block; color:@baseBlue; background:#fff; border:0.01remsolid@baseBlue; box-sizing:border-box; border-radius:3px; } .fnzs{ font-size:.25rem; height:.35rem; padding:00.05rem; line-height:.3rem; display:inline-block; background:@baseBlue; color:#fff; border:0.01remsolid@baseBlue; box-sizing:border-box; border-radius:3px; } }

Vue实现搜索结果高亮显示关键字

热门推荐

随机推荐