jp-railway/pages/canteenManagement/dataStatistics/records.vue

<template>
	<view>
		<u-navbar title="订餐上报"></u-navbar>
		<!-- 筛选 -->
		<view class="options">
			<view class="date-option" @click="changeDateShow">
				2023年4月<u-icon name="arrow-down" size="24"></u-icon>
				<view class="date-box" v-if="dateShow">
					<view class="options-item">
						2023年4月
					</view>
					
					
				</view>
			</view>
			<view class="department-option" @click="changeDepartmentShow">
				全部部门<u-icon name="arrow-down" size="24"></u-icon>
				<view class="department-box" v-if="departmentShow">
					<view class="options-item">
						全部部门
					</view>
					
					
				</view>
			</view>
		</view>
		<!-- 记录卡片 -->
		<view class="main">
			<view class="record-card" v-for="item in 6">
				<view class="record-title">
					<view class="date">
						2023年4月10日 星期一
					</view>
					<view class="people-number">
						订餐人数 <text class="num1">29</text>
					</view>
				</view>
				<view class="classify">
					<view class="item">
						<view class="type1">
							机务段
						</view>
						<view class="number">
							订餐人数 <text class="num2">10</text>
						</view>
					</view>
			
					<view class="item">
						<view class="type2">
							荆州南
						</view>
						<view class="number">
							订餐人数 <text class="num3">19</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">没有更多数据了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow:false,
				departmentShow:false
			}
		},
		methods: {
			changeDateShow() {
				this.dateShow = !this.dateShow
			},
			changeDepartmentShow() {
				this.departmentShow = !this.departmentShow
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
		font-family: 'PingFang Regular';
	}
	// 筛选
	.options{
		background-color: #fff;
		padding: 0 92rpx;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		color: #7D7D7D;
		.date-option,.department-option{
			position: relative;
		}
		/deep/.uicon-arrow-down{
			margin-left: 8rpx;
		}
		.date-box{
			background-color: #fff;
			z-index: 999;
			width: 180rpx;
			box-shadow: 0px 0px 2px #999999;
			position: absolute;
			top: 70rpx;
		    right: 0px;
		
			.options-item {
				line-height: 60rpx;
				padding-left: 8rpx;
				background-color: #2A8EFB ;
				color: #fff;
			}
		
		}
		.department-box{
			background-color: #fff;
			z-index: 999;
			width: 180rpx;
			box-shadow: 0px 0px 2px #999999;
			position: absolute;
			top: 70rpx;
		    left: 0px;
		
			.options-item {
				line-height: 60rpx;
				padding-left: 8rpx;
				background-color: #2A8EFB ;
				color: #fff;
			}
		
		}
	}

// 记录卡片
.main{
	padding: 0 32rpx;
}
.record-card {
		padding: 24rpx;
		margin-top: 24rpx;
		border-radius: 12px;
		
		background-color: rgba(255, 255, 255, 1);

		.record-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.date {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
		 }

			.people-number {
				color: rgba(51, 51, 51, 1);
				font-size: 16px;

				text {
					margin-left: 8rpx;
				}
			}
		}

		.classify {
			display: flex;

			align-items: center;

			.item {
				display: flex;
				align-items: center;

				.type1 {
				 width: 112rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 4px;
					border: 1px solid rgba(96, 184, 201, 1);
					color: rgba(96, 184, 201, 1);
					text-align: center;
					margin-right: 8rpx;
				}

				.type2 {
					width: 112rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 4px;
				 border: 1px solid rgba(77, 140, 255, 1);
					color: rgba(77, 140, 255, 1);
					text-align: center;
					margin-right: 8rpx;
				}

				.number {
					color: rgba(51, 51, 51, 1);

					text {
						margin-left: 8rpx;
					}
				}
			}

			.item:nth-of-type(2) {
				margin-left: 48rpx;
			}
		}

		.num1 {
			color: #FF6923;
			font-weight: bold;
		}

		.num2 {
			color: #85C8D5;
			font-weight: bold;
		}

		.num3 {
			color: #74A5FF;
			font-weight: bold;
		}
	}
	/deep/.u-divider{
		margin-top: 40rpx !important;
		font-family: 'PingFang Regular';
	}
</style>