江西登录页面

package.json

@@ -166,7 +166,8 @@
         "reselect": "4.0.0",
         "sanitize.css": "8.0.0",
         "sha1": "^1.1.1",
-        "styled-components": "4.2.0"
+        "styled-components": "4.2.0",
+        "swiper": "6.8.4"
     },
     "devDependencies": {
         "@babel/cli": "7.4.3",

src/pages/user/login/index.js

 /*
  * @Author: 634665781 634665781@qq.com
  * @Date: 2022-07-08 14:28:01
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-08-22 11:36:58
+ * @LastEditors: 634665781 634665781@qq.com
+ * @LastEditTime: 2023-08-23 17:56:41
  * @FilePath: \CivWeb\src\pages\user\login\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -33,6 +33,7 @@ import DazuLogin from './template/project/dazu';
 import WeixinLogin from './template/project/weixin';
 import PanoramaLogin from './template/panorama';
 import JiangXi from './template/project/jiangxi';
+import JiangXiNew from './template/project/jiangxiNew';
 import Queshan from './template/project/queshan';
 import Queshansl from './template/project/queshansl';
 import PiZhouLogin from './template/project/pizhou';
@@ -64,6 +65,7 @@ const LoginTemplate = {
   '项目 - 威信.html': WeixinLogin,
   '全景图.html': PanoramaLogin,
   '项目 - 江西.html': JiangXi,
+  '项目 - 江西轮播.html': JiangXiNew,
   '项目 - 长水机场.html': ChangShuiJiChang,
   '项目 - 确山.html': Queshan,
   '项目 - 确山水利.html': Queshansl,

src/pages/user/login/template/project/jiangxiNew/Account.js

+import { Checkbox } from 'antd';
+import React, { useRef } from 'react';
+import { useIntl } from '@wisdom-utils/components';
+import LoginForm from './LoginForm';
+import LoginMessage from '../../../js/loginMessage';
+/* eslint-disable */
+const { UserName, Password, Submit } = LoginForm;
+const useAccount = props => {
+  const formRef = useRef(null);
+  return (
+    <LoginForm onSubmit={props.onSubmit} welcome={props.welcome} ref={formRef} form={props.form}>
+      {props.status === 'error' && props.type === 'account' && !props.submitting && (
+        <LoginMessage
+          content={useIntl().formatMessage({
+            id: 'pages.login.accountLogin.errorMessage',
+          })}
+        />
+      )}
+      <UserName
+        name="userName"
+        placeholder={useIntl().formatMessage({
+          id: 'pages.login.username.placeholder',
+        })}
+        rules={[
+          {
+            required: true,
+            message: useIntl().formatMessage({
+              id: 'pages.login.username.required',
+            }),
+          },
+        ]}
+      />
+      <Password
+        name="password"
+        placeholder={useIntl().formatMessage({
+          id: 'pages.login.password.placeholder',
+        })}
+        rules={[
+          {
+            required: true,
+            message: useIntl().formatMessage({
+              id: 'pages.login.password.required',
+            }),
+          },
+        ]}
+      />
+      <div>
+        <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+          {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
+        </Checkbox>
+      </div>
+      <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
+    </LoginForm>
+  );
+};
+
+export default useAccount;

src/pages/user/login/template/project/jiangxiNew/LoginForm.js

+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Form } from 'antd';
+import classNames from 'classnames';
+import { useIntl } from '@wisdom-utils/components';
+import styles from '../../../components/Login/index.less';
+import LoginContext from '../../../components/Login/LoginContext';
+import LoginItem from '../../../components/Login/LoginItem';
+import LoginSubmit from '../../../components/Login/LoginSubmit';
+const Login = (props, ref) => {
+  const intl = useIntl();
+  const { className } = props;
+  const otherChildren = [];
+  React.Children.forEach(props.children, child => {
+    if (!child) {
+      return;
+    }
+    otherChildren.push(child);
+  });
+  return (
+    <LoginContext.Provider value={{}}>
+      <div className={classNames(className, styles.login)}>
+        {props.welcome === void 0 ? (
+          <div className={styles.desc}>{intl.formatMessage({ id: 'pages.login.welcome' })}</div>
+        ) : (
+          props.welcome
+        )}
+        <Form
+          form={props.form}
+          onFinish={values => {
+            if (props.onSubmit) {
+              props.onSubmit(values);
+            }
+          }}
+        >
+          {props.children}
+        </Form>
+      </div>
+    </LoginContext.Provider>
+  );
+};
+
+Login.Submit = LoginSubmit;
+
+Login.UserName = LoginItem.UserName;
+Login.Password = LoginItem.Password;
+Login.NewYearPassword = LoginItem.NewYearPassword;
+Login.Mobile = LoginItem.Mobile;
+Login.Captcha = LoginItem.Captcha;
+Login.NewYearMobile = LoginItem.NewYearMobile;
+Login.NewYearCaptcha = LoginItem.NewYearCaptcha;
+
+export default Login;

src/pages/user/login/template/project/jiangxiNew/index.js

+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal, Popover, Form, Tooltip } from 'antd';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { connect } from 'react-redux';
+import { useHistory, withRouter } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import moment from 'moment';
+import classnames from 'classnames';
+import QRCode from 'qrcode.react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay } from 'swiper/core';
+import defaultSetting from '../../../../../../../config/defaultSetting';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import FormLogin from './Account';
+import { defaultApp } from '../../../../../../micro';
+import logoPng from './images/8.png';
+import qrcodePng from './images/1.png';
+import welcomePng from './images/4.png';
+// import SwiperCore, { Autoplay, Navigation } from 'swiper/core';
+
+// SwiperCore.use([Autoplay, Navigation]);
+import 湖口润泉水源地 from './images/江西水投子公司图片/湖口润泉水源地.png';
+import 会昌润泉石壁坑水库 from './images/江西水投子公司图片/会昌润泉石壁坑水库.png';
+import 景德镇水务公司 from './images/江西水投子公司图片/景德镇水务公司.png';
+import 景德镇水务新洋湖水厂 from './images/江西水投子公司图片/景德镇水务新洋湖水厂.png';
+import 乐平润泉水务公司 from './images/江西水投子公司图片/乐平润泉水务公司.png';
+import 南城润泉麻源水库1 from './images/江西水投子公司图片/南城润泉麻源水库1.png';
+import 南城润泉麻源水库2 from './images/江西水投子公司图片/南城润泉麻源水库2.png';
+import 南城润泉麻源水库3 from './images/江西水投子公司图片/南城润泉麻源水库3.png';
+import 南康润泉龙华水厂 from './images/江西水投子公司图片/南康润泉龙华水厂.png';
+import 南康润泉龙华水厂2 from './images/江西水投子公司图片/南康润泉龙华水厂2.png';
+import 上高润泉第二水厂 from './images/江西水投子公司图片/上高润泉第二水厂.png';
+import 上高润泉第二水厂平流沉淀池 from './images/江西水投子公司图片/上高润泉第二水厂平流沉淀池.png';
+import 上高润泉水务公司 from './images/江西水投子公司图片/上高润泉水务公司.png';
+import 上高润泉水务公司2 from './images/江西水投子公司图片/上高润泉水务公司2.png';
+import 寻乌润泉大路水厂 from './images/江西水投子公司图片/寻乌润泉大路水厂.png';
+import 永修润泉湖东水厂 from './images/江西水投子公司图片/永修润泉湖东水厂.png';
+import 'swiper/swiper-bundle.css';
+SwiperCore.use([Autoplay]);
+const PopOvercontent = () => {
+  const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+  if (qrcodes) {
+    return <QRCode value={qrcodes} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+
+const Login = forwardRef((props, _ref) => {
+  const [form] = Form.useForm();
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const timeRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  const [num, setNum] = useState(0);
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [type, setType] = useState('Account');
+  const [visible, setVisible] = useState(false);
+  const history = useHistory();
+  const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+  const [dateObj, setDateObj] = useState({});
+  const [loginType, setLoginType] = useState('OA账号');
+  const [img, setImg] = useState([
+    '湖口润泉水源地',
+    '会昌润泉石壁坑水库',
+    '景德镇水务公司',
+    '景德镇水务新洋湖水厂',
+    '乐平润泉水务公司',
+    '南城润泉麻源水库1',
+    '南城润泉麻源水库2',
+    '南城润泉麻源水库3',
+    '南康润泉龙华水厂',
+    '南康润泉龙华水厂2',
+    '上高润泉第二水厂',
+    '上高润泉第二水厂平流沉淀池',
+    '上高润泉水务公司',
+    '上高润泉水务公司2',
+    '寻乌润泉大路水厂',
+    '永修润泉湖东水厂',
+  ]);
+  const [imgObj, setimgObj] = useState({
+    湖口润泉水源地,
+    会昌润泉石壁坑水库,
+    景德镇水务公司,
+    景德镇水务新洋湖水厂,
+    乐平润泉水务公司,
+    南城润泉麻源水库1,
+    南城润泉麻源水库2,
+    南城润泉麻源水库3,
+    南康润泉龙华水厂,
+    南康润泉龙华水厂2,
+    上高润泉第二水厂,
+    上高润泉第二水厂平流沉淀池,
+    上高润泉水务公司,
+    上高润泉水务公司2,
+    寻乌润泉大路水厂,
+    永修润泉湖东水厂,
+  });
+  const handleSubmit = values => {
+    /* eslint-disable */
+    action &&
+      (type === 'Account'
+        ? loginType === 'OA账号'
+          ? action.loginHandlerJiangXi(values.userName, values.password, null, autoLogin, sliVerify)
+          : action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
+        : type === 'Mobile'
+        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
+        : null);
+
+    setSubmitting(true);
+    props.updateCurrentIndex && props.updateCurrentIndex(-1);
+  };
+
+  useEffect(() => {
+    action &&
+      action.events.on('loginSuccess', event => {
+        setSubmitting(false);
+        props.updateCurrentIndex && props.updateCurrentIndex(0);
+        props.history.push(`/?client=${props.global.client}`);
+        // window.share.event.emit('triggerMicro', props.global);
+        // initMicroApps();
+        defaultApp();
+      });
+    action &&
+      action.events.on('loginError', event => {
+        setVisible(false);
+        setSubmitting(false);
+      });
+    action &&
+      action.events.on('loginVisible', status => {
+        setVisible(status);
+      });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+    };
+  }, [props.loginMode]);
+
+  useEffect(() => {
+    setSubmitting(false);
+  }, [visible]);
+
+  const renderPlatform = () => {
+    const template = props.global.loginTemplate;
+    const params = {
+      form: form,
+      fromRef: formRef,
+      type,
+      setType,
+      status,
+      submitting,
+      autoLogin,
+      setAutoLogin,
+      action,
+      onSubmit: handleSubmit,
+      loginMode: props.loginMode,
+      updateLoginMode: props.updateLoginMode,
+      welcome: null,
+    };
+    // return <Account {...params} />;
+    return <FormLogin {...params} />;
+  };
+  /* eslint-disable */
+
+  const handleWeek = () => {
+    const weekOfDay = Number(moment().format('E'));
+    let weekDayName = '';
+    switch (weekOfDay) {
+      case 1:
+        weekDayName = '周一';
+        break;
+      case 2:
+        weekDayName = '周二';
+        break;
+      case 3:
+        weekDayName = '周三';
+        break;
+      case 4:
+        weekDayName = '周四';
+        break;
+      case 5:
+        weekDayName = '周五';
+        break;
+      case 6:
+        weekDayName = '周六';
+        break;
+      case 0:
+        weekDayName = '周日';
+        break;
+      default:
+        weekDayName = '';
+    }
+    return weekDayName;
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateObj({
+        curTime: moment().format('HH:mm:ss'),
+        week: handleWeek(),
+        date: moment().format('YYYY/MM/DD'),
+      });
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+   //   clearInterval(timer1)
+    };
+  }, []);
+  useEffect(()=>{
+    if( timeRef.current)clearTimeout(timeRef.current)
+ timeRef.current = setTimeout(() => {
+      if(num<15){
+        setNum(num+1)
+      }else{
+        setNum(0)
+      }
+     
+    }, 5000);
+  },[num])
+  const toLink = () => {
+    window.open('http://gis.panda-water.cn/jiangxi/index.html');
+  };
+  const tabChange = key => {
+    form.resetFields();
+    setLoginType(key);
+  };
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+      <div style={{ background: `url(${imgObj[img[num]]}) no-repeat`}} className={classnames(styles.lvchenglogin, 'lvcheng')}>
+        <div className={styles['inner-wrapper']}>
+          <div className={styles['title-image-box']}>
+            <img
+              src={
+                props.global &&
+                props.global.transformDevAssetsBaseURL &&
+                props.global.transformDevAssetsBaseURL(props.global.logo)
+              }
+              alt=""
+              className={styles['title-image']}
+            />
+            <span className={styles['title-name']}>{props.global.title}</span>
+          </div>
+          <div className={styles['inner-center']}>
+            <Tooltip title="打开网站下载">
+              <div className={styles.linkBox} onClick={toLink}>
+                <img style={{ width: '14px', marginRight: '4px' }} src={require('./images/下载.png')} alt="" />
+                点击下载APP
+              </div>
+            </Tooltip>
+
+            <div className={styles['welcome-title']}>
+              <div
+                className={classnames(styles.tabItem, { [styles.tabActive]: loginType === 'OA账号' })}
+                onClick={() => tabChange('OA账号')}
+              >
+                OA账号
+              </div>
+              <div
+                className={classnames(styles.tabItem, { [styles.tabActive]: loginType === '平台账号' })}
+                onClick={() => tabChange('平台账号')}
+              >
+                平台账号
+              </div>
+            </div>
+            <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+              {renderPlatform()}
+            </div>
+            {/* <Popover content={PopOvercontent} title="扫码下载APP" overlayClassName={'popover-style'}>
+              <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
+            </Popover> */}
+          </div>
+        </div>
+        <div className={styles['login-header']}>
+          {/* <div className={styles['left-title']}>
+                        <img src={logoPng} alt='logo' className={styles['logo-png']}/>
+                        <div className={styles['cn-title']}>南宁市二次供水管理平台</div>
+                    </div> */}
+          <div className={styles['right-timebox']}>
+            <div className={styles['curr-time']}>{dateObj.curTime}</div>
+            <div className={styles['curr-week-date']}>
+              <div className={styles['curr-week']}>{dateObj.week}</div>
+              <div className={styles['curr-date']}>{dateObj.date}</div>
+            </div>
+          </div>
+        </div>
+
+        <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
+          <div ref={sliVerify} />
+        </Modal>
+        <div className={styles['lbt']}>
+          <div onClick={()=>{
+            if(num>0){
+              setNum(num-1)
+            }else{
+              setNum(15)
+            }
+          }}> <img style={{ width: '30px', cursor: 'pointer'}} src={require('./images/左.png')} alt="" /></div>
+          <div className={styles['divImgAll']}>
+          <Swiper
+          autoplay={{delay:5000}}
+          loop
+      spaceBetween={0}
+      slidesPerView={8}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={(swiper) => console.log(swiper)}
+      style={{ width: '695px', height: '100%' }}
+    >
+    {img.map((v,i)=>{
+              return  <SwiperSlide><div  onClick={()=>{
+                setNum(i)
+              }} className={styles['divT']} style={{cursor: 'pointer',position: 'relative'}}><img title={v} style={{border:i==num? '2px solid red':'0px',width:i==num? '60px':'60px',height:i==num? '60px':'60px'}} src={require(`./images/江西水投子公司图片/${v}.png`)} alt="" />
+              <div style={{  position: 'absolute', overflow: 'hidden',
+
+whiteSpace: 'nowrap',
+color:'white',
+textOverflow: 'ellipsis',
+top: '20px',
+width: '67px',
+fontSize: '12px',
+
+
+}}>
+                  {v}
+
+              </div>
+               
+              </div></SwiperSlide>
+             })}
+    </Swiper>
+
+          
+          </div>
+          <div onClick={()=>{
+            if(num<15){
+              setNum(num+1)
+            }else{
+              setNum(0)
+            }
+          }}> <img style={{ width: '30px', cursor: 'pointer' }} src={require('./images/右.png')} alt="" /></div>
+        </div>
+      </div>
+    </HelmetProvider>
+  );
+});
+
+const mapStateToProps = state => ({
+  global: state.getIn(['global', 'globalConfig']),
+  loginMode: state.getIn(['global', 'loginMode']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+  createContext(data) {
+    dispatch(actionCreators.createContext(data));
+  },
+  updateLoginMode(mode) {
+    dispatch(actionCreators.changeLoginMode(mode));
+  },
+  updateCurrentIndex(index) {
+    dispatch(actionCreators.updateCurrentIndex(index));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withRouter(Login));

src/pages/user/login/template/project/jiangxiNew/index.less

+@font-face {
+    font-family: PingFang SC;
+    src: url('@/assets/fonts/PingFang.ttf');
+}
+
+.lvchenglogin {
+    width: 100%;
+    height: 100%;
+   
+    background-size: 100% 100%;
+    background-clip: border-box;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+.lbt{
+    width: 100vw;
+    height: 82px;
+  background-color: rgba(0,0,0,0.4);
+   border: 1px solid #000000;
+   /// opacity: 0.6;
+    position: absolute;
+    /* top: 10px; */
+    bottom: 125px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 70px;
+}
+.divImgAll{
+   // display: flex;
+   .divT{
+      //  width: 60px;
+  //  height: 60px;
+    background-color: white;
+    margin: 0px 30px;
+     cursor: 'pointer'
+    }
+}
+    .inner-bg {
+        width: 100%;
+        // height: 100%;
+
+
+        &>div {
+            width: 70%;
+            margin: 0 auto;
+        }
+    }
+
+    .inner-wrapper {
+        position: relative;
+        width: 100%;
+        // height: 380px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        margin-top: -100px;
+        // margin-bottom: 100px;
+    }
+
+    .title-image-box {
+        display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 160px;
+    font-size: 44px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 91px;
+   // text-shadow: 0px 1px 5px rgba(6,27,54,0.8);
+    }
+
+    .title-image {
+        width: 75px;
+        margin-right: 20px;
+    }
+
+    .title-name {
+        font-size: 36px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        text-shadow: 0px 1px 5px rgba(6, 27, 54, 0.8);
+        letter-spacing: 2px;
+        font-family: Alibaba PuHuiTi;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 91px;
+    text-shadow: 0px 1px 5px rgba(6,27,54,0.8);
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+
+    .inner-center {
+        position: relative;
+        width: 600px;
+        // height: 316px;
+        // background: rgba(255,255,255, 0.3);
+        // border: 1px solid #FFFFFF;
+        // box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 15px 15px 0px 15px;
+        box-shadow: 0px 6px 18px 0px rgb(25 61 79 / 35%);
+        padding: 20px 0;
+        top: -57px;
+        height: 360px;
+        padding-top: 10px;
+    }
+
+    .welcome-title {
+        width: 100%;
+        height: 50px;
+        // background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
+        border-radius: 10px 10px 0 0;
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 25px;
+
+        .tabItem {
+            padding: 5px 15px;
+            cursor: pointer;
+            text-align: center;
+            font-size: 20px;
+            font-weight: bold;
+            color: white;
+            margin-left: 15px;
+        }
+
+        .tabActive {
+            border-bottom: 3px solid #1E77D3;
+            color: #080A10;
+        }
+    }
+
+    .welcome-img {
+        width: 480px;
+    }
+
+    .formgroup2 {
+        display: flex;
+        align-items: center;
+        display: flex;
+        margin: 0px 5.5%;
+        margin-bottom: 10%;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+
+    .APPcodeBox {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .APPCtext {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        line-height: 30px;
+        opacity: 0.75;
+    }
+
+    .login-header {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        height: 90px;
+        padding: 0 70px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        box-shadow: 0px 1px 3px 0px rgba(235, 235, 235, 0.55);
+
+        .left-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .cn-title {
+                font-size: 28px;
+                font-family: PingFang SC;
+                font-weight: 400;
+                color: #FFFFFF;
+            }
+
+            .logo-png {
+                width: 54px;
+                margin-right: 20px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 36px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: black;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: black;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: black;
+                }
+            }
+        }
+    }
+
+    .copyright {
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        margin: 0 auto;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #F1F6FD;
+        text-align: center;
+    }
+
+    .qrcode-box {
+        position: absolute;
+        bottom: 0;
+        right: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+    .linkBox {
+        position: absolute;
+        flex-direction: column;
+        align-items: center;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 100px;
+        color: #108CEE;
+        font-size: 15px;
+        cursor: pointer;
+        top: 307px;
+
+        img {
+            width: 35px;
+            margin-bottom: 5px;
+        }
+    }
+
+}
+
+
+:global {
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .@{ant-prefix}-popover-title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+
+@keyframes waving {
+    from {
+        top: 0;
+    }
+
+    to {
+        top: 10px;
+    }
+}
+
+@keyframes waving2 {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: -9999px;
+    }
+}
\ No newline at end of file