sso-ssr/components/login/Login.vue

<template>
  <div class="x-container">
    <!-- background slider -->
    <div class="x-banner-wrap">
      <div class="x-banner">
        <ul class="list-unstyled">
          <li>
            <a>
              <div class="inner">
                <div class="x-title x-text-0"></div>
                <div class="x-subtitle x-text-0"></div>
                <div class="x-btn-group">
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="x-login-wrap">
      <div class="x-login">
        <!-- user & pwd login wrap -->
        <div id="form-wrap" class="x-login-form" autocomplete="on">
          <form name="loginForm">
            <input type="hidden" name="appId" value="home">
            <input type="hidden" name="returnUrl" value="https%3A%2F%2Fwww.ubtob.com%2F">
            <input type="hidden" name="spaceId" value="">
            <input type="hidden" name="baseUrl" value="">
            <div class="form-group">
              <div class="x-has-feedback-left">
                <input type="text" class="form-control x-input" autocomplete="on" placeholder="手机号/邮箱/账号ID" name="username" required="">
                <i class="fa fa-user"></i>
              </div>
            </div>
            <div class="form-group" style="position: relative">
              <div class="x-has-feedback-left">
                <input type="password" class="form-control x-input" id="password" placeholder="密码" name="password" required="">
                <i class="fa fa-lock"></i>
              </div>
              <i class="fa fa-keyboard-o" aria-hidden="true"></i>
            </div>
            <div class="form-group" id="captchaForm" style="display: none">
              <input type="text" id="captcha" name="captcha" class="text" maxlength="10" required="">
              <img id="captchaImage" src="sso/checkcode/login">
              <a id="changeCode" href="javascript:void(0)">看不清换一张</a>
            </div>
            <div class="form-group">
              <div class="x-has-feedback-left" style="display: inline-block"></div>
              <div class="x-has-feedback-right">
                <a href="user/pwd?appId=home&amp;returnURL=https%3A%2F%2Fwww.ubtob.com%2F">忘记密码？</a>
              </div>
            </div>
            <button class="btn x-btn x-btn-primary btn-block x-btn-submit" type="button">登录</button>
          </form>
          <div class="warn-text-area">
            为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
          </div>
          <div style="text-align: right;">
            <a style="color: #5078cb;" href="sso/register_mall?appId=home&amp;returnURL=https%3A%2F%2Fwww.ubtob.com%2F">
              <i class="fa fa-arrow-circle-o-right"></i>免费注册</a>
          </div>
        </div>
        <!-- qrcode login wrap -->
        <div id="qrcode-wrap" class="x-login-qrcode">
          <div class="x-qrcode-help">
            <span>打开手机客户端，扫描下面的二维码</span>
          </div>
          <div class="x-qrcode-img">
            <img src="static/img/demo/qrcode.jpg?_v=1515216523548">
          </div>
          <div class="x-qrcode-ex">
            <ul class="list-unstyled list-inline">
              <li><i class="iconfont icon-left icon-input"></i><span>免输入</span></li>
              <li><i class="iconfont icon-left icon-fast"></i><span>更快捷</span></li>
              <li><i class="iconfont icon-left icon-safe"></i><span>更安全</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login'
  }
</script>
<style lang="scss" scoped>
  .x-container{
    position: relative;
    height: 475px;
    .x-banner-wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 475px;
      .x-banner {
        position: relative;
        overflow: auto;
        height: 475px;
        text-align: center;
        li{
          width: 100%;
          height: 475px;
          background: url(/images/all/banner.jpg) center center / auto 100% no-repeat rgb(202, 202, 214);
        }
      }
    }
    .x-login-wrap{
      position: absolute;
      top: 10px;
      right: 50%;
      margin-right: -495px;
      height: 475px;
      z-index: 5;
      .x-login {
        position: relative;
        top: 40px;
        width: 346px;
        background: #fff;
        overflow: visible;
        z-index: 4;
        .x-login-form, .x-login-qrcode {
          padding: 20px;
          .btn{
            background: #5078cb;
            color: #fff;
            font-weight: 700;
            letter-spacing: 4px;
            border-radius: 0;
          }
          .x-has-feedback-right {
            float: right;
            display: inline-block;
            a{
              color: #5078cb;
            }
          }
          .x-has-feedback-left {
            position: relative;
            .x-input {
              padding-left: 30px;
              line-height: 18px;
              color: #555;
              border-color: #ccc;
              border-radius: 0;
              box-shadow: none;
            }
            i.fa{
              position: absolute;
              top: 2px;
              left: 0;
              z-index: 2;
              display: block;
              width: 30px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              pointer-events: none;
              color: #999;
              font-size: 18px;
            }
          }
          i.fa-keyboard-o{
            position: absolute;
            right: 10px;
            top: 10px;
          }
          i.fa-arrow-circle-o-right{
            margin-right: 5px;
            font-size: 14px;
            color: #5078cb;
          }
          .warn-text-area{
            margin-top: 5px;
            font-size: 13px;
            color: #000;
          }
        }
        .x-login-qrcode{
          display: none;
        }
      }
    }
  }
</style>