广州单点登录页

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
 // const proxyURL = 'https://work.panda-water.cn';
-const proxyURL = 'http://192.168.12.3:8082';
+// const proxyURL = 'http://192.168.12.3:8082';
 // const proxyURL = 'https://panda-water.cn'
-
+const proxyURL = 'http://192.168.12.189:8816/'
 module.exports = {
   assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
   development: {

src/api/service/base.js

@@ -22,44 +22,40 @@ export const API = {
   GET_USER_INFO: 'PandaCore/GCK/Basis/GetUserInfo',
   GET_OA: '/CityInterface/rest/services/OA.svc/getLoginInfo',
   GET_LOGS: '/CityInterface/rest/services/portal.svc/OMMonitor/SaveLoginInfo',
-  GET_CITY:
-    process.env.NODE_ENV !== 'production'
-      ? '/cityjson?ie=utf-8'
-      : 'https://pv.sohu.com',
-  GET_ALL_GROUPS_INFO_FORUSER:
-    '/PandaCore/GCK/CloudPlat/GetAllGroupsInfoForUser',
+  GET_CITY: process.env.NODE_ENV !== 'production' ? '/cityjson?ie=utf-8' : 'https://pv.sohu.com',
+  GET_ALL_GROUPS_INFO_FORUSER: '/PandaCore/GCK/CloudPlat/GetAllGroupsInfoForUser',
   GET_WEATHER: '/CityInterface/rest/services/CountyProduct.svc/GetWeather',
-  SEND_MESSAGE_CODE:
-    'CityInterface/rest/services/portal.svc/SendMessVerificationCode',
+  SEND_MESSAGE_CODE: 'CityInterface/rest/services/portal.svc/SendMessVerificationCode',
   CHANGE_PASSWORD: 'cityinterface/rest/services.svc/changepassword',
-  IOT_CHANGE_PASSWORD:
-    'CityInterface/rest/services/OMS.svc/U_UpdatePasswordQuickGCK',
+  IOT_CHANGE_PASSWORD: 'CityInterface/rest/services/OMS.svc/U_UpdatePasswordQuickGCK',
   FILE_DOWNLOAD: '/cityinterface/rest/services/filedownload.svc/download',
   UPDATE_AVATAR: '/CityInterface/rest/services/OMs.svc/U_EditUser',
-  UPLOAD_FILE_URL:
-    '/cityinterface/rest/services/filedownload.svc/uploadfile/个人信息/{path}/{filename}',
+  UPLOAD_FILE_URL: '/cityinterface/rest/services/filedownload.svc/uploadfile/个人信息/{path}/{filename}',
   AVATAR_FILE_URL: '/cityinterface/rest/services/filedownload.svc/download',
   GET_SENSOR_TYPE: '/PandaCore/GCK/Sensor/GetSensorType', // 获取传感器类型
   GET_SYSTEM_CONFIGURATION: '/PandaCore/GCK/Common/SysConfiguration', // 获取系统配置
   GET_INFO_QYWX: '/CityInterface/rest/services/OA.svc/WeChatScanQRCode',
   PV_LOGS: '/CityInterface/rest/services/portal.svc/OMMonitor/SavePVLogInfo',
-  LOGIN_LOGS:
-    'CityInterface/rest/Services/IOTPlatform.svc/WisdomOMS/SaveLoginInfo',
-  GET_PAGE_PART_INFO:
-    '/CityInterface/rest/services/CountyProduct.svc/AccountManage/GetHomePagePartInfo',
-  SAVE_Page_PART_INFO:
-    '/CityInterface/rest/services/CountyProduct.svc/AccountManage/SaveHomePage',
+  LOGIN_LOGS: 'CityInterface/rest/Services/IOTPlatform.svc/WisdomOMS/SaveLoginInfo',
+  GET_PAGE_PART_INFO: '/CityInterface/rest/services/CountyProduct.svc/AccountManage/GetHomePagePartInfo',
+  SAVE_Page_PART_INFO: '/CityInterface/rest/services/CountyProduct.svc/AccountManage/SaveHomePage',
   GET_TOKEN_QYWX: '/CityInterface/rest/services/portal.svc/OMManage/WeChatScanQRCode',
   VALID_DEFAULT_PWD: '/PandaCore/GCK/BussinessAuth/ValidToken', // 校验是否是默认密码
-    GET_InOnLine:'/PandaEnergy/GZshuiwuju/GuangZhou/InOnLine', //广州登陆接口
+  GET_InOnLine: '/PandaEnergy/GZshuiwuju/GuangZhou/InOnLine', // 广州登陆接口
+  GET_UserMobile: '/PandaEnergy/GZshuiwuju/SingleLogin/SingleLoginByAccess_token', // 获取登录手机号
 };
 
 const services = {
-   getInOnLine :{
-    url:API.GET_InOnLine,
+  getInOnLine: {
+    url: API.GET_InOnLine,
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
-   },
+  },
+  getUserMobile: {
+    url: API.GET_UserMobile,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   authorizationToken: {
     url: API.AUTHORIZATION_TOKEN,
     method: constants.REQUEST_METHOD_GET,
@@ -99,7 +95,10 @@ const services = {
     type: constants.REQUEST_HTTP,
   },
   getInfo: {
-    url: () => window.location.origin.replace(/^(http|https):\/\//, '') === 'mis.panda-water.cn' ? API.GET_INFO_QYWX : API.GET_TOKEN_QYWX,
+    url: () =>
+      window.location.origin.replace(/^(http|https):\/\//, '') === 'mis.panda-water.cn'
+        ? API.GET_INFO_QYWX
+        : API.GET_TOKEN_QYWX,
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
@@ -193,7 +192,7 @@ const services = {
     url: API.VALID_DEFAULT_PWD,
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
-  }
+  },
 };
 
 export const searchAutoCity = keywords => {

src/pages/user/login/index.js

@@ -15,6 +15,7 @@ import Yulin from './template/yulin';
 // import { useParams } from '@wisdom-utils/runtime';
 import EnergyQuota from './template/energy_quota/index';
 import EnergGz from './template/energy_GZ/index';
+import EnergGzV2 from './template/energy_GZV2/index'; // 广州单点登录跳转
 import EnergJS2 from './template/energy_JS2/index';
 import CloudLogin from './template/cloud';
 import WaterLogin from './template/water';
@@ -39,6 +40,7 @@ const LoginTemplate = {
   '项目 - 榆林.html': Yulin,
   '能源-定额平台.html': EnergyQuota,
   '节水主题一.html': EnergGz,
+  '广州登录页.html': EnergGzV2,
   'Water.html': WaterLogin,
   '项目 - 江水置换.html': JSZHLogin,
   '节水主题二.html': EnergJS2,

src/pages/user/login/login.js

 import 'kit_logger';
-import { params } from '@wisdom-utils/utils/lib/helpers';
+import { log, params } from '@wisdom-utils/utils/lib/helpers';
 import { message } from 'antd';
 import { decode, encode } from 'js-base64';
 import Cookies from 'js-cookie';
@@ -22,6 +22,7 @@ const Logger = logger('login');
 const getGlobalConfig = () => store.getState().toJS().global?.globalConfig ?? {};
 class Login {
   constructor(props, callback, isInit) {
+    this.props = props;
     this.events = window.share.event;
     this.globalConfig = props.global;
     // this.updateConfig = props.updateConfig;
@@ -37,7 +38,104 @@ class Login {
     if (isInit) {
       this.init();
     }
-    //
+  }
+
+  gzlogin(userPhone) {
+    const self = this;
+
+    appService
+      .authorizationToken({
+        loginName: userPhone,
+
+        type: 'phone',
+      })
+      .then(res => {
+        if (res.code === 0) {
+          const { data } = res;
+          self.updateConfig &&
+            self.updateConfig(
+              Object.assign({}, self.globalConfig, {
+                access_token: data.access_token,
+                token: data.user_token,
+              }),
+            );
+          return data;
+        }
+        message.error({
+          duration: 3,
+          content: `授权失败:${res.msg}`,
+        });
+        self.events.emit('loginError', res.msg);
+        return Promise.reject(res);
+      })
+      .then(res => {
+        self.gztransformLoginHander(res);
+      });
+  }
+
+  gztransformLoginHander(response, isRememberPWD, pwd) {
+    const self = this;
+    const token =
+      response &&
+      (response.token
+        ? response.token
+        : response.access_token !== null && response.user_token !== null
+        ? response.user_token
+        : '');
+    if (token) {
+      const exp = 86400000;
+      self.globalConfig.token = token;
+      if (response.access_token !== '') {
+        self.globalConfig.access_token = response.access_token;
+        self.updateConfig && self.updateConfig(self.globalConfig);
+        let rules = localStorage.getItem('password_pwdRegex') ? localStorage.getItem('password_pwdRegex') : '';
+        let reg;
+        try {
+          reg = new RegExp(rules);
+        } catch (error) {
+          rules = '';
+          reg = new RegExp(rules);
+        }
+        let check = false;
+        if (rules !== '') check = !reg.test(pwd);
+        localStorage.setItem('access_token', response.access_token ? response.access_token : '');
+        if (check) {
+          localStorage.setItem('password_token', response.access_token ? response.access_token : '');
+        }
+        Cookies.set('client', self.globalConfig.client, {
+          expires: exp / (24 * 60 * 60 * 1000),
+          path: '/',
+        });
+      }
+      if (isRememberPWD) {
+        Cookies.set('client', self.globalConfig.client, {
+          expires: exp / (24 * 60 * 60 * 1000),
+          path: '/',
+        });
+
+        Cookies.set('token', token, {
+          expires: exp / (24 * 60 * 60 * 1000),
+          path: '/',
+        });
+      }
+      sessionStorage.setItem('client', self.globalConfig.client);
+      self.isSignIn = true;
+      self.updateConfig && self.updateConfig(self.globalConfig);
+      self.getUserInfoAndConfig();
+    } else {
+      self.hasTry = true;
+      self.events.emit('loginError', response);
+      message.error(response.error.message);
+      self.callback && self.callback(false);
+    }
+  }
+
+  // 获取手机号
+  getIpone() {
+    const self = this;
+    return appService.getUserMobile({
+      isTest: true,
+    });
   }
 
   init() {
@@ -52,6 +150,12 @@ class Login {
     loginName = params.getParams('loginName') ? params.getParams('loginName') : loginName;
     const homepage = params.getParams('homepage');
     const generateType = params.getParams('generateType');
+    if (window.globalConfig.loginTemplate === '广州登录页' && this.props.location.pathname.indexOf('noscret') > -1) {
+      self.getIpone().then(v => {
+        this.gzlogin(v.data.userMobile);
+      });
+    }
+
     if (homepage) {
       this.globalConfig.homepage = homepage;
       // this.globalConfig.layout = 'blank';
@@ -262,7 +366,11 @@ class Login {
           const homeType = config.productType || 'civweb4';
           // 产品类型和首页路径同时有才行
           // eslint-disable-next-line prettier/prettier
-          const homepage = params.getParams('homepage') ? params.getParams('homepage') : (homeType && config.homepage ? `${homeType}/${params.getParams('homepage') || config.homepage}` : '');
+          const homepage = params.getParams('homepage')
+            ? params.getParams('homepage')
+            : homeType && config.homepage
+            ? `${homeType}/${params.getParams('homepage') || config.homepage}`
+            : '';
 
           self.globalConfig = Object.assign(self.globalConfig, config, {
             theme: self.globalConfig.theme,
@@ -871,9 +979,9 @@ class Login {
           reg = new RegExp(rules);
         }
         let check = false;
-        if(rules !== '') check = !reg.test(pwd)
+        if (rules !== '') check = !reg.test(pwd);
         localStorage.setItem('access_token', response.access_token ? response.access_token : '');
-        if(check) {
+        if (check) {
           localStorage.setItem('password_token', response.access_token ? response.access_token : '');
         }
         Cookies.set('client', self.globalConfig.client, {
@@ -923,7 +1031,7 @@ class Login {
               self.updateConfig(
                 Object.assign({}, self.globalConfig, {
                   access_token: data.access_token,
-                  token: data.user_token
+                  token: data.user_token,
                 }),
               );
             return data;

src/pages/user/login/template/energy_GZV2/FormLogin.js

+/* eslint-disable */
+import { Checkbox } from 'antd';
+import React from 'react';
+import { useIntl } from '@wisdom-utils/components';
+import LoginForm from '../../components/Login';
+import { Form } from 'antd';
+import LoginMessage from '../../js/loginMessage';
+import LoginContext from '../../components/Login/LoginContext';
+import styles from './index.less';
+const { UserName, Password, Submit } = LoginForm;
+const FormLogin = props => (
+  <div className={styles.form_login}>
+    <LoginContext.Provider>
+      <Form
+        form={props.form}
+        onFinish={values => {
+          if (props.onSubmit) {
+            props.onSubmit(values);
+          }
+        }}
+      >
+        {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 className={styles.checkbox_wrap}>
+       { // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+          //  {'记住密码'}
+        //  </Checkbox>
+         // <a href="#">忘记密码?</a>
+        }
+        </div>
+        <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
+      </Form>
+    </LoginContext.Provider>
+  </div>
+);
+
+export default FormLogin;

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

+/* eslint-disable */
+/*
+ * @Author: chengkaiwen;
+ * @Date: 2022-7-8
+ * @Description: 广州登录页;
+ */
+import { appService } from '@/api';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from '@wisdom-utils/runtime';
+import { Modal } from 'antd';
+import { HelmetProvider, Helmet } from 'react-helmet-async';
+import FormLogin from './FormLogin';
+import { actionCreators } from '@/containers/App/store';
+import LoginAction from '../../login';
+import styles from './index.less';
+import { defaultApp } from '@/micro';
+import { log } from 'kit_utils';
+let big='广州大.png'
+let bigNew=''
+class HuaNongLogin extends Component {
+  constructor(props) {
+    super(props);
+    console.log(props);
+    this.state = {
+      time: '16:00',
+      week: '星期一',
+      date: '2020-04-14',
+      title: '节水主题2',
+      type: 'Account',
+      status: 'normal',
+      submitting: false,
+      autoLogin: false,
+      visible: false,
+      action: new LoginAction(Object.assign({}, props, { history: props.history }), this.setVisible, true),
+    };
+    this.fromRef = React.createRef();
+    this.sliVerify = React.createRef();
+    props.loginParams.map(v=>{
+      let item=  v.split('=')
+      if(item.length>0){
+       if(item[0]=='big'){
+        big=item[1]
+       }
+       if(item[0]=='bigNew'){
+        bigNew=item[1]
+       }
+      }
+       })
+  }
+  handleSubmit = values => {
+    const { action, type, autoLogin } = this.state;
+    action &&
+      (type === 'Account'
+        ? action.loginHandler(values.userName, values.password, null, autoLogin, this.sliVerify)
+        : type === 'Mobile'
+        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
+        : null);
+
+    this.setSubmitting(true);
+    this.props.updateCurrentIndex(-1);
+    //没取到0id 要给定时器
+    if( window.gzTime){
+      clearInterval( window.gzTime)
+    }
+    setTimeout(()=>{
+      appService
+      . getInOnLine({
+        UserID: globalConfig.userInfo.oid||globalConfig.userInfo.OID,
+        SatrtDate: this.getNowDate(),
+        Port: location.port,
+        Oid:this._createGuid(),
+      })
+    },10000)
+ window.gzTime=   setInterval(()=>{
+      appService
+      . getInOnLine({
+        UserID: globalConfig.userInfo.oid||globalConfig.userInfo.OID,
+        SatrtDate: this.getNowDate(),
+        Port: location.port,
+        Oid:this._createGuid(),
+      })
+    },180000)
+
+  };
+  onActinoChange = action => {
+    action &&
+      action.events.on('loginSuccess', event => {
+        this.setSubmitting(false);
+        this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
+        this.props.history.push(`/?client=${this.props.global.client}`);
+        defaultApp();
+      });
+    action &&
+      action.events.on('loginError', event => {
+        this.setVisible(false);
+        this.setSubmitting(false);
+      });
+    action &&
+      action.events.on('loginVisible', status => {
+        this.setVisible(status);
+      });
+  };
+  setSubmitting = submitting => {
+    this.setState({ submitting });
+  };
+  setVisible = visible => {
+    this.setState({
+      visible,
+    });
+  };
+  setType = type => {
+    this.setState({
+      type,
+    });
+  };
+  setAutoLogin = autoLogin => {
+    this.setState({
+      autoLogin,
+    });
+  };
+  renderPlatform() {
+    const params = {
+      fromRef: this.formRef,
+      type: this.state.type,
+      setType: this.setType,
+      status: this.state.status,
+      submitting: this.state.submitting,
+      autoLogin: this.state.autoLogin,
+      setAutoLogin: this.setAutoLogin,
+      action: this.state.action,
+      onSubmit: this.handleSubmit,
+      loginMode: this.props.loginMode,
+      updateLoginMode: this.props.updateLoginMode,
+    };
+    return <FormLogin {...params} />;
+  }
+  getCurrentTime(callback) {
+    const date = new Date();
+    const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+    let minutes = date.getMinutes();
+    if (minutes < 10) {
+      minutes = '0' + minutes;
+    }
+    let second = date.getSeconds();
+    const time = `${date.getHours()}:${minutes}`;
+    const weekDay = week[date.getDay()];
+    const dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+    const dateObj = {
+      time,
+      week: weekDay,
+      date: dateStr,
+      second,
+    };
+    callback && callback(dateObj);
+  }
+  showTime = (date) => {
+    this.clearTime();
+    this.setState({
+      ...date,
+    });
+    const interval = 60 - date.second;
+    this.timeTimer = setInterval(() => {
+      this.getCurrentTime(this.showTime);
+    }, interval * 1000);
+  }
+  // 清除时间定时器
+  clearTime() {
+    this.timeTimer && clearInterval(this.timeTimer);
+  }
+getNowDate  () {
+    var date = new Date();
+    var sign2 = ":";
+    var year = date.getFullYear() // 年
+    var month = date.getMonth() + 1; // 月
+    var day = date.getDate(); // 日
+    var hour = date.getHours(); // 时
+    var minutes = date.getMinutes(); // 分
+    var seconds = date.getSeconds() //秒
+    var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
+    var week = weekArr[date.getDay()];
+    // 给一位数的数据前面加 “0”
+    if (month >= 1 && month <= 9) {
+      month = "0" + month;
+    }
+    if (day >= 0 && day <= 9) {
+      day = "0" + day;
+    }
+    if (hour >= 0 && hour <= 9) {
+      hour = "0" + hour;
+    }
+    if (minutes >= 0 && minutes <= 9) {
+      minutes = "0" + minutes;
+    }
+    if (seconds >= 0 && seconds <= 9) {
+      seconds = "0" + seconds;
+    }
+    return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
+  }
+_createGuid() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
+      .replace(/[xy]/g, function (c) {
+        let r = (Math.random() * 16) | 0,
+          v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      })
+      .toUpperCase();
+  }
+  componentDidMount() {
+    this.onActinoChange(this.state.action);
+    this.getCurrentTime(this.showTime);
+   /* request(urlUtils.getUrl(
+      "/PandaEnergy/GZshuiwuju"
+    ) + '/GuangZhou/InOnLine', {
+      query: {
+          UserID: _config.userInfo.OID,
+          SatrtDate: SatrtDate,
+          Port: location.port,
+          Oid,
+      }
+  })  */
+
+
+
+  }
+  componentWillUnmount() {
+    this.clearTime();
+  }
+  render() {
+
+    return (
+      <HelmetProvider>
+        <div className={styles.quota} style={{'background': `url(${bigNew?this.props.global.transformDevAssetsBaseURL(bigNew):require("@/assets/images/login/节水/"+big)}) no-repeat`}}>
+          <div className={styles.head}>
+              <div className={styles.title}>
+                <img className={styles.imgs} src={this.props.global && this.props.global.transformDevAssetsBaseURL && this.props.global.transformDevAssetsBaseURL(this.props.global.logo)} alt="" />
+                {/* <img src={require('@/assets/images/login/能源-定额/华农logo.png')} alt="" /> */}
+                <span>{this.props.global.title || this.state.title}</span>
+              </div>
+            <div className={styles.time_and_date}>
+              <div className={styles.time}>{this.state.time}</div>
+              <div className={styles.date}>
+                <span>{this.state.week}</span>
+                <span>{this.state.date}</span>
+              </div>
+            </div>
+          </div>
+          <div className={styles.wrap_content}>
+            <div className={styles.from}>
+              <div className={styles.slogan}>
+                <div className={styles.slogan_back} />
+              </div>
+              <div className={styles.login}>{this.renderPlatform()}</div>
+            </div>
+          </div>
+          <Modal
+            centered
+            visible={this.state.visible}
+            width={340}
+            footer={null}
+            closable={false}
+            bodyStyle={{ padding: '15px' }}
+          >
+            <div ref={this.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(HuaNongLogin));

src/pages/user/login/template/energy_GZV2/index.less

+@import '~antd/es/style/themes/default.less';
+/* 0.5px */
+.borderSlender(@color) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: @color;
+  -webkit-transform: scaleY(0.5);
+  -moz-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  content: '';
+}
+.quota {
+  position: relative;
+  width: 100%;
+  height: 100%;
+ // background: url('@/assets/images/login/节水/广州大.png') no-repeat;
+  background-size: cover;
+  background-size:100% 100% !important;
+background-attachment:fixed;
+  .head {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 66px;
+    display: flex;
+    justify-content: space-between;
+    z-index: 10;
+    .title {
+      padding-left: 20px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #FFFFFF;
+      text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
+      line-height: 66px;
+    }
+    .imgs{
+      width: 44px;
+      margin-bottom: 7px;
+      margin-right: 10px;
+    }
+    .time_and_date {
+      padding-right: 50px;
+      display: flex;
+      align-items: center;
+      .time {
+        padding: 5px;
+        font-size: 34px;
+        font-weight: 400;
+        color: #FFFFFF;
+        text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.8);
+      }
+      .date {
+        padding: 5px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
+        display: flex;
+        flex-direction: column;
+        line-height: 1.1;
+      }
+    }
+  }
+  .head::after {
+    .borderSlender(@color: rgb(255, 255, 255, 0.32));
+  }
+  .wrap_content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .from {
+      position: absolute;
+      top: -94px !important;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      width: 620px;
+      height: 429px;
+      margin: auto;
+      overflow: hidden;
+      // background: rgba(255, 255, 255, 0.8);
+      background: #FFFFFF;
+      border-radius: 15px;
+      .slogan {
+        height: 118px;
+        background: linear-gradient(0deg,rgba(9,128,238,1) 0%,rgba(0,182,251,1) 100%);
+        .slogan_back{
+          width: 100%;
+          height: 100%;
+          background: url('@/assets/images/login/节水/建桥宣传语.png') no-repeat;
+        background-position: center;
+        }
+      }
+      .login {
+        // flex: 1;
+        height: calc(100% - 118px);
+        padding: 50px 60px;
+      }
+    }
+  }
+}
+
+.form_login {
+  width: 100%;
+  height: 100%;
+  .checkbox_wrap {
+    margin-bottom: @margin-md;
+    color: #0599F4;
+    a {
+      float: right;
+    }
+  }
+  :global {
+    .panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-focused {
+      box-shadow: none;
+    }
+    .panda-console-base-form-item{
+      margin-bottom: 46px;
+    }
+    .panda-console-base-input-affix-wrapper {
+      color: #0599F4;
+      background: none;
+    }
+    .panda-console-base-input {
+      background: none;
+    }
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
+      box-shadow: none;
+    }
+    .panda-console-base-input-affix-wrapper:focus .panda-console-base-input-affix-wrapper-lg {
+      border-color: #0599F4 !important;
+    }
+    .panda-console-base-input-affix-wrapper:not(.panda-console-base-input-affix-wrapper-disabled):hover {
+      z-index: 1;
+      border-color: #0599F4;
+      border-right-width: 1px;
+    }
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper,
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:hover {
+      border-color: #ff4d4f;
+    }
+    .panda-console-base-input-affix-wrapper-focused,
+    .panda-console-base-input-affix-wrapper:focus {
+      z-index: 0;
+    }
+    .panda-console-base-input-affix-wrapper-lg {
+      background-color: none;
+      border: none;
+      border-bottom-color: #0599F4;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+    .panda-console-base-input-affix-wrapper > input.panda-console-base-input {
+      background-color: none;
+    }
+    .panda-console-base-form {
+      width: 100%;
+      height: 100%;
+    }
+    .panda-console-base-checkbox-wrapper {
+      color: #0599F4;
+    }
+    .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox::after {
+      border-color: #0599F4;
+    }
+    .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox-inner,
+    .panda-console-base-checkbox:hover .panda-console-base-checkbox-inner,
+    .panda-console-base-checkbox-input:focus + .panda-console-base-checkbox-inner {
+      border-color: #0599F4;
+    }
+    .panda-console-base-checkbox-wrapper {
+      .panda-console-base-checkbox-checked .panda-console-base-checkbox-inner {
+        background-color: #0599F4;
+        border-color: #0599F4;
+      }
+      .panda-console-base-checkbox-inner {
+        border-color: #0599F4;
+        border-radius: 50%;
+      }
+    }
+    .panda-console-base-btn-lg {
+      width: 100%;
+    }
+    .panda-console-base-btn-primary {
+      background: #0599F4;
+      border-color: #0599F4;
+      border-radius: 23px;
+    }
+  }
+}