feature_20260428_完美门店报告生成中

src/views/historicalVisit/perfectStore.vue

@@ -18,9 +18,78 @@
           </span>
         </template>
         <template v-else>
-          <span style="font-size: 18px; color: #1989fa; display: flex; align-items: center"
+          <!-- 新的生成中动画组件 -->
+          <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>
+          <!-- <span style="font-size: 18px; color: #1989fa; display: flex; align-items: center"
             ><img width="35px" :src="require('@/assets/wanmeiStoreImg.gif')" />生成中</span
-          >
+          > -->
         </template>
       </template>
     </van-nav-bar>
@@ -79,7 +148,7 @@
                 </div>
               </template>
               <template v-else>
-                <span style="color: #1989fa; margin-right: 16px">AI识别中</span>
+                <span class="AISpan">AI识别中</span>
               </template>
             </div>
           </div>
@@ -103,7 +172,7 @@
                 </div>
               </template>
               <template v-else>
-                <span style="color: #1989fa; margin-right: 16px">AI识别中</span>
+                <span class="AISpan">AI识别中</span>
               </template>
             </div>
           </div>
@@ -124,7 +193,7 @@
                 </div>
               </template>
               <template v-else>
-                <span style="color: #1989fa; margin-right: 16px">AI识别中</span>
+                <span class="AISpan">AI识别中</span>
               </template>
             </div>
           </div>
@@ -156,7 +225,7 @@
                 </div>
               </template>
               <template v-else>
-                <span style="color: #1989fa; margin-right: 16px">AI识别中</span>
+                <span class="AISpan">AI识别中</span>
               </template>
             </div>
           </div>
@@ -691,4 +760,150 @@ export default {
   border: 0 !important;
   box-shadow: none !important;
 }
+.perfectStore {
+  /* ===== 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;
+    padding: 3px 10px 3px 7px;
+  }
+
+  /* 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: 16px;
+  }
+  .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>