zfire-newmall-admin/src/views/bigViews/dataView1/components/accessoryStatistics.vue

<template>
	<moduleEnclosure title="近30日辅配件统计">
		<div class="heat-lay">
			<div class="mode">
				<div class="title">辅材销售</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">辅材退货</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">配件销售</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">配件退货</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">新件待返还</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">旧件待返还</div>
				<div class="num">12342</div>
			</div>
			<div class="mode">
				<div class="title">旧件待返厂</div>
				<div class="num">12342</div>
			</div>
		</div>
	</moduleEnclosure>
</template>

<script>
	import moduleEnclosure from '@/components/moduleEnclosure.vue';
	export default {
		components: {
			moduleEnclosure,
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		beforeUnmount() {

		},
		methods: {

		},
	};
</script>

<style scoped lang="scss">
	.heat-lay {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 20px;
		.mode {
			width: 25%;
			.title {
				font-size: 16px;
				color: #ffffff;
				margin-bottom: 10px;
			}
			.num {
				color: #33a8c9;
				font-size: 22px;
				font-weight: bold;
			}
		}
	}
</style>