upp

src/assets/styles/base.css

@@ -236,7 +236,7 @@ textarea {
   }
 }
 #A2RenMove {
-  animation: A2RenMove 3.5s steps(40) infinite;
+  animation: A2RenMove 3s steps(40) forwards;
 }
 @keyframes A2RenMove {
   100% {

src/assets/styles/base.less

@@ -360,7 +360,7 @@ textarea {
 
 // 序列帧动画
 #A2RenMove {
-  animation: A2RenMove 3.5s steps(40) infinite;
+  animation: A2RenMove 3s steps(40) forwards;
 }
 @keyframes A2RenMove {
   100% {

src/components/RoutePage.tsx

@@ -4,14 +4,16 @@ import NotFound from './NotFound'
 
 const A1home = React.lazy(() => import('../pages/A1home'))
 const A2scene = React.lazy(() => import('../pages/A2scene'))
+const A0base = React.lazy(() => import('../pages/A0base'))
 const ErrPage = React.lazy(() => import('../pages/ErrPage'))
 
 function RoutePage() {
   return (
     <Switch>
+      <Route path='/base' component={A0base} exact />
       <Route path='/scene/:code' component={A2scene} exact />
-      <Route path='/' component={A1home} exact />
       <Route path='/err' component={ErrPage} exact />
+      <Route path='/' component={A1home} exact />
       {/* 找不到页面 */}
       <Route path='*' component={NotFound} />
     </Switch>

src/pages/A0base/index.module.scss

@@ -0,0 +1,28 @@
+.A0base {
+  position: relative;
+  cursor: pointer;
+  :global {
+    .A0tit {
+      position: absolute;
+      left: 50%;
+      top: 26%;
+      transform: translateX(-50%);
+      background-color: rgba(0, 0, 0, 0.4);
+      padding: 10px;
+      border-radius: 10px;
+      color: #fff;
+      text-shadow: black 1px 1px 1px;
+    }
+    .A0main {
+      width: 100%;
+      height: 100%;
+      max-width: 500px;
+      margin: 0 auto;
+      img {
+        max-width: 500px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/A0base/index.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react'
+import styles from './index.module.scss'
+function A0base() {
+  const toHomeFu = useCallback(() => {
+    window.location.href = window.location.href.replace('/#/base', '/#/')
+  }, [])
+
+  return (
+    <div className={styles.A0base} onClick={toHomeFu}>
+      <div className='A0tit' id='A1tit'>
+        点击任意地方进入展览
+      </div>
+
+      <div className='A0main'>
+        <img src={require('@/assets/img/bac.jpg')} alt='' />
+      </div>
+    </div>
+  )
+}
+
+const MemoA0base = React.memo(A0base)
+
+export default MemoA0base

src/pages/A1home/A1svgBox/index.module.scss

@@ -46,18 +46,15 @@
       g[id^='tag_'] {
         opacity: 1;
       }
-      .cls-168,
-      .cls-173 {
-        fill: #fde5aa;
-      }
-      .cls-162,
-      .cls-167 {
-        fill: #c1a6ff;
+
+      // ---
+      .st70 {
+        fill: red;
       }
-      .cls-152,
-      .cls-161 {
-        fill: #ee927f;
+      .st60 {
+        fill: greenyellow;
       }
+      // ---
     }
     g[id^='tag_'] {
       transition: all 0.3s;
@@ -70,535 +67,338 @@
     }
 
     // ------------------------------------------------------------
-    .cls-1,
-    .cls-160 {
-      fill: none;
-    }
-    .cls-2 {
-      opacity: 0.8;
-    }
-    .cls-3 {
-      clip-path: url(#clip-path);
-    }
-    .cls-4 {
-      clip-path: url(#clip-path-2);
-    }
-    .cls-158,
-    .cls-5 {
-      isolation: isolate;
-    }
-    .cls-6 {
-      fill: #7f7f7f;
-    }
-    .cls-158,
-    .cls-159,
-    .cls-7 {
-      fill: #fff;
-    }
-    .cls-8 {
-      fill: #00446c;
-    }
-    .cls-9 {
-      fill: #00315b;
-    }
-    .cls-10 {
-      fill: #003c70;
-    }
-    .cls-11 {
-      fill: #c4000f;
-    }
-    .cls-12 {
-      fill: #7a000a;
-    }
-    .cls-13 {
-      fill: #a0000d;
-    }
-    .cls-14 {
-      fill: #cd6f00;
-    }
-    .cls-15 {
-      fill: #ab5d00;
-    }
-    .cls-16 {
-      fill: #d39100;
-    }
-    .cls-17 {
-      fill: #af000e;
-    }
-    .cls-18 {
-      fill: #e40012;
-    }
-    .cls-19 {
-      fill: #b66300;
-    }
-    .cls-20 {
-      fill: #ee8100;
-    }
-    .cls-21 {
-      fill: #c06800;
-    }
-    .cls-22 {
-      fill: #7f4500;
-    }
-    .cls-23 {
-      fill: #835a00;
-    }
-    .cls-24 {
-      fill: #c58800;
-    }
-    .cls-25 {
-      fill: #f5a900;
-    }
-    .cls-26 {
-      clip-path: url(#clip-path-4);
-    }
-    .cls-27 {
-      fill: #a25800;
-    }
-    .cls-28 {
-      fill: #9d5500;
-    }
-    .cls-29 {
-      clip-path: url(#clip-path-5);
-    }
-    .cls-30 {
-      fill: #a9000d;
-    }
-    .cls-31 {
-      fill: #a4000d;
-    }
-    .cls-32 {
-      fill: #ba8000;
-    }
-    .cls-33 {
-      clip-path: url(#clip-path-6);
-    }
-    .cls-34 {
-      fill: #9d6c00;
-    }
-    .cls-35 {
-      fill: #986900;
-    }
-    .cls-36 {
-      clip-path: url(#clip-path-7);
-    }
-    .cls-37 {
-      fill: #004077;
-    }
-    .cls-38 {
-      fill: #003e74;
-    }
-    .cls-39 {
-      clip-path: url(#clip-path-8);
-    }
-    .cls-40 {
-      clip-path: url(#clip-path-9);
-    }
-    .cls-41 {
-      fill: #00437e;
-    }
-    .cls-42 {
-      fill: #00427a;
-    }
-    .cls-43 {
-      clip-path: url(#clip-path-10);
-    }
-    .cls-44 {
-      clip-path: url(#clip-path-11);
-    }
-    .cls-45 {
-      fill: #003a6d;
-    }
-    .cls-46 {
-      clip-path: url(#clip-path-12);
-    }
-    .cls-47 {
-      fill: #003869;
-    }
-    .cls-48 {
-      clip-path: url(#clip-path-13);
-    }
-    .cls-49 {
-      fill: #003766;
-    }
-    .cls-50 {
-      fill: #003563;
-    }
-    .cls-51 {
-      fill: #00335f;
-    }
-    .cls-52 {
-      fill: #00315c;
-    }
-    .cls-53 {
-      fill: #002f58;
-    }
-    .cls-54 {
-      clip-path: url(#clip-path-14);
-    }
-    .cls-55 {
-      fill: #005baa;
-    }
-    .cls-56 {
-      clip-path: url(#clip-path-15);
-    }
-    .cls-57 {
-      clip-path: url(#clip-path-16);
-    }
-    .cls-58 {
-      fill: #945000;
-    }
-    .cls-59 {
-      fill: #985300;
-    }
-    .cls-60 {
-      clip-path: url(#clip-path-17);
-    }
-    .cls-61 {
-      fill: #7c4300;
-    }
-    .cls-62 {
-      clip-path: url(#clip-path-18);
-    }
-    .cls-63 {
-      fill: #92000c;
-    }
-    .cls-64 {
-      fill: #96000c;
-    }
-    .cls-65 {
-      clip-path: url(#clip-path-19);
-    }
-    .cls-66 {
-      clip-path: url(#clip-path-20);
-    }
-    .cls-67 {
-      fill: #770009;
-    }
-    .cls-68 {
-      clip-path: url(#clip-path-21);
-    }
-    .cls-69 {
-      clip-path: url(#clip-path-22);
-    }
-    .cls-70 {
-      fill: #7f5800;
-    }
-    .cls-71 {
-      clip-path: url(#clip-path-23);
-    }
-    .cls-72 {
-      clip-path: url(#clip-path-24);
-    }
-    .cls-73 {
-      fill: #936500;
-    }
-    .cls-74 {
-      clip-path: url(#clip-path-25);
-    }
-    .cls-75 {
-      fill: #005a8d;
-    }
-    .cls-76 {
-      fill: #005789;
-    }
-    .cls-77 {
-      clip-path: url(#clip-path-26);
-    }
-    .cls-78 {
-      fill: #005485;
-    }
-    .cls-79 {
-      clip-path: url(#clip-path-27);
-    }
-    .cls-80 {
-      fill: #005c91;
-    }
-    .cls-81 {
-      clip-path: url(#clip-path-28);
-    }
-    .cls-82 {
-      fill: #005281;
-    }
-    .cls-83 {
-      fill: #004f7d;
-    }
-    .cls-84 {
-      clip-path: url(#clip-path-29);
-    }
-    .cls-85 {
-      clip-path: url(#clip-path-30);
-    }
-    .cls-86 {
-      clip-path: url(#clip-path-31);
-    }
-    .cls-87 {
-      fill: #004d79;
-    }
-    .cls-88 {
-      clip-path: url(#clip-path-32);
-    }
-    .cls-89 {
-      clip-path: url(#clip-path-33);
+    .st0 {
+      fill: #437799;
     }
-    .cls-90 {
-      fill: #004a75;
-    }
-    .cls-91 {
-      fill: #004871;
-    }
-    .cls-92 {
-      clip-path: url(#clip-path-34);
-    }
-    .cls-93 {
-      clip-path: url(#clip-path-35);
+
+    .st1 {
+      clip-path: url(#clippath-21);
     }
-    .cls-94 {
-      clip-path: url(#clip-path-36);
+
+    .st2 {
+      fill: #439496;
     }
-    .cls-95 {
-      clip-path: url(#clip-path-37);
+
+    .st3 {
+      clip-path: url(#clippath-6);
     }
-    .cls-96 {
-      clip-path: url(#clip-path-38);
+
+    .st4 {
+      clip-path: url(#clippath-7);
     }
-    .cls-97 {
-      clip-path: url(#clip-path-39);
+
+    .st5 {
+      clip-path: url(#clippath-17);
     }
-    .cls-98 {
-      fill: #8e6200;
+
+    .st6 {
+      clip-path: url(#clippath-15);
     }
-    .cls-99 {
-      fill: #895f00;
+
+    .st7 {
+      fill: #90d0d2;
     }
-    .cls-100 {
-      clip-path: url(#clip-path-40);
+
+    .st8 {
+      clip-path: url(#clippath-18);
     }
-    .cls-101 {
-      fill: #006898;
+
+    .st9 {
+      clip-path: url(#clippath-4);
     }
-    .cls-102 {
-      clip-path: url(#clip-path-41);
+
+    .st10 {
+      fill: #3d8b8d;
     }
-    .cls-103 {
-      fill: #0072a6;
+
+    .st11 {
+      clip-path: url(#clippath-22);
     }
-    .cls-104 {
-      fill: #006fa2;
+
+    .st12 {
+      clip-path: url(#clippath-23);
     }
-    .cls-105 {
-      clip-path: url(#clip-path-42);
+
+    .st13 {
+      fill: #548fb6;
     }
-    .cls-106 {
-      fill: #0075ab;
+
+    .st14 {
+      fill: #449698;
     }
-    .cls-107 {
-      clip-path: url(#clip-path-43);
+
+    .st15 {
+      fill: #4fa8aa;
     }
-    .cls-108 {
-      fill: #006594;
+
+    .st16 {
+      fill: #479a9c;
     }
-    .cls-109 {
-      fill: #00628f;
+
+    .st17 {
+      fill: #4f88ae;
     }
-    .cls-110 {
-      clip-path: url(#clip-path-44);
+
+    .st18 {
+      clip-path: url(#clippath-9);
     }
-    .cls-111 {
-      fill: #005f8b;
+
+    .st19 {
+      clip-path: url(#clippath-10);
     }
-    .cls-112 {
-      fill: #005c86;
+
+    .st20 {
+      fill: #55b2b5;
     }
-    .cls-113 {
-      clip-path: url(#clip-path-45);
+
+    .st21,
+    .st22 {
+      fill: #fff;
     }
-    .cls-114 {
-      fill: #005881;
+
+    .st23 {
+      fill: #5abcbf;
     }
-    .cls-115 {
-      clip-path: url(#clip-path-46);
+
+    .st24 {
+      fill: #419193;
     }
-    .cls-116 {
-      fill: #00557d;
+
+    .st25 {
+      clip-path: url(#clippath-25);
     }
-    .cls-117 {
-      clip-path: url(#clip-path-47);
+
+    .st26 {
+      fill: #32566f;
     }
-    .cls-118 {
-      clip-path: url(#clip-path-48);
+
+    .st27 {
+      fill: #337a7c;
     }
-    .cls-119 {
-      fill: #00456d;
+
+    .st28 {
+      fill: #3f8e90;
     }
-    .cls-120 {
-      fill: #004369;
+
+    .st29 {
+      clip-path: url(#clippath-11);
     }
-    .cls-121 {
-      clip-path: url(#clip-path-49);
+
+    .st30,
+    .st31 {
+      fill: none;
     }
-    .cls-122 {
-      clip-path: url(#clip-path-50);
+
+    .st32 {
+      fill: #419092;
     }
-    .cls-123 {
-      clip-path: url(#clip-path-51);
+
+    .st22 {
+      opacity: 0.9;
     }
-    .cls-124 {
-      fill: #ab7600;
+
+    .st33 {
+      fill: #489c9f;
     }
-    .cls-125 {
-      clip-path: url(#clip-path-52);
+
+    .st34 {
+      fill: #78c8ca;
     }
-    .cls-126 {
-      clip-path: url(#clip-path-53);
+
+    .st35 {
+      fill: #9ed5d6;
     }
-    .cls-127 {
-      fill: #005278;
+
+    .st36 {
+      fill: #5cc0c3;
     }
-    .cls-128 {
-      clip-path: url(#clip-path-54);
+
+    .st37 {
+      clip-path: url(#clippath-1);
     }
-    .cls-129 {
-      fill: #00547b;
+
+    .st38 {
+      fill: #4d4d4d;
     }
-    .cls-130 {
-      fill: #0088c7;
+
+    .st39 {
+      fill: #4da5a7;
     }
-    .cls-131 {
-      fill: #009ee7;
+
+    .st40 {
+      fill: #4e87ad;
     }
-    .cls-132 {
-      clip-path: url(#clip-path-55);
+
+    .st41 {
+      fill: #437698;
     }
-    .cls-133 {
-      clip-path: url(#clip-path-56);
+
+    .st42 {
+      fill: #4a9fa2;
     }
-    .cls-134 {
-      clip-path: url(#clip-path-57);
+
+    .st43 {
+      isolation: isolate;
     }
-    .cls-135 {
-      clip-path: url(#clip-path-58);
+
+    .st44 {
+      clip-path: url(#clippath-5);
     }
-    .cls-136 {
-      clip-path: url(#clip-path-59);
+
+    .st45 {
+      clip-path: url(#clippath-20);
     }
-    .cls-137 {
-      clip-path: url(#clip-path-60);
+
+    .st46 {
+      fill: #58b7ba;
     }
-    .cls-138 {
-      fill: #0080ca;
+
+    .st47 {
+      clip-path: url(#clippath-8);
     }
-    .cls-139 {
-      clip-path: url(#clip-path-61);
+
+    .st48 {
+      fill: #56b5b7;
     }
-    .cls-140 {
-      clip-path: url(#clip-path-62);
+
+    .st49 {
+      fill: #59babc;
     }
-    .cls-141 {
-      clip-path: url(#clip-path-63);
+
+    .st50 {
+      clip-path: url(#clippath-3);
     }
-    .cls-142 {
-      clip-path: url(#clip-path-64);
+
+    .st51 {
+      fill: #82cbcd;
     }
-    .cls-143 {
-      clip-path: url(#clip-path-65);
+
+    .st52 {
+      fill: #5bbfc1;
     }
-    .cls-144 {
-      clip-path: url(#clip-path-66);
+
+    .st53 {
+      fill: #9d6324;
+      font-family: SimHei, SimHei;
+      font-size: 20px;
     }
-    .cls-145 {
-      clip-path: url(#clip-path-67);
+
+    .st54 {
+      clip-path: url(#clippath-12);
     }
-    .cls-146 {
-      clip-path: url(#clip-path-68);
+
+    .st55 {
+      clip-path: url(#clippath-14);
     }
-    .cls-147 {
-      clip-path: url(#clip-path-69);
+
+    .st56 {
+      fill: #477c9f;
     }
-    .cls-148 {
-      clip-path: url(#clip-path-70);
+
+    .st57 {
+      fill: #9ad4d5;
     }
-    .cls-149 {
-      fill: #006eae;
+
+    .st58 {
+      fill: #357e80;
     }
-    .cls-150 {
-      fill: #004e92;
+
+    .st59 {
+      clip-path: url(#clippath-19);
     }
-    .cls-151 {
-      fill: #006b9d;
+
+    .st60 {
+      fill: #60a4d1;
     }
-    .cls-152,
-    .cls-161 {
-      fill: #dd7e6b;
+
+    .st61 {
+      fill: #5089af;
     }
-    .cls-153 {
-      fill: #b5483c;
+
+    .st31 {
+      stroke: #fff;
+      stroke-miterlimit: 10;
+      stroke-width: 1.19px;
     }
-    .cls-154 {
-      fill: #a52f2d;
+
+    .st62 {
+      fill: #44789a;
     }
-    .cls-155 {
-      fill: #ba433a;
+
+    .st63 {
+      fill: #4ca2a5;
     }
-    .cls-156 {
-      fill: #ce5e4e;
+
+    .st64 {
+      fill: #53b0b2;
     }
-    .cls-157 {
-      fill: #a8a8a8;
+
+    .st65 {
+      fill: #95d2d3;
     }
-    .cls-158 {
-      opacity: 0.6;
+
+    .st66 {
+      fill: #388183;
     }
-    .cls-159 {
-      opacity: 0.9;
+
+    .st67 {
+      fill: #4ea7a9;
     }
-    .cls-160 {
-      stroke: #fff;
-      stroke-miterlimit: 10;
+
+    .st68 {
+      clip-path: url(#clippath-16);
     }
-    .cls-161,
-    .cls-167,
-    .cls-173 {
-      font-size: 16px;
-      font-family: SourceHanSansCN-Regular-GBpc-EUC-H, Source Han Sans CN;
+
+    .st69 {
+      clip-path: url(#clippath-2);
     }
-    .cls-162,
-    .cls-167 {
-      fill: #916ce5;
+
+    .st70 {
+      fill: #57bfc1;
     }
-    .cls-163 {
-      fill: #6952cc;
+
+    .st71 {
+      clip-path: url(#clippath-13);
     }
-    .cls-164 {
-      fill: #5644c1;
+
+    .st72 {
+      fill: #51acae;
     }
-    .cls-165 {
-      fill: #6850cc;
+
+    .st73 {
+      fill: #52adb0;
     }
-    .cls-166 {
-      fill: #7b5dd8;
+
+    .st74 {
+      fill: #3c878a;
     }
-    .cls-168,
-    .cls-173 {
-      fill: #ddbc6b;
+
+    .st75 {
+      clip-path: url(#clippath-24);
     }
-    .cls-169 {
-      fill: #ba7820;
+
+    .st76 {
+      fill: #3a8486;
     }
-    .cls-170 {
-      fill: #9e6613;
+
+    .st77 {
+      clip-path: url(#clippath);
     }
-    .cls-171 {
-      fill: #b58024;
+
+    .st78 {
+      fill: #51aaad;
     }
-    .cls-172 {
-      fill: #c99b41;
+
+    .st79 {
+      fill: #3c888a;
     }
-    .cls-174 {
-      fill: #b2b2b2;
+
+    .st80 {
+      fill: #459799;
     }
-    .cls-175 {
-      fill: #858585;
+
+    .st81 {
+      fill: #8aced0;
     }
     // ---------------------------------------------------------------------
   }

src/pages/A1home/A1svgBox/index.tsx

@@ -115,7 +115,7 @@ function A1svgBox({ opc = 1, id = '', closeFu }: Props) {
 
       if (obj) {
         const dom: SVGPathElement | null = document.querySelector(
-          `#图层_2 g[id="${obj.id}"]`
+          `.svg-pan-zoom_viewport g[id="${obj.id}"]`
         )
 
         if (dom) dom.classList.add('acSvg')
@@ -125,7 +125,8 @@ function A1svgBox({ opc = 1, id = '', closeFu }: Props) {
 
   // 获取所有path添加事件
   const pathAllFu = useCallback(() => {
-    const domAll: any = document.querySelectorAll('#图层_2>g')
+    const domAll: any = document.querySelectorAll('.svg-pan-zoom_viewport>g')
+
     if (domAll && domAll.length) {
       domAll.forEach((dom: HTMLDivElement) => {
         const obj = idChangeArr.find(v => v.id === dom.id)

src/pages/A1home/data.ts

@@ -25,259 +25,259 @@ export const idChangeArr = [
   },
   {
     id: 'id_能源化学地质',
-    code: '',
+    code: 'id_能源化学地质code',
     name: '',
     tabName: 'tag_能源化学地质'
   },
   {
     id: 'id_机械冶金建材',
-    code: '',
+    code: 'id_机械冶金建材code',
     name: '',
     tabName: 'tag_机械冶金建材'
   },
   {
     id: 'id_农林水利气象',
-    code: '',
+    code: 'id_农林水利气象code',
     name: '',
     tabName: 'tag_农林水利气象'
   },
   {
     id: 'id_广西',
-    code: '',
+    code: 'id_广西code',
     name: '',
     tabName: 'tag_广西'
   },
   {
     id: 'id_湖北',
-    code: '',
+    code: 'id_湖北code',
     name: '',
     tabName: 'tag_湖北'
   },
   {
     id: 'id_湖南',
-    code: '',
+    code: 'id_湖南code',
     name: '',
     tabName: 'tag_湖南'
   },
   {
     id: 'id_北京',
-    code: '',
+    code: 'id_北京code',
     name: '',
     tabName: 'tag_北京'
   },
   {
     id: 'id_天津',
-    code: '',
+    code: 'id_天津code',
     name: '',
     tabName: 'tag_天津'
   },
   {
     id: 'id_河北',
-    code: '',
+    code: 'id_河北code',
     name: '',
     tabName: 'tag_河北'
   },
   {
     id: 'id_职工之家大',
-    code: '',
+    code: 'id_职工之家大code',
     name: '',
     tabName: 'tag_职工之家大'
   },
   {
     id: 'id_职工之家小1',
-    code: '',
+    code: 'id_职工之家小1code',
     name: '',
     tabName: 'tag_职工之家小1'
   },
   {
     id: 'id_职工之家小2',
-    code: '',
+    code: 'id_职工之家小2code',
     name: '',
     tabName: 'tag_职工之家小2'
   },
   {
     id: 'id_财贸轻纺烟草',
-    code: '',
+    code: 'id_财贸轻纺烟草code',
     name: '',
     tabName: 'tag_财贸轻纺烟草'
   },
   {
     id: 'id_教科文卫体',
-    code: '',
+    code: 'id_教科文卫体code',
     name: '',
     tabName: 'tag_教科文卫体'
   },
   {
     id: 'id_海南',
-    code: '',
+    code: 'id_海南code',
     name: '',
     tabName: 'tag_海南'
   },
   {
     id: 'id_福建',
-    code: '',
+    code: 'id_福建code',
     name: '',
     tabName: 'tag_福建'
   },
   {
     id: 'id_广东',
-    code: '',
+    code: 'id_广东code',
     name: '',
     tabName: 'tag_广东'
   },
   {
     id: 'id_上海',
-    code: '',
+    code: 'id_上海code',
     name: '',
     tabName: 'tag_上海'
   },
   {
     id: 'id_江苏',
-    code: '',
+    code: 'id_江苏code',
     name: '',
     tabName: 'tag_江苏'
   },
   {
     id: 'id_浙江',
-    code: '',
+    code: 'id_浙江code',
     name: '',
     tabName: 'tag_浙江'
   },
   {
     id: 'id_安徽',
-    code: '',
+    code: 'id_安徽code',
     name: '',
     tabName: 'tag_安徽'
   },
   {
     id: 'id_江西',
-    code: '',
+    code: 'id_江西code',
     name: '',
     tabName: 'tag_江西'
   },
   {
     id: 'id_海员建设',
-    code: '',
+    code: 'id_海员建设code',
     name: '',
     tabName: 'tag_海员建设'
   },
   {
     id: 'id_山西',
-    code: '',
+    code: 'id_山西code',
     name: '',
     tabName: 'tag_山西'
   },
   {
     id: 'id_黑龙江',
-    code: '',
+    code: 'id_黑龙江code',
     name: '',
     tabName: 'tag_黑龙江'
   },
   {
     id: 'id_金融',
-    code: '',
+    code: 'id_金融code',
     name: '',
     tabName: 'tag_金融'
   },
   {
     id: 'id_内蒙古',
-    code: '',
+    code: 'id_内蒙古code',
     name: '',
     tabName: 'tag_内蒙古'
   },
   {
     id: 'id_吉林',
-    code: '',
+    code: 'id_吉林code',
     name: '',
     tabName: 'tag_吉林'
   },
   {
     id: 'id_民航',
-    code: '',
+    code: 'id_民航code',
     name: '',
     tabName: 'tag_民航'
   },
   {
     id: 'id_陕西',
-    code: '',
+    code: 'id_陕西code',
     name: '',
     tabName: 'tag_陕西'
   },
   {
     id: 'id_辽宁',
-    code: '',
+    code: 'id_辽宁code',
     name: '',
     tabName: 'tag_辽宁'
   },
   {
     id: 'id_五小',
-    code: '',
+    code: 'id_五小code',
     name: '',
     tabName: 'tag_五小'
   },
   {
     id: 'id_全总',
-    code: '',
+    code: 'id_全总code',
     name: '',
     tabName: 'tag_全总'
   },
   {
     id: 'id_重庆',
-    code: '',
+    code: 'id_重庆code',
     name: '',
     tabName: 'tag_重庆'
   },
   {
     id: 'id_四川',
-    code: '',
+    code: 'id_四川code',
     name: '',
     tabName: 'tag_四川'
   },
   {
     id: 'id_云南',
-    code: '',
+    code: 'id_云南code',
     name: '',
     tabName: 'tag_云南'
   },
   {
     id: 'id_贵州',
-    code: '',
+    code: 'id_贵州code',
     name: '',
     tabName: 'tag_贵州'
   },
   {
     id: 'id_新疆',
-    code: '',
+    code: 'id_新疆code',
     name: '',
     tabName: 'tag_新疆'
   },
   {
     id: 'id_新疆兵团',
-    code: '',
+    code: 'id_新疆兵团code',
     name: '',
     tabName: 'tag_新疆兵团'
   },
   {
     id: 'id_西藏',
-    code: '',
+    code: 'id_西藏code',
     name: '',
     tabName: 'tag_西藏'
   },
   {
     id: 'id_青海',
-    code: '',
+    code: 'id_青海code',
     name: '',
     tabName: 'tag_青海'
   },
   {
     id: 'id_甘肃',
-    code: '',
+    code: 'id_甘肃code',
     name: '',
     tabName: 'tag_甘肃'
   },
   {
     id: 'id_宁夏',
-    code: '',
+    code: 'id_宁夏code',
     name: '',
     tabName: 'tag_宁夏'
   }

src/pages/A2openEgg/index.module.scss

@@ -54,7 +54,11 @@
 
         .adm-image {
           width: 100%;
+          height: 100%;
           min-height: 200px;
+          img {
+            object-fit: contain !important;
+          }
           // 图片加载失败
           .adm-image-tip {
             height: 200px;

src/pages/A2openEgg/index.tsx

@@ -5,7 +5,6 @@ import { CloseOutlined } from '@ant-design/icons'
 import { isMobileFu } from '@/utils/history'
 import { domShowFu } from '@/utils/domShow'
 import ImagePreview, { ImagePreviewRef } from '@/components/ImagePreview'
-import openEggImg from '@/assets/img/openEgg.png'
 
 type Props = {
   closeFu: () => void
@@ -13,26 +12,21 @@ type Props = {
 }
 
 function A2openEgg({ closeFu, url }: Props) {
+  const keyRef = useRef(Date.now())
+
   // 把砸开彩蛋的图片转成blob url
-  const [apngUrl, setApngUrl] = useState<string | null>(null)
+  const [apngUrl, setApngUrl] = useState(false)
 
   const lodingImgFu = useCallback(async () => {
     domShowFu('#AsyncSpinLoding', true)
-    try {
-      // 注意：这里的路径需要是最终可以被公开访问的路径，或者通过require得到的路径
-      const response = await fetch(openEggImg) // openEggImg 是 import 得到的路径
-      const blob = await response.blob()
-      const blobUrl = URL.createObjectURL(blob)
+
+    if (apngUrl) {
       domShowFu('#AsyncSpinLoding', false)
-      setApngUrl(blobUrl)
       setTimeout(() => {
         setMoveEnd(true)
       }, 1700)
-    } catch (error) {
-      domShowFu('#AsyncSpinLoding', false)
-      console.error('Failed to fetch APNG:', error)
     }
-  }, [])
+  }, [apngUrl])
 
   useEffect(() => {
     lodingImgFu()
@@ -40,10 +34,6 @@ function A2openEgg({ closeFu, url }: Props) {
 
   const [moveEnd, setMoveEnd] = useState(false)
 
-  useEffect(() => {
-    if (moveEnd) URL.revokeObjectURL(apngUrl!)
-  }, [apngUrl, moveEnd])
-
   const imagePreviewRef = useRef<ImagePreviewRef>(null)
 
   // 查看图片
@@ -66,9 +56,14 @@ function A2openEgg({ closeFu, url }: Props) {
 
       <div className='A2Omain'>
         {/* 先进行一段动画，然后显示图片 */}
-        {moveEnd && apngUrl ? null : (
+        {moveEnd ? null : (
           <div className='A2OimgMove'>
-            <img style={{ opacity: apngUrl ? 1 : 0 }} src={apngUrl!} alt='' />
+            <img
+              onLoad={() => setApngUrl(true)}
+              style={{ opacity: apngUrl ? 1 : 0 }}
+              src={`./myData/openEgg.png?t=${keyRef.current}`}
+              alt=''
+            />
           </div>
         )}
 

src/pages/A2scene/index.module.scss

@@ -23,14 +23,6 @@
         transition: all 0.3s;
         overflow: hidden;
 
-        .A2RenJing {
-          max-width: 99999px;
-          width: 146px;
-          height: 100%;
-          position: relative;
-          z-index: 11;
-        }
-
         .A2RenMove {
           position: absolute;
           top: 0;

src/pages/A2scene/index.tsx

@@ -148,7 +148,10 @@ function A2scene() {
       clearInterval(moveRef.current)
       moveRef.current = window.setInterval(() => {
         setMoveCut(!moveCutRef.current)
-      }, 3600)
+      }, 5000)
+    }
+    return () => {
+      clearInterval(moveRef.current)
     }
   }, [moveSta])
 
@@ -163,7 +166,8 @@ function A2scene() {
         }}
         onClick={() =>
           setOpenEgg(
-            'https://sit-yunnanguqiao.4dage.com/bridge/A1record/img/20250829_145201542176.JPG'
+            // 'https://sit-yunnanguqiao.4dage.com/bridge/A1record/img/20250829_145201542176.JPG'
+            'https://houseoss.4dkankan.com/project/DEMO/qgzgg/666.png'
           )
         }
       >
@@ -171,7 +175,7 @@ function A2scene() {
       </h1>
       {isNumFlag.flag ? (
         <div className='A2main' style={{ opacity: isNumFlag.opc }}>
-          <iframe key={code} src='/tttt.html' ref={iframeRef} title='0'></iframe>
+          <iframe key={code} src='./tttt.html' ref={iframeRef} title='0'></iframe>
           {/* 
           <iframe
             key={code}
@@ -182,7 +186,7 @@ function A2scene() {
 
           {/* 右下角数字人 */}
           <div
-            hidden={!sonState}
+            hidden={!sonState || !moveSta}
             className={classNames('A2showRen', renShow ? '' : 'A2showRenZhuan')}
             onClick={() => setRenShow(!renShow)}
           >
@@ -194,21 +198,13 @@ function A2scene() {
             className={classNames('A2Ren', renShow ? '' : 'A2RenHide')}
             onClick={() => setRenCaoShow(!renCaoShow)}
           >
-            {/* <img
-              className='A2RenJing'
-              src={require('@/assets/img/ren.png')}
-              alt=''
-              hidden={!moveCut}
-            /> */}
-
             {/* 序列帧 */}
             <div
-              // hidden={moveCut}
+              hidden={!moveSta}
               className='A2RenMove'
-              id='A2RenMove'
+              id={moveCut ? '' : 'A2RenMove'}
               onLoad={() => {
                 if (moveRef.current === -1) setMoveCut(false)
-                console.log('序列帧图片加载完成')
                 setMoveSta(true)
               }}
             >