assess-app/pages/statistics/module/head_data.vue

<template>
	<view>
		<view class="head_data row-justify-sb center m-t30">
			<view class="data_item page-box-bg-fff column-c r-30 p-tb25">
				<image class="wh-80" src="/static/img/statistics/stat-up.png" mode=""></image>
				<view class="row-c p-tb20">
					<text class="size-40 sys-weight-600 text-color-E83">{{(moneyData.out_money).toFixed(2)}}</text>
					<text class="size-24 text-color-666 m-l10">万</text>
				</view>
				<text class="num r-10 sys-from-background-color size-24 text-color-666">放款{{moneyData.out_num}}笔</text>
			</view>
			<view class="data_item page-box-bg-fff column-c r-30 p-tb25">
				<image class="wh-80" src="/static/img/statistics/stat-down.png" mode=""></image>
				<view class="row-c p-tb20">
					<text class="size-40 text-color-108 sys-weight-600">{{(moneyData.put_money).toFixed(2)}}</text>
					<text class="size-24 text-color-666 m-l10">万</text>
				</view>
				<text class="num r-10 sys-from-background-color size-24 text-color-666">回款{{moneyData.put_num}}笔</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSysCashier
	} from "@/api/statistics";

	export default {
		name: 'head_filter',
		props: {
			'moneyData': {
				default: () => {
					return {
						out_money: 0,
						out_num: 0,
						put_money: 0,
						put_num: 0,
					}
				}
			}
		},


		data() {
			return {

			};
		},

	}
</script>

<style lang="scss" scoped>
	.head_data {
		text-align: center;

		.data_item {
			width: 330rpx;

			.num {
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
</style>