74 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			74 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <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> |