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

<template>
	<view>
		
		<!-- 搜索 -->
		<view class="search">
			<u-search :clearabled="false" placeholder="输入姓名或手机号搜索" v-model="keyword"></u-search>
		</view>
		<!-- 筛选 -->
		<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="details">
			<view class="detail-item" v-for="item in 8">
				<view class="head">
					<view class="name">
						李四
					</view>
					<view class="tel">
						197****2849
					</view>
					<view class="money">
						15.00
					</view>
				</view>
				<view class="content">
					<view class="department">
						荆州地方铁路 机务段
					</view>
					<view class="date">
						4月1日 12:00
					</view>
				</view>
				
			</view>
			
		</view>
		
		
		
		<canteenTabbar  ref="mytabbar"
				current="1"></canteenTabbar>
	</view>
</template>

<script>
	import canteenTabbar from "../../../components/canteenTabbar.vue"
	export default {
		components: {
			canteenTabbar
		},
		data() {
			
			return {
				keyword: '',
				dateShow:false,
				departmentShow:false
			}
		},
		methods: {
			changeDateShow() {
				this.dateShow = !this.dateShow
			},
			changeDepartmentShow() {
				this.departmentShow = !this.departmentShow
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
	}
	// 搜索
	.search{
		padding: 16rpx 32rpx;
		background-color: #fff;
		/deep/.u-search{
			position: relative;
		}
		/deep/.u-action{
			position: absolute;
			right: 16rpx;
			color: rgba(31, 74, 153, 1);
		}
	}
	
// 筛选
.options{
		background-color: #fff;
		padding: 0 92rpx;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		color: #7D7D7D;
		border-bottom: 1px solid rgba(232, 232, 232, 1);
		.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;
			}
		
		}
	}

// 明细
.details{
	background-color: #fff;
	.detail-item{
		padding: 32rpx;
		border-bottom: 1px solid rgba(232, 232, 232, 1);
		.head{
			display: flex;
			align-items: center;
			.name{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-family: 'PingFang Regular';
				font-weight: bold;
			}
			.tel{
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				
				margin-left: 16rpx;
			}
			.money{
				color: rgba(31, 74, 153, 1);
				font-size: 40rpx;
				font-weight: bold;
				margin-left: auto;
			}
		}
		
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: 'Alibaba-PuHuiTi-Regular';
			color: rgba(119, 119, 119, 1);
			margin-top:12rpx;
		}
	}
}
</style>