hldy_app_mini/pages/material/component/crkval.vue

<template>
	<view>
		<view class="crkd  guodu"  :style="!show?'width: 0;right:-4vw':'width: 86.8vw'" >
			<view class="topboxs">
				<view class="title">
					<view></view>
					出入库
				</view>
				<view class="sscgd">
					<input type="text" placeholder="采购单号"/>
				</view>
				<view class="sscgd">
					<input type="text" placeholder="退货单号"/>
				</view>
				<view class="sscgd">
					<input type="text" placeholder="物料名称"/>
				</view>
				<view class="sscgd">
					<input type="text" placeholder="生产厂家"/>
				</view>
				<view class="search scr guodu">
					<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
					<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
					检索
				</view>
			</view>
			
			<view class="crklist">
				<crkitem :InvoicingList="InvoicingList" @addcartory="addcartory" @scrolltolower="scrolltolower" lower-threshold="300"
				:status="status" @crk="crk"></crkitem>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
	 import crkitem from './crkitem.vue'
	 const InvoicingList = ref([{},{},{},{},{},{},]);
	 const props = defineProps({
	 	show: {
	 		type: Boolean 
	 	},
	 })
	 const emit = defineEmits(['crk' ])
	 const crk = (v,i)=>{
		 emit('crk', v, i)
	 }
	 
</script>

<style lang="less" scoped>
	.crklist{
		width: 100%;
		height: calc(100vh - 6vw);
	}
.crkd{
	width: 86.8vw;
	height: 100vh;
	position: fixed;
	right: 0;
	top: 0;
	z-index:101;
	padding:0 0 0 1vw;
	background: #FFFFFF;
	border-radius: 3vw 0 0 3vw;
	.topboxs{
		width: 100%;
		height: 5.1vw;
		display: flex;
		align-items: center;
		padding-left: 1vw;
		.scr {
			image {
				width: 1.6vw;
				height: 1.6vw;
				margin: 0 0.5vw 0 0;
			}
		}
		
		.shr {
			display: none;
		}
		
		.scr:active .sh {
			display: none;
		}
		.scr:active {
			color: #57A8FA;
			border: 1px solid #57A8FA;
		}
		
		.shx:active .shr {
			display: inline-block;
		}
		
		.shx:active .sh {
			display: none;
		}
		
		.scr:active .shr {
			display: inline-block;
		}
		.search{
			width: 8.5vw;
			height: 3.4vw;
			background: #FFFFFF;
			border-radius: 1.5vw;
			border: 1px solid #CECECE;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sscgd{
			width: 13.8vw;
			height: 3.4vw;
			background: #FFFFFF;
			border-radius: 1.5vw;
			border: 1px solid #D2D2D2;
			margin-right: 1.2vw;
			input{
				width: 100%;
				height: 100%;
				padding: 0 1.2vw;
			}
		}
		.title{
			font-size: 1.7vw;
			color: #222222;
			display: flex;
			align-items: center;
			margin-right: 6.9vw;
			view{
				width: 0.5vw;
				height: 1.4vw;
				background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
				border-radius: 0.2vw;
				margin-right: 1vw;
			}
		}
	}
}
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	
</style>