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

<template>
	<view>
		<view class="head">
			<view class="title">
				<view class="name">
					食堂管理系统
				</view>
				<view class="option" @click="changePlaceShow">
					地方铁路食堂<u-icon name="arrow-down"></u-icon>
					<view class="options-box" v-if="placeShow">
						<view class="options-item">
							选项1
						</view>
						<view class="options-item">
							选项2
						</view>
						<view class="options-item">
							选项3
						</view>
					</view>
				</view>

			</view>
			<!-- 曲线图 -->
			<view class="chart">
				<view class="chart-title">
					<view class="name">
						月度饭卡消费曲线图
					</view>
					<view class="time" @click="changeTimeShow">
						2023年4月<u-icon name="arrow-down"></u-icon>.
						<view class="time-box" v-if="timeShow">
							<view class="options-item">
								2023年4月
							</view>

						</view>
					</view>
				</view>
				<img src="../../../assets/img/chart.png" alt="">
			</view>

		</view>

		<!-- 订餐上报 -->
		<view class="order-food">
			<view class="title">
				<view class="name">
					<text><img src="../../../assets/img/riLine-calendar-2-line@1x.png" alt=""></text>订餐上报
				</view>
				<view class="record">
					全部记录 <u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<!-- 记录卡片 -->
			<view class="record-card" v-for="item in 2">
				<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>

<canteenTabbar  ref="mytabbar"
		current="0"></canteenTabbar> 
	</view>
</template>

<script>
	import canteenTabbar from "../../../components/canteenTabbar.vue"
	export default {
		components: {
			canteenTabbar
		},
		data() {
			return {
				placeShow: false,
				timeShow: false
			}
		},
		methods: {
			changePlaceShow() {
				this.placeShow = !this.placeShow
			},
			changeTimeShow() {
				this.timeShow = !this.timeShow
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100px;

	}

	.head {
		padding: 24rpx 32rpx;
		background: linear-gradient(180deg, rgba(183, 208, 255, 1) 0%, rgba(244, 244, 246, 1) 100%);
		height: 177px;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				color: rgba(31, 74, 153, 1);
				font-size: 40rpx;
				font-family: 'Medium';
			}

			.option {
				color: rgba(65, 80, 88, 1);
				font-size: 32rpx;
				position: relative;

				.options-box {
					background-color: #fff;
					z-index: 999;
					width: 240rpx;
					box-shadow: 0px 0px 2px #999999;
					position: absolute;
					top: 50rpx;
					left: 0px;

					.options-item {
						line-height: 60rpx;
						padding-left: 8rpx;
					}

				}
			}
		}

		// 曲线图
		.chart {
			border-radius: 12px;
			margin-top: 24rpx;
			background-color: #fff;
			height: 268px;

			.chart-title {
				padding: 38rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.name {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
					font-family: 'Medium';
				}

				.time {
					color: rgba(119, 119, 119, 1);
					position: relative;

					.time-box {
						background-color: #fff;
						z-index: 999;
						width: 200rpx;
						box-shadow: 0px 0px 2px #999999;
						position: absolute;
						top: 50rpx;
						left: 0px;

						.options-item {
							line-height: 64rpx;
							padding-left: 8rpx;
						}

					}
				}
			}

			img {
				width: 100%;
				height: 200px;
			}
		}
	}

	// 订餐上报

	.order-food {
		padding: 0 32rpx;
		margin-top: 160px;
		font-family: 'PingFang Regular';

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				color: rgba(56, 109, 205, 1);
				font-size: 36rpx;
				line-height: 36rpx;
				font-weight: bold;

				text {
					vertical-align: middle;
					margin-right: 8rpx;
				}
			}

			.record {
				color: rgba(119, 119, 119, 1);

			}
		}
	}

	// 记录卡片
	.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/.uicon-arrow-down,
	/deep/.uicon-arrow-right {
		margin-left: 8rpx;

	}
</style>