fix: 确山登录页修改

fcdf862c · 周宏民 · d06e4b62 · fcdf862c · fcdf862c · fcdf862c
Commit fcdf862c authored Sep 18, 2023 by 周宏民
6 changed files
--- a/src/pages/user/login/template/project/queshan/images/12.png
+++ b/src/pages/user/login/template/project/queshan/images/12.png
--- a/src/pages/user/login/template/project/queshan/images/3.png
+++ b/src/pages/user/login/template/project/queshan/images/3.png
--- a/src/pages/user/login/template/project/queshan/images/6.png
+++ b/src/pages/user/login/template/project/queshan/images/6.png
--- a/src/pages/user/login/template/project/queshan/images/5.png
+++ b/src/pages/user/login/template/project/queshan/images/5.png
--- a/src/pages/user/login/template/project/queshan/index.js
+++ b/src/pages/user/login/template/project/queshan/index.js
@@ -8,12 +8,13 @@ import { actionCreators } from '@/containers/App/store';
 import QRCode from 'qrcode.react';
 import classnames from 'classnames';
 import moment from 'moment';
+import QueueAnim from 'rc-queue-anim';
 import defaultSetting from '../../../../../../../config/defaultSetting';
 import LoginAction from '../../../login';
 import styles from './index.less';
 import Account from '../../../js/useAccount';
 import { defaultApp } from '../../../../../../micro';
-import logoPng from './images/12.png';
+import logoPng from './images/qeushan_12.png';
 import qrcodePng from './images/10.png';

 const PopOvercontent = () => {
@@ -40,175 +41,178 @@ const Login = forwardRef((props, _ref) => {

  const handleSubmit = values => {
    /* eslint-disable */
-        action &&
-            (type === 'Account'
-                ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
-                : type === 'Mobile'
-                    ? action.phoneLoginFormHandler(values.mobile, values.captcha)
-                    : null);
+    action &&
+      (type === 'Account'
+        ? 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]);
+    setSubmitting(true);
+    props.updateCurrentIndex && props.updateCurrentIndex(-1);
+  };

-    useEffect(() => {
+  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);
-    }, [visible]);
+      });
+    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 = {
-            fromRef: formRef,
-            type,
-            setType,
-            status,
-            submitting,
-            autoLogin,
-            setAutoLogin,
-            action,
-            onSubmit: handleSubmit,
-            loginMode: props.loginMode,
-            updateLoginMode: props.updateLoginMode,
-            welcome: null,
-        };
-        return <Account {...params} />;
+  const renderPlatform = () => {
+    const template = props.global.loginTemplate;
+    const params = {
+      fromRef: formRef,
+      type,
+      setType,
+      status,
+      submitting,
+      autoLogin,
+      setAutoLogin,
+      action,
+      onSubmit: handleSubmit,
+      loginMode: props.loginMode,
+      updateLoginMode: props.updateLoginMode,
+      welcome: null,
    };
-    /* eslint-disable */
+    return <Account {...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
+  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);
-          };
-    }, [])
-
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateObj({
+        curTime: moment().format('HH:mm:ss'),
+        week: handleWeek(),
+        date: moment().format('YYYY/MM/DD'),
+      });
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);

