搜索筛选-layui-ul

<div class="ul-padding-md">
    <div class="ul-link-select">
        <div class="ul-link-title">风格:</div>
        <div class="ul-link-list">
            <div class="ul-link-item current">全部 </div>
            <div class="ul-link-item">国产</div>
            <div class="ul-link-item">欧美</div>
            <div class="ul-link-item">日韩</div>
        </div>
    </div>
</div>
<div class="ul-padding-md ul-bg-white">
    <div class="ul-link-select">
        <div class="ul-link-title">风格:</div>
        <div class="ul-link-list">
            <div class="ul-link-item layui-btn layui-btn-xs">全部 </div>
            <div class="ul-link-item">国产</div>
            <div class="ul-link-item">欧美</div>
            <div class="ul-link-item">日韩</div>
        </div>
    </div>
</div>


.ul-link-select {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
}

.ul-link-title {
    margin-right: 15px;
    white-space : nowrap;
}

.ul-link-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;

}

.ul-link-item {
    padding      : 0px 10px;
    cursor       : pointer;
    margin-right : 10px;
    margin-bottom: 5px;
}

.ul-link-item.current {
    border-radius: 15px;
    border       : 1px solid #6cf;
    color        : #6cf;
}

.ul-link-select {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.ul-link-title {
  margin-right: 15px;
  white-space: nowrap;
}
.ul-link-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-link-item {
  padding: 0px 10px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 5px;
}
.ul-link-item.current {
  border-radius: 15px;
  border: 1px solid #6cf;
  color: #6cf;
}

<view class="ul-padding-md">
    <view class="ul-link-select">
        <view class="ul-link-title">风格:</view>
        <view class="ul-link-list">
            <view class="ul-link-item current">全部 </view>
            <view class="ul-link-item">国产</view>
            <view class="ul-link-item">欧美</view>
            <view class="ul-link-item">日韩</view>
        </view>
    </view>
</view>
<view class="ul-padding-md ul-bg-white">
    <view class="ul-link-select">
        <view class="ul-link-title">风格:</view>
        <view class="ul-link-list">
            <view class="ul-link-item layui-btn layui-btn-xs">全部 </view>
            <view class="ul-link-item">国产</view>
            <view class="ul-link-item">欧美</view>
            <view class="ul-link-item">日韩</view>
        </view>
    </view>
</view>

复杂检索筛选

预览效果

风格:

全部

国产

欧美

日韩

HTML
SCSS
CSS
UniApp

<div class="ul-search-container">
    <div class="ul-search-item ul-padding-md layui-bg-gray">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 180px;">
                        <select name="city" lay-verify="" lay-search="">
                            <option value="">请选择一个城市</option>
                            <option value="010">北京</option>
                            <option value="021">上海</option>
                            <option value="0571">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 180px;">
                        <select name="city" lay-verify="" lay-search="">
                            <option value="">请选择一个价位</option>
                            <option value="010">100万</option>
                            <option value="021">10万</option>
                            <option value="0571">3元</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline"><button class="layui-btn">搜索</button></div>
            </div>
        </form>
        <div class="search-item">
            <div class="ul-link-select">
                <div class="ul-link-title">风格:</div>
                <div class="ul-link-list">
                    <div class="ul-link-item current">全部 </div>
                    <div class="ul-link-item">国产</div>
                    <div class="ul-link-item">欧美</div>
                    <div class="ul-link-item">日韩</div>
                </div>
            </div>
        </div>
    </div>
</div>

.ul-search-container {

}

<view class="ul-search-container">
    <view class="ul-search-item ul-padding-md layui-bg-gray">
        <form action="" class="layui-form">
            <view class="layui-form-item">
                <view class="layui-inline">
                    <view class="layui-input-inline" style="width: 180px;">
                        <select name="city" lay-verify="" lay-search="">
                            <option value="">请选择一个城市</option>
                            <option value="010">北京</option>
                            <option value="021">上海</option>
                            <option value="0571">杭州</option>
                        </select>
                    </view>
                </view>
                <view class="layui-inline">
                    <view class="layui-input-inline" style="width: 180px;">
                        <select name="city" lay-verify="" lay-search="">
                            <option value="">请选择一个价位</option>
                            <option value="010">100万</option>
                            <option value="021">10万</option>
                            <option value="0571">3元</option>
                        </select>
                    </view>
                </view>
                <view class="layui-inline"><button class="layui-btn">搜索</button></view>
            </view>
        </form>
        <view class="search-item">
            <view class="ul-link-select">
                <view class="ul-link-title">风格:</view>
                <view class="ul-link-list">
                    <view class="ul-link-item current">全部 </view>
                    <view class="ul-link-item">国产</view>
                    <view class="ul-link-item">欧美</view>
                    <view class="ul-link-item">日韩</view>
                </view>
            </view>
        </view>
    </view>
</view>

开源信息