<template>
	<view>
		<view class="search_title">
			<navigator data="1" open-type="navigateBack">
				<img src="/static/img/left.png" alt="">
			</navigator>
			<uni-search-bar @confirm="search"  v-model="searchValue" class="search_title_input" cancelText="Cancel" placeholder="search"></uni-search-bar>
		</view>
		<view class="history">
			<view class="history_title">
				<text>Recently Searched</text>
				<img src="/static/img/delete.png" alt="">
			</view>
			<view class="history_lable">
				<view class="lable_item">Gold Necklaces</view>
				<view class="lable_item">Push Up Swimsuit</view>
			</view>
		</view>
		
		<view class="history">
			<view class="history_title">
				<text>Figured you’d want it</text>
			</view>
			<view class="history_lable">
				<view class="lable_item">Gold Necklaces</view>
				<view class="lable_item">Push Up Swimsuit</view>
			</view>
			<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">
				<view class="spike1_item" v-for="(item,index) in 8"  :key="index">
					<view class="spike1_item_img"></view>
					<view class="spike1_item_bottom">
						<text>US$314.00</text>
						<view class="spike1_item_text">US$12.5</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:''
			}
		},
		methods:{
			search(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_title{
		width: 100%;
		// height: 135.33rpx;
		padding: 0 26.67rpx;
		display: flex;
		align-items: center;
		
		img{
			width: 36rpx;
			height: 36rpx;
		}
		.search_title_input{
			width: 85%;
		}
	}
	.history{
		margin-top: 62.67rpx;
		padding: 0 26.67rpx;
		margin-bottom: 85.33rpx;
		
		.history_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 26.67rpx;
			img{
				width: 29.33rpx;
				height: 29.33rpx;
			}
		}
		.history_lable{
			display: flex;
			flex-wrap: wrap;
			
			.lable_item{
				padding: 13.33rpx 16rpx;
				background-color: #F5F6FA;
				color: #565656;
				font-size: 24rpx;
				margin-right: 24.67rpx;
				border-radius: 5px;
			}
			.lable_item:last-child{
				margin-right:0
			}
		}
		
		.spike1{
			white-space: nowrap;
			width: 100%;
			margin-bottom: 70.67rpx;
			margin-top: 32rpx;
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			} 
			
			.spike1_item{
				color: #191919;
				font-size: 26.67rpx;
				margin-right: 16.67rpx;
				width: 200rpx;
				display: inline-block;
				font-weight: 500;
				
				.spike1_item_img{
					width: 200rpx;
					height: 200rpx;
					
					background-color: #999999;
				}
				.spike1_item_bottom{
					padding-left: 9.33rpx;
					margin-top: 22.67rpx;
					
					.spike1_item_text{
						color: #9D9D9D;
						font-size: 21.33rpx;
						text-decoration: line-through;
					}
				}
				.spike1_item_bottom1{
					padding-left: 9.33rpx;
					margin-top: 19.33rpx;
					font-weight: bold;
					
					.spike1_item_text{
						color: #000000;
						font-size: 16rpx;
						font-weight: 400;
						margin-bottom: 20.67rpx;
						white-space: break-spaces;
						
					}
				}
				
			}
			.spike1_item:last-child{
				margin-right: 0;
			}
		}
	}
</style>