新增预点单功能

2025-12-03 15:26:41 +08:00
parent 0d3fb4f634
commit 00c5987ccc
11 changed files with 4814 additions and 5207 deletions
--- a/pages/index/components/pageLoading.vue
+++ b/pages/index/components/pageLoading.vue
@@ -0,0 +1,108 @@
+<template>
+	<view class="loading-page">
+		<view class="loader"></view>
+		<text class="text">加载中...</text>
+	</view>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+.loading-page {
+	width: 100%;
+	height: 100vh;
+	background-color: rgba(255, 255, 255, 0.8);
+	backdrop-filter: blur(10px);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding-top: 10vh;
+	--color: #111;
+	.text {
+		font-size: 24upx;
+		color: var(--color);
+	}
+	.loader {
+		width: 40px;
+		height: 20px;
+		--c: no-repeat radial-gradient(farthest-side, var(--color) 93%, var(--color));
+		background: var(--c) 0 0, var(--c) 50% 0;
+		background-size: 8px 8px;
+		position: relative;
+		clip-path: inset(-200% -100% 0 0);
+		animation: l6-0 1.5s linear infinite;
+	}
+	.loader:before {
+		content: '';
+		position: absolute;
+		width: 8px;
+		height: 12px;
+		background: var(--color);
+		left: -16px;
+		top: 0;
+		animation: l6-1 1.5s linear infinite, l6-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
+	}
+	.loader:after {
+		content: '';
+		position: absolute;
+		inset: 0 0 auto auto;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--color);
+		animation: l6-3 1.5s linear infinite;
+	}
+	@keyframes l6-0 {
+		0%,
+		30% {
+			background-position: 0 0, 50% 0;
+		}
+		33% {
+			background-position: 0 100%, 50% 0;
+		}
+		41%,
+		63% {
+			background-position: 0 0, 50% 0;
+		}
+		66% {
+			background-position: 0 0, 50% 100%;
+		}
+		74%,
+		100% {
+			background-position: 0 0, 50% 0;
+		}
+	}
+	@keyframes l6-1 {
+		90% {
+			transform: translateY(0);
+		}
+		95% {
+			transform: translateY(15px);
+		}
+		100% {
+			transform: translateY(15px);
+			left: calc(100% - 8px);
+		}
+	}
+	@keyframes l6-2 {
+		100% {
+			top: -0.1px;
+		}
+	}
+	@keyframes l6-3 {
+		0%,
+		80%,
+		100% {
+			transform: translate(0);
+		}
+		90% {
+			transform: translate(26px);
+		}
+	}
+}
+</style>