sass登录

assets/scss/common.scss

@@ -944,3 +944,54 @@ form .questions .el-form-item__content span.question {
 .code-input2 {
   width: 92px !important;
 }
+
+//sass注册
+.go-register {
+  background: #fff !important;
+  .container{
+    width: 425px !important ;
+    background: #FFFFFF;
+    box-shadow: 0 22px 24px 0 rgba(0,0,0,0.08);
+    border-radius: 3px;
+    .content {
+      padding: 0 !important ;
+      margin: 0!important ;
+      .content-top {
+        height: 50px !important ;
+        line-height: 50px !important ;
+        h3{
+          margin: 0!important ;
+          padding: 0!important ;
+        }
+      }
+      form {
+        padding-bottom: 0!important;
+        .el-form-item{
+          .el-form-item__content {
+            .el-form-item__error {
+              margin-top: 10px!important ;
+              position: absolute!important ;
+              top: 44px!important ;
+              left: 0!important ;
+            }
+            .el-checkbox {
+              margin-left: 0 !important;
+            }
+          }
+          &.mobile{
+            margin-bottom: 36px!important ;
+          }
+          .btn.finish {
+            margin-top: 0!important;
+          }
+        }
+      }
+    }
+    .login{
+      margin: 20px 0 !important ;
+    }
+  }
+}
+.go-register form .el-form-item.agree .el-form-item__content{
+  margin-top: 18px!important ;
+}

layouts/sass.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <nuxt/>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'default'
+  }
+</script>

pages/sassLogin/index.vue

