<template>
  <view class="search">
    <view class="search-item">
      <u-search :showAction="true" actionText="取消" />
    </view>
    <!-- 搜索历史 -->
    <view class="history">
      <view class="history-top">
        <hotCom>搜索历史</hotCom>
        <view class="history-right">
          <u-icon name="trash" />
          <text>删除记录</text>
        </view>
      </view>
      <view class="label">
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="history">
      <view class="history-top">
        <text class="hotCom">热门搜索</text>
      </view>
      <view class="label">
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
        <u-tag text="标签" class="label-item" />
      </view>
    </view>

    <u-divider text="猜你喜欢"></u-divider>

    <!-- 列表 -->
    <view class="hot">
      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
      <view>
        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
        <view class="item-flex">
          <view class="star">
            <u-rate :count="count" v-model="value" />
            <text class="line">|</text>
          </view>
          <view>989单</view>
        </view>
        <view class="address-flex">
          <view>宝安中心区美容洗车</view>
          <view>2.7km</view>
        </view>
      </view>
    </view>
    <view class="hot">
      <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
      <view>
        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
        <view class="item-flex">
          <view class="star">
            <u-rate :count="count" v-model="value" />
            <text class="line">|</text>
          </view>
          <view>989单</view>
        </view>
        <view class="address-flex">
          <view>宝安中心区美容洗车</view>
          <view>2.7km</view>
        </view>
      </view>
    </view>
    <view class="hot">
      <Image src="https://cdn.uviewui.com/uview/album/3.jpg"></Image>
      <view>
        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
        <view class="item-flex">
          <view class="star">
            <u-rate :count="count" v-model="value" />
            <text class="line">|</text>
          </view>
          <view>989单</view>
        </view>
        <view class="address-flex">
          <view>宝安中心区美容洗车</view>
          <view>2.7km</view>
        </view>
      </view>
    </view>
    <view class="hot">
      <Image src="https://cdn.uviewui.com/uview/album/4.jpg"></Image>
      <view>
        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
        <view class="item-flex">
          <view class="star">
            <u-rate :count="count" v-model="value" />
            <text class="line">|</text>
          </view>
          <view>989单</view>
        </view>
        <view class="address-flex">
          <view>宝安中心区美容洗车</view>
          <view>2.7km</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 5, 
      value: 4,
      close2: true,
      radios: [{
        checked: true
      }
      ],
      checkboxs: [{
        checked: true
      }
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.search {
  min-height: 100vh;
  background-color: #fff;
}

/* 搜索样式 */
.search-item {
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

/* 搜索历史样式 */
.history {
  padding: 30rpx;
  margin-bottom: 10rpx;

  .history-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;

    .history-right {
      margin-top: 15rpx;
      display: flex;
      font-size: 12px
    }

    hotCom {
      font-size: 15px;
      font-weight: bold;
      color: #404045;
    }
  }
}

.label {
  display: flex;
  flex-wrap: wrap;

  .label-item {
    margin-right: 10rpx;
  }
}

// 列表
.hot {
    height: 220rpx;
    background-color: #fff;
		padding: 0 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    Image {
      width: 120px;
      height: calc(100% - 20rpx);
      margin: 10rpx 20rpx 10rpx 0;
    }
    .item-text {
      font-weight: bold;
			margin: 10rpx 0 10rpx;
			color: #333;
    }
    .item-flex {
      display: flex;
			justify-content: space-between;
			font-size: 14px;
			margin: 0 20rpx 30rpx 0;
			color: #0d0d0d66;
			.star{
				display: flex;
				.line{
					margin-left: 18rpx;
					margin-top: 5rpx;
					font-size: 24rpx;
				}
			}
    }
    .address-flex {
      display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #999;
			margin-right: 20rpx;
    }
  }
</style>