From 8b48a3991eac809875afedbfa2c440bd21fc1552 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 19 八月 2024 15:23:22 +0800
Subject: [PATCH] 测试 pre_question
---
src/components/chat/components/Loding.vue | 132 ++++++++-----------------------------------
1 files changed, 26 insertions(+), 106 deletions(-)
diff --git a/src/components/chat/components/Loding.vue b/src/components/chat/components/Loding.vue
index 9f3f5cf..8c53743 100644
--- a/src/components/chat/components/Loding.vue
+++ b/src/components/chat/components/Loding.vue
@@ -1,113 +1,33 @@
<template>
- <div class="com__box">
- <div class="loading">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
+ <div class="com__box flex-center text-sm rounded-[6px] p-4 leading-relaxed bg-white">
+ <p class="text">{{ process }}<div class="dot">...</div></p>
+ </div>
</template>
-
+<script setup lang="ts">
+defineProps(['process']);
+</script>
<style scoped>
-.loading,
-.loading > div {
- position: relative;
- box-sizing: border-box;
+.dot {
+ display: inline-block;
+ text-align: center;
+ margin: 0 auto;
+ overflow: hidden;
+ height: 1em;
+ line-height: 1em;
+ vertical-align: -0.25em;
}
-
-.loading {
- display: block;
- font-size: 0;
- color: #000;
+.dot::before {
+ display: block;
+ content: '...\A..\A.';
+ white-space: pre-wrap;
+ animation: dot 3s infinite step-start both;
}
-
-.loading.la-dark {
- color: #333;
-}
-
-.loading > div {
- display: inline-block;
- float: none;
- background-color: currentColor;
- border: 0 solid currentColor;
-}
-
-.loading {
- width: 17px;
- height: 17px;
-}
-
-.loading > div {
- width: 3px;
- height: 3px;
- margin: 1px;
- border-radius: 100%;
- animation-name: ball-grid-beat;
- animation-iteration-count: infinite;
-}
-
-.loading > div:nth-child(1) {
- animation-duration: 0.65s;
- animation-delay: 0.03s;
-}
-
-.loading > div:nth-child(2) {
- animation-duration: 1.02s;
- animation-delay: 0.09s;
-}
-
-.loading > div:nth-child(3) {
- animation-duration: 1.06s;
- animation-delay: -0.69s;
-}
-
-.loading > div:nth-child(4) {
- animation-duration: 1.5s;
- animation-delay: -0.41s;
-}
-
-.loading > div:nth-child(5) {
- animation-duration: 1.6s;
- animation-delay: 0.04s;
-}
-
-.loading > div:nth-child(6) {
- animation-duration: 0.84s;
- animation-delay: 0.07s;
-}
-
-.loading > div:nth-child(7) {
- animation-duration: 0.68s;
- animation-delay: -0.66s;
-}
-
-.loading > div:nth-child(8) {
- animation-duration: 0.93s;
- animation-delay: -0.76s;
-}
-
-.loading > div:nth-child(9) {
- animation-duration: 1.24s;
- animation-delay: -0.76s;
-}
-
-@keyframes ball-grid-beat {
- 0% {
- opacity: 1;
- }
-
- 50% {
- opacity: 0.35;
- }
-
- 100% {
- opacity: 1;
- }
+@keyframes dot {
+ 33% {
+ transform: translateY(-2em);
+ }
+ 66% {
+ transform: translateY(-1em);
+ }
}
</style>
--
Gitblit v1.9.3