hldy_app_mini/pages/procurement/components/inboundoutbound.vue

<template>
	<view>
		<view class="crkcard guodu" :class="crk?'':'uncrkcard'">
			<!-- <view class="shopcont">
				<view class="img tp">
					<image :src=" '/static/index/warehouse/procurement/k.png'" mode="aspectFill"></image>
				</view>
				<view class="cont">
					<view>纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
					<view>规格型号: 800mm*680mm</view>
					<view>物料编码: ZHYP044</view>
					<view>
						<text>56</text>
						当前库存
					</view>
				</view>
			</view> -->
			<view class="titletop">
				出入库
			</view>
			<view class="select">
				<view>
					<view>全部</view>
					<view>日期从近到远
						<image src="/static/index/hulilist/xia.png" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<text>总计:100笔</text>
					<text>出库：50</text>
					<text>入库：50</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="crkscroll">
				<view class="cgrk" v-for="(v,i) in 15" :key='i'>
					<view>
						<text>采购入库</text>
						<text>服务指令:生活用品请领</text>
						<text>2025-02-13 17:29:18</text>
					</view>
					<view>
						<text>摘要:服务指令</text>
						<text :class="i>5?'c':'l'">+50</text>
						<text>库存：96</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			crk:false
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="less">
// 出入库
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.uncrkcard {
		top: -86vw !important;
	}

	.crkcard {
		width: 36vw;
		height: 85vh;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		right: 32vw;
		top: 7vw;
		padding: 1.5vw;
		z-index: 112;
		.titletop{
			width: 100%;
			height: 3.5vw;
			font-weight: bold;
			font-size: 1.8vw;
			color: #333333;
			line-height: 2.5vw;
		}

		.crkscroll {
			width: 100%;
			height: calc(85vh - 13vw);

			.cgrk {
				width: 100%;
				height: 8.5vw;
				background: rgba(236, 237, 239, 0.4);
				border-radius: 1.6vw;
				margin: 0.8vw auto 0;
				padding: 1.8vw 1.6vw;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&:nth-child(1) {
						text {

							&:nth-child(2),
							&:nth-child(3) {
								font-weight: 400;
								font-size: 1.1vw;
								color: #888888;
							}

							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.2vw;
								color: #333333;
							}
						}
					}

					&:nth-child(2) {
						.c {
							color: #FF6600 !important;
						}

						.l {
							color: #0076D6 !important;
						}

						text {
							font-weight: 400;
							font-size: 1.1vw;
							color: #888888;
							text-align: right;

							&:nth-child(2) {
								font-weight: bold;
								font-size: 1.4vw;
								color: #333333;
							}
						}
					}
				}
			}
		}

		.select {
			width: 100%;
			height: 7vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1vw 1.5vw;

			>view {
				display: flex;

				&:nth-child(2) {
					justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
					}
				}

				&:nth-child(1) {
					justify-content: flex-end;

					view {
						min-width: 5vw;
						height: 2.6vw;
						border-radius: 1.3vw;
						border: 1px solid #DCDCDC;
						padding: 0 1.4vw;
						align-items: center;
						display: flex;
						align-items: center;
						margin: 0 0.5vw;

						image {
							width: 0.7vw;
							height: 0.5vw;
							margin-left: 0.4vw;
						}

					}
				}
			}
		}

		.shopcont {
			width: 100%;
			height: 10vw;
			background: rgba(236, 237, 239, 0.3);
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;

			.cont {
				width: 26vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
				padding: 2vw 0;

				view {
					&:nth-child(4) {
						width: 5vw;
						height: 5vw;
						background: rgba(236, 237, 239, 1);
						border-radius: 1.4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						font-weight: 400;
						font-size: 1vw;
						position: absolute;
						color: #888888;
						top: 2.5vw;
						right: 1.8vw;
						padding: 0.5vw 0;

						text {
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
					}

					&:nth-child(2),
					&:nth-child(3) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #888888;
					}

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #212327;
					}
				}
			}

			.img {
				width: 10vw;
				height: 9vw;
			}
		}
	}
</style>