<template>
	<view class="all-page position-all bg-gray u-flex u-flex-col" @click="skeletonClick">
		<view class="u-flex category u-flex-row">
			<view class="category-item u-flex u-flex-row skeletion " v-for="(item,index) in 14" :key="index">
			</view>
		</view>
		<view class="u-flex-1 u-flex u-flex-row bottom">
			<view class="left skeletion u-flex-1"></view>
			<view class="right skeletion  u-flex-1"></view>
		</view>
		<view class="car">
			<view class="icon-car-box" >
				<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
				<view class="dot">0</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	import myCar from './car'
	const emits=defineEmits(['skeletonClick'])
	function skeletonClick(){
		emits('skeletonClick')
	}
</script>

<style lang="scss" scoped>
	$categoryLen: 10;

	.gap-20 {
		gap: 20px;
	}

	.all-page {
		position: fixed;
		z-index: 10;
	}

	@keyframes skeleton {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}

	.skeletion {
		background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
		background-size: 400% 100%;
		border-radius: 3px;
		animation: skeleton 1.8s ease infinite;
	}

	.left {
		background-color: #F1F2F4;
		width: 400px;
		border-radius: 12px;
		height: calc(100vh - 84px);
		flex: 1;
		// height: calc(100vh - 64px);
	}

	.right {
		border-radius: 12px;
		height: calc(100vh - 84px);
		flex: 1;
	}

	.category {
		background-color: #fff;
		padding-bottom: 10px;
		/* #ifdef H5 */
		padding-top: 10px;
		/* #endif */
		/* #ifndef H5 */
		padding-top: calc(var(--status-bar-height));
		/* #endif */
		.category-item {
			width: calc(100vw / 14);
			height: 24px;
			margin-right: 10px;
			border-radius: 4px;
		}
	}

	.bottom {
		width: 100%;
		height: 100%;
		// background-color: red;
		padding: 20px 20px 20px 20px;
		gap: 20px;
		box-sizing: border-box;
		.left{
			flex: 1;
			height: 100%;
		}
		.right{
			height: 100%;
			flex: 1;
		}
	}
	$car-size: 70px;
	$car-top: -16rpx;
	.car {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		// top: 50%;
		// transform: translateY(-50%);
	
		.icon-car-box {
			position: relative;
			display: flex;
			width: $car-size;
			height: $car-size;
			justify-content: center;
			align-items: center;
			z-index: 2;
	
			.dot {
				position: absolute;
				right: 0;
				top: 0;
				width: 28rpx;
				height: 28rpx;
				background: #EB4F4F;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	
		.price {
			color: #EB4F4F;
			margin-left: calc(38rpx + $car-size);
			transform: translateY(calc($car-top / 2));
		}
	
		.icon-car {
			width: $car-size;
			height: $car-size;
		}
	}
</style>