fix

src/components/highlightAdmin.vue

@@ -0,0 +1,61 @@
+<template>
+	<div class="loading" ref="textBox">
+		<slot></slot>
+		<div class="loading-dot" ref="dotBox"></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, nextTick, ref } from "vue";
+import { gsap } from "gsap";
+
+const dotBox = ref(null)
+let tl1 = null;
+const setTl1 = () => {
+	nextTick(() => {
+		let el = dotBox.value
+		let width = el.offsetWidth + el.parentElement.offsetWidth
+		let time = el.parentElement.offsetWidth / el.offsetWidth
+		tl1 = gsap.timeline();
+		tl1.to(el, time,
+			{
+				ease: "power1.in",
+				left: width * 1.5,
+				onComplete: () => {
+					setTimeout(() => {
+						tl1.restart()
+					}, 1000)
+				}
+			},
+		)
+		tl1.progress(0);
+	})
+}
+
+onMounted(() => {
+	setTl1()
+})
+
+</script>
+
+<style lang="less" scoped>
+.loading {
+	position: relative;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.loading-dot {
+	height: 200%;
+	aspect-ratio: .2/1;
+	background: radial-gradient(ellipse 150% 150% at center, #ffffff, rgba(255, 255, 255, .2), transparent);
+	box-shadow: 0 0 20px rgba(255, 255, 255, 1);
+	border-radius: 50%;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	transform: translate(-175%, -50%) rotate(-45deg);
+}
+
+</style>