<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="lefts">
				<scroll-view   scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
						<view class="boxitem" v-for="(v,i) in 66" :key='i'></view>
				</scroll-view>
			</view>
			<view class="rights">
				<view class="shitem">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 
</script>

<style lang="less">
.box{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 4vw 2vw 0;
	overflow: hidden;
	.lefts{
		width: 70vw;
		height: 100%;
		margin-left: 1vw;
		.scroll-Y{
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		.boxitem{
			width: 22vw;
			height: 18vw;
			background: rgba(255,255,255,.7);
			border-radius: 1.6vw;
			margin: 0 1.3vw 1.2vw 0;
			border: 2px dashed #fff;
			display: inline-block;
		}
		.active{
			border: 2px dashed #017DE9 !important;
		}
	}
	.rights{
		width: 25vw;
		height: 100%;
		.shitem{
			width: 24.0vw;
			height: 10.3vw;
			background: #E8E9ED;
			border-radius: 1.6vw;
			padding: 1.8vw;
			
		}
	}
}
</style>
<style>
	page{
		background: RGBA(239, 240, 244, 1);
	}
</style>