yiliangyiyun-app/pages/dataReport/costbreakdown.vue

<template>
	<view>
		<view style='background:#fff;'>
			<view class='purposewrap'>
				<view class='item left active'>合同费用</view>
				<view class='item'>库点费用</view>
				<view class='item right'>经营性费用</view>
			</view>
		</view>
		<view class='costwrap'>
			<view class='item active'>全部</view>
			<view class='item'>粮款</view>
			<view class='item'>非粮款</view>
			<view class='item'>保证金</view>
		</view>
		<view class='costwrap'>
			<view class='item'>全部</view>
			<view class='item'>煤费</view>
			<view class='item'>电费</view>
			<view class='item'>人工费</view>
			<view class='item'>杂费</view>
			<view class='item'>收款</view>
		</view>
		<view class='costlistwrap'>
			<view v-for='(item,index) in costList' :style='index!=costList.length-1?"border-bottom:2rpx solid #eee":""' class='item'>
				<view class='flex align-item-center'>
					<view v-if='item.status==1' class="status pay">付</view>
					<view v-if='item.status==2' class="status income">收</view>
					<view style='width:92%;justify-content: space-between;' class="flex align-item-center">
						<view class="costtype">{{item.costtype}}</view>
						<view class="costmoney"><text>￥</text>{{item.costmoney}}</view>
					</view>
					
				</view>
				<view style='justify-content: space-between;font-size:28rpx;margin:10rpx 0;' class='flex align-item-center'>
					<view>{{item.warehouse}}</view>
				<!-- 	<view>{{item.contract}}</view>
					<view>{{item.date}}</view> -->
					<view>{{item.name}}</view>
				</view>
				<view style='font-size:24rpx;margin:20rpx 0;' class='flex align-item-center'>
					<view class="">
						{{item.date}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				costList:[
					{status:1,
					costtype:'水费',
					costmoney:'121111',
					warehouse:'金信库',
					name:'张三',
					date:'2022.11.22 15:32:21'},{status:2,
					costtype:'水费',
					costmoney:'121111',
					warehouse:'金信库',
					name:'张三',
					date:'2022.11.22 15:32:21'}],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang='scss' scoped>
.purposewrap{
	display:flex;
	background:#fff;
	font-size:32rpx;
	margin: 0 auto;
	width:93%;
	.item{
		padding:20rpx;
		color:#7A7A7A;
		width:33.3333%;
		text-align:center;
	}
	.item.left{
		text-align:left;
	}
	.item.right{
		text-align:right;
	}
	.item.active{
		color:#262626;
		font-weight:600;
	}
}
.costwrap{
	display:flex;
	margin:10rpx 34rpx;
	.item{
		padding:10rpx 20rpx;
		color:#333333;
		text-align:center;
		border-radius:30rpx;
	}
	.item.active{
		color:#fff;
		background:#22C572;
	}
}
.costlistwrap{
	background:#fff;
	margin:0 20rpx;
	border-radius:20rpx;
	padding:0 20rpx;
	.item{
		padding:30rpx 0;
		.status{
			font-size:24rpx;
			margin-right:10rpx;
			padding:4rpx 10rpx;
			border-radius:10rpx;
		}
		.status.pay{
			background:#E9F8F0;
			color:#22C572;
		}
		.status.income{
			background:#FEECE6;
			color:#FE6430;
		}
		.costtype{
			font-size:32rpx;
			font-weight:600;
		}
		.costmoney{
			font-size:36rpx;
			font-weight:600;
			text{
				font-size:26rpx;
			}
		}
	}
}
</style>