''

src/components/UserGuide.less

+.UserGuide {
+  .guidemask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 103;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .textdesc {
+    color: #FFFFFF;
+    font-size: 18px;
+    font-weight: 700;
+    position: absolute;
+  }
+  .linetype1 { // 横线
+    height: 2px;
+    background-color: #fff;
+    position: absolute;
+  }
+  .linetype2 { // 竖向
+    width: 2px;
+    position: absolute;
+    background-color: #fff;
+  }
+  .circledot {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    z-index: 1;
+    border-radius: 50%;
+    border: 2px solid rgba(255,255,255,1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &::after {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      border: 2px solid rgba(255,255,255,1);
+    }
+  }
+  .nextStep {
+    width:95px;
+    height:32px;
+    background:rgba(255,182,26,1);
+    border-radius:4px;
+    color: #fff;
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    position: absolute;
+    z-index: 1;
+  }
+}
+.guidecover {
+  width: 256px;
+  height: 132px;
+  display: block;
+  margin: 0 auto 27px;
+}
+.guidedesc {
+  line-height: 1;
+  color: #848484;
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 68px;
+}
+.btnbox {
+  text-align: center;
+}
+.modalHeader {
+  text-align: center;
+  position: relative;
+  line-height: 1;
+  margin-top: 10px;
+  .title {
+    color: #2D2D2D;
+    font-size: 22px;
+    font-weight: 700;
+  }
+  .skip {
+    color: #1890FF;
+    font-size: 14px;
+    line-height: 22px;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+  .callguide {
+    
+  }
+}
+:global {
+  .UserGuideModal {
+    .ant-modal-header {
+      border-bottom: none;
+    }
+  }
+}
\ No newline at end of file

src/models/deployschool.js

+import { routerRedux } from 'dva/router';
+import { message } from 'antd';
+import queryString from 'qs';
+import { delay } from 'redux-saga';
+import {
+  LocalStorage,
+  SessionStorage,
+  isExpired,
+} from '../utils/index';
+import errorcode from '../common/errorcode';
+import * as newregister from '../services/newregister';
+import * as schoolajax from '../services/schooladd';
+import * as commonajax from '../services/common';
+import rootMap from '../common/constants';
+export default {
+  namespace: 'deployschool',
+  state: {
+    deployType: 3, // 类型 1-口才 2-美术 3-书法 4-跆拳道 5-通用
+    sid: 0,
+    schoolUserInfo: {},
+    schoolStatus: '', // 1-部署中 2-部署结束
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {  // eslint-disable-line
+    },
+  },
+  effects: {
+    * queryinfo({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
+      const { id } = payload;
+      yield put({
+        type: 'updateState',
+        payload: {
+          sid: id,
+        },
+      });
+      yield put({
+        type: 'querymemberinfo',
+      });
+      yield put({
+        type: 'selectStatus',
+      });
+    },
+    * querymemberinfo({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
+      const { sid } = yield select(state => state.deployschool);
+      const nickname = yield call(commonajax.myNickname, {
+        school_id: sid,
+      });
+      if (nickname.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            schoolUserInfo: nickname.data,
+          },
+        });
+      }
+    },
+    * selectStatus({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
+      const { sid } = yield select(state => state.deployschool);
+      yield put({
+        type: 'updateState',
+        payload: {
+          schoolStatus: '',
+        },
+      });
+      const data = yield call(newregister.selectDeploySchool, {
+        school_id: sid,
+      });
+      if (data.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            schoolStatus: data.data.status,
+          },
+        });
+      }
+    },
+    * developSchool({ payload }, { call, put, select }) {
+      const { deployType, sid } = yield select(state => state.deployschool);
+      const data = yield call(newregister.deploySchool, {
+        school_id: sid,
+        type: deployType,
+      });
+      if (data.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            deployType: 3,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * developSkip({ payload }, { call, put, select }) {
+      const { schoolUserInfo, sid } = yield select(state => state.deployschool);
+      const data = yield call(newregister.deploySchool, {
+        school_id: sid,
+        type: 6,
+      });
+      if (data.code == 200) {
+        LocalStorage.setItem('sid', sid);
+        LocalStorage.setItem('role', schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : 5);
+        if (schoolUserInfo.schoolTeacher) {
+          LocalStorage.setItem('rootMap', rootMap.rootMap);
+        } else {
+          LocalStorage.setItem('rootMap', rootMap.emptyRootMap);
+        }
+        yield put({
+          type: 'webapp/updateState',
+          payload: {
+            sid,
+            role: schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : '',
+          },
+        });
+        yield call(commonajax.schoolLoginTime, {
+          id: sid,
+          type: 1,
+        });
+        yield put(routerRedux.push({
+          pathname: '/sjd/indexstaic',
+        }));
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * goHome({ payload }, { put, call, select }) {
+      const { schoolUserInfo, sid } = yield select(state => state.deployschool);
+      LocalStorage.setItem('sid', sid);
+      LocalStorage.setItem('role', schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : 5);
+      if (schoolUserInfo.schoolTeacher) {
+        LocalStorage.setItem('rootMap', rootMap.rootMap);
+      } else {
+        LocalStorage.setItem('rootMap', rootMap.emptyRootMap);
+      }
+      yield put({
+        type: 'webapp/updateState',
+        payload: {
+          sid,
+          role: schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : '',
+        },
+      });
+      yield call(commonajax.schoolLoginTime, {
+        id: sid,
+        type: 1,
+      });
+      yield put(routerRedux.push({
+        pathname: '/sjd/indexstaic',
+      }));
+      yield delay(200);
+      const { screenIsBig } = yield select(state => state.webapp);
+      if (!screenIsBig) {
+        return;
+      }
+      yield put({
+        type: 'userguide/updateState',
+        payload: {
+          guideShow: true, // 引导是否开启
+          guideStep: 1, // 引导步骤
+        },
+      });
+    },
+    * pageInit({ payload }, { call, put, select }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          deployType: 3,
+          schoolStatus: '',
+        },
+      });
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

src/models/newregister.js

+import { routerRedux } from 'dva/router';
+import { message } from 'antd';
+import queryString from 'qs';
+import { delay } from 'redux-saga';
+import {
+  LocalStorage,
+  SessionStorage,
+  isExpired,
+} from '../utils/index';
+import errorcode from '../common/errorcode';
+import * as newregister from '../services/newregister';
+import * as schoolajax from '../services/schooladd';
+export default {
+  namespace: 'newregister',
+  state: {
+    mobile: '',
+    gettingVerifyCoding: false, // 防止获取验证码重复提交
+    countdown: 60,
+    counting: false,
+    registering: false,
+    resolves: [],
+    modalVisible: false,
+    protocolData: '',
+    timer: null,
+    location_address: '',
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {  // eslint-disable-line
+    },
+  },
+  effects: {
+    * register({ payload }, { call, put, select }) {
+      const {
+        mobile,
+        code,
+        password,
+        from,
+        title,
+      } = payload;
+      const { locationQuery } = yield select(state => state.webapp);
+      const {
+        longitude, latitude, locationAddress, province, city, district,
+      } = yield select(state => state.schooladd);
+      yield put({
+        type: 'updateState',
+        payload: {
+          registering: true,
+        },
+      });
+      const data = yield call(newregister.register, {
+        mobile,
+        code,
+        password,
+        from,
+      });
+      if (data.code === 200) {
+        if (data.data && data.data.token) {
+          LocalStorage.setItem('user', {
+            expiresIn: data.data.expiresIn,
+            token: data.data.token,
+            tokenType: data.data.tokenType,
+            avatar: (data.data.business && data.data.business.avatar) || '',
+            consumerId: (data.data.business && data.data.business.consumer_id) || 0,
+            createdAt: (data.data.business && data.data.business.created_at) || '',
+            deletedAt: (data.data.business && data.data.business.deleted_at) || '',
+            id: (data.data.business && data.data.business.id) || 0,
+            memberId: (data.data.business && data.data.business.member_id) || 0,
+            mobile: (data.data.business && data.data.business.mobile) || '',
+            nickname: (data.data.business && data.data.business.nickname) || '',
+            expiresDateTime: data.data.expiresDateTime || '',
+          });
+        }
+        message.success('注册成功!', 1);
+        yield put({
+          type: 'webapp/updateState',
+          payload: {
+            userInfo: LocalStorage.getItem('user'),
+          },
+        });
+        const schooladd = yield call(schoolajax.memberSchoolAdd, {
+          title,
+          longitude,
+          latitude,
+          location_address: province + city + district + locationAddress,
+          address: locationAddress,
+          logo: '',
+          province,
+          city,
+          area: district,
+          token: data.data.token,
+        });
+        if (schooladd.code === 200) {
+          // LocalStorage.setItem('sid', schooladd.data.id);
+          // yield put({
+          //   type: 'webapp/updateState',
+          //   payload: {
+          //     sid: LocalStorage.getItem('sid'),
+          //   },
+          // });
+          // yield put({
+          //   type: 'updateState',
+          //   payload: {
+          //     schoolId: schooladd.data.id,
+          //   },
+          // });
+          yield put({
+            type: 'updateState',
+            payload: {
+              registering: false,
+              userInfo: LocalStorage.getItem('user'),
+              location_address: '',
+            },
+          });
+          yield put({
+            type: 'schooladd/updateState',
+            payload: {
+              longitude: '',
+              latitude: '',
+              locationAddress: '',
+              province: '',
+              city: '',
+              district: '',
+              address: '',
+            },
+          });
+          // yield delay(200);
+          yield put(routerRedux.push({
+            pathname: `/deploySchool/${schooladd.data.id}`,
+          }));
+        }
+      } else {
+        message.error(data.msg, 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            registering: false,
+          },
+        });
+      }
+    },
+    * goToUserInfo({ payload }, { put }) {
+      yield put(routerRedux.push({
+        pathname: '/userinfo',
+      }));
+    },
+    * goHome({ payload }, { put }) {
+      yield put(routerRedux.push({
+        pathname: '/sjd/indexstaic',
+      }));
+    },
+    * getverifycode({ payload }, { call, put, select }) {
+      const { countdown, counting, gettingVerifyCoding } = yield select(state => state.newregister);
+      const { timer } = yield select(state => state.register);
+      const { mobile, sms_type } = payload;
+      let newCountdowm = countdown;
+      let newCounting = counting;
+      yield put({
+        type: 'updateState',
+        payload: {
+          gettingVerifyCoding: true,
+          counting: false,
+        },
+      });
+      const verifycodehide = message.loading('正在获取验证码....', 0);
+      const data = yield call(newregister.getVerifyCode, { mobile, sms_type });
+      if (data.code === 200) {
+        setTimeout(verifycodehide);
+        message.success('验证码获取成功', 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+          },
+        });
+        newCounting = true;
+        yield put({
+          type: 'updateState',
+          payload: {
+            counting: newCounting,
+          },
+        });
+        const setTimer = setInterval(() => {
+          newCountdowm--;
+          if (newCountdowm <= 0) {
+            newCountdowm = 60;
+            newCounting = false;
+            clearInterval(setTimer);
+          }
+          payload.dispatch({
+            type: 'newregister/updateState',
+            payload: {
+              countdown: newCountdowm,
+              counting: newCounting,
+              timer: setTimer,
+            },
+          });
+        }, 1000);
+      } else {
+        setTimeout(verifycodehide);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+            counting: false,
+            countdown: 60,
+          },
+        });
+        message.error(data.msg, 1);
+      }
+    },
+    * getMobile({ payload }, { call, put, select }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: payload.mobile,
+        },
+      });
+    },
+    * gologin({ payload }, { call, put, select }) {
+      const action = {
+        pathname: '/login',
+      };
+      if (payload.mobile !== '') {
+        action.search = queryString.stringify({
+          mobile: payload.mobile,
+        });
+      }
+      yield put(routerRedux.push(action));
+    },
+    * goVerifyLogin({ payload }, { call, put, select }) {
+      const action = {
+        pathname: '/login',
+      };
+      if (payload.mobile !== '') {
+        action.search = queryString.stringify({
+          mobile: payload.mobile,
+        });
+      }
+      yield put(routerRedux.push(action));
+    },
+    * unloadstate({ payload }, { call, put, select }) {
+      const { timer } = yield select(state => state.register);
+      if (timer) clearInterval(timer);
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: '',
+          gettingVerifyCoding: false, // 防止获取验证码重复提交
+          countdown: 60,
+          counting: false,
+          registering: false,
+        },
+      });
+    },
+    * setlocation({ payload }, { call, put, select }) {
+      const {
+        locationAddress, province, city, district,
+      } = yield select(state => state.schooladd);
+      yield put({
+        type: 'updateState',
+        payload: {
+          location_address: province + city + district + locationAddress,
+        },
+      });
+    },
+    * pageInit({ payload }, { call, put, select }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: '',
+          gettingVerifyCoding: false, // 防止获取验证码重复提交
+          countdown: 60,
+          counting: false,
+          registering: false,
+          resolves: [],
+          modalVisible: false,
+          protocolData: '',
+          timer: null,
+          location_address: '',
+        },
+      });
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

