first

pagesCreateOrder/index/components/skeleton.vue

@@ -0,0 +1,155 @@
+<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>