shunfengche-sfd/echarts/jgOrder/DataItem.vue

<template>
	<view class="data-item" :style="{ backgroundColor: dataItem.bg, border: '1rpx solid ' + dataItem.bg }">
		<view class="data-item-title">{{ dataItem.title }}</view>
		<view class="data-item-value" :style="{ color: dataItem.valueColor }">{{ dataItem.value }}</view>
		<view class="data-item-desc">
			<!-- <image v-if="globalImages" :src="globalImages + 'imgs/' + dataItem.status === 'up' ? 'haoyou' : 'shuangyue' + '.png'" style="width: 21rpx;height: 25rpx;"></image> -->
			<image
			  v-if="globalImages"
			  :src="globalImages + 'imgs/' + (dataItem.status === 'up' ? 'haoyou' : 'shuangyue') + '.png'"
			  style="width: 21rpx; height: 21rpx;"
			></image>
			<text style="margin: 0 8rpx;">{{ dataItem.fluctuate }}%</text>
			<text>较昨日</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataItem: {
				type: Object,
				default: () => {
					return { title: '订单总量', value: '1248', status: 'up', fluctuate: '12.5%', bg: '#E8FBF6', valueColor: '#00C18A' }
				}
			},
			globalImages: {
				type: String,
				require: true
			},
		},
		data() {
			return {}
		},
	}
</script>

<style lang="scss">
	.data-item {
		width: 100%;
		height: 100%;
		padding: 32rpx;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		box-sizing: border-box;
		
		.data-item-title {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333333;
			font-weight: 500;
		}
		.data-item-value {
			margin: 8rpx 0;
			font-weight: 700;
			font-size: 48rpx;
			line-height: 64rpx;
		}
		.data-item-desc {
			font-size: 24rpx;
			line-height: 32rpx;
			color: #333333;
		}
	}
</style>