|
|
@@ -0,0 +1,208 @@
|
|
|
+<template>
|
|
|
+ <!-- 新的生成中动画组件 -->
|
|
|
+ <div class="ai-generating">
|
|
|
+ <!-- AI 星星图标 -->
|
|
|
+ <div class="ai-icon">
|
|
|
+ <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <defs>
|
|
|
+ <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
|
+ <stop offset="0%" stop-color="#6366f1" />
|
|
|
+ <stop offset="100%" stop-color="#a855f7" />
|
|
|
+ </linearGradient>
|
|
|
+ </defs>
|
|
|
+ <!-- 大星星 -->
|
|
|
+ <path
|
|
|
+ d="M10 2 L11.2 7.8 L17 9 L11.2 10.2 L10 16 L8.8 10.2 L3 9 L8.8 7.8 Z"
|
|
|
+ fill="url(#starGrad)"
|
|
|
+ style="animation: starPulse 1.8s ease-in-out infinite; transform-origin: 10px 9px">
|
|
|
+ <animateTransform
|
|
|
+ attributeName="transform"
|
|
|
+ type="scale"
|
|
|
+ values="1;1.12;1"
|
|
|
+ dur="1.8s"
|
|
|
+ repeatCount="indefinite"
|
|
|
+ additive="sum"
|
|
|
+ calcMode="ease" />
|
|
|
+ </path>
|
|
|
+ <!-- 小星星 -->
|
|
|
+ <circle cx="15.5" cy="4.5" r="1.5" fill="#a855f7" opacity="0.7">
|
|
|
+ <animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" />
|
|
|
+ <animate attributeName="r" values="1.2;1.8;1.2" dur="1.4s" repeatCount="indefinite" />
|
|
|
+ </circle>
|
|
|
+ <!-- 微星 -->
|
|
|
+ <circle cx="4.5" cy="14.5" r="1" fill="#6366f1" opacity="0.5">
|
|
|
+ <animate
|
|
|
+ attributeName="opacity"
|
|
|
+ values="0.3;0.9;0.3"
|
|
|
+ dur="1.8s"
|
|
|
+ begin="0.5s"
|
|
|
+ repeatCount="indefinite" />
|
|
|
+ <animate
|
|
|
+ attributeName="r"
|
|
|
+ values="0.8;1.4;0.8"
|
|
|
+ dur="1.8s"
|
|
|
+ begin="0.5s"
|
|
|
+ repeatCount="indefinite" />
|
|
|
+ </circle>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 三个跳动点 -->
|
|
|
+ <!-- <div class="dots-container">
|
|
|
+ <div class="dot"></div>
|
|
|
+ <div class="dot"></div>
|
|
|
+ <div class="dot"></div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- 渐变文字 -->
|
|
|
+ <span class="gen-text">报告生成中</span>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* ===== AI 生成中动画 ===== */
|
|
|
+.ai-generating {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
|
|
|
+ border: 1px solid rgba(99, 102, 241, 0.2);
|
|
|
+ border-radius: 20px 0 0 20px;
|
|
|
+ padding: 3px 0px 3px 7px;
|
|
|
+ margin-right: -3px;
|
|
|
+}
|
|
|
+
|
|
|
+/* AI 图标 - 彩色渐变扫描动效 */
|
|
|
+.ai-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.ai-icon svg {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 三个跳动圆点 */
|
|
|
+.dots-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 3px;
|
|
|
+}
|
|
|
+.dot {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
|
+ animation: dotBounce 1.4s ease-in-out infinite;
|
|
|
+}
|
|
|
+.dot:nth-child(1) {
|
|
|
+ animation-delay: 0s;
|
|
|
+}
|
|
|
+.dot:nth-child(2) {
|
|
|
+ animation-delay: 0.2s;
|
|
|
+}
|
|
|
+.dot:nth-child(3) {
|
|
|
+ animation-delay: 0.4s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes dotBounce {
|
|
|
+ 0%,
|
|
|
+ 60%,
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ 30% {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 生成中文字 */
|
|
|
+.gen-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
|
|
|
+ background-size: 200% auto;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ animation: textShimmer 2s linear infinite;
|
|
|
+}
|
|
|
+@keyframes textShimmer {
|
|
|
+ 0% {
|
|
|
+ background-position: 0% center;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: 200% center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* AI 图标内部的星星动画 */
|
|
|
+@keyframes starPulse {
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ transform: scale(1) rotate(0deg);
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.15) rotate(15deg);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes starOrbit {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg) translateX(5px) rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg) translateX(5px) rotate(-360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 光晕扫描 */
|
|
|
+.scan-line {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -100%;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
|
|
|
+ animation: scanAnim 2s ease-in-out infinite;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+@keyframes scanAnim {
|
|
|
+ 0% {
|
|
|
+ left: -60%;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ left: 160%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.AISpan {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #1989fa;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.AISpan::before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #2979ff;
|
|
|
+ animation: blink 1.2s ease-in-out infinite;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+@keyframes blink {
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|