feat: 聊天页面

src/views/asistant/components/ChatLoading.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="chat-loading">
+    <div class="loading-container flex flex-column flex-align-center">
+      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
+      <!-- 阴影效果 -->
+      <div class="loading-shadow"></div>
+      <div class="loading-text">Analyzing the Outfit...</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 这个组件只负责显示loading动画
+interface LoadingProps {
+  // 可以在这里定义props类型
+}
+
+// 定义组件props类型
+const props = defineProps<LoadingProps>()
+</script>
+
+<style lang="less" scoped>
+.chat-loading {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.loading-container {
+  position: relative;
+}
+
+.loading-image {
+  width: 36.4rem;
+  height: 36.4rem;
+  animation: rotate 1s linear infinite;
+}
+
+.loading-shadow {
+  width: 19.6rem;
+  height: 5.2rem;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+  filter: blur(35.5px);
+  margin-top: 5.1rem;
+  margin-bottom: 6.4rem;
+}
+
+.loading-text{
+  font-family: 'satoshiRegular';
+  font-size: 4.8rem;
+  letter-spacing: 0.02em;
+  line-height: 124%;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>