RedDragonfly/pages/bazaar/VaseYard/reportedRecord.vue

<template>
	<view class="reportedRecord">
		<view class="top">
			<view class="time">
				<picker mode="date" fields="month" :value="date" @change="bindDateChange">
					<view class="uni-input">月份</view>
				</picker>
			</view>
		</view>
		<view class="main">
			<view class="tab" v-for="v in 10" :key="v">
				<view class="name">
					红蜻蜓三级香菜籽油20L
				</view>
				<view class="">
					0箱 / 1瓶 / 0.00吨
				</view>
			</view>
		</view>
		<view class="bom">
			合计: 0个上报记录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: ''
			};
		}
	}
</script>

<style lang="scss">
	.reportedRecord {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #e40315;
			position: relative;

			.time {
				position: absolute;
				top: 0;
				right: 0;
				text-align: center;
				width: 100rpx;
				height: 100%;
				color: #fff;
			}
		}

		.main {
			flex: 1;
			overflow-y: scroll;
			padding: 0 20rpx;

			.tab {
				padding: 15rpx 0;
				border-bottom: 1rpx solid #e3e3e3;

				.name {
					margin-bottom: 20rpx;
				}
			}
		}

		.bom {
			height: 120rpx;
			border-top: 10rpx solid #f1f1f1;
			text-align: center;
			line-height: 120rpx;
			color: #e40315;
			font-size: 26rpx;
		}
	}
</style>