<template>
	<view class="root u-flex">
		<view class="left">
			<view>
				<u-image src="/static/statistics/sy_icon_ljyh.png" 
					width="356rpx"
					height="320rpx"
				/>
			</view>
			<text class="text1">累计用户</text>
			<text class="num1">{{ statNum.all_user_num }}</text>
			<view class="border border1"></view>
			<text class="num11">昨日新增{{ statNum.yesterday_user_num }}位</text>

		</view>
		<view class="right">
			<view class="right1">
				<view>
					<u-image src="/static/statistics/sy_icon_ljzd1.png"
						width="340rpx"
						height="150rpx"
					/>
				</view>
				<text class="text2">累计转店</text>
				<text class="num2">{{ statNum.all_trans_num }}</text>
				<view class="border border2"></view>
				<text class="num21">昨日新增{{ statNum.yesterday_trans_num }}位</text>

			</view>
			<view class="right2">
				<view>
					<u-image src="/static/statistics/sy_icon_ljzd0.png"
						width="340rpx"
						height="150rpx"
					/>
				</view>
				<text class="text3">累计找店</text>
				<text class="num3">{{ statNum.all_find_num }}</text>
				<view class="border border3"></view>
				<text class="num22">昨日新增{{ statNum.yesterday_find_num }}位</text>
			</view>
			
		</view>

		
	</view>
</template>

<script>

	export default {
		props:{
			statNum :{
				type:Object,
				default(){
					return {
						
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.root {
		position: relative;
		margin: 10px 0;
		display: flex;
		justify-content: space-between;
		font-weight: 800;
		text {
			font-size: 26rpx;
			font-weight: 800;
		}
		.border {
			width: 229rpx;
			height: 49rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 2px 0px rgba(178,247,214,0.42);
			border-radius: 0px 24px 24px 0px;
			opacity: 0.7;
		}
		.left {
			color: #06562E;
			position: relative;
			.text1 {
				position: absolute;
				top: 39rpx;
				left: 33rpx;
			}
			.num1 {
				position: absolute;
				top: 76rpx;
				left: 33rpx;
				font-size: 34rpx;
			}
			.num11 {
				position: absolute;
				top: 150rpx;
				left: 51rpx;
				line-height: 37rpx;
				z-index: 1;
			}
			.border1 {
				position: absolute;
				top: 144rpx;
				left: 33rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right1 {
				position: relative;
				color: #7C441C;
				.border2 {
					position: absolute;
					top: 60rpx;
					left: 20rpx;
				}
				.text2 {
					position: absolute;
					top: 14rpx;
					left: 20rpx;
				}
				.num2 {
					position: absolute;
					top: 9rpx;
					left: 144rpx;
					font-size: 34rpx;
				}
				.num21 {
					position: absolute;
					left: 38rpx;
					top: 66rpx;
				}
			}
			.right2 {
				position: relative;
				color: #912C2C;
				.border3 {
					position: absolute;
					top: 71rpx;
					left: 20rpx;
				}
				.text3 {
					position: absolute;
					left: 20rpx;
					top: 25rpx;
				}
				.num3 {
					position: absolute;
					top: 20rpx;
					left: 144rpx;
					font-size: 34rpx;
				}
				.num22 {
					position: absolute;
					left: 38rpx;
					top: 77rpx;
				}
			}
			
		}
	}
</style>