feat: 完成临洮登录页

src/pages/user/login/template/panorama/index.js

 import PanoBaseLogin from "./PanoBaseLogin"
 import TieShanLogin from "../project/tieshan"
+import LinTao from '../project/linTao'
 import { useState , useEffect } from "react"
 
 const LoginTemplate = {
     "铁山" : TieShanLogin,
+    "临洮" : LinTao,
     default : PanoBaseLogin
 }
 

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

+import styles from './index.less'
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import LoginAction from '../../../login';
+import Account from '../../../js/useAccount';
+import moment from 'moment';
+import classnames from 'classnames';
+import { Modal, Popover } 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 defaultSetting from '../../../../../../../config/defaultSetting';
+import { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png';
+import logoBg from './images/loginTitle.png'
+import Krpano from '../../../components/Krpano';
+
+const TieShanLogin = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [type, setType] = useState('Account');
+  const [visible, setVisible] = useState(false);
+  const history = useHistory();
+  const [dateObj, setDateObj] = useState({});
+  const { projectName } = props.loginParams
+  const [action, setAction] = useState(
+    () =>
+      new LoginAction(Object.assign({}, props, { history }), setVisible, false),
+  );
+
+  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);
+
+    setSubmitting(true);
+    props.updateCurrentIndex && props.updateCurrentIndex(-1);
+  };
+
+  useEffect(() => {
+    // if (props.loginMode === LOGIN_WAY.WeChart) {
+    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 = {
+      fromRef: formRef,
+      type,
+      setType,
+      status,
+      submitting,
+      autoLogin,
+      setAutoLogin,
+      action,
+      onSubmit: handleSubmit,
+      loginMode: props.loginMode,
+      updateLoginMode: props.updateLoginMode,
+      welcome: null,
+    };
+    return <Account {...params} />;
+  };
+
+  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);
+    };
+  }, [])
+
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+      <div className={styles.lintaoLogin}>
+        <div className={styles['inner-wrapper']}>
+          <div className={styles['flex-wrapper']}>
+            <div className={styles['inner-logoBg']}>
+              <img src={logoBg} />
+            </div>
+            <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+              {renderPlatform()}
+            </div>
+          </div>
+        </div>
+        <div className={styles['login-header-wrapper']}>
+          <div className={styles['login-header']}>
+            <div className={styles['left-title']}>
+              <div>
+                <img src={logo} />
+              </div>
+              <div className={styles['cn-title']}>{props.global.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>
+        <div className={styles['krpano']}>
+          <Krpano projectName={projectName} />
+        </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']),
+});
+
+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(TieShanLogin));
\ No newline at end of file

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

+.lintaoLogin {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  min-height: 7.0rem;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 200;
+
+  .inner-bg {
+      width: 100%;
+      height: 100%;
+
+      &>div {
+          width: 85%;
+          margin: 0 auto;
+      }
+  }
+
+  .inner-bg .title {
+      font-size: 27px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      letter-spacing: 2px;
+
+  }
+
+  .login-part{
+    button[type="submit"] {
+        border-radius: 50px;
+    }
+  }
+
+  .form-control:focus {
+      border-color: #66afe9;
+      outline: 0;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+  }
+
+  .inner-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 620px;
+    // height: 420px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 15px;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+
+    .flex-wrapper{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        .inner-logoBg{
+            background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
+            height: 118px;
+            border-radius: 8px 8px 0px 0px;
+            text-align: center;
+            line-height: 70px;
+            padding: 16px;
+            >img {
+                vertical-align: middle;
+            }
+        }
+    
+        .inner-bg{
+            min-height: 0;
+            height: 100%;
+            padding-top: 45px;
+            padding-bottom: 25px;
+        }
+    }
+
+  }
+
+
+  .inner-center {
+      position: relative;
+      width: 400px;
+      // height: 316px;
+      background: rgba(255, 255, 255, 0.9);
+      border: 1px solid #FFFFFF;
+      box-shadow: 0px 15px 15px 3px rgba(140, 142, 145, 0.52);
+      border-radius: 15px;
+  }
+
+  .welcome-title {
+      width: 100%;
+      height: 68px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: nowrap;
+      background: linear-gradient(#0061E4, #00CEFA);
+      margin-bottom: 24px;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      background-color: rgba(255, 255, 255, .9);
+
+      .welcome-split {
+          height: 30px;
+          width: 1px;
+          background-color: #eee;
+          margin: 0 20px;
+      }
+
+      .welcome-slogan {
+          vertical-align: middle;
+          margin-top: 3px;
+      }
+
+
+  }
+
+  .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-wrapper {
+
+      width: 100%;
+      position: absolute;
+      top: 0;
+      background: linear-gradient(to bottom ,rgba(56,158,239, 1), rgba(56,158,239, 0));
+      height: 100px;
+      z-index: 100;
+
+      .login-header {
+          position: relative;
+          width: 100%;
+          padding: 0 38px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .left-title {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+
+              .cn-title {
+                  font-size: 26px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                  margin-left: 10px;
+              }
+
+              .en-title {
+                  font-size: 12px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                  opacity: 0.65;
+              }
+          }
+
+          .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: #FFFFFF;
+              }
+
+              .curr-week-date {
+                  margin-left: 10px;
+
+                  .curr-week {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #FFFFFF;
+                  }
+
+                  .curr-date {
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #FFFFFF;
+                  }
+              }
+          }
+      }
+
+  }
+
+  .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: -35px;
+      width: 35px;
+      height: 35px;
+      background: #FFFFFF;
+      opacity: 0.8;
+      cursor: pointer;
+  }
+
+  .krpano {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+  }
+}
\ No newline at end of file