-    return (
-        <HelmetProvider>
-            <Helmet>
-                <title>{props.global.title || defaultSetting.title}</title>
-                <meta name="description" content={props.global.title || defaultSetting.title} />
-            </Helmet>
-            <div className={classnames(styles.queshanlogin, "queshan")}>
-                <div className={styles['inner-wrapper']}>
-                    <div className={styles['inner-center']}>
-                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
-                            {renderPlatform()}
-                        </div>
-                    </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>
-                <div className={styles['copyright']}>
-                    <div className={styles['copyrightName']}>Copyright © 2023 熊猫智慧水务 All Rights Reserved.</div>
-                    <div className={styles['line-tree']}></div> 
-                    <Popover content={PopOvercontent} title="扫码下载APP" trigger="click" overlayClassName={'popover-style'}>
-                        <img src={qrcodePng} alt="APP" className={styles['qrcode-box']}/>
-                    </Popover>
-                </div>
-                <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
-                    <div ref={sliVerify} />
-                </Modal>
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+      <div className={classnames(styles.queshanlogin, 'queshan')}>
+        <QueueAnim type="scale" duration={1000}>
+          <div className={styles['inner-wrapper']} key={'innerwrapper'}>
+            <div className={styles['inner-center']}>
+              <div className={classnames(styles['inner-bg'], styles['login-part'], 'queshanLogin')} ref={loginFormRef}>
+                {renderPlatform()}
+              </div>
+            </div>
+          </div>
+        </QueueAnim>
+        <div className={styles['login-header']}>
+          <QueueAnim type="left" key="logintitle">
+            <div className={styles['left-title']}>
+              <img src={logoPng} alt="logo" className={styles['logo-png']} />
+            </div>
+          </QueueAnim>
+          <QueueAnim type="right" key="logintime">
+            <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>
-        </HelmetProvider>
-    );
+          </QueueAnim>
+        </div>
+        <div className={styles['copyright']}>
+          <div className={styles['copyrightName']}>Copyright © 2023 熊猫智慧水务 All Rights Reserved.</div>
+          <div className={styles['line-tree']} />
+          <Popover content={PopOvercontent} title="扫码下载APP" trigger="click" overlayClassName={'popover-style'}>
+            <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
+          </Popover>
+        </div>
+        <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
+          <div ref={sliVerify} />
+        </Modal>
+      </div>
+    </HelmetProvider>
+  );
 });

 const mapStateToProps = state => ({
-    global: state.getIn(['global', 'globalConfig']),
-    loginMode: state.getIn(['global', 'loginMode']),
+  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));
-    },
+  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,
+  mapStateToProps,
+  mapDispatchToProps,
 )(withRouter(Login));
