<template>
	<view>
		<view class="top-head pb20">
			<view class="top-tabbar">
				<view class="tab-item" :class="{ active: type == 0 }" @click="changeType(0)">认证资质</view>
				<view class="tab-item" :class="{ active: type == 1 }" @click="changeType(1)">注册业绩</view>
				<view class="tab-item" :class="{ active: type == 2 }" @click="changeType(2)">专属礼包</view>
			</view>
			<view class="d-b-c search-data f26">
				<view class="flex-1 gray9">日期区间</view>
				<view class="picker-item-data">{{ '2000-22-12' }}</view>
				<view style="margin: 0 60rpx;">至</view>
				<view class="picker-item-data">{{ '2000-22 -12' }}</view>
				<view class="search-radio"><text class="icon iconfont icon-sousuo"></text></view>
			</view>
		</view>
		<view>
			<view v-for="(item, index) in 4" class="product-item" :key="index">
				<view class="d-b-c mb30">
					<view class="flex-1 mr20 product-name d-s-c">
						<image src="/static/default.png" class="log-img" mode=""></image>
						<text class="f26 gray3">沙棘20年畅饮套餐</text>
					</view>
					<view class="f26 gray9">X1</view>
				</view>
				<view class="f26 mb30 d-b-c">
					<view class="domation">价值:49,500.00</view>
					<view class="gray9">2023-04-04</view>
				</view>
				<view class="f26 gray9 mb20">目标业绩: 600,000,00</view>
				<view class="f26 gray9">实际业绩: 200,000,00</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 2
		};
	},
	methods: {
		changeType(e) {
			this.type = e;
		}
	}
};
</script>

<style lang="scss">
.top-tabbar {
	border-bottom: 1rpx solid #eee;
	.tab-item {
		color: #666;
	}
	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}
.product-item {
	background: #ffffff;
	margin-bottom: 24rpx;
	padding: 26rpx 22rpx 29rpx 22rpx;
}
.log-img {
	width: 76rpx;
	height: 48rpx;
	margin-right: 12rpx;
}
</style>
