hldy_app_mini/pages/material/component/sxd.vue

<template>
	<view>
		<view class="box guodu"  :style="!show?'width: 0;right:-6vw':'width: 67vw'" >
			<view class="title">
				<view></view>
				随行单
			</view>
			<scroll-view scroll-y="true" class="scrolsxd">
				<view>
					<view class="cgz">
						<view class="left">
							<image src="/static/index/material/cgd.png" mode="aspectFill"></image>
							采购单
						</view>
						<view class="cd">
							采购中
						</view>
					</view>
					<view class="dz">
						<view>采购单号：</view>
						 101C20251121006 
						 <view class="je">
							 <text> ￥25</text>
							 <text>订单金额</text>
						 </view>
					</view>
					<view class="dz">
						<view>采购日期：</view>
						   2025-10-12
					</view>
					
					<view class="cgz top1">
						<view class="left">
							<image src="/static/index/material/jg.png" mode="aspectFill"></image>
							机构信息
						</view> 
					</view>
					
					<view class="dz">
						<view>机构名称：</view>
						吉林省久泰健康产业有限公司
					</view>
					<view class="dz">
						<view>收货地址：</view>
						 吉林省长春市朝阳区开运街41号吉省长春市朝阳区开运街41号 
					</view>
					<view class="dz">
						<view>联系人：</view>
						 张某 
					</view>
					<view class="dz">
						<view>电话：</view>
						13845337753
					</view>
					
					<view class="cgz top1">
						<view class="left">
							<image src="/static/index/material/gys.png" mode="aspectFill"></image>
							供应商信息
						</view> 
					</view>
					 
					<view class="dz">
						<view>供应商：</view>
						吉林天林商贸有限公司
					</view>
					<view class="dz">
						<view>联系人：</view>
						吕婧文
					</view>
					<view class="dz">
						<view>电话：</view>
						13356856633
					</view>
					
					<view class="conts">
						<view class="tittop">
							<text>纸尿裤-拉拉裤纸尿裤</text>
							<view>
								采购数量
								<text>155</text>
							</view>
						</view>
						<view class="dz">
							<view>规格型号：</view>
							800mm*680mm
						</view>
						<view class="dz">
							<view>品牌型号：</view>
							品牌型号名称
						</view>
						<view class="dz">
							<view>生产厂家：</view>
							吉林省捌零信创科技有限
						</view>
						
						<view class="jglb" style="margin-top: 2.5vw;">
							<view>
								<text>¥0.32</text>
								<text>采购价格</text>
							</view>
							<view>
								<text>片</text>
								<text>采购单位</text>
							</view>
							<view class="l">
								<text>¥0.56</text>
								<text>销售价格</text>
							</view>
							<view class="l">
								<text>片</text>
								<text>销售单位</text>
							</view>
						</view>
						<view class="jglb">
							<view>
								<text>350</text>
								<text>入库数量</text>
							</view>
							<view>
								<text>150</text>
								<text>挂账数量</text>
							</view>
							<view >
								<text>12</text>
								<text>销账数量</text>
							</view>
							<view >
								<text>￥0.56</text>
								<text>销售金额</text>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
	 const props = defineProps({
	 	show: {
	 		type: Boolean 
	 	},
	 })
	 
</script>

<style lang="less" scoped>
	.conts{
		width: 57vw;
		height: 36vw;
		background: #FFFFFF;
		border-radius: 1.6vw;
		border: 1px solid #DCDCDC;
		padding: 1.8vw 3.3vw;
		margin-top: 2vw;
		.jglb{
			width: 100%;
			height: 9vw;
			border-top: 1px solid #E5E5E5;
			display: flex;
			justify-content: space-between;
			view{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				text{
					&:nth-child(1){
						font-size: 2.1vw;
						color: #555555;
						font-weight: bold;
					}
					&:nth-child(2){
						font-size: 1.4vw;
						color: #555555;
					}
				}
			}
			.l{
				color: #0385FA;
			}
		}
		.tittop{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 4.5vw;
			border-bottom: 1px solid #E5E5E5;
			margin-bottom: 1.5vw;
			text{
				font-weight: bold;
				font-size: 2.1vw;
				color: #222222;
			}
			view{
				font-size: 1.3vw;
				color: #888888;
				text{
					font-weight: bold;
					font-size: 2.4vw;
					color: #333333;
					margin-left: 0.6vw;
				}
			}
		}
	} 
.box{
	width: 0;
	height: 100vh;
	background: #FFFFFF;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1011;
	overflow: hidden;
	border-radius: 3vw 0 0 3vw;
	padding: 3vw;
	.scrolsxd{
		width: 100%;
		height: calc(100vh - 10vw);
		margin-top: 2vw;
		padding-left: 1.2vw;
		.dz{
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 0.7vw;
			font-size: 1.4vw;
			color: #333333;
			position: relative;
			view{
				width: 7vw;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.je{
				flex-direction: column;
				justify-content: center;
				position: absolute;
				right: 0;
				top: -0.5vw;
				text{
					&:nth-child(1){
						font-weight: bold;
						font-size:2.4vw;
						color: #333333;
					}
					&:nth-child(2){
						font-size:1.3vw;
						color: #888888;
					}
				}
			}
		}
		.top1{
			margin-top: 1vw;
		}
		.cgz{
			width: 100%;
			height: 4.2vw;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #E5E5E5;
			margin-bottom: 2vw;
			.left{
				font-weight: bold;
				font-size: 1.7vw;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					width: 2.1vw;
					height: 2.1vw;
					margin-right: 0.8vw;
				}
			}
			.cd{
				width: 7.9vw;
				height: 3.2vw;
				border-radius: 1.1vw;
				border: 1px solid #0385FA;
				font-size: 1.6vw;
				color: #0385FA;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.title{
		font-size: 1.7vw;
		color: #222222;
		display: flex;
		align-items: center;
		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>