market-admin-ui/sa-view-sp/console/com-sta-data.vue

<!-- 第一行统计数据 -->
<template>
	<el-row :gutter="14">
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/icon-user.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">边民数量</p>
					<p class="sa-wnk-value">{{ sta.bm }}</p>
				</div>
			</div>
		</el-col>
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/icon-goods.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">收购商数量</p>
					<p class="sa-wnk-value">{{ sta.purchaser }}</p>
				</div>
			</div>
		</el-col>
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/icon-order.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">全部订单</p>
					<p class="sa-wnk-value">{{ sta.orders }}</p>
				</div>
			</div>
		</el-col>
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/icon-money.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">累计交易额</p>
					<p class="sa-wnk-value">{{ sta.totalMoney }}</p>
				</div>
			</div>
		</el-col>
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/finishMoney.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">完成交易额</p>
					<p class="sa-wnk-value">{{ sta.finishMoney }}</p>
				</div>
			</div>
		</el-col>
		<el-col :lg="4" :sm="8" :xs="24">
			<div class="sa-wnk">
				<img src="../../static/icon/jyz.png" />
				<div class="sa-wnk-tv">
					<p class="sa-wnk-title">交易中</p>
					<p class="sa-wnk-value">{{ sta.totalMoney-sta.finishMoney }}</p>
				</div>
			</div>
		</el-col>

	</el-row>
</template>

<script>
	module.exports = {
		props: {
			sta: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {};
		},
		methods: {

		},
		created() {

		}
	};
</script>

<style scoped>
	/* 第一行 */
	.sa-wnk {
		background-color: #fff;
		border: 1px #ddd solid;
		margin-bottom: 14px;
		min-height: 100px;
		cursor: pointer;
		transition: all 0.3s;
		overflow: hidden;
	}

	.sa-wnk:hover {
		box-shadow: 0 0 20px #999;
	}

	.sa-wnk img {
		float: left;
		line-height: 100px;
		margin: 25px 0px 0 20px;
		width: 50px;
		height: 50px;
		vertical-align: middle;
	}

	.sa-wnk .sa-wnk-tv {
		float: left;
		margin-left: 10px;
		max-width: calc(100% - 100px);
	}

	.sa-wnk-title {
		margin-top: 25px;
		font-size: 16px;
	}

	.sa-wnk-value {
		margin-top: 4px;
		font-size: 24px;
		padding-bottom: 20px;
	}
</style>