front-end/pt/src/Home.vue

<template>
	<div class="home">
		<el-row :gutter="20" class="card-statistics" >
			<div v-for='(res,i) in statisticsList' :key='i' @click='toPageFun(res)'>
				<el-col :md="12" :xl="6" >
					<div class="card block">
						<div class="val">
							<div class="left">
								<i class="el-icon-s-marketing"></i>
							</div>
							<div class="right">
								<p>{{res.name}}</p>
								<p>￥{{res.amount}}</p>
							</div>
						</div>
					</div>
				</el-col>
			</div>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			statisticsList:null,
			crud: {
				service: this.$service.test,
				table: {
					columns: [
						{
							type: 'index',
							align: 'center',
							width: 100
						}
					],
					op: {
						hidden: true
					},

					props: {
						'max-height': '500px'
					}
				},

			}
		};
	},
	mounted(){
		this.init();
	},
	methods: {
		init(){
			this.$service.ptAsset.ptAssetApi().then((res)=>{
				this.statisticsList = res.top;
			})
		},
		toPageFun(item){
			this.$router.push({ path: '/assets/ptYeChange', query: { type: item.id }})
		},
		toDocs() {
			window.open('');
		},
		onCrudLoad({ ctx, app }) {
			ctx({
				service: this.$service.test,
				table: {
					columns: [
						{
							type: 'index',
							align: 'center',
							width: 100
						}
					],
					op: {
						visible: false
					},
					props: {
						'max-height': '500px'
					}
				},
				layout: [['data-table']]
			}).done();
			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped>
.home {
	overflow-y: auto;
	overflow-x: hidden;

	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 20px;

		.card-title {
			color: #000;
			padding: 20px 20px 0 20px;
		}

		.card-body {
			padding: 10px;
		}
	}

	.tips {
		display: flex;
		align-items: center;
		background-color: #ECEFF0;
		padding: 15px 20px;
		border-radius: 3px;
		margin-bottom: 20px;

		.flex1 {
			flex: 1;
		}

		span {
			color: #7e7e7e;
			font-size: 12px;
		}

		.doc-btn {
			margin-right: 10px;
		}
	}

	.card-statistics {
		.block {
			background-color: #fff;
			/*height: 60px;*/
			padding: 20px;
			cursor:pointer;
			.val {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				.left {
					i {
						font-size: 34px;

						&.el-icon-s-goods {
							color: #EC5555;
						}

						&.el-icon-s-flag {
							color: #FFB431;
						}

						&.el-icon-s-custom {
							color: #9257DB;
						}

						&.el-icon-s-marketing {
							color: #00D06F;
						}
					}
				}

				.right {
					p {
						&:first-child {
							font-size: 13px;
							text-align: right;
						}

						&:last-child {
							font-size: 24px;
							margin-top: 5px;
						}
					}
				}
			}

			.desc {
				color: #999;
				font-size: 13px;
				margin-top: 20px;

				span {
					margin-left: 5px;
				}
			}
		}
	}

	.sales-top {
		color: red;
	}

	.sales-bottom {
		color: green;
	}
}
</style>