fix:'水利集成登录页提交'

package.json

@@ -118,8 +118,8 @@
         "@wisdom-map/arcgismap":"^2.0.101",
         "@wisdom-map/basemap":"^2.0.8",
         "@wisdom-map/util":"1.2.9",
-        "@wisdom-map/gis-utils": "^1.0.43",
-        "@wisdom-map/pd-map": "^1.0.144",
+        "@wisdom-map/gis-utils": "^1.0.47",
+        "@wisdom-map/pd-map": "^1.0.148",
         "@wisdom-utils/components": "0.1.376",
         "@wisdom-utils/runtime": "0.0.51",
         "@wisdom-utils/utils": "0.1.412",

src/components/GlobalHeader/SimpleRiightContent.js

@@ -252,6 +252,24 @@ const GlobalHeaderRight = props => {
     },200)
     resetMenu()
   };
+
+
+  useEffect(() => {
+    const dispatchChangeGlobMenuStation = ({stationAlias, stationName, callBack})=>{
+      callBack?.();
+
+      currentStationChange(stationAlias || stationName, stationName);
+    }
+    if(window.share && window.share.event && window.share.event.emit) {  
+      window.share.event.on('dispatchChangeGlobMenuStation', dispatchChangeGlobMenuStation);
+    }
+    return ()=>{ 
+      if(window.share && window.share.event && window.share.event.emit) {  
+        window.share.event.removeListener('dispatchChangeGlobMenuStation', dispatchChangeGlobMenuStation)
+      }
+    };
+  },[stationvalue]);
+
   useEffect(() => {
     if (global.userInfo) {
       if(window._changeStation){

src/pages/bootpage/template/constants.js

@@ -22,7 +22,6 @@ import JianshiPage from './project/jianshi';
 import XinyuanPage from './project/xinyuan';
 import SuzhouPage from './project/suzhou';
 import IntegrationNewPage from './integrationNew';
-import SLPage from './project/SL';
 export const guidePage = [
   // type 为true 则需要 功能配置 isPanda 为true
   {
@@ -105,6 +104,10 @@ export const guidePage = [
     value: 'suzhouPage',
     previewSrc: require('@/assets/images/integration/previewImg/宿州北排.png'),
   },
+  {
+    label: '榆林集成登录',
+    value: 'yulinPage',
+  },
   {
     label: '演示环境(旧版)',
     type: true,
@@ -134,5 +137,4 @@ export const BootPageTemplate = {
   wulaingyePage: WuliangyePage,
   aizhongPage: AizhongPage,
   suzhouPage: SuzhouPage,
-  SLPage:SLPage
 };

src/pages/bootpage/template/project/yulin/components/imgImport.js

+/* eslint-disable prettier/prettier */
+/*
+ * @Title: 图片引用，import引用的图片 打包时不会丢失
+ * @Author: hongmye
+ * @Date: 2025-04-01 11:43:45
+ */
+
+import 背景 from '@/assets/images/integration/yulin/背景.jpg';
+import 标题背景 from '@/assets/images/integration/yulin/标题背景.png';
+import tip1 from '@/assets/images/integration/yulin/tip1.png';
+import 节水优先 from '@/assets/images/integration/yulin/节水优先.png';
+import icon from '@/assets/images/integration/yulin/icon.png';
+import 榆阳区 from '@/assets/images/integration/yulin/榆阳区.png';
+import 定边县 from '@/assets/images/integration/yulin/定边县.png';
+import 府谷县 from '@/assets/images/integration/yulin/府谷县.png';
+import 横山区 from '@/assets/images/integration/yulin/横山区.png';
+import 佳县 from '@/assets/images/integration/yulin/佳县.png';
+import 靖边县 from '@/assets/images/integration/yulin/靖边县.png';
+import 米脂县 from '@/assets/images/integration/yulin/米脂县.png';
+import 清涧县 from '@/assets/images/integration/yulin/清涧县.png';
+import 神木区 from '@/assets/images/integration/yulin/神木区.png';
+import 绥德县 from '@/assets/images/integration/yulin/绥德县.png';
+import 吴堡县 from '@/assets/images/integration/yulin/吴堡县.png';
+import 子洲县 from '@/assets/images/integration/yulin/子洲县.png';
+
+export const imgMap = {
+  背景,
+  标题背景,
+  tip1,
+  icon,
+  节水优先,
+  榆阳区,
+  定边县,
+  府谷县,
+  横山区,
+  佳县,
+  靖边县,
+  米脂县,
+  清涧县,
+  神木区,
+  绥德县,
+  吴堡县,
+  子洲县,
+};

src/pages/bootpage/template/project/yulin/index.js

+/* eslint-disable prettier/prettier */
+/*
+ * @Title: 演示集成登录页
+ * @Author: hongmye
+ * @Date: 2025-04-01 14:22:22
+ */
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { message } from 'antd';
+import { appService } from '@/api';
+import Cookies from 'js-cookie';
+import _, { cloneDeep } from 'lodash';
+import LoadPage from '@/components/LoadPage';
+import LoginAction from '@/pages/user/login/login';
+import { defaultApp } from '@/micro';
+import { searchUrl } from '@/utils/utils';
+import { useHistory, useAliveController } from '@wisdom-utils/runtime';
+import { connect } from 'react-redux';
+import { actionCreators } from '@/containers/App/store';
+import classNames from 'classnames';
+import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
+import backImg from '@/assets/images/demonstration/返回.png';
+import styles from './index.less';
+import Iframe from '../../demonstration/components/Iframe';
+import { imgMap } from './components/imgImport';
+const assetPath = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`;
+
+const IntegrationYulin = props => {
+  const clientRef = useRef(props.global.client);
+  const progressRef2 = useRef(0);
+  const timer2 = useRef(null);
+  const timer3 = useRef(null);
+  const integratedConfig = props.integratedConfig?.toObject
+    ? props.integratedConfig.toObject()
+    : props.integratedConfig || {};
+  const integrationClient = integratedConfig?.client || window?.globalConfig?.client || 'city'; // 集成登录client
+  const loadingTime = integratedConfig?.loadingTime || 5;
+  const [jumpLoading, setJumpLoading] = useState(false);
+  const [progressValue2, setProgressValue2] = useState(window.jumpLoadingProgress || 0);
+  const [linkUrl, setLinkUrl] = useState('');
+
+  const [loginAction, setAction] = useState(() => new LoginAction(props));
+  const [infoData, setInfoData] = useState({});
+  const tipList = [
+    {
+      key: '榆阳区',
+      icon: imgMap.榆阳区,
+      x: 1129,
+      y: 277,
+    },
+    {
+      key: '定边县',
+      icon: imgMap.定边县,
+      x: 472,
+      y: 573,
+    },
+    {
+      key: '府谷县',
+      icon: imgMap.府谷县,
+      x: 1495,
+      y: 92,
+    },
+    {
+      key: '横山区',
+      icon: imgMap.横山区,
+      x: 1051,
+      y: 450,
+    },
+    {
+      key: '佳县',
+      icon: imgMap.佳县,
+      x: 1359,
+      y: 370,
+    },
+    {
+      key: '靖边县',
+      icon: imgMap.靖边县,
+      x: 782,
+      y: 566,
+    },
+    {
+      key: '米脂县',
+      icon: imgMap.米脂县,
+      x: 1312,
+      y: 467,
+    },
+    {
+      key: '清涧县',
+      icon: imgMap.清涧县,
+      x: 1307,
+      y: 665,
+    },
+    {
+      key: '神木区',
+      icon: imgMap.神木区,
+      x: 1378,
+      y: 190,
+    },
+    {
+      key: '绥德县',
+      icon: imgMap.绥德县,
+      x: 1372,
+      y: 557,
+    },
+    {
+      key: '吴堡县',
+      icon: imgMap.吴堡县,
+      x: 1483,
+      y: 520,
+    },
+    {
+      key: '子洲县',
+      icon: imgMap.子洲县,
+      x: 1193,
+      y: 544,
+    },
+  ];
+  const { clear } = useAliveController();
+  const history = useHistory();
+  const jumpProgressStart = () => {
+    if (timer2.current) {
+      clearInterval(timer2.current);
+      timer2.current = null;
+    }
+    progressRef2.current = 0;
+    setProgressValue2(0);
+    timer2.current = setInterval(() => {
+      if (progressRef2.current < 97.5) {
+        progressRef2.current += 2.5;
+        setProgressValue2(progressRef2.current);
+      } else {
+        setProgressValue2(99);
+        timer2.current && clearInterval(timer2.current);
+        timer2.current = null;
+      }
+    }, 100);
+  };
+  const jumpProgressEnd = () => {
+    setProgressValue2(100);
+    timer2.current && clearInterval(timer2.current);
+    timer2.current = null;
+  };
+
+  const startTiming = (time = 2) => {
+    if (timer3.current) {
+      clearInterval(timer3.current);
+      timer3.current = null;
+    }
+    timer3.current = setTimeout(() => {
+      setJumpLoading(false);
+      timer2.current && clearInterval(timer2.current);
+      timer2.current = null;
+    }, time * 1000);
+  };
+  const getInfo = () => {
+    appService
+      .getAccountPageList({
+        ignoreSite: true,
+        accountName: '榆林集成登录配置',
+        isAll: true,
+      })
+      .then(res => {
+        if (res.code === 0) {
+          const str = res.data?.jsonData;
+          const data = str ? JSON.parse(str) : [];
+          const obj = cloneDeep(infoData);
+          data.forEach(item => {
+            const temp = {};
+            temp.title = item['标题'] || '';
+            temp.content = item['介绍内容'] || '';
+            if (item['介绍图']) {
+              temp.img = `${assetPath}?filePath=${item['介绍图']}`;
+            }
+            temp.url = item['跳转路径'] || '';
+            obj[item['名称']] = temp;
+          });
+          setInfoData(obj);
+        }
+      });
+  };
+
+  const onLink = (item, loginA) => {
+    const url = infoData[item.key]?.url || '';
+    if (!url) return;
+
+    const token = props.global?.token || Cookies.get('token');
+    if (!token) {
+      history.push(`/user/login?client=${integrationClient}`, { reload: true });
+      clear();
+      props.logout();
+      return;
+    }
+    setJumpLoading(true);
+    jumpProgressStart();
+
+    setLinkUrl(url);
+
+    const time = 6;
+
+    startTiming(time);
+  };
+  const handError = err => {
+    if (err) {
+      message.error(err);
+    }
+    setLinkUrl('');
+    setJumpLoading(false);
+    jumpProgressEnd();
+  };
+  const onMessageBack = data => {
+    if (!data?.type) return;
+    switch (data?.type) {
+      // 页面加载完成
+      // 登录成功
+      case 'runAfterFirstMounted':
+      case 'loginSuccess':
+        jumpProgressEnd();
+        setTimeout(() => {
+          setJumpLoading(false);
+        }, 100);
+        break;
+      case 'loginError':
+        message.warning('登录失败，请联系管理人员');
+        handError();
+        break;
+      case '无法连接':
+        message.warning('该站点无法连接，请联系管理人员');
+        setTimeout(() => {
+          handError();
+        }, 100);
+        break;
+
+      default:
+        break;
+    }
+  };
+  const iframeItem = useMemo(() => {
+    if (!linkUrl) return null;
+    return (
+      <>
+        <div
+          className={classNames(
+            styles.iframeBox,
+            !jumpLoading ? styles.scaleInCenter : styles.hide,
+            'animate__animated',
+          )}
+        >
+          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
+        </div>
+      </>
+    );
+  }, [linkUrl, jumpLoading]);
+  useEffect(() => {
+    const tk = Cookies.get('token') || props.global.token;
+    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
+    let client = sessionStorage.getItem('client') || props?.global?.client || null;
+    client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
+    const generateType = props.global?.get?.('generateType') || null;
+    if (!isLogin) {
+      history.push(`/user/login?client=${client}${generateType || ''}`, { reload: true });
+      clear();
+      props.logout();
+    }
+  }, [props]);
+
+  useEffect(() => {
+    getInfo();
+  }, []);
+  useEffect(() => {
+    // const handleToggleIndustry = event => {
+    //   setJumpLoading(false);
+    //   jumpProgressEnd();
+    //   window.jumpLoadingProgress = 0;
+    //   let url = '';
+    //   if (window.clientInfo?.url && window.clientInfo.subType === '内链') {
+    //     url = searchUrl(window.clientInfo.url);
+    //     window.clientInfo = null;
+    //   }
+    //   props.history.push(`/?client=${clientRef.current || props.global.client}`);
+    //   props.updateCurrentIndex && props.updateCurrentIndex(0);
+    //   defaultApp(url);
+    // };
+    const handleError = () => {
+      setJumpLoading(false);
+      jumpProgressEnd();
+    };
+
+    // loginAction.events.on('loginSuccess', handleToggleIndustry);
+    loginAction.events.on('loginError', handleError);
+
+    return () => {
+      // loginAction && loginAction.events && loginAction.events.removeListener('loginSuccess', handleToggleIndustry);
+      loginAction && loginAction.events && loginAction.events.removeListener('loginError', handleError);
+    };
+  }, [loginAction.events, props]);
+  return (
+    <div className={styles.integrationYulin}>
+      {jumpLoading ? (
+        <div className={styles.integrationJumpLoad} key="jumpLoading">
+          <div style={{ width: '285px' }}>
+            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
+          </div>
+        </div>
+      ) : null}
+
+      <div className={classNames(styles.home_page, styles.scaleInCenter, 'animate__animated', 'duration-500ms')}>
+        <div className={styles.integrationYulin_title}>
+          <div className={styles.integrationYulin_title_text}>
+            <span>{integratedConfig?.title || '智慧水务综合监控平台'} </span>
+          </div>
+        </div>
+        {infoData['榆阳区'] ? (
+          <div className={classNames(styles.tip1)}>
+            <div
+              onClick={() => onLink({ key: '榆林市水利局' }, loginAction)}
+              style={{ cursor: 'pointer' }}
+              className={classNames(styles.tip_title)}
+            >
+              {infoData['榆阳区'].title}
+            </div>
+            <div className={classNames(styles.tip_box)}>
+              <img src={infoData['榆阳区'].img} alt="" />
+              <div className={classNames(styles.tip_content)}>{infoData['榆阳区'].content}</div>
+            </div>
+          </div>
+        ) : null}
+        {tipList.map(item => (
+          <div
+            key={item.key}
+            style={{ left: `${item.x}px`, top: `${item.y}px` }}
+            onClick={() => onLink(item, loginAction)}
+            className={classNames(styles.tip_icon, infoData[item.key]?.url ? styles.animate__m__bounceIn : '')}
+          >
+            <img src={item.icon} alt={item.key} />
+          </div>
+        ))}
+        <div className={styles.home_bottom}>
+          <img src={imgMap['节水优先']} alt="节水优先" />
+        </div>
+      </div>
+      <div
+        className={classNames(styles.iframeBack, 'animate__animated', 'animate__fadeIn')}
+        onClick={() => props.logout()}
+      >
+        <div className={styles.iframeBackLeft}>
+          <img src={arrowLeftImg} alt="退出" />
+        </div>
+        <div className={styles.iframeBackIcon}>
+          <img src={backImg} alt="退出" />
+          退出
+        </div>
+      </div>
+      {linkUrl ? (
+        <div
+          className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
+          onClick={() => setLinkUrl('')}
+        >
+          <div className={styles.iframeExitLeft}>
+            <img src={arrowLeftImg} alt="返回" />
+          </div>
+          <div className={styles.iframeExitIcon}>
+            <img src={backImg} alt="返回" />
+            返回
+          </div>
+        </div>
+      ) : null}
+      {iframeItem}
+    </div>
+  );
+};
+const mapStateToProps = state => ({
+  global: state.getIn(['global', 'globalConfig']),
+  instance: state.getIn(['global', 'instance']),
+  integratedConfig: state.getIn(['global', 'integratedConfig']),
+});
+const mapDispatchToProps = dispatch => ({
+  logout() {
+    dispatch(actionCreators.logout());
+  },
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+  updateIntegratedConfig(data) {
+    dispatch(actionCreators.updateIntegratedConfig(data));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(IntegrationYulin);

src/pages/bootpage/template/project/yulin/index.less

+@imgSrc: '@/assets/images/integration/xinyuan/';
+@yulinImgSrc: '@/assets/images/integration/yulin/';
+
+.integrationYulin {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: rgb(15, 51, 93);
+
+    .hide {
+        visibility: hidden;
+    }
+
+    .iframeExitIcon {
+        position: absolute;
+        top: 0;
+        left: -45px;
+        display: flex;
+        height: 44px;
+        width: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 0 7px 7px 0;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 12px;
+        transition: all 0.2s;
+        padding: 3px 0;
+
+        img {
+            width: 17px;
+            height: 12px;
+        }
+    }
+
+    .iframeExit {
+        width: 44px;
+        height: 44px;
+        position: absolute;
+        top: 4px;
+        left: 0;
+        color: #FFF;
+        cursor: pointer;
+        user-select: none;
+        position: absolute;
+        z-index: 110;
+
+
+    }
+
+    .iframeExitLeft {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 14px;
+        height: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 0 7px 7px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        img {
+            width: 6px;
+            height: 11px;
+        }
+    }
+
+    .iframeExit:hover {
+        .iframeExitIcon {
+            left: 0;
+        }
+
+        .iframeExitLeft {
+            left: -15px;
+        }
+    }
+
+    .integrationJumpLoad {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        top: 0;
+        left: 0;
+        z-index: 1080;
+        padding-bottom: 50px;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .iframeBackIcon {
+        position: absolute;
+        top: 0;
+        right: -45px;
+        display: flex;
+        height: 44px;
+        width: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 7px 0px 0px 7px;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 12px;
+        transition: all 0.2s;
+        padding: 3px 0;
+
+        img {
+            width: 17px;
+            height: 12px;
+        }
+    }
+
+
+    .iframeBack:hover {
+        .iframeBackIcon {
+            right: 0;
+        }
+
+        .iframeBackLeft {
+            right: -15px;
+        }
+    }
+
+    .iframeBackLeft {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 14px;
+        height: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 7px 0 0 7px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        img {
+            width: 6px;
+            height: 11px;
+        }
+    }
+
+    .iframeBack {
+        width: 44px;
+        height: 44px;
+        position: absolute;
+        top: 20px;
+        right: 0;
+        color: #FFF;
+        cursor: pointer;
+        user-select: none;
+        position: absolute;
+        z-index: 110;
+
+
+    }
+
+    .integrationYulin_title {
+        display: flex;
+        // align-items: center;
+        justify-content: center;
+        padding-top: 15px;
+        height: 140px;
+        width: 1754px;
+        margin: 0 auto;
+        background: url('@{yulinImgSrc}/标题背景.png') center center no-repeat;
+        background-size: 100% 100%;
+        padding-left: 30px;
+
+
+        &_text {
+            flex: none;
+            color: #fff;
+
+            span {
+                font-family: Alimama ShuHeiTi;
+                line-height: 1;
+                color: #fff;
+                font-size: 34px;
+                letter-spacing: 2px;
+                background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 80%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                font-weight: bolder;
+            }
+        }
+
+
+    }
+
+    .home_page {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        background: url('@{yulinImgSrc}/背景.jpg') center center no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .home_bottom {
+        width: 849px;
+        height: 57px;
+        position: absolute;
+        left: 50%;
+        bottom: 24px;
+        transform: translateX(-50%);
+
+        img {
+            width: 100%;
+        }
+
+
+    }
+
+
+    .home_page {
+        .tip1 {
+            position: absolute;
+            left: 206px;
+            top: 179px;
+            width: 863px;
+            height: 273px;
+            background: url('@{yulinImgSrc}/tip1.png') center center no-repeat;
+            background-size: 100% 100%;
+            color: #fff;
+            padding-top: 15px;
+
+            .tip_title {
+                font-weight: bold;
+                font-size: 18px;
+                line-height: 1;
+                background: url('@{yulinImgSrc}/icon.png') 36px center no-repeat;
+                background-size: 21px 22px;
+                padding-left: 75px;
+            }
+
+            .tip_box {
+                padding: 8px 35px 0;
+                display: flex;
+            }
+
+            img {
+                width: 226px;
+                height: 188px;
+                border-radius: 4px;
+                margin-top: 10px;
+            }
+
+            .tip_content {
+                width: 208px;
+                font-weight: 400;
+                font-size: 14px;
+                height: 195px;
+                overflow-y: auto;
+                margin-left: 10px;
+            }
+        }
+
+        .tip_icon {
+            position: absolute;
+        }
+
+    }
+
+    .page1 {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .backBtn {
+        z-index: 10;
+        position: absolute;
+        left: 25px;
+        top: 15px;
+        padding-left: 36px;
+        height: 28px;
+        background: url('@{imgSrc}/返回.png') left center no-repeat;
+        background-size: 28px 28px;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 28px;
+        color: #FFFFFF;
+    }
+}
+.iframeBox{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+@-webkit-keyframes scale-in-center {
+    0% {
+        -webkit-transform: scaleY(0);
+        transform: scaleY(0);
+        opacity: 1;
+    }
+
+    100% {
+        -webkit-transform: scaleY(1);
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
+@keyframes scale-in-center {
+    0% {
+        -webkit-transform: scaleY(0);
+        transform: scaleY(0);
+        opacity: 1;
+    }
+
+    100% {
+        -webkit-transform: scaleY(1);
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
+.scaleInCenter {
+    visibility: visible;
+    -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes bounceIn {
+    0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    15% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    20% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    25% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+
+    33% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    38% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    50% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+// @keyframes bounceIn {
+//     0% {
+//         opacity: 0;
+//         transform: scale3d(0.5, 0.5, 0.5);
+//     }
+
+
+//     30% {
+//         transform: scale3d(1.04, 1.04, 1.04);
+//     }
+
+//     60% {
+//         opacity: 1;
+//         transform: scale3d(0.96, 0.96, 0.96);
+//     }
+
+//     100% {
+//         opacity: 1;
+//         transform: scale3d(1, 1, 1);
+//     }
+// }
+
+.animate__m__bounceIn {
+    cursor: pointer;
+    -webkit-animation: bounceIn 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
+    animation: bounceIn 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
+}
+
+@keyframes scale-in-center {
+    0% {
+        -webkit-transform: scaleY(0);
+        transform: scaleY(0);
+        opacity: 1;
+    }
+
+    100% {
+        -webkit-transform: scaleY(1);
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
+.scaleInCenter {
+    visibility: visible;
+    -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
\ No newline at end of file