<template>
	<view class="body">
		
		<view class="search">
			<view class="status_bar"></view>
			<view class="search1">
				<navigator url="/pages/index/search">
					<view class="navigation_seach">
							<image src="../../static/img/seach.png" mode=""></image>
							<text>search</text>
					</view>
				</navigator>
				<view class="navigation_title_right">
					<image src="../../static/img/like.png" mode=""></image>
					<uni-badge :text="5" type="error" absolute="rightTop">
						<image src="../../static/img/shop_cart.png" mode=""></image>
					</uni-badge>  
				</view>
			</view>
			
		</view>
		<view class="category">
			<view class="category_left">
				<view class="category_left_item" :class="categoryIndex==index?'categoryActive':''"  v-for="(item,index) in categoryList"  :key="index" 
				@click="changeCategory(index)">
					{{item}}
				</view>
			</view>
			
			<view class="good_body">
				<view class="good_title">PICKS FOR YOU</view>
				<view class="good_content">
					<view class="good_item" v-for="(item,index) in 5" :key="index">
						<view class="good_item_img"></view>
						<text>Women Drese</text>
					</view>
				</view>
				<view class="good_title">YOU MAY ALSO LIKE</view>
				<view class="good_content">
					<view class="good_item" v-for="(item,index) in 5" :key="index">
						<view class="good_item_img"></view>
						<text>Women Drese</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryIndex:0,
				categoryList:['CHOICE','WOMEN','MEN','KIDS','PETS','SWIMWEAR','LINGERUE&LOUNGEAR','DENIM&JEANS','ACTIVEWEAR','BEAUTY','SHOES']
			}
		},
		methods:{
			changeCategory(i){
				this.categoryIndex=i
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		padding-top: 200rpx;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.body{
		height: 100%;
	}
	.search{
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 33.33rpx 26.67rpx;
		
		position: fixed;
		top: 0;
		z-index: 99;
		border-bottom: 1px solid #F5F6FA;
		
		.search1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.navigation_seach{
				width: 546.67rpx;
				background-color: #F5F6FA;
				border-radius: 6.67rpx;
				height: 66.67rpx;
				display: flex;
				align-items: center;
				color: #8F9094;
				font-size: 26.67rpx;
				padding-left: 22rpx;
				box-sizing: border-box;
				
				image{
					width: 29.33rpx;
					height: 29.33rpx;
					margin-right: 22rpx;
				}
			}
			.navigation_title_right{
				display: flex;
				align-items: center;
				
				image{
					width: 44rpx;
					height: 44rpx;
				}
				>image:first-child{
					margin-right: 32.67rpx;
				}
			}
			
		}
		
	}
	.category{
		height: 100%;
		display: flex;
		
		.category_left{
			height: 100%;
			background-color: #F5F6FA;
			width: 197.33rpx;
			.category_left_item{
				width: 100%;
				padding: 0 18rpx;
				height: 96rpx;
				font-size: 26.67rpx;
				font-weight: 600;	
				box-sizing: border-box;
				font-family: PingFang SC;
				
				display: flex;
				align-items: center;
				word-wrap: break-word;
				word-break: break-all;
			}
			.categoryActive{
				background-color: black;
				color: white;
			}
		}
		.good_body{
			margin-left: 36rpx;
			width: 552.67rpx;
			// padding-top: 39.33rpx;
			
			.good_title{
				height: 96rpx;
				line-height: 96rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
			.good_content{
				display: flex;
				flex-wrap: wrap;
				
				.good_item{
					font-size: 22.67rpx;
					text-align: center;
					margin-right: 25.33rpx;
					margin-bottom: 51.33rpx;
					
					.good_item_img{
						display: block;
						background-color: #999999;
						width: 146.67rpx;
						height: 146.67rpx;
						margin-bottom: 22rpx;
						
					}
				}
				.good_item:nth-child(3n+3){
					margin-right: 0;
				}
			}
		}
	}
</style>