fix

src/components/domain/One/Labels.jsx

@@ -8,6 +8,7 @@ function Labels() {
 
   const [showOne, setShowOne] = useState(false);
   const [showTwo, setShowTwo] = useState(false);
+  const [showThree, setShowThree] = useState(false);
 
   const showAnimate = useCallback(() => {
     const { currentTime, stopTime } = viewer.clock;
@@ -18,10 +19,15 @@ function Labels() {
     if (leftTime < 20) {
       setShowOne(true);
     } else if (showOne) setShowOne(false);
-    if (leftTime < 5) {
+
+    if (leftTime < 15) {
       setShowTwo(true);
     } else if (showTwo) setShowTwo(false);
-  }, [showOne, showTwo, viewer]);
+
+    if (leftTime < 5) {
+      setShowThree(true);
+    } else if (showThree) setShowThree(false);
+  }, [showOne, showTwo, showThree, viewer]);
 
   useInterval(showAnimate, 300);
 
@@ -40,7 +46,7 @@ function Labels() {
       </Entity>
       <Entity show={showOne} position={Cartesian3.fromDegrees(-20, 55, 0)}>
         <LabelGraphics
-          text={"北大西洋至欧洲地区大气环流异常"}
+          text={"北大西洋大气环流异常"}
           font="24px Helvetica"
           fillColor={Color.SKYBLUE}
           outlineColor={Color.BLACK}
@@ -49,7 +55,18 @@ function Labels() {
           eyeOffset={new Cartesian2(0, 200000)}
         />
       </Entity>
-      <Entity show={showTwo} position={Cartesian3.fromDegrees(98, 48, 0)}>
+      <Entity show={showTwo} position={Cartesian3.fromDegrees(31, 48, 0)}>
+        <LabelGraphics
+          text={"欧洲地区大气环流异常"}
+          font="24px Helvetica"
+          fillColor={Color.SKYBLUE}
+          outlineColor={Color.BLACK}
+          outlineWidth={2}
+          style={LabelStyle.FILL_AND_OUTLINE}
+          eyeOffset={new Cartesian2(0, 200000)}
+        />
+      </Entity>
+      <Entity show={showThree} position={Cartesian3.fromDegrees(98, 48, 0)}>
         <LabelGraphics
           text={"barotropic"}
           font="24px Helvetica"
@@ -60,7 +77,7 @@ function Labels() {
           eyeOffset={new Cartesian2(0, 1200000)}
         />
       </Entity>
-      <Entity show={showTwo} position={Cartesian3.fromDegrees(90, 27, 0)}>
+      <Entity show={showThree} position={Cartesian3.fromDegrees(90, 27, 0)}>
         <LabelGraphics
           text={"青藏高原夏季出现年代际增温"}
           font="24px Helvetica"

src/components/domain/Three/SceneOne/index.module.less

@@ -39,7 +39,7 @@
         padding: 12px;
         border: 1px solid #04fbfd;
         color: #02f9ff !important;
-        background-color: #1f485690;
+        background-color: #000000e7;
         pointer-events: auto;
         font-size: 18px;
         text-indent: 2em;
@@ -71,7 +71,7 @@
         padding: 12px;
         border: 1px solid #04fbfd;
         color: #02f9ff !important;
-        background-color: #1f485690;
+        background-color: #000000e7;
         border-radius: 8px;
 
         .ant-form-item-label {
@@ -108,7 +108,7 @@
         padding: 12px;
         border: 1px solid #04fbfd;
         color: #02f9ff !important;
-        background-color: #1f485690;
+        background-color: #000000e7;
         transition: all 0.3s ease-in-out;
         border-radius: 8px;
       }
@@ -126,7 +126,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: #1f485690;
+  background-color: #000000e7;
   border: 1px solid #04fbfd;
   border-radius: 8px;
   padding: 8px;

src/components/domain/Three/SceneTwo/index.module.less

@@ -9,7 +9,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: #1f485690;
+  background-color: #000000e7;
   border: 1px solid #04fbfd;
   border-radius: 8px;
   padding: 8px;

src/components/domain/Three/index.module.less

@@ -20,7 +20,7 @@
         padding: 12px;
         border: 1px solid #04fbfd;
         color: #02f9ff !important;
-        background-color: #1f485690;
+        background-color: #000000e7;
         transition: all 0.3s ease-in-out;
         border-radius: 8px;
       }

src/components/domain/Two/index.module.less

@@ -5,7 +5,7 @@
   right: 12px;
   bottom: 14px;
   display: grid;
-  background-color: #1f485690;
+  background-color: #000000e7;
   border: 1px solid #04fbfd;
   border-radius: 8px;
   padding: 8px;

src/components/map/Layout/index.module.less

@@ -51,7 +51,7 @@
       padding: 12px;
       border: 1px solid #04fbfd;
       color: #02f9ff !important;
-      background-color: #1f485690;
+      background-color: #000000e7;
       pointer-events: auto;
       font-size: 18px;
       text-indent: 2em;
@@ -86,7 +86,7 @@
       padding: 12px;
       border: 1px solid #04fbfd;
       color: #02f9ff !important;
-      background-color: #1f485690;
+      background-color: #000000e7;
       border-radius: 8px;
 
       .ant-form-item-label {
@@ -123,7 +123,7 @@
       padding: 12px;
       border: 1px solid #04fbfd;
       color: #02f9ff !important;
-      background-color: #1f485690;
+      background-color: #000000e7;
       transition: all 0.3s ease-in-out;
       border-radius: 8px;
     }
@@ -146,7 +146,7 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
-    background-color: #1f485690;
+    background-color: #000000e7;
     border: 1px solid #04fbfd;
     border-radius: 8px;
     padding: 8px;
@@ -175,7 +175,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #1f485690;
+    background-color: #000000e7;
     border: 1px solid #04fbfd;
     border-radius: 8px;
     padding: 8px;
@@ -228,7 +228,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #1f485690;
+    background-color: #000000e7;
     border: 1px solid #04fbfd;
     border-radius: 8px;
     padding: 8px;