<template>
	<view class="head">
		<view class="df aic jcsa">
			<div class="df">
				<div class="time">2023.09.12-2023.10.12</div>
				<u-icon name="arrow-down"></u-icon>
			</div>
		</view>
		<view class="xuknm"></view>
		<view class="">
			<u-tabs :list="list1" lineWidth=0 :activeStyle="{
				width:'142rpx',
				height:'50rpx',
				background:'#21BBF3',
				borderRadius:'30rpx',
				display:'flex',
				alignItems:'center',
				justifyContent:'space-around',
				color:'#fff',
				fontWeight:'400',
				fontSize:'20rpx',
				lineHeight:'28rpx',
			}" :inactiveStyle="{
				width:'142rpx',
				height:'50rpx',
				background:'#FFFFFF',
				borderRadius:'30rpx',
				border:'2rpx solid #EBEBEB',
				fontSize:'20rpx',
				fontWeight:'400',
				color:'#222222',
				lineHeight:'28rpx',
				display:'flex',
				alignItems:'center',
				justifyContent:'space-around',
			}" @click="click"></u-tabs>
			<commodity v-if="index==0"></commodity>
			<classify v-if="index==1"></classify>
		</view>
	</view>
</template>

<script>
	import commodity from "./commodity.vue"
	import classify from "./classify.vue"
	export default {
		components:{
			commodity,classify
		},
		data() {
			return {
				index:0,
				list1:[
					{name:'商品'},
					{name:'分类'}
				]
			};
		},
		methods: {
		            click(item) {
		                console.log('item', item);
						this.index=item.index
		            }
				}
	}
</script>

<style lang="scss">
	::v-deep{
		.u-tabs__wrapper__nav{
			width: 100% !important;
			
		}
		.u-tabs__wrapper__nav__item{
			padding: 0 90rpx !important;
		}
	}
.head{
	padding: 40rpx 32rpx 32rpx 32rpx;
	margin: 0 auto;
	margin-top: 24rpx;
	width: 702rpx;
	height: 1256rpx;
	background: #FFFFFF;
	box-sizing: border-box;
	border-radius: 16rpx;
	.time{
		margin-right: 12rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 34rpx;
	}
	.xuknm{
		width: 638rpx;
		height: 2rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin: 28rpx 0 30rpx 0;
	}
}
</style>