src/models/userguide.js

+import { routerRedux } from 'dva/router';
+import queryString from 'query-string';
+import { message, Modal } from 'antd';
+import moment from 'moment';
+import { delay } from 'redux-saga';
+import errorcode from '../common/errorcode';
+import menuConfig from '../common/menuconfig';
+import headquartersmenuConfig from '../common/headquartersmenuconfig';
+import * as commonajax from '../services/common';
+import * as users from '../services/users';
+import {
+  caculateCirclePosition,
+} from '../utils/index';
+const pathToRegexp = require('path-to-regexp');
+export default {
+  namespace: 'userguide',
+  state: {
+    guideShow: false, // 引导是否开启
+    guideStep: 1, // 引导步骤
+    position: {},
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {
+    },
+  },
+  effects: {
+    * getposition({ payload }, { call, put, select }) {
+      const { page, doms } = payload;
+      const { screenIsBig } = yield select(state => state.webapp);
+      if (!screenIsBig) {
+        return;
+      }
+      switch (page) {
+        case 'course':
+          doms.addCourseBtn.style.position = 'relative';
+          doms.addCourseBtn.style.zIndex = 105;
+          doms.menuBtn.style.position = 'relative';
+          doms.menuBtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                addCourseBtn: caculateCirclePosition('bottom', doms.addCourseBtn.getClientRects()[0]),
+                menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'student':
+          doms.addStudentBtn.style.position = 'relative';
+          doms.addStudentBtn.style.zIndex = 105;
+          doms.menuBtn.style.position = 'relative';
+          doms.menuBtn.style.zIndex = 105;
+          doms.bindQrcodeBtn.style.position = 'relative';
+          doms.bindQrcodeBtn.style.zIndex = 105;
+          doms.inviteQrcodeBtn.style.position = 'relative';
+          doms.inviteQrcodeBtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                addStudentBtn: caculateCirclePosition('bottom', doms.addStudentBtn.getClientRects()[0]),
+                menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
+                bindQrcodeBtn: caculateCirclePosition('bottom', doms.bindQrcodeBtn.getClientRects()[0]),
+                inviteQrcodeBtn: caculateCirclePosition('right', doms.inviteQrcodeBtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'class':
+          doms.addClassBtn.style.position = 'relative';
+          doms.addClassBtn.style.zIndex = 105;
+          doms.menuBtn.style.position = 'relative';
+          doms.menuBtn.style.zIndex = 105;
+          doms.firstClassBtn.style.position = 'relative';
+          doms.firstClassBtn.style.zIndex = 105;
+          doms.firstClassBtn.style.backgroundColor = '#fff';
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                addClassBtn: caculateCirclePosition('bottom', doms.addClassBtn.getClientRects()[0]),
+                menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
+                firstClassBtn: caculateCirclePosition('right', doms.firstClassBtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'classdetailtab2':
+          doms.addClassStudentbtn.style.position = 'relative';
+          doms.addClassStudentbtn.style.zIndex = 105;
+          doms.menuBtn.style.position = 'relative';
+          doms.menuBtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                addClassStudentbtn: caculateCirclePosition('top', doms.addClassStudentbtn.getClientRects()[0]),
+                menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'classdetailtab1':
+          doms.plancoursebtn.style.position = 'relative';
+          doms.plancoursebtn.style.zIndex = 105;
+          doms.menuBtn.style.position = 'relative';
+          doms.menuBtn.style.zIndex = 105;
+          doms.classdetailTab3.style.position = 'relative';
+          doms.classdetailTab3.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                plancoursebtn: caculateCirclePosition('top', doms.plancoursebtn.getClientRects()[0]),
+                classdetailTab3: caculateCirclePosition('left', doms.classdetailTab3.getClientRects()[0]),
+                menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'indexstatic1':
+          doms.studentjoinbtn.style.position = 'relative';
+          doms.studentjoinbtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                studentjoinbtn: caculateCirclePosition('bottom', doms.studentjoinbtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'indexstatic2':
+          doms.callwarnbtn.style.position = 'relative';
+          doms.callwarnbtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                callwarnbtn: caculateCirclePosition('bottom', doms.callwarnbtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'indexstatic3':
+          doms.planwarnbtn.style.position = 'relative';
+          doms.planwarnbtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                planwarnbtn: caculateCirclePosition('bottom', doms.planwarnbtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'indexstatic4':
+          doms.birthwarnbtn.style.position = 'relative';
+          doms.birthwarnbtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                birthwarnbtn: caculateCirclePosition('bottom', doms.birthwarnbtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        case 'indexstatic5':
+          doms.paywarnbtn.style.position = 'relative';
+          doms.paywarnbtn.style.zIndex = 105;
+          yield put({
+            type: 'updateState',
+            payload: {
+              position: {
+                paywarnbtn: caculateCirclePosition('bottom', doms.paywarnbtn.getClientRects()[0]),
+              },
+            },
+          });
+          break;
+        default:
+          break;
+      }
+    },
+  },
+  reducers: {
+    save(state, action) {
+      const newState = state;
+      newState.count += action.payload;
+      return { ...state, ...newState };
+    },
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

src/pages/deployschool/index.less

+@import '../../less/variables.less';
+.header {
+    height: 64px;
+    padding-left: 34px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+}
+.headerlogo {
+    height: 40px;
+    display: block;
+}
+.content {
+    text-align: center;
+    margin-top: 20px;
+    &>h3 {
+        font-size:20px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+    }
+    &>h2 {
+        font-size:26px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+        margin-top: 100px;
+    }
+    &>p {
+        font-size:22px;
+        color:#636363;
+        font-weight: 400;
+    }
+}
+.typeList {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 70px;
+    .typeItem {
+        .typeImg {
+            width: 115px;
+            height: 115px;
+            position: relative;
+            margin-right: 30px;
+            cursor: pointer;
+            .img {
+                width: 115px;
+                height: 115px;
+                box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+                border-radius: 50%;
+            }
+            .imgBg {
+                position: absolute;
+                width: 108px;
+                height: 108px;
+                border-radius: 50%;
+                top: 4px;
+                left: 4px;
+                background-color: rgba(0,0,0,0.15);
+            }
+            .checkImg {
+                width: 34px;
+                height: 34px;
+                position: absolute;
+                bottom: 0;
+                right: 0;
+            }
+        }
+        .typeSize {
+            font-size:16px;
+            font-family:PingFang SC;
+            font-weight:bold;
+            color:rgba(33,33,33,1);
+            margin-top: 10px;
+        }
+    }
+}
+.createBtn {
+    height: 60px;
+    line-height: 60px;
+    font-size: 16px;
+    color: #fff;
+    margin-top: 130px;
+    width: 390px;
+}
+.modalWrap {
+    text-align: center;
+    &>h3 {
+        font-size:26px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+    }
+    &>p {
+        font-size:22px;
+        font-family:PingFang SC;
+        font-weight:400;
+        color: #636363;
+    }
+    .stepBox {
+        width: 700px;
+        margin: 0 auto;
+        .stepWrap {
+            display: flex;
+            align-items: center;
+            margin-top: 70px;
+            .stepLeft {
+                font-size:20px;
+                font-family:PingFang SC;
+                font-weight:bold;
+                color:rgba(85,85,85,1);
+                margin-right: 70px;
+            }
+            .stepRight {
+                .lineBox {
+                    display: flex;
+                    align-items: center;
+                }
+                .circle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    border: 6px solid #DCDCDC;
+                    &>img {
+                      display: none;
+                    }
+                }
+                .checkedcircle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    &>img {
+                        width: 23px;
+                        height: 23px;
+                    }
+                }
+                .line {
+                    width: 92px;
+                    height:4px;
+                    background:rgba(220,220,220,1);
+                }
+                .lineTitleWrap {
+                    display: flex;
+                    align-items: center;
+                    margin-left: -15px;
+                    .lineTitle {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#D2D2D2;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                    .lineTitleActive {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#4C4C4C;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                }
+            }
+            .stepRight1 {
+                .lineBox {
+                    display: flex;
+                    align-items: center;
+                }
+                .circle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    border: 6px solid #DCDCDC;
+                    &>img {
+                        display: none;
+                    }
+                }
+                .checkedcircle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    &>img {
+                        width: 23px;
+                        height: 23px;
+                    }
+                }
+                .line {
+                    width: 130px;
+                    height:4px;
+                    background:rgba(220,220,220,1);
+                }
+                .lineTitleWrap {
+                    display: flex;
+                    align-items: center;
+                    margin-left: -20px;
+                    .lineTitle {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#D2D2D2;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                    .lineTitleActive {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#4C4C4C;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                    .lineTitle:not(:last-child),.lineTitleActive:not(:last-child) {
+                        padding-right: 78px;
+                    }
+                }
+            }
+            .line {
+                position: relative;
+                .innerBlueLine {
+                    width: 0%;
+                    height: 5px;
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    z-index: 1;
+                    background: #21BCFF;
+
+                }
+                .innerBlueShow {
+                    width: 0%;
+                    height: 5px;
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    z-index: 1;
+                    background: #21BCFF;
+                    animation: innerBlueShow .5s forwards;
+                }
+            }
+        }
+
+    }
+}
+@keyframes innerBlueShow{
+    0% {
+        width: 0%;
+    }
+    30% {
+        width: 0%;
+    }
+    100% {
+        width: 100%;
+    }
+}
+.progress {
+    position: relative;
+    width: 630px;
+    height: 48px;
+    margin: 40px 0 30px 177px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(220,220,220,1);
+    border-radius:24px;
+    .innerTextWrap {
+        width: 630px;
+        font-size:18px;
+        height: 48px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+        text-align: center;
+        position: relative;
+        .innerText {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            bottom: 0;
+            z-index: 2;
+        }
+    }
+}
+.innerProgress {
+    width: 630px;
+    height: 48px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(220,220,220,1);
+    border-radius:24px;
+    text-align: center;
+    top:-2px;
+    left: -1px;
+    position: absolute;
+}
+.innerAnimation{
+    animation: dailogBtnChange 6s linear forwards;
+    width: 630px;
+    height: 48px;
+    background:linear-gradient(90deg,rgba(51,168,255,1),rgba(4,222,254,1));
+    border-radius:24px;
+    text-align: center;
+    line-height: 48px;
+    font-size:18px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:rgba(0,0,0,1);
+    top:-2px;
+    left: -1px;
+    position: absolute;
+}
+.enterIndex {
+    width: 630px;
+    height: 48px;
+    background:linear-gradient(90deg,rgba(51,168,255,1),rgba(4,222,254,1));
+    border-radius:24px;
+    text-align: center;
+    line-height: 48px;
+    font-size:18px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:#fff;
+    cursor: pointer;
+}
+@keyframes dailogBtnChange{
+    0% {
+        width: 0px;
+    }
+    100% {
+        width: 630px;
+    }
+}
+.skip {
+    font-size:16px;
+    font-family:PingFang SC;
+    font-weight:400;
+    color:rgba(99,99,99,1);
+    line-height:48px;
+    text-align: center;
+    margin-top: 45px;
+    cursor: pointer;
+}

src/pages/login/QxLogin.js

+import React from 'react';
+import { connect } from 'dva';
+import { withRouter, Link } from 'dva/router';
+import { Row, Col, Form, Input, Button, Checkbox, message, Tabs } from 'antd';
+import LoginStyles from './index.less';
+import { LocalStorage, imagifyorigin, pageIn } from '../../utils/index';
+const { TabPane } = Tabs;
+const FormItem = Form.Item;
+class QxLoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      qxLoginType: 'psd',
+      qxpwdvisible: false,
+    };
+  }
+  componentDidMount() {
+    pageIn('轻校-登录页面');
+  }
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'register/unloadstate',
+    });
+  }
+  handleQxSubmit = (e) => {
+    const { dispatch } = this.props;
+    const { qxLoginType } = this.state;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      const {
+        mobile, code, needlogin, password,
+      } = values;
+      if (!err) {
+        if (qxLoginType == 'verifycode') {
+          dispatch({
+            type: 'login/qxLogin',
+            payload: {
+              mobile,
+              code,
+              type: 'verify',
+              needlogin: true,
+            },
+          });
+        } else if (qxLoginType == 'psd') {
+          dispatch({
+            type: 'login/qxLogin',
+            payload: {
+              mobile,
+              type: 'pwd',
+              password,
+              needlogin: true,
+            },
+          });
+        }
+      }
+    });
+  }
+  sendCode = () => {
+    const {
+      dispatch, form, gettingVerifyCoding, counting,
+    } = this.props;
+    if (gettingVerifyCoding || counting) {
+      return;
+    }
+    const mobile = form.getFieldValue('mobile');
+    if (mobile === undefined) {
+      message.error('请输入手机号', 1);
+      return;
+    }
+    if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
+      message.error('请输入正确的手机号', 1);
+      return;
+    }
+    dispatch({
+      type: 'newregister/getverifycode',
+      payload: {
+        sms_type: 6,
+        mobile,
+        dispatch,
+      },
+    });
+  }
+  goResetPsd = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'login/goresetpsd',
+    });
+  }
+  qxpwdcansee = () => {
+    this.setState({
+      qxpwdvisible: !this.state.qxpwdvisible,
+    });
+  }
+  qxGoPwdLogin = () => {
+    this.setState({
+      qxLoginType: 'psd',
+    });
+  }
+  qxGoVerifyLogin = () => {
+    this.setState({
+      qxLoginType: 'verifycode',
+    });
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const {
+      qxLoginType, qxpwdvisible,
+    } = this.state;
+    const {
+      locationQuery, qxLoading, countdown, counting,
+    } = this.props;
+    return (
+      <div>
+        <div className={LoginStyles.businessloginbox}>
+          <Form onSubmit={this.handleQxSubmit} className={LoginStyles.loginform}>
+            <FormItem className="loginrow">
+              {getFieldDecorator('mobile', {
+                rules: [
+                  { required: true, message: '请输入您的手机号!' },
+                  { pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
+                  { max: 11, message: '手机号长度为11位!' },
+                ],
+                initialValue: locationQuery.mobile || '',
+              })(
+                <Input
+                  placeholder="请输入手机号"
+                  maxLength={11}
+                />,
+              )}
+            </FormItem>
+            {qxLoginType == 'verifycode' &&
+            <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+              <Col span={16}>
+                <FormItem>
+                  {getFieldDecorator('code', {
+                    rules: [
+                      { required: true, message: '请输入验证码!' },
+                      { pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
+                    ],
+                  })(
+                    <Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
+                  )}
+                </FormItem>
+              </Col>
+              <Col span={8}>
+                <div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendCode}>{counting ? `${countdown}秒后重新获取` : '获取验证码'}</div>
+              </Col>
+            </Row>
+            }
+            {qxLoginType == 'psd' &&
+            <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+              <Col span={20}>
+                <FormItem>
+                  {getFieldDecorator('password', {
+                    rules: [
+                      { required: qxLoginType == 'psd', message: '请输入您的密码!' },
+                      { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
+                    ],
+                  })(
+                    <Input className="no_border" type={!qxpwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="请输入密码" />,
+                  )}
+                </FormItem>
+              </Col>
+              <Col span={4} className={LoginStyles.eyebox} onClick={() => this.qxpwdcansee()}>
+                {qxpwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
+                {!qxpwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
+              </Col>
+            </Row>
+            }
+            <FormItem className="loginrow">
+              {qxLoginType == 'verifycode' && <div className={LoginStyles.loginformforgot} onClick={this.qxGoPwdLogin}>密码登录</div>}
+              {qxLoginType == 'psd' &&
+              <div className={LoginStyles.loginformforgotbox}>
+                <div onClick={this.qxGoVerifyLogin}>验证码登录</div>
+                <div className={LoginStyles.resetpsd} onClick={this.goResetPsd}>忘记密码</div>
+              </div>
+              }
+              <div className={`${LoginStyles.btncontent} 'clearfix'`}>
+                <Button type="primary" htmlType="submit" size="large" className={LoginStyles.loginformbutton} loading={qxLoading}>
+                  {qxLoading ? '登录中...' : '登录'}
+                </Button>
+              </div>
+            </FormItem>
+          </Form>
+          <div className={LoginStyles.registerbox}>
+            <div className={LoginStyles.noaccount}>还没有账号？</div>
+            <Link className={LoginStyles.goregister} to="/register">去注册</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+const QxLogin = Form.create()(QxLoginForm);
+QxLogin.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  const { collapsed, locationQuery } = state.webapp;
+  const {
+    countdown, counting, gettingVerifyCoding,
+  } = state.newregister;
+  const {
+    qxLoading, tabtype, teacherLoginQrcode,
+  } = state.login;
+  return {
+    collapsed, locationQuery, qxLoading, countdown, counting, tabtype, teacherLoginQrcode, gettingVerifyCoding,
+  };
+}
+export default connect(mapStateToProps)(QxLogin);

src/pages/login/SjdLogin.js

+import React from 'react';
+import { connect } from 'dva';
+import { withRouter, Link } from 'dva/router';
+import { Row, Col, Form, Input, Button, Checkbox, message, Tabs } from 'antd';
+import LoginStyles from './index.less';
+import { LocalStorage, imagifyorigin, pageIn } from '../../utils/index';
+const { TabPane } = Tabs;
+const FormItem = Form.Item;
+class SjdLoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pwdvisible: false,
+      loginType: 'psd',
+    };
+  }
+  componentDidMount() {
+    pageIn('轻校-登录页面');
+  }
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'register/unloadstate',
+    });
+  }
+  handleSubmit = (e) => {
+    const { dispatch } = this.props;
+    const { loginType } = this.state;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      const {
+        mobile, verifycode, needlogin, password,
+      } = values;
+      if (!err) {
+        if (loginType == 'verifycode') {
+          dispatch({
+            type: 'login/sjdLogin',
+            payload: {
+              mobile,
+              verifycode,
+              type: 'verify',
+              needlogin: true,
+            },
+          });
+        } else if (loginType == 'psd') {
+          dispatch({
+            type: 'login/sjdLogin',
+            payload: {
+              mobile,
+              type: 'pwd',
+              password,
+              needlogin: true,
+            },
+          });
+        }
+      }
+    });
+  }
+  sendVerifyCode = () => {
+    const {
+      dispatch, form, gettingVerifyCoding, counting,
+    } = this.props;
+    if (gettingVerifyCoding || counting) {
+      return;
+    }
+    const mobile = form.getFieldValue('mobile');
+    if (mobile === undefined) {
+      message.error('请输入手机号', 1);
+      return;
+    }
+    if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
+      message.error('请输入正确的手机号', 1);
+      return;
+    }
+    dispatch({
+      type: 'register/getverifycode',
+      payload: {
+        type: 5,
+        mobile,
+        dispatch,
+      },
+    });
+  }
+  goResetPsd = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'login/goresetpsd',
+    });
+  }
+  goPwdLogin = () => {
+    this.setState({
+      loginType: 'psd',
+    });
+  }
+  goVerifyLogin = () => {
+    this.setState({
+      loginType: 'verifycode',
+    });
+  }
+  generateIcon = (name) => {
+    return <i className={`${name} bg_icon`} />;
+  }
+  tabshift = (type) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'login/tabshift',
+      payload: {
+        type,
+      },
+    });
+  }
+  pwdcansee = () => {
+    this.setState({
+      pwdvisible: !this.state.pwdvisible,
+    });
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const {
+      pwdvisible, loginType,
+    } = this.state;
+    const {
+      locationQuery, logining, countdown, counting, tabtype,
+    } = this.props;
+    return (
+      <div>
+        { tabtype == 2 &&
+        <div className={LoginStyles.businessloginbox}>
+          <Form onSubmit={this.handleSubmit} className={LoginStyles.loginform}>
+            <FormItem className="loginrow">
+              {getFieldDecorator('mobile', {
+               rules: [
+                 { required: true, message: '请输入您的手机号!' },
+                 { pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
+                 { max: 11, message: '手机号长度为11位!' },
+               ],
+               initialValue: locationQuery.mobile || '',
+             })(
+               <Input
+                 placeholder="请输入手机号"
+                 maxLength={11}
+               />,
+             )}
+            </FormItem>
+            {loginType == 'verifycode' &&
+            <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+              <Col span={16}>
+                <FormItem>
+                  {getFieldDecorator('verifycode', {
+                   rules: [
+                     { required: true, message: '请输入验证码!' },
+                     { pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
+                   ],
+                 })(
+                   <Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
+                 )}
+                </FormItem>
+              </Col>
+              <Col span={8}>
+                <div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendVerifyCode}>{counting ? `${countdown}秒后重新获取` : '获取验证码'}</div>
+              </Col>
+            </Row>
+           }
+            {loginType == 'psd' &&
+            <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+              <Col span={20}>
+                <FormItem>
+                  {getFieldDecorator('password', {
+                   rules: [
+                     { required: true, message: '请输入您的密码!' },
+                     { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
+                   ],
+                 })(
+                   <Input className="no_border" type={!pwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="请输入密码" />,
+                 )}
+                </FormItem>
+              </Col>
+              <Col span={4} className={LoginStyles.eyebox} onClick={() => this.pwdcansee()}>
+                {pwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
+                {!pwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
+              </Col>
+            </Row>
+           }
+            <FormItem className="loginrow">
+              {loginType == 'verifycode' && <div className={LoginStyles.loginformforgot} onClick={this.goPwdLogin}>密码登录</div>}
+              {loginType == 'psd' &&
+              <div className={LoginStyles.loginformforgotbox}>
+                <div onClick={this.goVerifyLogin}>验证码登录</div>
+                {/* <div className={LoginStyles.resetpsd} onClick={this.goResetPsd}>忘记密码</div> */}
+              </div>
+             }
+              <div className={`${LoginStyles.btncontent} 'clearfix'`}>
+                <Button type="primary" htmlType="submit" size="large" className={LoginStyles.loginformbutton} loading={logining}>
+                  {logining ? '登录中...' : '登录'}
+                </Button>
+              </div>
+            </FormItem>
+          </Form>
+          <div className={LoginStyles.registerbox}>
+            <div className={LoginStyles.noaccount}>还没有账号？</div>
+            <Link className={LoginStyles.goregister} to="/register">去注册</Link>
+          </div>
+        </div>}
+      </div>
+    );
+  }
+}
+const SjdLogin = Form.create()(SjdLoginForm);
+SjdLogin.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  const { collapsed, locationQuery } = state.webapp;
+  const {
+    countdown, counting, gettingVerifyCoding,
+  } = state.register;
+  const { logining, tabtype, teacherLoginQrcode } = state.login;
+  return {
+    collapsed, locationQuery, logining, countdown, counting, tabtype, teacherLoginQrcode, gettingVerifyCoding,
+  };
+}
+export default connect(mapStateToProps)(SjdLogin);

src/pages/newregister/index.js

+import React from 'react';
+import { connect } from 'dva';
+import qs from 'qs';
+import { Row, Col, Form, Input, Button, Checkbox, Select, Cascader, message, Modal } from 'antd';
+import LoginStyles from './index.less';
+import disData from '../../common/dis.data';
+import { LocalStorage, SessionStorage, pageIn } from '../../utils/index';
+import ChoosePosition from '../schooledit/SelectPlace';
+const { TextArea } = Input;
+const { Option } = Select;
+const FormItem = Form.Item;
+class LoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: true,
+      positionVisible: false,
+    };
+  }
+  componentDidMount() {
+    pageIn('轻校-注册页面');
+  }
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'newregister/unloadstate',
+    });
+  }
+  changeType = (e) => {
+    if (e.target.getAttribute('type') === 'password') {
+      console.log('禁止设置');
+    }
+    e.target.setAttribute('type', 'password');
+  }
+  handleSubmit = (e) => {
+    const { dispatch } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        const {
+          mobile, code, password, from,
+          title,
+          location_address,
+        } = values;
+        if (location_address === '') {
+          message.error('请选择校区地址');
+          return;
+        }
+        dispatch({
+          type: 'newregister/register',
+          payload: {
+            mobile,
+            code,
+            password,
+            from,
+            title,
+          },
+        });
+      }
+    });
+  }
+  filter = (inputValue, path) => {
+    return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
+  }
+  sendVerifyCode = () => {
+    const {
+      dispatch, form, gettingVerifyCoding, counting,
+    } = this.props;
+    if (gettingVerifyCoding || counting) {
+      return;
+    }
+    const mobile = form.getFieldValue('mobile');
+    if (mobile === undefined) {
+      message.error('请输入手机号', 1);
+      return;
+    }
+    if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
+      message.error('请输入正确的手机号', 1);
+      return;
+    }
+    dispatch({
+      type: 'newregister/getverifycode',
+      payload: {
+        sms_type: 7,
+        mobile,
+        dispatch,
+      },
+    });
+  }
+  goLogin = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'newregister/gologin',
+      payload: {
+        mobile: '',
+      },
+    });
+  }
+  handleModal = () => {
+    const { dispatch } = this.props;
+    this.props.form.setFieldsValue({
+      checked: true,
+    });
+    dispatch({
+      type: 'newregister/updateState',
+      payload: {
+        modalVisible: false,
+        pwdvisible: false,
+      },
+    });
+  }
+  pwdcansee = () => {
+    this.setState({
+      pwdvisible: !this.state.pwdvisible,
+    });
+  }
+  choosePosition = () => {
+    this.setState({
+      positionVisible: true,
+    });
+  }
+  handleCancelPosition = () => {
+    const { dispatch } = this.props;
+    this.setState({
+      positionVisible: false,
+    });
+    dispatch({
+      type: 'newregister/updateState',
+      payload: {
+        location_address: '',
+      },
+    });
+  }
+  handlePositionOk = () => {
+    const { dispatch } = this.props;
+    this.setState({
+      positionVisible: false,
+    });
+    dispatch({
+      type: 'newregister/setlocation',
+      payload: {
+      },
+    });
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const { checked, pwdvisible, positionVisible } = this.state;
+    const {
+      countdown, counting, registering, modalVisible, protocolData,
+      location_address,
+    } = this.props;
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 16,
+          offset: 5,
+        },
+      },
+    };
+    return (
+      <div className={`login register ${LoginStyles.logincontainer}`}>
+        <div className={LoginStyles.header}>
+          <img src={`${__IMGCDN__}qxlogo3.png`} className={LoginStyles.headerlogo} alt="轻校" />
+        </div>
+        <Row type="flex" className={LoginStyles.loginbg}>
+          <Col className={LoginStyles.loginformcontent}>
+            <div className={LoginStyles.loginbox}>
+              <div className={LoginStyles.sjd_name}>
+                免费注册
+              </div>
+              <Form onSubmit={this.handleSubmit} className={LoginStyles.loginform}>
+                <FormItem className="loginrow">
+                  {getFieldDecorator('mobile', {
+                    rules: [
+                      { required: true, message: '请输入您的手机号!' },
+                      { pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
+                      { max: 11, message: '手机号长度为11位!' },
+                    ],
+                  })(
+                    <Input placeholder="请输入手机号" autoComplete="off" maxLength={11} />,
+                  )}
+                </FormItem>
+                <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+                  <Col span={16}>
+                    <FormItem>
+                      {getFieldDecorator('code', {
+                        rules: [
+                          { required: true, message: '请输入验证码!' },
+                          { pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
+                        ],
+                      })(
+                        <Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
+                      )}
+                    </FormItem>
+                  </Col>
+                  <Col span={8}>
+                    <div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendVerifyCode}>{counting ? `${countdown}秒后重新获取` : '发送验证码'}</div>
+                  </Col>
+                </Row>
+                {getFieldDecorator('from', { initialValue: 2 })(<Input type="hidden" />)}
+                <Row className={`loginrow ${LoginStyles.verycoderow}`}>
+                  <Col span={20}>
+                    <FormItem>
+                      {getFieldDecorator('password', {
+                        rules: [
+                          { required: true, message: '设置密码（6-16位）!' },
+                          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
+                        ],
+                      })(
+                        <Input maxLength={20} className="no_border" type={!pwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="设置密码（6-16位）" />,
+                      )}
+                    </FormItem>
+                  </Col>
+                  <Col span={4} className={LoginStyles.eyebox} onClick={() => this.pwdcansee()}>
+                    {pwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
+                    {!pwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
+                  </Col>
+                </Row>
+                <FormItem className="loginrow">
+                  {getFieldDecorator('title', {
+                    rules: [
+                      { required: true, message: '请输入机构名称!' },
+                    ],
+                  })(
+                    <Input maxLength={30} placeholder="请输入机构名称" autoComplete="off" />,
+                  )}
+                  <span className={LoginStyles.formTip}>机构名称后期支持自由修改</span>
+                </FormItem>
+                <FormItem className="loginrow">
+                  {getFieldDecorator('location_address', {
+                    initialValue: location_address,
+                  })(
+                    <Input style={{ cursor: 'pointer' }} readOnly="readOnly" onClick={this.choosePosition} placeholder="获取位置" />,
+                  )}
+                </FormItem>
+                <FormItem>
+                  <div className={`${LoginStyles.btncontent} clearfix`}>
+                    <Button type="primary" htmlType="submit" size="small" className={LoginStyles.loginformbutton} loading={registering}>
+                      {registering ? '提交中...' : '完成注册'}
+                    </Button>
+                  </div>
+                </FormItem>
+              </Form>
+              <div className={LoginStyles.registerbox}>
+                <div className={LoginStyles.noaccount}>已有账号？</div>
+                <div className={LoginStyles.goregister} onClick={this.goLogin}>去登录</div>
+              </div>
+            </div>
+          </Col>
+        </Row>
+        <Modal
+          title="地区选择"
+          visible={positionVisible}
+          onOk={this.handlePositionOk}
+          onCancel={this.handleCancelPosition}
+          cancelText="取消"
+          okText="确认"
+          width={1300}
+          height={666}
+          bodyStyle={{ padding: '24px 0' }}
+        >
+          <ChoosePosition />
+        </Modal>
+      </div>
+    );
+  }
+}
+const Login = Form.create()(LoginForm);
+Login.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  const {
+    gettingVerifyCoding, countdown, counting, registering, resolves, modalVisible, protocolData,
+    location_address,
+  } = state.newregister;
+  const { locationQuery } = state.webapp;
+  return {
+    gettingVerifyCoding,
+    countdown,
+    counting,
+    registering,
+    resolves,
+    locationQuery,
+    modalVisible,
+    protocolData,
+    location_address,
+  };
+}
+export default connect(mapStateToProps)(Login);

src/pages/newregister/index.less

+@import '../../less/variables.less';
+@images: '@{imagesroot}/login/';
+.loginbg{
+    min-width: 600px;
+    height: ~"calc(100vh - 300px)";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.logincontainer {
+    height: 100vh;
+}
+.loginformcontent{
+    //width: 1000px;
+    //// height: 600px;
+    //background-color: #fff;
+    //margin: 0 auto;
+    //border-radius: 20px;
+    //box-shadow:0px 6px 24px 0px rgba(0,0,0,0.08);
+    //height: 600px;
+    //display: flex;
+    //overflow: hidden;
+}
+.qxdescbox {
+    flex: 1;
+    background-color: #19B5FE;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .qxbiglogo {
+        width: 201px;
+        height: 201px;
+        display: block;
+    }
+    .qxdesc {
+        font-size: 14px;
+        width: 383px;
+        color: #fff;
+        text-align: center;
+    }
+}
+.loginbox {
+    flex: 1;
+    padding-top: 42px;
+}
+.sjd_logo{
+    text-align: center;
+    margin-bottom: 10px;
+    img{
+        width: 200px;
+    }
+}
+.sjd_name {
+    text-align: center;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 45px;
+    color: #1BB6FF;
+    letter-spacing: 2px;
+}
+.loginform {
+    margin-bottom: 20px;
+    margin: 0 auto;
+    padding-top: 48px;
+    width: 440px;
+}
+.loginformforgot {
+    color: #22B8FF;
+    font-size: 14px;
+    padding-left: 11px;
+    margin-bottom: 72px;
+    line-height: 1;
+    margin-top: 24px;
+    cursor: pointer;
+}
+.loginformforgotbox {
+    color: #22B8FF;
+    font-size: 14px;
+    padding-left: 11px;
+    margin-bottom: 72px;
+    line-height: 1;
+    margin-top: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    div {
+        cursor: pointer;
+    }
+    .resetpsd {
+        color: #959595;
+    }
+}
+.forgotpwd {
+  float: right;
+  padding: 8px 10px;
+}
+.loginformbutton {
+    height: 52px;
+    line-height: 52px;
+    width: 100%;
+    background-color: #1890FF;
+    border: none;
+    font-size: 16px;
+}
+.loginformbutton:hover {
+    background-color: #1890FF;
+}
+.loginformbutton:active {
+    background-color: #1890FF;
+}
+.loginformbutton:focus {
+    background-color: #1890FF;
+}
+.formTip {
+    font-size:12px;
+    font-weight:400;
+    color:#acacac;
+    display: flex;
+    justify-content: flex-end;
+    line-height: 1.6;
+}
+.verycodebtn {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: right;
+    // border-color: #0000ff;
+    color: rgba(27,182,254,1);;
+    border-radius: 0;
+    padding-right: 14px;
+    font-size: 14px;
+    cursor: pointer;
+    &.verycodebtndisable {
+        color: rgba(27,182,254,0.5);
+    }
+}
+.verycodeinput {
+    border-bottom: none!important;
+    .ant-row{
+        margin-bottom: 0!important;
+    }
+    .ant-form-item{
+        margin-bottom: 0!important;
+    }
+}
+.btncontent{
+    margin-top: 80px;
+    text-align: left;
+}
+.registerformbutton {
+    float: right;
+    width: 178px;
+    height: 55px;
+    border-color: #0000ff;
+    color: #0000ff;
+}
+.verycoderow{
+    border-bottom: 1px solid #cccccc;
+}
+:global {
+  .register {
+      min-height: 700px;
+      .ant-input{
+          border: none;
+          border-bottom: 1px solid #cccccc;
+          border-radius: 0;
+          outline: none;
+      }
+      .no_border {
+        &.ant-input {
+          border-bottom: none!important;
+        }
+      }
+      .ant-input:focus{
+          box-shadow: initial;
+      }
+      .ant-checkbox{
+          .ant-checkbox-inner{
+              border-radius: 50%;
+          }
+      }
+      .ant-checkbox::after{
+          border-radius: 50%;
+      }
+      .ant-form-item{
+          margin-bottom: 0;
+      }
+      .ant-select-selection {
+          border: none;
+          border-bottom: 1px solid #d9d9d9;
+          border-radius: 0;
+      }
+      .loginrow{
+          margin-bottom: 15px;
+      }
+   .ant-form-explain {
+       padding-left: 11px;
+   }
+  }
+  .bg_icon {
+    display: inline-block;
+    width: 27px;
+    height: 27px;
+    background: url('@{images}phone.png') no-repeat;
+    background-size: 100%;
+    margin-left: -10px;
+    &.verify {
+      background-image: url('@{images}verify.png');
+    }
+  }
+}
+.header {
+    height: 64px;
+    padding-left: 34px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+}
+.headerlogo {
+    height: 40px;
+    display: block;
+}
+@media (max-width: @screen-small-min){
+    .loginformcontent{
+        box-shadow: none;
+    }
+    .header {
+        height: 50px;
+        padding-left: 34px;
+    }
+    .headerlogo {
+        height: 50px;
+        display: block;
+    }
+}
+.shifttbbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.shifttb {
+    cursor: pointer;
+}
+.tabname {
+    color: #1BB6FF;
+    color: #000000;
+    font-size: 18px;
+    line-height: 1;
+    margin-bottom: 17px;
+    text-align: center;
+}
+.tabborder {
+    width: 107px;
+    height: 3px;
+    background-color: transparent;
+    margin: 0 auto;
+}
+.active .tabname {
+    color: #1BB6FF;
+}
+.shifttb.active .tabborder {
+    background-color: #1BB6FF;
+}
+.teacherloginbox {
+    padding-top: 87px;
+    text-align: center;
+}
+.loginwarntext {
+    color: #969696;
+    font-size: 14px;
+    line-height: 1;
+    margin-bottom: 43px;
+}
+.loginqrcode {
+    width: 240px;
+    height: 240px;
+}
+.businessloginbox {
+
+}
+.registerbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    margin-top: 30px;
+}
+.noaccount {
+    color: #959595;
+    font-size: 14px;
+}
+.goregister {
+    color: #1890FF;
+    cursor: pointer;
+    font-size: 14px;
+}
+.eyebox {
+    text-align: right;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    height: 32px;
+}
+.eyeopen {
+    width: 23px;
+    height: 15px;
+    cursor: pointer;
+}
+.eyeclose {
+    width: 22px;
+    height: 11px;
+    cursor: pointer;
+}

src/services/newregister.js

+import qs from 'qs';
+import request from '../utils/request';
+import api from '../common/api';
+export function register(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.newRegister.register}`,
+    method: 'POST',
+    data,
+    needAuth: false,
+  });
+}
+export function getVerifyCode(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.newRegister.send_code}`,
+    method: 'POST',
+    data,
+    needAuth: false,
+  });
+}
+export function deploySchool(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.deployschool}`,
+    method: 'POST',
+    data,
+  });
+}
+export function forgetPassword(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.newRegister.forget_password}`,
+    method: 'POST',
+    data,
+    needAuth: false,
+  });
+}
+export function selectDeploySchool(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.selectdeployschool}?${data}`,
+    method: 'GET',
+    data,
+  });
+}
+