@@ -0,0 +1,882 @@
+<template>
+  <div class="x-container">
+   <!--登录窗口-->
+    <template>
+      <div class="x-login-wrap">
+        <div class="login-tab" v-show="loginWay != 2">
+          <span @click="toggleTab(0)" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
+          <span @click="toggleTab(3)" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
+          <span @click="ShowWechatCoe(1)" v-bind:class="{'active': loginWay === 1 }" id="weChatBtn">微信登录</span>
+        </div>
+        <!--账号密码登录-->
+        <div class="x-login" v-show="loginWay === 0">
+          <div id="form-wrap" class="x-login-form">
+            <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
+              <div style="opacity: 0; height: 0; overflow: hidden">
+                <input type="text" name="hideUserName" id="hideUserName">
+                <input type="password" name="hidePassword" id="hidePassword">
+              </div>
+              <el-form-item prop="username">
+                <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱"></el-input>
+                <i class="fa fa-user"></i>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input type="password"
+                          v-model="login.password"
+                          placeholder="密码"
+                          auto-complete="off"
+                          @keyup.enter.native="isLogin(true)"></el-input>
+                <i class="fa fa-lock"></i>
+              </el-form-item>
+              <el-form-item prop="captcha" class="captcha" v-show="showCheckCode">
+                <el-input type="text"
+                          v-model="login.captcha"
+                          auto-complete="off"
+                          class="code-input"
+                          @keyup.enter.native="isLogin(true)"></el-input>
+                <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
+                <a class="code-click" @click="getCode">看不清换一张</a>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn login"
+                   @click="isLogin(true)"
+                   :disabled="isLoginDisabled">登录</a>
+              </el-form-item>
+              <el-form-item class="text-position" v-if="loginStyle.needRememberPwd">
+                <el-checkbox v-model="checked">30天免登录</el-checkbox>
+              </el-form-item>
+            </el-form>
+            <div class="link-go">
+              <a @click="changeManage" class="first">更换管理员</a>
+              <span class="line"></span>
+              <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
+              <span class="line"></span>
+              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
+            </div>
+          </div>
+        </div>
+        <!--短信快捷登录-->
+        <div class="x-login" v-show="loginWay === 3">
+          <div id="form-wrap1" class="x-login-form">
+            <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
+              <el-form-item prop="mobile">
+                <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
+              </el-form-item>
+              <el-form-item prop="code" class="fastMsg">
+                <el-input type="text" v-model="fastLogin.code"
+                          auto-complete="off" placeholder="验证码"></el-input>
+                <el-button type="primary" class="fastCode"
+                           v-show="sendLoginCode"
+                           @click="getCheckCode">获取验证码</el-button>
+                <el-button type="primary"  v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn login"
+                   @click="fastToLogin(true)">登录</a>
+              </el-form-item>
+            </el-form>
+            <div class="link-go">
+              <a @click="changeManage" class="first">更换管理员</a>
+              <span class="line"></span>
+              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
+            </div>
+          </div>
+        </div>
+        <!--微信扫码登录-->
+        <div class="x-login scan-login" v-show="loginWay === 1">
+          <div class="x-login-form">
+            <div class="scan-body">
+              <div class="img">
+                <div id="login_container"></div>
+              </div>
+            </div>
+            <div class="link-go" style="padding: 0 18px 12px 0; margin-top: 0;">
+              <a @click="changeManage" class="first">更换管理员</a>
+              <span class="line"></span>
+              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
+            </div>
+          </div>
+        </div>
+        <!--绑定账号-->
+        <div class="x-login bind-login" v-show="loginWay === 2">
+          <div class="x-login-form">
+            <div class="bind-header">
+              <span>绑定已有账号</span>
+              <span @click="loginWay = 0">返回</span>
+            </div>
+            <div class="bind-body">
+              <div class="img"><img :src="wxImg" alt=""/><div>{{wxName}}</div></div>
+              <div>
+                <el-form :model="bindAccount" :rules="rules4" ref="bindAccount" class="demo-ruleForm login-form">
+                  <el-form-item prop="username" style="margin: 0 auto 10px !important;">
+                    <el-input type="text"
+                              v-model="bindAccount.username"
+                              auto-complete="off"
+                              placeholder="请输入用户名、手机号或邮箱"></el-input>
+                  </el-form-item>
+                  <el-form-item prop="password" style="margin: 0 auto 10px !important;">
+                    <el-input type="password"
+                              v-model="bindAccount.password"
+                              auto-complete="new-password"
+                              placeholder="密码"
+                              @keyup.enter.native="wxBind"></el-input>
+                  </el-form-item>
+                  <el-form-item  style="margin: 0 auto!important;">
+                    <a class="btn login"
+                       @click="wxBind">确定绑定已有账号</a>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <div class="set">还没有优软账号，直接 <a :href="`/register/enterpriseRegistration${this.$store.state.option.fullPath}&tk=${wxToken}`">创建新账号</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--选择企业弹框-->
+      <div>
+        <el-dialog class="dialog"
+                   :visible.sync="dialogVisible"
+                   size="tiny">
+          <div class="x-floating x-list" v-show="dialogVisible">
+            <div class="x-list-header">您要登录的公司是：</div>
+            <div class="x-list-content">
+              <ul class="list-unstyled" >
+                <template v-for="space in this.enterprise">
+                  <li v-text="space.name" @click="chooseOneEnterprise(false, space.id)">华商龙科技有限公司</li>
+                </template>
+              </ul>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </template>
+    <loading v-show="isShowLoading"/>
+  </div>
+</template>
+
+<script>
+  import Loading from '~components/common/loading/Loading.vue'
+  var wxLogin = function () {}
+  export default {
+    layout: 'sass',
+    components: {
+      Loading
+    },
+    data () {
+      // 用户名密码登录
+      var validateUsername = (rule, value, callback) => {
+        if (value === '') {
+          this.checkUsername = false
+          this.showCheckCode = false
+        } else {
+          if (this.login.username !== '') {
+            //    获取密码输错次数
+            this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
+              .then(response => {
+                if (response.data.success) {
+                  this.showCheckCode = false
+                  let getPasswordErrorCount = response.data.content || ''
+                  if (getPasswordErrorCount >= 5) {
+                    this.$message.error('密码错误次数已达上限，今日无法登录')
+                    this.isLoginDisabled = true
+                    this.showCheckCode = false
+                  } else if (getPasswordErrorCount < 3) {
+                    this.isLoginDisabled = false
+                    this.checkUsername = true
+                    this.showCheckCode = false
+                  } else if (getPasswordErrorCount >= 3 && getPasswordErrorCount < 5) {
+                    if (getPasswordErrorCount === 3) {
+                      this.$message.error('当前已输错密码3次，若达到5次今日将无法登录')
+                    }
+                    if (getPasswordErrorCount === 4) {
+                      this.$message.error('当前已输错密码4次，若达到5次今日将无法登录')
+                    }
+                    this.isLoginDisabled = false
+                    this.checkUsername = true
+                    this.showCheckCode = true
+                  } else {
+                    this.checkUsername = false
+                    this.showCheckCode = false
+                  }
+                } else {
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.isShowLoading = false
+                this.$message.error(err.errMsg)
+              })
+          }
+          callback()
+        }
+      }
+      var validatePassword = (rule, value, callback) => {
+        if (value === '') {
+          this.checkPassword = false
+        } else {
+          if (this.login.password !== '') {
+            this.checkPassword = true
+          }
+          callback()
+        }
+      }
+      // 短信便捷登录
+      var validateMobile = (rule, value, callback) => {
+        if (value === '') {
+          this.checkMobile = false
+        } else {
+          if (this.fastLogin.mobile) {
+            this.checkMobile = true
+          }
+          callback()
+        }
+      }
+      var validateCode = (rule, value, callback) => {
+        if (value === '') {
+          this.checkCode = false
+        } else {
+          if (this.fastLogin.code !== '') {
+            this.checkCode = true
+          }
+          callback()
+        }
+      }
+      // 微信扫码登录
+      var validateWeiUsername = (rule, value, callback) => {
+        if (value === '') {
+          this.checkWeiUsername = false
+        } else {
+          if (this.bindAccount.username !== '') {
+            this.checkWeiUsername = true
+          }
+          callback()
+        }
+      }
+      var validateWeiPassword = (rule, value, callback) => {
+        if (value === '') {
+          this.checkWeiPassword = false
+        } else {
+          if (this.bindAccount.password !== '') {
+            this.checkWeiPassword = true
+          }
+          callback()
+        }
+      }
+      return {
+        login: {
+          username: '',
+          password: '',
+          captcha: '',
+          spaceUU: ''
+        },
+        fastLogin: {
+          mobile: '',
+          code: ''
+        },
+        bindAccount: {
+          username: '',
+          password: ''
+        },
+        loginWay: 0,
+        checked: true,
+        isShowLoading: false,
+        checkUsername: false,
+        checkPassword: false,
+        showCheckCode: false,
+        isLoginDisabled: false,
+        dialogVisible: false,
+        queryLink: '',
+        checkMobile: false,
+        getCodeBtnIsDisabled: true,
+        sendLoginCode: true,
+        login_time: 0,
+        token: '',
+        checkCode: false,
+        checkWeiUsername: false,
+        checkWeiPassword: false,
+        wxToken: '',
+        wxImg: '',
+        wxName: '',
+        wxUrl: '',
+        // 用户名密码登录
+        rules2: {
+          username: [
+            {validator: validateUsername, trigger: 'blur'}
+          ],
+          password: [
+            {validator: validatePassword, trigger: 'blur'}
+          ]
+        },
+        // 短信快捷登录
+        rules3: {
+          mobile: [
+            {validator: validateMobile, trigger: 'blur'}
+          ],
+          code: [
+            {validator: validateCode, trigger: 'blur'}
+          ]
+        },
+        // 微信扫码登录
+        rules4: {
+          username: [
+            {validator: validateWeiUsername, trigger: 'blur'}
+          ],
+          password: [
+            {validator: validateWeiPassword, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.getUrl()
+        this.validUserName()
+        if (this.$route.query.code) {
+          this.wxEnterprise()
+        }
+      })
+    },
+    computed: {
+      enterprise () {
+        let chooseEnterprise = this.$store.state.login.chooseRegisterEnterprise.choose.data
+        return chooseEnterprise
+      },
+      loginStyle () {
+        return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
+      }
+    },
+    methods: {
+      toggleTab (type) {
+        this.loginWay = type
+        this.login.username = ''
+        this.login.password = ''
+        this.fastLogin.mobile = ''
+        this.fastLogin.code = ''
+      },
+      ShowWechatCoe () {
+        wxLogin()
+        this.loginWay = 1
+      },
+      // 获取用户错误次数
+      validUserName () {
+        if (this.login.username) {
+          //    获取密码输错次数
+          this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
+            .then(response => {
+              if (response.data.success) {
+                let getPasswordErrorCount = response.data.content || ''
+                if (getPasswordErrorCount >= 5) {
+                  this.$message.error('密码错误次数已达上限，今日无法登录')
+                  this.isLoginDisabled = true
+                  this.showCheckCode = false
+                } else if (getPasswordErrorCount < 3) {
+                  this.isLoginDisabled = false
+                  this.checkUsername = true
+                  this.showCheckCode = false
+                } else if (getPasswordErrorCount >= 3 && getPasswordErrorCount < 5) {
+                  if (getPasswordErrorCount === 3) {
+                    this.$message.error('当前已输错密码3次，若达到5次今日将无法登录')
+                  }
+                  if (getPasswordErrorCount === 4) {
+                    this.$message.error('当前已输错密码4次，若达到5次今日将无法登录')
+                  }
+                  this.isLoginDisabled = false
+                  this.checkUsername = true
+                  this.showCheckCode = true
+                } else {
+                  this.checkUsername = false
+                  this.showCheckCode = false
+                }
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+      // 更换管理员
+      changeManage () {
+        window.location.href = `appeals/changeManagerAppeal${this.$store.state.option.fullPath}`
+      },
+//      获取url参数
+      getUrl () {
+        let wUrl = ''
+        if (this.$route.query) {
+          for (var key in this.$route.query) {
+            if (key !== 'code' && key !== 'state' && key !== 'type') {
+              wUrl += `${key}=${encodeURIComponent(this.$route.query[key])}&`
+            }
+          }
+        }
+        if (this.$route.query) {
+          this.wxUrl = `${window.location.origin}?${wUrl.substr(0, wUrl.length - 1)}`
+        } else {
+          this.wxUrl = `${window.location.origin}`
+        }
+        var url = window.location.search
+        var request = {}
+        if (url.indexOf('?' !== -1)) {
+          var str = url.substr(1)
+          var strs = str.split('&')
+          this.queryLink = str
+          for (var i = 0; i < strs.length; i++) {
+            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+          }
+        }
+        this.appId = request['appId'] || ''
+        this.returnUrl = request['returnURL'] || ''
+        this.baseUrl = request['baseUrl'] || ''
+      },
+      goForgetPassword () {
+        let url = `/reset/forgetPasswordValidationAccount${this.queryLink ? '?' + this.queryLink : ''}`
+        document.getElementById('forget').href = url
+      },
+      //    获取验证码
+      getCode () {
+        var imgSrc = document.getElementById('captchaImage')
+        imgSrc.setAttribute('src', '/sso/login/checkCode?timestamp=' + (new Date()).valueOf())
+      },
+//      登录
+      isLogin (flag) {
+        this.isShowLoading = true
+        if (!this.login.username) {
+          this.isShowLoading = false
+          this.$message.error('请填写账号')
+        } else if (!this.login.password) {
+          this.isShowLoading = false
+          this.$message.error('请填写密码')
+        } else {
+          let param = new FormData()
+          param.append('username', this.login.username)
+          param.append('password', this.login.password)
+          param.append('captcha', this.login.captcha)
+          param.append('spaceUU', '1')
+          param.append('appId', this.appId ? this.appId : '')
+          param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
+          param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
+          param.append('maxage', this.checked ? 2592000 : '')
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/login', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                if (response.data.content.spaces) {
+//                   弹框让用户选择企业
+                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
+                  this.dialogVisible = flag
+                } else if (response.data.content.loginUrls) {
+//                  遍历登录url循环让各应用登录(需要跨域)
+                  let param = response.data.content.data
+                  let a = ''
+                  for (let n in param) {
+                    a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                  }
+                  let params = a.substr(0, a.length - 1)
+                  this.isShowLoading = true
+                  if (response.data.content.currentUrl) {
+                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                      name: 'successCallback',
+                      timeout: 3000
+                    }, (err, data) => {
+                      if (err) {
+                        this.$message.error('登录超时，请重试')
+                        this.isShowLoading = false
+                        throw err
+                      } else {
+                        this.loginOther(response, params)
+                      }
+                    })
+                  } else {
+                    this.loginOther(response, params, 3000)
+                  }
+                }
+              } else {
+                this.$message.error(response.data)
+                var count = response.data.errorCount
+                if (count < 3) {
+                  this.showCheckCode = false
+                  this.isLoginDisabled = false
+                } else if (count >= 5) {
+                  this.$message.error('密码错误次数已达上限，今日无法登录')
+                  this.isLoginDisabled = true
+                  this.showCheckCode = false
+                } else if (count >= 3 && count < 5) {
+                  this.getCode()
+                  if (count === 3) {
+                    this.$message.error('当前已输错密码3次，若达到5次今日将无法登录')
+                  }
+                  this.showCheckCode = true
+                  this.isLoginDisabled = false
+                }
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.isShowLoading = false
+              let _this = this
+              setTimeout(function () {
+                _this.getCode()
+              }, 100)
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+      // 选择账套
+      // chooseOneEnterprise (flag, spaceUU) {
+      //   this.login.spaceUU = spaceUU
+      //   this.dialogVisible = false
+      //   if (this.$route.query.code) {
+      //     this.wxEnterprise(flag)
+      //   } else {
+      //     if (this.loginWay === 0) {
+      //       this.isLogin(flag)
+      //     }
+      //     if (this.loginWay === 3) {
+      //       this.fastToLogin(flag)
+      //     }
+      //   }
+      // },
+      // 短信快捷登录
+      fastToLogin (flag) {
+        this.isShowLoading = true
+        if (!this.fastLogin.mobile) {
+          this.isShowLoading = false
+          this.$message.error('请填写手机号')
+        } else {
+          let param = new FormData()
+          param.append('mobile', this.fastLogin.mobile)
+          param.append('code', this.fastLogin.code)
+          param.append('appId', this.appId)
+          param.append('token', this.token)
+          param.append('spaceUU', 1)
+          param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
+          param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/login/sms', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                if (response.data.content.spaces) {
+//                   弹框让用户选择企业
+                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
+                  this.dialogVisible = flag
+                } else if (response.data.content.loginUrls) {
+//                  遍历登录url循环让各应用登录(需要跨域)
+                  let param = response.data.content.data
+                  let a = ''
+                  for (let n in param) {
+                    a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                  }
+                  let params = a.substr(0, a.length - 1)
+                  this.isShowLoading = true
+                  if (response.data.content.currentUrl) {
+                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                      name: 'successCallback',
+                      timeout: 3000
+                    }, (err, data) => {
+                      if (err) {
+                        this.$message.error('登录超时，请重试')
+                        this.isShowLoading = false
+                        throw err
+                      } else {
+                        this.loginOther(response, params)
+                      }
+                    })
+                  } else {
+                    this.loginOther(response, params, 3000)
+                  }
+                }
+              } else {
+                this.$message.error(response.data)
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.isShowLoading = false
+              let _this = this
+              setTimeout(function () {
+                _this.getCode()
+              }, 100)
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+      getJsonp: function (url, timeout = 500) {
+        return new Promise((resolve, reject) => {
+          this.$jsonp(url, {
+            name: 'successCallback',
+            timeout: timeout
+          }, function (err, data) {
+            if (err) {
+              reject(err)
+              throw err
+            } else {
+              resolve(data)
+            }
+          })
+        })
+      },
+      crossAfter (url) {
+        try {
+          window.location.href = url
+        } catch (err) {
+          console.log(err)
+        }
+      },
+      loginOther (response, a, timeout) {
+        const crossAfter = this.crossAfter
+        let promises = []
+        for (let i in response.data.content.loginUrls) {
+          if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
+            promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
+          }
+        }
+        Promise.all(promises).then(() => {
+          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
+        }).catch(() => {
+          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
+        })
+      },
+      getCheckCode () {
+        this.isShowLoading = true
+        if (!this.fastLogin.mobile) {
+          this.isShowLoading = false
+          this.$message.error('请先填写手机号')
+        } else {
+          if (this.checkMobile) {
+            this.$http.get(`/sso/login/sendSmsCode`, {params: {mobile: this.fastLogin.mobile}})
+              .then(response => {
+                this.isShowLoading = false
+                if (response.data) {
+                  if (response.data.success) {
+                    this.token = response.data.content.token
+                    this.$message({
+                      message: '验证码已经发送到您的手机，请注意查收',
+                      type: 'success'
+                    })
+                    this.sendLoginCode = false
+                    this.login_time = 60
+                    var loginTime = setInterval(() => {
+                      this.login_time--
+                      if (this.login_time <= 0) {
+                        this.sendLoginCode = true
+                        clearInterval(loginTime)
+                      }
+                    }, 1000)
+                  } else {
+                    this.$message.error(response.data.errMsg)
+                  }
+                } else {
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.isShowLoading = false
+                this.$message.error(err.errMsg)
+              })
+          } else {
+            this.isShowLoading = false
+          }
+        }
+      },
+      // 微信判断绑定和账套选择
+      wxEnterprise () {
+        this.isShowLoading = true
+        if (this.$route.query.code) {
+          let param = new FormData()
+          param.append('code', this.$route.query.code ? this.$route.query.code : '')
+          param.append('type', 'wx')
+          param.append('state', this.$route.query.state ? this.$route.query.state : '')
+          param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
+          param.append('returnUrl', this.$route.query.returnURL ? this.$route.query.returnURL : '')
+          param.append('baseUrl', this.$route.query.baseUrl ? this.$route.query.baseUrl : '')
+          param.append('spaceUU', 1)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/login/foreignLogin', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                if (!response.data.content.hasRegister && response.data.content.token) {
+                  this.loginWay = 2
+                  this.wxToken = response.data.content.token
+                  this.$http.get(`/foreign/userInfo/${this.wxToken}`, {params: {token: this.wxToken}})
+                    .then(response => {
+                      if (response.data.success) {
+                        this.wxImg = response.data.content.foreignUserImg
+                        this.wxName = response.data.content.foreignUserName
+                      } else {
+                        return Promise.reject(response.data)
+                      }
+                    }).catch(err => {
+                      this.$message.error(err.errMsg)
+                    })
+                } else if (response.data.content.spaces) {
+//                   弹框让用户选择企业
+                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
+                  this.dialogVisible = true
+                } else if (response.data.content.loginUrls) {
+//                  遍历登录url循环让各应用登录(需要跨域)
+                  let param = response.data.content.data
+                  let a = ''
+                  for (let n in param) {
+                    a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                  }
+                  let params = a.substr(0, a.length - 1)
+                  this.isShowLoading = true
+                  if (response.data.content.currentUrl) {
+                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                      name: 'successCallback',
+                      timeout: 3000
+                    }, (err, data) => {
+                      if (err) {
+                        this.$message.error('登录超时，请重试')
+                        this.isShowLoading = false
+                        throw err
+                      } else {
+                        this.loginOther(response, params)
+                      }
+                    })
+                  } else {
+                    this.loginOther(response, params, 3000)
+                  }
+                }
+              } else {
+                this.$message.error(response.data)
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.isShowLoading = false
+              let _this = this
+              setTimeout(function () {
+                _this.getCode()
+              }, 100)
+              this.$message.error(err.errMsg)
+            })
+        }
+      },
+      // 微信扫码登录
+      getScan () {
+        // this.loginWay = 1
+        this.isShowLoading = true
+        this.$http.get('/weChat/getQrUrl', {params: {appId: this.$route.query.appId, url: this.wxUrl}})
+          .then(response => {
+            this.isShowLoading = false
+            if (response.data.success) {
+              window.location.href = response.data.content
+            } else {
+              return Promise.reject(response.data)
+            }
+          }).catch(err => {
+            this.isShowLoading = false
+            this.$message.error(err.errMsg)
+          })
+      },
+      // 绑定企业
+      wxBind () {
+        this.isShowLoading = true
+        if (!this.bindAccount.username) {
+          this.isShowLoading = false
+          this.$message.error('请填写账号')
+        } else if (!this.bindAccount.password) {
+          this.isShowLoading = false
+          this.$message.error('请填写密码')
+        } else {
+          let param = new FormData()
+          param.append('_operate', 'account')
+          param.append('t', this.wxToken)
+          param.append('username', this.bindAccount.username)
+          param.append('password', this.bindAccount.password)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/foreign/addAccount', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                this.wxEnterprise()
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.isShowLoading = false
+              this.$message.error(err.errMsg)
+            })
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" type="text/scss">
+ .x-container {
+   width: 346px;
+   margin: 0 auto;
+   text-align: center;
+   background: #FFFFFF;
+   box-shadow: 0 22px 24px 0 rgba(0,0,0,0.08);
+   border-radius: 3px;
+   .login-tab {
+     margin-bottom: 30px;
+     width: 100%;
+     height: 50px;
+     line-height: 50px;
+     border-bottom: 1px solid #dcdcdc;
+     span{
+       display: inline-block;
+       width: 30%;
+       font-size: 16px;
+       color: #999;
+       cursor: pointer;
+       &.active{
+         color: #333;
+         border-bottom: 2px solid #282828;
+       }
+     }
+   }
+   .x-login {
+     width: 100%;
+     .x-login-form {
+       .btn.login{
+         width: 306px;
+         height: 34px;
+         background: #5078cb;
+         color: #fff;
+         font-weight: 700;
+         letter-spacing: 4px;
+         border-radius: 0;
+       }
+       .text-position{
+         .el-form-item__content .el-checkbox{
+           margin-left: 0!important;
+         }
+       }
+     }
+     .link-go {
+       position: relative;
+       text-align: right;
+       margin-top: 35px;
+       padding: 0 21px 20px 0;
+       a{
+         margin-left: 20px;
+         font-size: 14px;
+         color: #999;
+         background: 0 0;
+         text-decoration: none;
+         outline: 0;
+         cursor: pointer;
+       }
+       span{
+         position: absolute;
+         top: 1px;
+         display: inline-block;
+         margin: 0 10px;
+         width: 2px;
+         height: 15px;
+         background-color: #ddd;
+       }
+     }
+   }
+ }
+</style>

pages/sassLogin/register.vue

@@ -0,0 +1,662 @@
+<template>
+  <div class="go-register register">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>注册</h3>
+        </div>
+        <div>
+          <el-form :model="item" :rules="rules2" ref="item" label-width="100px" class="demo-ruleForm">
+            <div>
+
+            </div>
+            <el-form-item prop="mobile" class="mobile">
+              <el-input v-model="item.mobile"
+                        v-bind:class="{active: mobileRegister}"
+                        placeholder="手机号码"></el-input>
+              <span class="err-tip-msg tip" v-show="showMsgTip">单个手机号只能注册一个用户</span>
+              <span class="err-tip-msg tip tip-mobile" v-show="mobileRegister">该手机号已被注册</span>
+            </el-form-item>
+            <el-form-item prop="captcha" class="captcha" style="overflow: hidden">
+              <el-input type="text"
+                        v-model="ImgCode"
+                        auto-complete="off"
+                        class="code-input"
+                        @keyup.enter.native="getCheckCode"></el-input>
+              <img id="captchaImage2" class="code-img" src="/sso/login/checkCode"/>
+              <a class="code-click" @click="getCode">看不清换一张</a>
+            </el-form-item>
+            <el-form-item prop="code">
+              <el-input type="text" v-model="item.code"
+                        v-bind:class="{ active: codeErrorChecked }" auto-complete="off" class="msg" placeholder="短信验证码"></el-input>
+              <el-button type="primary" class="code"
+                         v-show="sendPersonalCode"
+                         @click="getCheckCode"
+                         :disabled="this.checkMobile">获取验证码</el-button>
+              <el-button type="primary"  v-show="!sendPersonalCode" class="code code-send">已发送({{personal_time}}s)</el-button>
+              <span v-show="codeErrorChecked" class="codeError-tip">{{codeErrorMsg}}</span>
+            </el-form-item>
+            <el-form-item class="agree">
+              <el-checkbox name="type" v-model="checked" @click="checkboxChecked"></el-checkbox>
+              <span class="agree" v-if="!agreementUrl || (agreementUrl && (JSON.parse(agreementUrl.terms).isUrl))">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
+              <span class="agree" v-else>我已阅读并同意<a :href="`/common/cityAgreement/?appId=${this.$route.query.appId}`">《{{JSON.parse(agreementUrl.terms).name || ''}}》</a></span>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish" @click="waySubmit">确认注册</a>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="login">已有账号？<a :href="returnLogin">立即登录</a></div>
+      <loading v-show="isShowLoading"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import md5 from 'js-md5'
+  import Loading from '~components/common/loading/Loading.vue'
+  export default {
+    name: 'PersonalRegistration',
+    layout: 'sass',
+    components: {
+      Loading
+    },
+    data () {
+      var validateMobile = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的手机号'))
+          this.showMsgTip = false
+          this.checkMobile = true
+          this.mobileRegister = false
+          this.mobileChecked = false
+        } else {
+          if (this.item.mobile !== '') {
+            var reg = /^1([0-9]{10})$/
+            if (!reg.test(value)) {
+              callback(new Error('请填写正确的手机号'))
+              this.showMsgTip = false
+              this.checkMobile = true
+              this.mobileRegister = false
+              this.mobileChecked = false
+            } else {
+              this.$http.get(`/api/user/checkMobile`, {params: {mobile: this.item.mobile, mobileArea: ''}})
+                .then(response => {
+                  if (response.data.hasRegister) {
+                    this.mobileRegister = true
+                    this.showMsgTip = false
+                    this.checkMobile = true
+                    this.mobileChecked = false
+                  } else {
+                    this.showMsgTip = false
+                    this.checkMobile = false
+                    this.mobileRegister = false
+                    this.mobileChecked = true
+                  }
+                })
+            }
+          }
+          callback()
+        }
+      }
+      var validateCode = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.codeErrorChecked = false
+          this.codeChecked = false
+        } else {
+          if (this.item.mobile === '') {
+            callback(new Error('请先填写正确的手机号'))
+          } else {
+            if (this.token) {
+              if (this.item.code.length === 6) {
+                let param = new FormData()
+                param.append('mobile', this.item.mobile)
+                param.append('code', this.item.code)
+                param.append('token', this.token)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post(`/sso/personal/register/checkCode`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.codeChecked = true
+                      this.codeErrorChecked = false
+                    } else {
+                      this.codeErrorChecked = true
+                      this.codeChecked = false
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.codeErrorMsg = err.errMsg
+                  })
+              } else {
+                callback(new Error('请输入正确的验证码'))
+                this.codeChecked = false
+                this.codeErrorChecked = false
+              }
+            } else {
+              callback(new Error('请先获取验证码'))
+              this.codeChecked = false
+              this.codeErrorChecked = false
+            }
+          }
+          callback()
+        }
+      }
+      var validateCodeIsEmpty = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.codeErrorChecked = false
+          this.codeChecked = false
+        } else {
+          if (this.item.mobile === '') {
+            callback(new Error('请先填写正确的手机号'))
+          } else {
+            if (this.token) {
+              if (this.item.code.length === 6) {
+                let param = new FormData()
+                param.append('mobile', this.item.mobile)
+                param.append('code', this.item.code)
+                param.append('token', this.token)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post(`/sso/personal/register/checkCode`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.codeChecked = true
+                      this.codeErrorChecked = false
+                    } else {
+                      this.codeErrorChecked = true
+                      this.codeChecked = false
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.codeErrorMsg = err.errMsg
+                  })
+              } else {
+                callback(new Error('请输入正确的验证码'))
+                this.codeChecked = false
+                this.codeErrorChecked = false
+              }
+            } else {
+              callback(new Error('请先获取验证码'))
+              this.codeChecked = false
+              this.codeErrorChecked = false
+            }
+          }
+          callback()
+        }
+      }
+      return {
+        speediness: false,
+        ImgCode: '',
+        item: {
+          mobile: '',
+          code: ''
+        },
+        isShowLoading: false,
+        showPasswordError: false,
+        mobileChecked: false,
+        codeChecked: false,
+        codeErrorChecked: false,
+        showMsgTip: true,
+        checkMobile: true,
+        checked: true,
+        token: '',
+        mobileRegister: false,
+        sendPersonalCode: true,
+        codeErrorMsg: '',
+        personal_time: 0,
+        queryLink: '',
+        appId: '',
+        returnLogin: '',
+        rules2: {
+          mobile: [
+            { validator: validateMobile, trigger: 'blur' }
+          ],
+          code: [
+            { validator: validateCode, trigger: 'change' },
+            { validator: validateCodeIsEmpty, trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    mounted () {
+//      获取链接
+      this.$nextTick(() => {
+        this.getUrl()
+        this.getCode()
+      })
+    },
+    computed: {
+      loginStyle () {
+        return this.$store.state.login.loginStyle.data.content
+      },
+      agreementUrl () {
+        return this.$store.state.login.agreementUrl.data.content
+      }
+    },
+    methods: {
+      // 获取链接
+      getUrl () {
+        var url = window.location.search
+        var request = {}
+        var origin = window.location.origin
+        this.returnLogin = origin + url
+        if (url.indexOf('?' !== -1)) {
+          var str = url.substr(1)
+          var strs = str.split('&')
+          this.queryLink = str
+          for (var i = 0; i < strs.length; i++) {
+            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+          }
+        }
+        this.appId = request['appId'] || ''
+      },
+      // 注册
+      goRegister () {
+        window.location.href = `/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`
+      },
+//      我同意是否被选中
+      checkboxChecked () {
+        this.checked = !this.checked
+      },
+      // 快速登录
+      waySubmit () {
+        if (this.mobileChecked && this.codeChecked && this.checked) {
+          this.isShowLoading = true
+          let param = new FormData()
+          param.append('mobile', this.item.mobile)
+          param.append('appId', this.appId)
+          param.append('code', this.item.code)
+          param.append('token', this.token)
+          param.append('t', this.$route.query.tk ? this.$route.query.tk : '')
+          if (this.$route.query.baseUrl) {
+            param.append('baseUrl', this.$route.query.baseUrl)
+          }
+          if (this.$route.query.returnURL) {
+            param.append('returnUrl', this.$route.query.returnURL)
+          }
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/personal/register/sms', param, config)
+            .then(response => {
+              this.isShowLoading = false
+              if (response.data.success) {
+                if (response.data.content.type) {
+                  if (response.data.content.type === 'mall') {
+                    let param = response.data.content.data
+                    let a = ''
+                    for (let n in param) {
+                      a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                    }
+                    let params = a.substr(0, a.length - 1)
+                    this.isShowLoading = true
+                    if (response.data.content.currentUrl) {
+                      this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                        name: 'successCallback',
+                        timeout: 3000
+                      }, (err, data) => {
+                        if (err) {
+                          this.$message.error('注册成功，请点击下方“立即登录”完成登录')
+                          this.isShowLoading = false
+                          throw err
+                        } else {
+                          this.loginOther(response, params)
+                        }
+                      })
+                    } else {
+                      this.loginOther(response, params, 3000)
+                    }
+                  } else if (response.data.content.type === 'city') {
+                    let param = response.data.content.data
+                    let a = ''
+                    for (let n in param) {
+                      a += (n + '=' + encodeURIComponent(param[n]) + '&')
+                    }
+                    let params = a.substr(0, a.length - 1)
+                    this.isShowLoading = true
+                    if (response.data.content.currentUrl) {
+                      this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
+                        name: 'successCallback',
+                        timeout: 3000
+                      }, (err, data) => {
+                        if (err) {
+                          this.$message.error('注册成功，请点击下方“立即登录”完成登录')
+                          this.isShowLoading = false
+                          throw err
+                        } else {
+                          this.loginCityOther(response, params)
+                        }
+                      })
+                    } else {
+                      this.loginCityOther(response, params, 3000)
+                    }
+                  }
+                } else {
+                  let userUU = response.data.content.userUU
+                  console.log(userUU)
+                  window.location.href = `/overRegister/${userUU}`
+                }
+              } else {
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+              this.isShowLoading = false
+              this.personal_time = 0
+            })
+        } else {
+          if (!this.item.mobile) {
+            this.$message.error('手机号不能为空')
+          } else if (!this.mobileChecked) {
+            this.$message.error('手机号输入有误，请按提示重新输入')
+          } else if (!this.token) {
+            this.$message.error('请先获取验证码')
+          } else if (!this.item.code) {
+            this.$message.error('验证码不能为空')
+          } else if (!this.codeChecked) {
+            this.$message.error('验证码输入有误，请按提示重新输入')
+          } else if (!this.checked) {
+            this.$message.error('您对阅读条款未做勾选')
+          }
+        }
+      },
+      //    获取验证码
+      getCode () {
+        let imgSrc = document.getElementById('captchaImage2')
+        imgSrc.setAttribute('src', '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf())
+      },
+      getCheckCode () {
+        let md5Code = md5(`{mobile=${this.item.mobile},code=${this.ImgCode},salt=sso}`)
+        this.isShowLoading = true
+        this.$http.get(`/sso/personal/register/checkCode`, {params: {mobile: this.item.mobile, timestamp: new Date().getTime() + '', code: this.ImgCode, sign: md5Code}})
+          .then(response => {
+            this.isShowLoading = false
+            if (response.data) {
+              this.token = response.data.token
+              if (response.data.errMsg) {
+                this.$message({
+                  message: response.data.errMsg,
+                  type: 'error'
+                })
+                this.ImgCode = ''
+                this.getCode()
+                return
+              }
+              if (this.token !== '') {
+                this.$message({
+                  message: '验证码已经发送到您的手机，请注意查收',
+                  type: 'success'
+                })
+                this.sendPersonalCode = false
+                this.personal_time = 60
+                var personalTime = setInterval(() => {
+                  this.personal_time--
+                  if (this.personal_time <= 0) {
+                    this.sendPersonalCode = true
+                    clearInterval(personalTime)
+                  }
+                }, 1000)
+              }
+            } else {
+              return Promise.reject(response.data)
+            }
+          }).catch(err => {
+            this.isShowLoading = false
+            this.$message.error(err.errMsg)
+          })
+      },
+      getJsonp: function (url, timeout = 500) {
+        return new Promise((resolve, reject) => {
+          this.$jsonp(url, {
+            name: 'successCallback',
+            timeout: timeout
+          }, function (err, data) {
+            if (err) {
+              reject(err)
+              throw err
+            } else {
+              resolve(data)
+            }
+          })
+        })
+      },
+      crossAfter (url) {
+        try {
+          window.location.href = url
+        } catch (err) {
+          console.log(err)
+        }
+      },
+      loginOther (response, a, timeout) {
+        const crossAfter = this.crossAfter
+        let promises = []
+        for (let i in response.data.content.loginUrls) {
+          if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
+            promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
+          }
+        }
+        let returnUrl = decodeURIComponent(this.$route.query.returnURL)
+        Promise.all(promises).then(() => {
+          crossAfter(returnUrl || 'http://www.ubtob.com', timeout)
+        }).catch(() => {
+          crossAfter(returnUrl || 'http://www.ubtob.com', timeout)
+        })
+      },
+      loginCityOther (response, a, timeout) {
+        const crossAfter = this.crossAfter
+        let promises = []
+        for (let i in response.data.content.loginUrls) {
+          if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
+            promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
+          }
+        }
+        Promise.all(promises).then(() => {
+          crossAfter('/overRegister/cityRegisterOver/' + this.$store.state.option.fullPath || '/overRegister/cityRegisterOver/' + this.$store.state.option.fullPath, timeout)
+        }).catch(() => {
+          crossAfter('/overRegister/cityRegisterOver/' + this.$store.state.option.fullPath || '/overRegister/cityRegisterOver/' + this.$store.state.option.fullPath, timeout)
+        })
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .register {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+    .container{
+      padding-top: 50px;
+      margin: 0 auto;
+      width: 980px;
+      text-align: center;
+      background: #fff;
+      .content{
+        padding: 0 50px;
+        margin: 50px auto 0;
+        width: 100%;
+        text-align: center;
+        .content-top{
+          position: relative;
+          height: 80px;
+          line-height: 80px;
+          border-bottom: 1px solid #dcdcdc;
+          h3{
+            font-family: 'SimHei';
+            font-size: 24px;
+            color: #000;
+          }
+          a.go{
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 14px;
+            i{
+              margin-right: 3px;
+            }
+          }
+        }
+        .content-tab{
+          width: 360px;
+          margin: 0 auto;
+          height: 50px;
+          margin-top: 15px;
+          color: #999;
+          span{
+            display:inline-block;
+            width:50%;
+            vertical-align:top;
+            font-size:20px;
+            text-align: center;
+            line-height:40px;
+            height:40px;
+            border-bottom:2px solid #fff;
+            cursor:pointer;
+            &.speed{
+              color:#3375a7;
+              border-bottom:2px solid #3375a7;
+            }
+          }
+        }
+        form {
+          padding-bottom: 44px;
+          margin-top: 15px;
+          input{
+            padding: 0 0 0 18px;
+            width: 360px;
+            height: 44px;
+            line-height: 44px;
+            font-size: 14px;
+            color: #000;
+            border-radius: 0;
+          }
+          span.help{
+            position: absolute;
+            right: -230px;
+            top:0;
+            font-size: 12px;
+            color: #f00;
+          }
+          i.fa{
+            position: absolute;
+            top: 10px;
+            right: 18px;
+            font-size: 24px;
+            color: #a0a0a0;
+            cursor: pointer;
+          }
+          span.tip{
+            position: absolute;
+            top: 40px;
+            left: 0;
+            font-size: 12px;
+            color: #8c8c8c;
+            &.tip-mobile{
+              color: #ff4949;
+            }
+          }
+          .el-form-item__error {
+            position: static;
+            margin: 0 auto;
+            text-align: left;
+          }
+          span.codeError-tip{
+            position: absolute;
+            top: 3px;
+            left: 378px;
+            width: 200px;
+            text-align: left;
+            color: #ff4949;
+            font-size: 12px;
+          }
+          span.tip.passwordError{
+            position: absolute;
+            top: 3px;
+            left: 380px;
+            width: 200px;
+            text-align: left;
+            color: #ff4949;
+            font-size: 12px;
+          }
+          input.msg{
+            float: left;
+            width: 210px;
+          }
+          button.msg{
+            float: right;
+            width: 130px;
+            height: 44px;
+            font-size: 14px;
+            color: #5a5a5a;
+            background: #f4f4f4;
+            border: 1px solid #dcdcdc;
+            cursor: pointer;
+            &:disabled{
+              cursor: not-allowed ;
+              opacity: .7;
+            }
+          }
+          span.msg.send{
+            float: right;
+            width: 130px;
+            height: 44px;
+            line-height: 44px;
+            font-size: 14px;
+            background: #d2d2d2;
+            color: #fff;
+            border: 1px solid #dcdcdc;
+          }
+          input[type='checkbox']{
+            margin: 0 14px 0 55px;
+            float: left;
+            width: 16px;
+            height: 16px;
+          }
+          span.agree{
+            float: left;
+            margin: 1px 0 0 10px;
+            font-size: 14px;
+            color: #8b8b8b;
+            a{
+              color: #0076ad;
+            }
+          }
+          .form-group.agree{
+            margin: 20px auto 0 !important;
+          }
+          .submitBtn {
+            display: inline-block;
+            width: 360px;
+            height: 44px;
+            line-height: 44px;
+            font-size: 16px;
+            color: #fff;
+            background: #0076AD;
+            border-radius: 3px;
+            border: none;
+            &:disabled{
+              cursor: not-allowed ;
+              opacity: .7;
+            }
+          }
+        }
+      }
+      .login{
+        margin-top: 20px;
+        font-size: 14px;
+        color: #8c8c8c;
+        a{
+          font-size: 14px;
+          color: #0076ad;
+        }
+      }
+    }
+  }
+  .footer{
+    padding: 50px 0;
+  }
+</style>