jsh_erp_app/pages/check/components/check-item.vue

<template>
	<view class="check-item">
		<view class="header-box">
			<view class="header-box-l">
				<view class="header-box-name">2025年中心仓第三季度食品盘点</view>
				<view>盘点单号：2024202244</view>
			</view>
			<view>
				<view class="tips-box tips-red">待盘点</view>
				<!-- <view class="tips-box tips-green">已盘点</view>
				<view class="tips-box tips-hui">已取消</view>
				<view class="tips-box tips-yellow">盘点中</view> -->
			</view>
		</view>
		<view class="cont-box">
			<view class="cont-item">
				<view class="item-label">盘点仓库</view>
				<view class="item-val">中心仓</view>
			</view>
			<view class="cont-item">
				<view class="item-label">创建人</view>
				<view class="item-val">刘双美</view>
			</view>
			<view class="cont-item">
				<view class="item-label">盘点负责人</view>
				<view class="item-val">刘双美</view>
			</view>
			<view class="cont-item">
				<view class="item-label">货物种类</view>
				<view class="item-val">20</view>
			</view>
			<view class="cont-item">
				<view class="item-label">货物总量</view>
				<view class="item-val">80件</view>
			</view>
			<view class="cont-item">
				<view class="item-label">库位范围</view>
				<view class="item-val">A区-B区</view>
			</view>
			<view class="cont-item">
				<view class="item-label">创建时间</view>
				<view class="item-val">2025-04-03</view>
			</view>
			<view class="cont-item">
				<view class="item-label">盘点时间</view>
				<view class="item-val">2025-04-03</view>
			</view>
			<view class="cont-item">
				<view class="item-label">盘点人</view>
				<view class="item-val">刘双美</view>
			</view>
		</view>
	
		<view class="btn-box">
			<!-- <u-button class="detail-btn" type="primary" text="详情"></u-button> -->
			<u-button class="detail-btn" type="primary" text="去提交"></u-button>
			<u-button class="detail-btn ss-m-l-24" type="primary" text="去盘点"></u-button>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.check-item {
		padding: 24rpx 24rpx 0 24rpx;
		// border-radius: 16px;
		background: #FFF;
		border-bottom: 4rpx solid #F0F6FB;
		.header-box {
			display: flex;
			justify-content: space-between;
			.header-box-l {
				color: #999;
				font-size: 28rpx;
				font-weight: 400;
				.header-box-name {
					color: #333;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			.tips-box {
				width: 120rpx;
				height: 44rpx;
				font-size: 22rpx;
				text-align: center;
				line-height: 44rpx;
				border-radius: 8rpx;
			}
			.tips-red {
				color: #FF3B1D;
				background: rgba(255, 59, 29, 0.20);
			}
			.tips-green {
				color: #00B97B;
				background: rgba(0, 185, 123, 0.20);
			}
			.tips-hui {
				color: #BFC8DB;
				background: rgba(173, 181, 189, 0.26);
			}
			.tips-yellow {
				color: #F59701;
				background: rgba(245, 151, 1, 0.20);
			}
		}
		.cont-box {
			border-radius: 16rpx;
			background: #F6F8FA;
			margin-top: 16rpx;
			padding: 24rpx;
			display: grid;
			grid-template-columns: 33.3% 33.3% 33.3%;
			.cont-item {
				margin-bottom: 20rpx;
				.item-label {
					color: #999;
					font-size: 24rpx;
					font-weight: 400;
					margin-bottom: 6rpx;
				}
				.item-val {
					color: #000;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 16rpx 0 24rpx;
			.detail-btn {
				width: 144rpx;
				height: 56rpx;
				border-radius: 28rpx;
				background: #0256FF;
				font-size: 32rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>