diff --git a/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx b/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx
index bfc7e19..70fa326 100644
--- a/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx
+++ b/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx
@@ -7,6 +7,7 @@ function ClimateReconDataAssim() {
   return (
     <div className={styles.climateReconDataAssim}>
       <MapLayout>
+        <div className="title">过去千年气候重建数据同化</div>
         <div className="formPanel">
           <FormPanel />
         </div>
diff --git a/src/components/common/TextInfoPanel/index.module.less b/src/components/common/TextInfoPanel/index.module.less
index 8be1c4b..cefbb89 100644
--- a/src/components/common/TextInfoPanel/index.module.less
+++ b/src/components/common/TextInfoPanel/index.module.less
@@ -2,10 +2,10 @@
   width: 100%;
   height: 100%;
   border: 1px solid #04fbfd;
-  color: #02f9ff !important;
+  color: white !important;
   background-color: #000000e7;
   pointer-events: auto;
-  font-size: 18px;
+  font-size: 19px;
   text-indent: 2em;
   line-height: 1.5;
   z-index: 999;
diff --git a/src/components/common/WavePoint/index.jsx b/src/components/common/WavePoint/index.jsx
index 66ff5b3..a4a97a0 100644
--- a/src/components/common/WavePoint/index.jsx
+++ b/src/components/common/WavePoint/index.jsx
@@ -129,7 +129,7 @@ function WavePoint({
           <LabelGraphics
             text={labelText}
             font="24px Helvetica"
-            fillColor={Color.SKYBLUE}
+            fillColor={Color.fromCssColorString("#04fbfd")}
             outlineColor={Color.BLACK}
             outlineWidth={2}
             style={LabelStyle.FILL_AND_OUTLINE}
diff --git a/src/components/domain/Four/ChartPanel.jsx b/src/components/domain/Four/ChartPanel.jsx
index e98be8e..62d97a8 100644
--- a/src/components/domain/Four/ChartPanel.jsx
+++ b/src/components/domain/Four/ChartPanel.jsx
@@ -84,10 +84,9 @@ function ChartPanel() {
         type: "line",
         stack: "Total",
         data: observedData,
-        color: "black",
         symbol: "none",
         itemStyle: {
-          color: "black",
+          color: "lightgrey",
         },
       },
       {
@@ -95,7 +94,6 @@ function ChartPanel() {
         type: "line",
         // stack: "Total",
         data: predictedData,
-        color: "red",
         symbol: "none",
         itemStyle: {
           color: "red",
diff --git a/src/components/domain/Four/Labels.jsx b/src/components/domain/Four/Labels.jsx
index 8de4a2e..277c12b 100644
--- a/src/components/domain/Four/Labels.jsx
+++ b/src/components/domain/Four/Labels.jsx
@@ -67,7 +67,7 @@ function Labels() {
             <LabelGraphics
               text={name}
               font="24px Helvetica"
-              fillColor={Color.SKYBLUE}
+              fillColor={Color.fromCssColorString("#04fbfd")}
               outlineColor={Color.BLACK}
               outlineWidth={2}
               style={LabelStyle.FILL_AND_OUTLINE}
diff --git a/src/components/domain/One/ChartPanel.jsx b/src/components/domain/One/ChartPanel.jsx
index 045995f..da1ee2e 100644
--- a/src/components/domain/One/ChartPanel.jsx
+++ b/src/components/domain/One/ChartPanel.jsx
@@ -52,7 +52,7 @@ function ChartPanel() {
       trigger: "axis",
     },
     legend: {
-      data: ["ERSST_lancozs", "JRA55_lancozs"],
+      data: ["拉布拉多海夏季海温(异常值)", "高原夏季气温(异常值)"],
       textStyle: { color: "#04fbfd", cursor: "point" },
     },
     animationDuration: years.length * 1000,
@@ -65,6 +65,7 @@ function ChartPanel() {
     },
     xAxis: {
       type: "category",
+      // name: "年",
       boundaryGap: false,
       data: years,
       axisLine: {
@@ -81,6 +82,7 @@ function ChartPanel() {
     },
     yAxis: {
       type: "value",
+      name: "℃",
       min: -1.5,
       max: 2.0,
       interval: 0.5,
@@ -104,7 +106,7 @@ function ChartPanel() {
     dataZoom: { type: "inside", start: 0, end: 100 },
     series: [
       {
-        name: "ERSST_lancozs",
+        name: "拉布拉多海夏季海温(异常值)",
         type: "line",
         stack: "Total",
         data: laBrudata,
@@ -116,7 +118,7 @@ function ChartPanel() {
         },
       },
       {
-        name: "JRA55_lancozs",
+        name: "高原夏季气温(异常值)",
         type: "line",
         // stack: "Total",
         data: plateauData,
diff --git a/src/components/domain/One/CustomFlyTo.jsx b/src/components/domain/One/CustomFlyTo.jsx
index 5557c5f..3e85149 100644
--- a/src/components/domain/One/CustomFlyTo.jsx
+++ b/src/components/domain/One/CustomFlyTo.jsx
@@ -26,20 +26,20 @@ function CustomFlyTo() {
 
     // barotorpic
     const barotorpic = {
-      destination: Cartesian3.fromDegrees(75, 48, 15000000),
+      destination: Cartesian3.fromDegrees(60, 15, 15000000),
       duration: 7,
       complete: () => {},
       easingFunction: EasingFunction.LINEAR_NONE,
       orientation: {
         heading: 6.283,
-        pitch: -1.569,
-        roll: 0.45,
+        pitch: -1.4,
+        roll: 0,
       },
     };
 
     // 俯视看箭头上升
     const sideViewOptions = {
-      destination: Cartesian3.fromDegrees(-50, 46, 2000000),
+      destination: Cartesian3.fromDegrees(-50, 46, 2200000),
       duration: 5,
       orientation: {
         heading: Math.toRadians(-15.0),
diff --git a/src/components/domain/One/Cyclone.jsx b/src/components/domain/One/Cyclone.jsx
index 7089e6a..63a687c 100644
--- a/src/components/domain/One/Cyclone.jsx
+++ b/src/components/domain/One/Cyclone.jsx
@@ -14,6 +14,8 @@ let totalSeconds = 60;
 let numberOfSamples = 120;
 let wheelAngle = 0;
 
+const height = 1000000;
+
 function Cyclone() {
   const { viewer } = useCesium();
 
@@ -48,7 +50,9 @@ function Cyclone() {
 
   const getPassTime = useCallback(() => {
     const { startTime, currentTime } = viewer.clock;
-    const _time = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay);
+    const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
+      1
+    );
     return _time;
   }, [viewer]);
 
@@ -63,7 +67,7 @@ function Cyclone() {
           new CallbackProperty(function (time, result) {
             const passTime = getPassTime();
             if (passTime < 5) return;
-            return Cartesian3.fromDegrees(-62, 69, 1000000);
+            return Cartesian3.fromDegrees(-62, 69, height);
           }, true)
         }
       >
@@ -79,15 +83,22 @@ function Cyclone() {
           color={anticycloneColor}
           colorBlendMode={ColorBlendMode.REPLACE}
         />
-        <LabelGraphics
-          position={Cartesian3.fromDegrees(98, 48, 0)}
-          text={"Anticyclone"}
-          font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
-          outlineColor={Color.BLACK}
-          outlineWidth={2}
-          style={LabelStyle.FILL_AND_OUTLINE}
-          eyeOffset={new Cartesian2(0, 200000)}
+      </Entity>
+      <Entity
+        id={"Anticyclone-add-1"}
+        position={
+          new CallbackProperty(function (time, result) {
+            const passTime = getPassTime();
+            if (passTime < 7.5) return;
+            return Cartesian3.fromDegrees(-45, 59, height);
+          }, true)
+        }
+      >
+        <ModelGraphics
+          uri={arrowRound}
+          minimumPixelSize={128}
+          color={anticycloneColor}
+          colorBlendMode={ColorBlendMode.REPLACE}
         />
       </Entity>
       <Entity
@@ -96,7 +107,24 @@ function Cyclone() {
           new CallbackProperty(function (time, result) {
             const passTime = getPassTime();
             if (passTime < 10) return;
-            return Cartesian3.fromDegrees(-20, 55, 1000000);
+            return Cartesian3.fromDegrees(-20, 55, height);
+          }, true)
+        }
+      >
+        <ModelGraphics
+          uri={arrowRound}
+          minimumPixelSize={128}
+          color={cycloneColor}
+          colorBlendMode={ColorBlendMode.REPLACE}
+        />
+      </Entity>
+      <Entity
+        id={"Cyclone-add-1"}
+        position={
+          new CallbackProperty(function (time, result) {
+            const passTime = getPassTime();
+            if (passTime < 12.5) return;
+            return Cartesian3.fromDegrees(5, 53, height);
           }, true)
         }
       >
@@ -113,7 +141,24 @@ function Cyclone() {
           new CallbackProperty(function (time, result) {
             const passTime = getPassTime();
             if (passTime < 15) return;
-            return Cartesian3.fromDegrees(29, 49, 1000000);
+            return Cartesian3.fromDegrees(29, 49, height);
+          }, true)
+        }
+      >
+        <ModelGraphics
+          uri={arrowRound}
+          minimumPixelSize={128}
+          color={anticycloneColor}
+          colorBlendMode={ColorBlendMode.REPLACE}
+        />
+      </Entity>
+      <Entity
+        id={"Anticyclone-add-2"}
+        position={
+          new CallbackProperty(function (time, result) {
+            const passTime = getPassTime();
+            if (passTime < 17.5) return;
+            return Cartesian3.fromDegrees(46, 46, height);
           }, true)
         }
       >
@@ -130,7 +175,24 @@ function Cyclone() {
           new CallbackProperty(function (time, result) {
             const passTime = getPassTime();
             if (passTime < 20) return;
-            return Cartesian3.fromDegrees(62, 45, 1000000);
+            return Cartesian3.fromDegrees(62, 45, height);
+          }, true)
+        }
+      >
+        <ModelGraphics
+          uri={arrowRound}
+          minimumPixelSize={128}
+          color={cycloneColor}
+          colorBlendMode={ColorBlendMode.REPLACE}
+        />
+      </Entity>
+      <Entity
+        id={"Cyclone-add-2"}
+        position={
+          new CallbackProperty(function (time, result) {
+            const passTime = getPassTime();
+            if (passTime < 22.5) return;
+            return Cartesian3.fromDegrees(81, 46.5, height);
           }, true)
         }
       >
@@ -147,7 +209,7 @@ function Cyclone() {
           new CallbackProperty(function (time, result) {
             const passTime = getPassTime();
             if (passTime < 25) return;
-            return Cartesian3.fromDegrees(98, 48, 1000000);
+            return Cartesian3.fromDegrees(98, 48, height);
           }, true)
         }
       >
diff --git a/src/components/domain/One/Labels.jsx b/src/components/domain/One/Labels.jsx
index e2d64f3..d561be2 100644
--- a/src/components/domain/One/Labels.jsx
+++ b/src/components/domain/One/Labels.jsx
@@ -37,7 +37,7 @@ function Labels() {
         <LabelGraphics
           text={"拉布拉多海海温偏暖"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -48,7 +48,7 @@ function Labels() {
         <LabelGraphics
           text={"北大西洋大气环流异常"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -59,7 +59,7 @@ function Labels() {
         <LabelGraphics
           text={"欧洲地区大气环流异常"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -70,7 +70,7 @@ function Labels() {
         <LabelGraphics
           text={"barotropic"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -81,7 +81,7 @@ function Labels() {
         <LabelGraphics
           text={"青藏高原夏季出现年代际增温"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
diff --git a/src/components/domain/Six/SceneOne/index.module.less b/src/components/domain/Six/SceneOne/index.module.less
index a242e33..6ed947c 100644
--- a/src/components/domain/Six/SceneOne/index.module.less
+++ b/src/components/domain/Six/SceneOne/index.module.less
@@ -35,7 +35,7 @@
       bottom: 0;
       left: 25%;
       color: #02f9ff;
-      width: 50%;
+      width: 960px;
     }
   }
 
diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx
index 360094c..e83d93c 100644
--- a/src/components/domain/Two/Circles.jsx
+++ b/src/components/domain/Two/Circles.jsx
@@ -22,7 +22,7 @@ const lowCircle = (
     innerRadii={new Cartesian3(415000.0, 415000.0, 415000.0)}
     minimumCone={CesiumMath.toRadians(89.8)}
     maximumCone={CesiumMath.toRadians(90.2)}
-    material={new Color(0.29, 0.46, 0.77, 1)}
+    material={new Color(0, 0, 1, 1)}
   />
 );
 
@@ -32,7 +32,7 @@ const highCircle = (
     innerRadii={new Cartesian3(415000.0, 415000.0, 415000.0)}
     minimumCone={CesiumMath.toRadians(89.8)}
     maximumCone={CesiumMath.toRadians(90.2)}
-    material={new Color(0.99, 0.23, 0.23, 1)}
+    material={new Color(1, 0, 0, 1)}
   />
 );
 
@@ -100,7 +100,7 @@ function Circles() {
           <LabelGraphics
             text={"Rossby波列"}
             font="24px Helvetica"
-            fillColor={Color.SKYBLUE}
+            fillColor={Color.fromCssColorString("#04fbfd")}
             outlineColor={Color.BLACK}
             outlineWidth={2}
             style={LabelStyle.FILL_AND_OUTLINE}
@@ -116,35 +116,35 @@ function Circles() {
       <Circle
         isLow={true}
         id={`low-circle-1`}
-        showTime={5}
+        showTime={2}
         lon={-110}
         lat={-60}
       />
       <Circle
         isLow={false}
         id={`height-circle-1`}
-        showTime={10}
+        showTime={7}
         lon={-30}
         lat={-55}
       />
       <Circle
         isLow={true}
         id={`low-circle-2`}
-        showTime={15}
+        showTime={12}
         lon={30}
         lat={-40}
       />
       <Circle
         isLow={false}
         id={`height-circle-2`}
-        showTime={20}
+        showTime={16}
         lon={65}
         lat={-35}
       />
       <Circle
         isLow={true}
         id={`low-circle-3`}
-        showTime={27}
+        showTime={20}
         lon={95}
         lat={-30}
       />
diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx
index fe08153..13a3852 100644
--- a/src/components/domain/Two/CustomFlyTo.jsx
+++ b/src/components/domain/Two/CustomFlyTo.jsx
@@ -7,7 +7,7 @@ function CustomFlyTo() {
   function cameraFlyToLine() {
     const area1Options = {
       destination: Cartesian3.fromDegrees(-110, -86, 10000000),
-      duration: 5,
+      duration: 2,
       orientation: {
         heading: 6,
         pitch: -1.3,
@@ -17,13 +17,14 @@ function CustomFlyTo() {
         viewer.clock.shouldAnimate = true;
         setTimeout(() => {
           camera.flyTo(area2Options);
-        }, 5000);
+        }, 2000);
       },
       easingFunction: EasingFunction.LINEAR_NONE,
     };
 
     const area2Options = {
-      destination: Cartesian3.fromDegrees(-30, -65, 10000000),
+      destination: Cartesian3.fromDegrees(-30, -85, 10000000),
+      // destination: Cartesian3.fromDegrees(-30, -65, 10000000),
       duration: 5,
       complete: function () {
         camera.flyTo(area3Options);
@@ -37,31 +38,81 @@ function CustomFlyTo() {
     };
 
     const area3Options = {
-      destination: Cartesian3.fromDegrees(30, -40, 10000000),
+      destination: Cartesian3.fromDegrees(40, -75, 10000000),
       duration: 5,
       complete: function () {
         camera.flyTo(area4Options);
       },
       easingFunction: EasingFunction.LINEAR_NONE,
+      orientation: {
+        heading: 5.8,
+        pitch: -1.3,
+        roll: -6,
+      },
     };
 
     const area4Options = {
-      destination: Cartesian3.fromDegrees(65, -55, 10000000),
-      duration: 5,
+      destination: Cartesian3.fromDegrees(65, -65, 10000000),
+      duration: 4,
       orientation: {
         heading: 6,
         pitch: -1.3,
         roll: -6,
       },
       complete: function () {
-        camera.flyTo({
-          duration: 7,
-          destination: Cartesian3.fromDegrees(90, 5, 14000000),
-        });
+        camera.flyTo(area5Options);
       },
       easingFunction: EasingFunction.LINEAR_NONE,
     };
 
+    const area5Options = {
+      destination: Cartesian3.fromDegrees(90, -60, 10000000),
+      duration: 4,
+      orientation: {
+        heading: 6,
+        pitch: -1.3,
+        roll: -6,
+      },
+      complete: function () {
+        camera.flyTo(IndiaOceanOptions);
+      },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
+
+    const IndiaOceanOptions = {
+      destination: Cartesian3.fromDegrees(80, 0, 14000000),
+      duration: 3,
+      complete: function () {
+        setTimeout(() => {
+          camera.flyTo(QTPlateauOption);
+        }, 3000);
+      },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
+
+    const QTPlateauOption = {
+      destination: Cartesian3.fromDegrees(88, 18, 5000000),
+      duration: 2,
+      orientation: {
+        heading: 6,
+        pitch: -1.3,
+        roll: -6,
+      },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
+
+    const xx = {
+      destination: Cartesian3.fromDegrees(80, 0, 14000000),
+      duration: 5,
+      // orientation: {
+      //   heading: 6,
+      //   pitch: -1.3,
+      //   roll: -6,
+      // },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
+
+    // camera.flyTo(xx);
     camera.flyTo(area1Options);
   }
   cameraFlyToLine();
diff --git a/src/components/domain/Two/IndiaOceanSST.jsx b/src/components/domain/Two/IndiaOceanSST.jsx
index 63d7938..d171a4f 100644
--- a/src/components/domain/Two/IndiaOceanSST.jsx
+++ b/src/components/domain/Two/IndiaOceanSST.jsx
@@ -15,12 +15,12 @@ function IndianOceanSST() {
       stopTime.secondsOfDay - currentTime.secondsOfDay
     );
 
-    if (leftTime < 5) {
+    if (leftTime <= 10) {
       setShow(true);
     } else if (show) setShow(false);
   }, [show]);
 
-  useInterval(showAnimate, 100);
+  useInterval(showAnimate, 300);
 
   const tempProvider = useMemo(
     () =>
diff --git a/src/components/domain/Two/Labels.jsx b/src/components/domain/Two/Labels.jsx
index 7e2a1b0..64b2659 100644
--- a/src/components/domain/Two/Labels.jsx
+++ b/src/components/domain/Two/Labels.jsx
@@ -31,7 +31,7 @@ function Labels() {
         <LabelGraphics
           text={"5月南极涛动"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -42,7 +42,7 @@ function Labels() {
         <LabelGraphics
           text={"印度洋海温异常"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
@@ -53,7 +53,7 @@ function Labels() {
         <LabelGraphics
           text={"6月青藏高原降水和加热"}
           font="24px Helvetica"
-          fillColor={Color.SKYBLUE}
+          fillColor={Color.fromCssColorString("#04fbfd")}
           outlineColor={Color.BLACK}
           outlineWidth={2}
           style={LabelStyle.FILL_AND_OUTLINE}
diff --git a/src/components/domain/Two/Point.jsx b/src/components/domain/Two/Point.jsx
index 4054904..7d0a315 100644
--- a/src/components/domain/Two/Point.jsx
+++ b/src/components/domain/Two/Point.jsx
@@ -15,12 +15,12 @@ import {
 // 从南极到青藏高原
 const dataAntarcticaToQTP = [
   { longitude: -110, latitude: -60, height: 0, time: 0 },
-  { longitude: -110, latitude: -60, height: 1000000, time: 5 },
-  { longitude: -30, latitude: -55, height: 1000000, time: 10 },
-  { longitude: 30, latitude: -40, height: 1000000, time: 15 },
-  { longitude: 65, latitude: -35, height: 1000000, time: 20 },
-  { longitude: 95, latitude: -30, height: 1000000, time: 27 },
-  { longitude: 95, latitude: -30, height: 0, time: 30 },
+  { longitude: -110, latitude: -60, height: 1000000, time: 2 },
+  { longitude: -30, latitude: -55, height: 1000000, time: 7 },
+  { longitude: 30, latitude: -40, height: 1000000, time: 12 },
+  { longitude: 65, latitude: -35, height: 1000000, time: 16 },
+  { longitude: 95, latitude: -30, height: 1000000, time: 20 },
+  { longitude: 95, latitude: -30, height: 0, time: 23 },
 ];
 
 function Point() {
diff --git a/src/components/domain/Two/TimeLinePanel.jsx b/src/components/domain/Two/TimeLinePanel.jsx
new file mode 100644
index 0000000..6cd1c1c
--- /dev/null
+++ b/src/components/domain/Two/TimeLinePanel.jsx
@@ -0,0 +1,54 @@
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { useCesium } from "resium";
+import { useState } from "react";
+import { useInterval } from "ahooks";
+
+const textList = [
+  "5月南极涛动",
+  "原子阿蒙森海的纬向波列异常",
+  "印度洋海温降低",
+  "环流异常",
+  "高原上空降水增加、感热通量降低",
+];
+
+export default function TimeLinePanel() {
+  const { viewer } = useCesium();
+
+  const [showIndex, setShowIndex] = useState(0);
+
+  useInterval(() => {
+    const { startTime, currentTime, shouldAnimate } = viewer.clock;
+    const passtime = Math.floor(
+      currentTime.secondsOfDay - startTime.secondsOfDay
+    );
+    if (!shouldAnimate) return;
+
+    if (passtime < 2) {
+      setShowIndex(0);
+    } else if (passtime > 2 && passtime < 20) {
+      setShowIndex(1);
+    } else if (passtime > 20 && passtime < 23) {
+      setShowIndex(2);
+    } else if (passtime > 23 && passtime < 25) {
+      setShowIndex(3);
+    } else if (passtime > 25 && passtime < 30) {
+      setShowIndex(4);
+    }
+  }, 300);
+
+  return (
+    <div className={styles.timeLinePanel}>
+      {textList.map((text, index) => (
+        <div
+          className={classNames("timeline-panel-item", {
+            highlight: index === showIndex,
+          })}
+          key={`timeline-panel-item-${index}`}
+        >
+          <span>{text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx
index 3bb8874..595e615 100644
--- a/src/components/domain/Two/index.jsx
+++ b/src/components/domain/Two/index.jsx
@@ -14,6 +14,7 @@ import MoistureTransport from "./MoistureTransport";
 import Sites from "./Site";
 import SiteLegend from "./SiteLegend";
 import Labels from "./Labels";
+import TimeLinePanel from "./TimeLinePanel";
 
 export default function DomainTwo() {
   return (
@@ -35,6 +36,7 @@ export default function DomainTwo() {
         <TextInfoPanel content="利用ERA5再分析数据诊断和CESM印度洋海温强迫数值实验，发现5月的南极涛动正位相（AAO）激发原子阿蒙森海的纬向波列异常。该异常造成印度洋海温降低进而激发环流异常造成高原上空降水增加、感热通量降低。这一结果有助于提高青藏高原热源的预测技巧，改进亚洲夏季风的预测。" />
       </div>
       <WavePoints />
+      <TimeLinePanel />
       {/* <SurfaceAnomaly /> */}
     </MapLayout>
   );
diff --git a/src/components/domain/Two/index.module.less b/src/components/domain/Two/index.module.less
index 19d5cc4..402c8c9 100644
--- a/src/components/domain/Two/index.module.less
+++ b/src/components/domain/Two/index.module.less
@@ -22,3 +22,33 @@
     }
   }
 }
+
+.timeLinePanel :global {
+  position: absolute;
+  top: 24px;
+  left: 12px;
+  width: 450px;
+  background-color: #00000000;
+  display: flex;
+  flex-direction: column;
+
+  .timeline-panel-item {
+    color: white;
+    padding: 4px 8px;
+    font-size: 18px;
+
+    span {
+      padding: 4px;
+    }
+  }
+
+  .highlight {
+    span {
+      font-size: 20px;
+      font-weight: 600;
+      color: #04fbfd;
+      background-color: #04fbfd1a;
+      border-radius: 8px;
+    }
+  }
+}
diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx
index 5efb9c2..0556ff5 100644
--- a/src/components/map/Layout/index.jsx
+++ b/src/components/map/Layout/index.jsx
@@ -27,7 +27,7 @@ function MapLayout({ children, className, ...rest }) {
       </Entity>
       <CustomToolbar />
       <Picker />
-      {/* <HeadingPitchRoll /> */}
+      <HeadingPitchRoll />
       {children}
     </Viewer>
   );
diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less
index 4bc294d..7ffddc8 100644
--- a/src/components/map/Layout/index.module.less
+++ b/src/components/map/Layout/index.module.less
@@ -126,7 +126,7 @@
   .entity-legend {
     position: absolute;
     bottom: 140px;
-    width: 50%;
+    width: 960px;
     left: 25%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -152,7 +152,7 @@
   .legend {
     position: absolute;
     bottom: 12px;
-    width: 50%;
+    width: 960px;
     left: 25%;
     // height: 40px;
 
@@ -166,7 +166,9 @@
     padding: 8px;
 
     .legend-title {
-      color: #04fbfd;
+      color: #fff;
+      font-size: 20px;
+      font-weight: 600;
     }
 
     .colorbar {
@@ -199,7 +201,7 @@
         text-align: right;
         font-weight: 600;
         color: white;
-        -webkit-text-stroke: #04fbfd 1px;
+        -webkit-text-stroke: white 1px;
       }
     }
   }