feat: animate / 入场动画

package.json

@@ -25,9 +25,9 @@
   "dependencies": {
     "@ant-design/compatible": "^1.1.0",
     "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-form": "1.48.1",
     "@ant-design/pro-layout": "^6.27.2",
     "@ant-design/pro-table": "2.56.8",
-    "@ant-design/pro-form": "1.48.1",
     "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -36,6 +36,7 @@
     "@babel/preset-react": "^7.13.13",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "animate.css": "^4.1.1",
     "antd": "^4.18.3",
     "antd-img-crop": "^4.0.2",
     "awesome-typescript-loader": "^5.2.1",

src/assets/css/styleTemplate.less

@@ -2,12 +2,11 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-25 10:41:55
+ * @Last Modified time: 2023-10-25 16:42:23
  */
 
 @import url("../../themes/themes.less");
 
-
 :global {
   #app {
     height: inherit;
@@ -227,12 +226,18 @@
     display: inline-block;
     border: 1px solid #ececec;
   }
-
-  #app .top {
+  #app .top2 {
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
     height: 8%;
+    background:#0a091e;
+    background-color: #0a091e;
+  
+  }
+  #app .top {
+    background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
+    height: 100%;
     position: unset;
-
+  
     .title_box {
       display: flex;
       align-items: center;
@@ -323,18 +328,21 @@
     top: 0;
     width: 100%;
     height: 100%;
-
+    .video_box_hide{
+      z-index: 12;
+    }
     .video_box {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
-      background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 0 / 100% 100% #041b40;
+      background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      video{
+      flex-wrap: wrap;
+      video {
         width: 89%;
         height: 83%;
         padding: 1% 0 0 10%;
@@ -358,7 +366,7 @@
       top: 0;
       width: 100%;
       background: unset;
-
+      z-index: 11;
       .topMsg_title {
         background: url(../imgs/dataVimg/tipleBg.png) no-repeat 0 0 / 100% 100%;
         height: 2em;
@@ -375,14 +383,17 @@
         width: 28%;
         height: 88%;
         z-index: 9;
-
-        .topMsg {
+        .topMsg2{
           width: 100%;
           height: 22%;
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
           /* border-radius: 26px; */
           /* padding: 16px; */
           margin-bottom: 3%;
+        }
+        .topMsg {
+          width: 100%;
+          height: 100%;
 
           .topMsg_content {
             height: calc(100% - 2em);
@@ -429,6 +440,13 @@
           }
         }
 
+        .center_box2 {
+          width: 100%;
+          height: 30%;
+          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
+          margin-bottom: 3%;
+        }
+
         .center_box {
           .topMsg_content {
             width: 100%;
@@ -447,18 +465,17 @@
 
             }
           }
-
           width: 100%;
-          height: 30%;
-          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
-          margin-bottom: 3%;
-
+          height: 100%;
         }
 
-
-        .bottomContent {
+        .bottomContent2{
           width: 100%;
           height: 35%;
+        }
+        .bottomContent {
+          width: 100%;
+          height: 100%;
 
           .topMsg_content {
             width: 100%;
@@ -495,10 +512,14 @@
         }
       }
 
-      .rightContent .bottomContent {
+      .rightContent .bottomContent2 {
         width: 100%;
         height: 28%;
       }
+      .rightContent .bottomContent {
+        width: 100%;
+        height: 100%;
+      }
 
       .topMsg_content {
         width: 100%;
@@ -565,9 +586,16 @@
         .topMsg_2 .topMsg_content {
           height: 80%;
         }
-
+        .topMsg_22,.topMsg_33{
+          width: 100%;
+          height: 22%;
+          margin-bottom: 3%;
+        }
         .topMsg_2,
-        .topMsg_3,
+        .topMsg_3{
+          width: 100%;
+          height: 100%;
+        }
         .topMsg_4 {
           width: 100%;
           height: 22%;
@@ -605,11 +633,14 @@
           }
 
         }
-
-        .topMsg {
+        .topMsg2{
           width: 100%;
           height: 20%;
           margin-bottom: 3%;
+        }
+        .topMsg {
+          width: 100%;
+          height: 100%;
 
           .topMsg_content {
             height: calc(100% - 1em);
@@ -735,14 +766,23 @@
         width: calc(100% - 56%);
         height: 88%;
         position: relative;
-
-        .bottomContent {
+        .topMsg3{
+          width: 100%;
+          height: 18%;
+          margin-top: 2em;
+        }
+        .bottomContent3 {
           height: 30%;
           width: 100%;
           position: absolute;
           left: 0;
           bottom: 5%;
 
+        }
+        .bottomContent {
+          height: 100%;
+          width: 100%;
+
           .topMsg_content {
             width: 100%;
             height: 100%;
@@ -774,7 +814,7 @@
         .topMsg {
           background: url(../imgs/dataVimg/toplineleft.png) no-repeat 1.2em 0.2em/ 45px 80%;
           ;
-          height: 18%;
+          height: 100%;
           color: #69FFDE;
           display: flex;
           justify-content: center;
@@ -995,7 +1035,7 @@
   }
 
   .leftContent .bottomContent {
-    height: 42% !important;
+    height: 100% !important;
 
     .eacharView {
       display: flex;

src/pages/frame/component/top/style.less

@@ -5,7 +5,8 @@
   width: 100%;
   z-index: 100;
   height: 50px;
-  background-color: #041747;
+  background:#0a091e;
+  background-color: #0a091e;
   color: #fff;
   padding: 0 16px;
   display: flex;

src/pages/frame/component/top/view.jsx

@@ -28,30 +28,6 @@ import {
   Popover,
   Button,
 } from "antd";
-import {
-  AreaChartOutlined,
-  PieChartOutlined,
-  BarChartOutlined,
-  DotChartOutlined,
-  LineChartOutlined,
-  RadarChartOutlined,
-  HeatMapOutlined,
-  FallOutlined,
-  RiseOutlined,
-  StockOutlined,
-  BoxPlotOutlined,
-  FundOutlined,
-  SlidersOutlined,
-  DatabaseOutlined,
-  DollarOutlined,
-  ControlOutlined,
-  CodeOutlined,
-  BarsOutlined,
-  AppstoreAddOutlined,
-  ApartmentOutlined,
-  CloseOutlined,
-} from "@ant-design/icons";
-import { listUserModuleBulletinsNew } from "@apis/system";
 
 import {
   setMessageWasDeal,
@@ -72,14 +48,12 @@ import {
 } from "./api.js";
 
 import $store from "@store/";
-import ResetPassword from "@components/resetPasswordModal/view";
-import TreeSearch from "@components/TreeSelectSearch/view";
 import { dealDiffSheetType, handleClickForUtil, crossMenuClick } from "@utils/util";
 import { switchPage, getUnionId } from "@apis/common.js";
-// import LightMenu from "@components/LightMenu/view.jsx";
 import Cookie from 'js-cookie';
 import { toJS } from "mobx";
 import utils from "@utils/index";
+import 'animate.css';
 
 
 const { SubMenu } = Menu;
@@ -795,35 +769,37 @@ export default observer(function (props) {
     messageSourceName,
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
   return (
-    <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
-      <div className="title_box">
-        <img
-          src={require("@assets/imgs/dataVimg/logo.png").default}
-          width="17"
-         />
-         <h1>运营数据中心</h1>
-      </div>
-      {/* {history.location.pathname === "/home/index" && (
-        <>
-          <div className="style">
-            <span className="iconfont a-switch2x"></span>
-            <span className="style_change">风格切换</span>
-          </div>
-          <span className="split_line">|</span>
-        </>
-      )} */}
-      <div className="contact" style={{ width: '30px' }}>
-        {/* <QuestionCircleOutlied onClick={handleContact} /> */}
-        {/* <Tooltip placement="bottom" title="切换主题">
+    <div class="top2 animate__animated animate__fadeInDown animate__delay-1s">
+      <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
+        <div className="title_box">
           <img
-            src={require("@assets/imgs/icon_xitong.png").default}
-            alt=""
+            src={require("@assets/imgs/dataVimg/logo.png").default}
             width="17"
-            style={{ "marginRight": "10px" }}
-            onClick={changeThemesStyle} />
-        </Tooltip> */}
-      </div>
+          />
+          <h1>运营数据中心</h1>
+        </div>
+        {/* {history.location.pathname === "/home/index" && (
+          <>
+            <div className="style">
+              <span className="iconfont a-switch2x"></span>
+              <span className="style_change">风格切换</span>
+            </div>
+            <span className="split_line">|</span>
+          </>
+        )} */}
+        <div className="contact" style={{ width: '30px' }}>
+          {/* <QuestionCircleOutlied onClick={handleContact} /> */}
+          {/* <Tooltip placement="bottom" title="切换主题">
+            <img
+              src={require("@assets/imgs/icon_xitong.png").default}
+              alt=""
+              width="17"
+              style={{ "marginRight": "10px" }}
+              onClick={changeThemesStyle} />
+          </Tooltip> */}
+        </div>
 
+      </div>
     </div>
   );
 });

src/pages/frame/style.less

@@ -332,7 +332,8 @@
 }
 
 .frame {
-  background-color: #f5f5f5;
+  background:#0a091e;
+  background-color: #0a091e;
   position: relative;
   height: 100%;
   overflow: hidden;

src/pages/tqcDataVHome/component/mapView.jsx

@@ -0,0 +1,109 @@
+/*
+ * @Author: dayan_hjm 中部地图 第一段
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
+        autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        muted 属性 : 值为 muted , 将视频设置为静音播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        loop 属性 : 值为 loop , 设置播放器循环播放 ;
+        poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
+        preload 属性 :
+        设置 auto , 表示 预先加载视频 ;
+        设置 none , 表示 不预先加载视频 ;
+ * @Last Modified time: 2023-10-25 16:42:50
+ */
+import React, { useState, useEffect, Component } from "react";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+import 'animate.css';
+@withRouter
+
+class MapView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      changGif: false,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+      this.videoStart();
+    }, 200)
+    // setTimeout(() => {
+    //   $(".video_box_hide").hide();
+    // }, 4000)
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.video1');
+    console.log(video.play());
+
+    const model = document.querySelector('.model')
+    const btn = document.querySelector('button')
+    // 第一种方法 引导用户去与页面交互实现播放
+    async function play() {
+      try {
+        await video.play();
+        //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
+        // model.style.display = 'none';
+        btn.removeEventListener('click', play);
+        // 如果他自动播放了就隐藏按钮，消除点击事件
+      } catch (err) {
+        // model.style.display = 'block';
+        btn.addEventListener('click', play);
+        // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
+      }
+    }
+    play();
+
+    //第二种方法比较主流，类似的有网页版抖音以及B站
+    function play() {
+      video.muted = true;//设置视频为静音
+      video.play();//调用播放方法
+      const ctx = new AudioContext();
+      const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
+      // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
+      ctx.close();
+      if (canAutoPlay) {
+        video.muted = false;
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+      }
+      else {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+      }
+    }
+    play()
+
+  }
+
+  render() {
+    const { changGif } = this.state;
+    return (
+      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__delay-2s">
+          <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
+      </div>
+    )
+  }
+}
+export default MapView;

src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-25 10:45:33
+ * @Last Modified time: 2023-10-25 16:46:16
  */
 /*
  * @Author: dayan_hjm 
@@ -52,7 +52,8 @@ import MoodSendView from "./component/moodSendView.jsx";
 import LeftMenoyView from "./component/leftMenoyView.jsx";
 import RightBottomView from "./component/rightBottomView.jsx";
 import OneQualified from "./component/oneQualified.jsx";
-
+import MapView from "./component/mapView.jsx";
+import 'animate.css';
 @withRouter
 
 class Home extends Component {
@@ -72,7 +73,7 @@ class Home extends Component {
     }, 200)
     setTimeout(() => {
       //替换gif
-      this.setState({ changGif: true })
+      this.setState({ changGif: true });
     }, 2000)
   }
   videoStart() {
@@ -87,7 +88,7 @@ class Home extends Component {
         媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
         可以通过：chrome://media-engagement/ 查看
      */
-    const video = document.querySelector('video')
+    const video = document.querySelector('.video2');
     console.log(video.play());
 
     const model = document.querySelector('.model')
@@ -140,76 +141,76 @@ class Home extends Component {
     return (
       <div className={"home_box"}>
         {/* 视频播放器 */}
+        <MapView></MapView>
         <div className={"video_box"}>
-          {/*         controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
-        autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
-        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
-        muted 属性 : 值为 muted , 将视频设置为静音播放 ;
-        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
-        width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
-        height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
-        loop 属性 : 值为 loop , 设置播放器循环播放 ;
-        poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
-        preload 属性 :
-        设置 auto , 表示 预先加载视频 ;
-        设置 none , 表示 不预先加载视频 ;
-        */}
-          {/* <video style={{display:!changGif ? 'block' : 'none'}} src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay"></video> */}
-          <video src={require("@assets/imgs/dataVImg/homeVideo2.mp4").default} autoplay="autoplay" loop="loop"></video>
-          
+          <video src={require("@assets/imgs/dataVImg/homeVideo2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-2s"></video>
         </div>
         <div className={[styles.home + " home cbHome"]}>
           <div className="leftContent">
-            <div className="topMsg">
-              <p className="topMsg_title">总产值</p>
-              <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
-                <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">万元</span>
+
+            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg">
+                <p className="topMsg_title">总产值</p>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                  <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">万元</span>
+                </div>
               </div>
             </div>
-            <div className="center_box">
-              <p className="topMsg_title">库存金额</p>
-              <div className="topMsg_content">
-                <LeftMenoyView></LeftMenoyView>
+
+            <div class="center_box2 animate__animated animate__fadeInDown animate__slower">
+              <div className="center_box">
+                <p className="topMsg_title">库存金额</p>
+                <div className="topMsg_content">
+                  <LeftMenoyView></LeftMenoyView>
+                </div>
               </div>
             </div>
-            <div className="bottomContent bigDivPd">
-              <p className="topMsg_title">月度产量/发货量</p>
-              <div className="topMsg_content">
-                <MoodSendView></MoodSendView>
+
+            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="bottomContent bigDivPd">
+                <p className="topMsg_title">月度产量/发货量</p>
+                <div className="topMsg_content">
+                  <MoodSendView></MoodSendView>
+                </div>
               </div>
             </div>
+
           </div>
 
           <div className="centerCon">
-            <div className="topMsg">
-              <div className="topMsg2">
-                <div className="topMsg_content">
-                  <div className="center_li">
-                    <div className="right_li">
-                      <span className="topMsg_number" class="shu1">232425</span>
-                      <p className="topMsg_line"></p>
-                      <span className="topMsg_tip">年度产量/吨</span>
+            <div class="topMsg3 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg">
+                <div className="topMsg2">
+                  <div className="topMsg_content">
+                    <div className="center_li">
+                      <div className="right_li">
+                        <span className="topMsg_number" class="shu1">232425</span>
+                        <p className="topMsg_line"></p>
+                        <span className="topMsg_tip">年度产量/吨</span>
+                      </div>
                     </div>
-                  </div>
-                  <div className="center_li">
-                    <div className="right_li">
-                      <span className="topMsg_number" class="shu1">32425</span>
+                    <div className="center_li">
+                      <div className="right_li">
+                        <span className="topMsg_number" class="shu1">32425</span>
+                        <p className="topMsg_line"></p>
+                        <span className="topMsg_tip">年度发货量/吨</span>
+                      </div>
+                    </div>
+                    <div className="center_li">
+                      <span className="topMsg_number" class="shu1">13456</span>
                       <p className="topMsg_line"></p>
-                      <span className="topMsg_tip">年度发货量/吨</span>
+                      <span className="topMsg_tip">产品库存/吨</span>
                     </div>
                   </div>
-                  <div className="center_li">
-                    <span className="topMsg_number" class="shu1">13456</span>
-                    <p className="topMsg_line"></p>
-                    <span className="topMsg_tip">产品库存/吨</span>
-                  </div>
                 </div>
               </div>
             </div>
-            <div className="bottomContent">
-              <p className="topMsg_title">近30天产量</p>
-              <div className="topMsg_content">
-                <BottomLineForSend></BottomLineForSend>
+            <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower">
+              <div className="bottomContent">
+                <p className="topMsg_title">近30天产量</p>
+                <div className="topMsg_content">
+                  <BottomLineForSend></BottomLineForSend>
+                </div>
               </div>
             </div>
 
@@ -217,37 +218,45 @@ class Home extends Component {
 
           {/* 右侧信息栏 */}
           <div className="rightContent">
-            <div className="topMsg bigDivPd">
-              <p className="topMsg_title">百万工时损工率</p>
-              <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
-                <div className="topMsg_box">
-                  <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
-                  <p className="topMsg_number_p">谢洪</p>
+            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg bigDivPd">
+                <p className="topMsg_title">百万工时损工率</p>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
+                    <p className="topMsg_number_p">谢洪</p>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className="topMsg_2">
-              <p className="topMsg_title">一次合格率</p>
-              <div className="topMsg_content">
-                <OneQualified></OneQualified>
+            <div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg_2">
+                <p className="topMsg_title">一次合格率</p>
+                <div className="topMsg_content">
+                  <OneQualified></OneQualified>
+                </div>
               </div>
             </div>
 
-            <div className="topMsg_3">
-              <p className="topMsg_title">产量计划完成率</p>
-              <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
-                <div className="topMsg_box">
-                  <span className="topMsg_number" class="shu1">78.1</span><span className="topMsg_number_2">%</span>
-                  <p className="topMsg_number_p">谢洪</p>
+            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="topMsg_3">
+                <p className="topMsg_title">产量计划完成率</p>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1">78.1</span><span className="topMsg_number_2">%</span>
+                    <p className="topMsg_number_p">谢洪</p>
+                  </div>
                 </div>
               </div>
             </div>
-
-            <div className="bottomContent bigDivPd">
-              <p className="topMsg_title">碳排放</p>
-              <div className="topMsg_content">
-                <RightBottomView></RightBottomView>
+            
+            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
+              <div className="bottomContent bigDivPd">
+                <p className="topMsg_title">碳排放</p>
+                <div className="topMsg_content">
+                  <RightBottomView></RightBottomView>
+                </div>
               </div>
             </div>
           </div>

yarn.lock

@@ -2793,6 +2793,11 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.npmmirror.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz"
   integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-3.2.4.tgz"