--- a/src/pages/user/login/template/project/queshan/index.less
+++ b/src/pages/user/login/template/project/queshan/index.less
-
 .queshanlogin {
    width: 100%;
    height: 100%;
-    background: url('./images/5.png') no-repeat;
+    background: url('./images/queshan_bg.png') no-repeat center center;
    background-size: 100% 100%;
    background-clip: border-box;
    position: relative;
@@ -16,8 +15,8 @@
        width: 100%;
        // height: 100%;
        padding-top: 280px;
-    
-    
+
+
        &>div {
            width: 70%;
            margin: 0 auto;
@@ -36,8 +35,8 @@
        // margin-bottom: 100px;
    }

-    .title-image{
-        background: url('./images/3.png') no-repeat;
+    .title-image {
+        background: url('./images/queshan_3.png') no-repeat;
        width: 466px;
        height: 42px;
        background-size: 100% 100%;
@@ -57,20 +56,20 @@
        -webkit-box-shadow: none;
        box-shadow: none;
    }
-    
-    
+
+
    .inner-center {
        position: relative;
        width: 543px;
        height: 615px;
-        background: rgba(255,255,255, 1);
+        background: rgba(255, 255, 255, 1);
        // border: 1px solid #FFFFFF;
        // box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
        border-radius: 10px;
-        background: url(./images/6.png) no-repeat;
+        background: url(./images/queshan_6.png) no-repeat;
    }

-    .welcome-title{
+    .welcome-title {
        width: 100%;
        height: 100px;
        background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
@@ -82,13 +81,13 @@
        margin-bottom: 40px;
    }

-    .welcome-bg{
+    .welcome-bg {
        background: url('./images/4.png') no-repeat;
        width: 358px;
        height: 35px;
        background-size: 100% 100%;
    }
-    
+
    .formgroup2 {
        display: flex;
        align-items: center;
@@ -107,7 +106,7 @@
        cursor: pointer;
        position: relative;
    }
-    
+
    .APPCtext {
        font-size: 14px;
        font-family: Microsoft YaHei;
@@ -117,7 +116,7 @@
        opacity: 0.75;
    }

-    .login-header{
+    .login-header {
        width: 100%;
        position: absolute;
        top: 0;
@@ -127,26 +126,31 @@
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 1px 3px 0px rgba(0, 73, 188, 0.24);
-        .left-title{
+
+        .left-title {
            display: flex;
            justify-content: center;
            align-items: center;
-            .cn-title{
+
+            .cn-title {
                font-size: 28px;
                font-weight: 400;
                color: #FFFFFF;
            }
-            .logo-png{
+
+            .logo-png {
                width: 372px;
                margin-right: 20px;
            }
        }
-        .right-timebox{
+
+        .right-timebox {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
-            .curr-time{
+
+            .curr-time {
                width: 160px;
                font-size: 40px;
                font-family: Microsoft YaHei;
@@ -154,15 +158,18 @@
                color: #FFFFFF;
                text-align: center;
            }
-            .curr-week-date{
+
+            .curr-week-date {
                margin-left: 10px;
-                .curr-week{
+
+                .curr-week {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
-                .curr-date{
+
+                .curr-date {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
@@ -171,7 +178,8 @@
            }
        }
    }
-    .copyright{
+
+    .copyright {
        position: absolute;
        bottom: 50px;
        width: 100%;
@@ -185,32 +193,48 @@
        justify-content: center;
        align-items: center;
    }
-    .qrcode-box{
+
+    .qrcode-box {
        width: 19px;
        height: 19px;
        cursor: pointer;
    }
-    .copyrightName{
+
+    .copyrightName {
        font-size: 14px;
-        color: rgba(105,164,252,1);
+        color: rgba(105, 164, 252, 1);
        font-weight: 500;
    }

-    .line-tree{
+    .line-tree {
        width: 1px;
        height: 14px;
-        background: rgba(105,164,252,1);
+        background: rgba(105, 164, 252, 1);
        margin: 0 10px;
    }

-    
+
 }

-:global{
-    .queshan{
+:global {
+    .queshanLogin {
+
+        input:-internal-autofill-previewed,
+        input:-internal-autofill-selected {
+            -webkit-text-fill-color: #807c7c !important;
+            transition: background-color 5000s ease-out 0.5s;
+        }
+
+        .panda-console-base-input-password-icon.anticon {
+            color: #fff!important;
+        }
+
+    }
+
+    .queshan {
        .@{ant-prefix}-input-affix-wrapper-lg {
            background-color: transparent;
-            
+
        }

        .@{ant-prefix}-input-affix-wrapper {
@@ -218,7 +242,7 @@
            border-bottom: 1px solid #076aca;
        }

-        .@{ant-prefix}-input-affix-wrapper > input.@{ant-prefix}-input {
+        .@{ant-prefix}-input-affix-wrapper>input.@{ant-prefix}-input {
            background: transparent;
            color: #FFFFFF;
            padding-left: 20px;
@@ -229,50 +253,56 @@
            border-bottom: 1px solid #076aca;
        }

-        .@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-focused {
+        .@{ant-prefix}-input-affix-wrapper:focus,
+        .@{ant-prefix}-input-affix-wrapper-focused {
            border: none;
            border-bottom: 1px solid #076aca;
        }

-        .@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-focused {
+        .@{ant-prefix}-input-affix-wrapper:focus,
+        .@{ant-prefix}-input-affix-wrapper-focused {
            box-shadow: none;
        }

-        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper, .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:hover{
+        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper,
+        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:hover {
            background: transparent;
        }

-        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper-focused {
+        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:focus,
+        .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper-focused {
            box-shadow: none;
        }

-        .@{ant-prefix}-checkbox + span {
+        .@{ant-prefix}-checkbox+span {
            color: #FFFFFF;
        }

-        .@{ant-prefix}src-pages-user-login-components-login-index-login .@{ant-prefix}src-pages-user-login-components-login-index-prefixIcon{
+        .@{ant-prefix}src-pages-user-login-components-login-index-login .@{ant-prefix}src-pages-user-login-components-login-index-prefixIcon {
            color: #FFFFFF;
        }

        .@{ant-prefix}src-pages-user-login-components-login-index-login .@{ant-prefix}src-pages-user-login-components-login-index-submit {
            border-radius: 20px;
        }
-        
+
    }
-    .popover-style{
-        .@{ant-prefix}-popover-inner-content{
+
+    .popover-style {
+        .@{ant-prefix}-popover-inner-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }
-        .@{ant-prefix}-popover-title{
+
+        .@{ant-prefix}-popover-title {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
 }
-    
+

 @keyframes waving {
    from {
@@ -292,12 +322,4 @@
    to {
        left: -9999px;
    }
-}
-
-
-
-
-
-
-
-
+}
\ No newline at end of file