chelvc-custom/src/client/search/index.vue

<template>
  <view class="search">
    <view class="searchItem">
      <u-search :showAction="true" actionText="取消" />
    </view>
    <!-- 搜索历史 -->
    <view class="history">
      <view class="historyTop">
        <h3>搜索历史</h3>
        <view class="historyRight">
          <i class="iconfont icon-sanjiaoxing1"></i>
          <text>删除记录</text>
        </view>
      </view>
      <view class="label">
        <u-tag text="标签" class="labelItem" plain shape="circle"></u-tag>
        <u-tag text="标签" plain shape="circle"></u-tag>
        <u-tag text="标签" plain shape="circle"></u-tag>
        <u-tag text="标签" plain shape="circle"></u-tag>
        <u-tag text="标签" plain shape="circle"></u-tag>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="history">
      <view class="historyTop">
        <h3>热门搜索</h3>
      </view>
      <view class="label">
        <u-tag text="标签" type="warning" shape="circle"></u-tag>
        <u-tag text="标签" type="warning" shape="circle"></u-tag>
        <u-tag text="标签" type="warning" shape="circle"></u-tag>
        <u-tag text="标签" type="warning" shape="circle"></u-tag>
        <u-tag text="标签" type="warning" shape="circle"></u-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.search {
  height: 1400rpx;
  background-color: #efefef;

  .searchItem {
    padding: 0 20rpx;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #fff;
    margin-bottom: 60rpx;
  }

  /* 搜索历史 */
  .history {
    padding: 20rpx;
    margin-bottom: 50rpx;

    .historyTop {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .historyRight {
        margin-top: 10rpx;
        display: flex;
        font-size:24rpx;
        .icon-sanjiaoxing1{
          margin: 5rpx 5rpx 0 0;
          font-size: 26rpx; 
        }
      }
      h3 {
        font-size: 34rpx;
        font-weight: bold;
        color:#404045;
      }
    }
    .label{
      display: flex;
      width: 120rpx;
      .labelItem{
        margin-right: 20rpx;
      }
    }
  }
}
</style>