saber/src/page/login/index.vue

<template>
  <div class="login-body">
      <div class="left-pic-container">
          <div class="left-pic-content">
              <div class="dt small-logo">
                  <div class="cons">
                      <img src="/img/login/bim.png" alt="" class="logos">
                      <img src="/img/login/s1.png" alt="" class="shadow1">
                  </div>
              </div>
              <div class="ds small-logo">
                  <div class="cons">
                      <img src="/img/login/gis.png" alt="" class="logos">
                      <img src="/img/login/s1.png" alt="" class="shadow1">
                  </div>
              </div>
              <div class="cc small-logo">
                  <div class="cons">
                      <img src="/img/login/bd.png" alt="" class="logos">
                      <img src="/img/login/s1.png" alt="" class="shadow1">
                  </div>
              </div>
              <div class="rp small-logo">
                  <div class="cons">
                      <img src="/img/login/ca.png" alt="" class="logos">
                      <img src="/img/login/s1.png" alt="" class="shadow1">
                  </div>
              </div>
              <div class="cube1">
                  <div class="cons">
                      <img src="/img/login/cube1.png" alt="" class="cubes">
                      <img src="/img/login/s2.png" alt="" class="shadow2">
                  </div>
              </div>
              <div class="cube2">
                  <div class="cons">
                      <img src="/img/login/cube2.png" alt="" class="cubes">
                      <img src="/img/login/s3.png" alt="" class="shadow3">
                  </div>
              </div>
              <div class="logo">
                  <a href="http://hczc.hcxxy.com/" target="_blank">
                      <div class="a-cons"/>
                  </a>
              </div>
          </div>
      </div>
      <div class="right-container">
          <div class="right-title">工程数字档案管理后台</div>
          <div class="sign-list">
              <h1 class="font-lg" style="margin-top:0">登录</h1>
              <userLogin></userLogin>
              <div class="remember-password">
                <el-checkbox v-model="checkbox" label="记住密码"/>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
  import userLogin from "./userlogin";
  import codeLogin from "./codelogin";
  import thirdLogin from "./thirdlogin";
  import {mapGetters} from "vuex";
  import {dateFormat} from "@/util/date";
  import {validatenull} from "@/util/validate";
  import topLang from "@/page/index/top/top-lang";
  import topColor from "@/page/index/top/top-color";
  import {getQueryString, getTopUrl} from "@/util/util";

  export default {
    name: "login",
    components: {
      userLogin,
      codeLogin,
      thirdLogin,
      topLang,
      topColor
    },
    data() {
      return {
        time: "",
        activeName: "user",
        socialForm: {
          tenantId: "000000",
          source: "",
          code: "",
          state: "",
        },

        checkbox:false,
      };
    },
    watch: {
      $route() {
        this.handleLogin();
      }
    },
    created() {
      this.handleLogin();
      this.getTime();
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website", "tagWel"])
    },
    props: [],
    methods: {
      getTime() {
        setInterval(() => {
          this.time = dateFormat(new Date());
        }, 1000);
      },
      handleLogin() {
        const topUrl = getTopUrl();
        const redirectUrl = "/oauth/redirect/";
        this.socialForm.source = getQueryString("source");
        this.socialForm.code = getQueryString("code");
        this.socialForm.state = getQueryString("state");
        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
          let source = topUrl.split("?")[0];
          source = source.split(redirectUrl)[1];
          this.socialForm.source = source;
        }
        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
          const loading = this.$loading({
            lock: true,
            text: '第三方系统登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
            window.location.href = topUrl.split(redirectUrl)[0];
            this.$router.push({path: this.tagWel.value});
            loading.close();
          }).catch(() => {
            loading.close();
          });
        }
      }
    }
  };
</script>

<style lang="scss">
  .login-body {
    position: relative;
    background-color: #F0FBFF;
    width: 100%;
    height: 100vh;
    padding: 50px 0;
    min-height: 730px;
    .left-logo {
        position: absolute;
        left: 30px;
        top: 30px;
        user-select: none;
        img {
            height: 50px;
        }
    }
    .left-pic-container {
        position: absolute;
        width: 750px;
        left: 10%;
        top: 50%;
        height: 630px;
        margin-top: -315px;
        .left-pic-content {
            width: 100%;
            height: 100%;
            position: relative;
            background-image: url("/img/login/bg.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            .small-logo {
                width: 110px;
                position: absolute;
                .cons {
                    height: 160px;
                    overflow: hidden;
                }
                .logos {
                    width: 100%;
                    margin-top: 30px;
                }
                .shadow1 {
                    width: 64px;
                    position: absolute;
                    left: 44%;
                    transform: translateX(-50%);
                    bottom: -16px;
                }
            }
            .cons {
                position: relative;
            }
            .dt {
                left: 166px;
                top: 86px;
                .logos {
                    animation: logoAnimate 4s 0.2s infinite alternate forwards;
                }
                .shadow1 {
                    animation: logoShadowAnimate 4s 0.2s infinite alternate forwards;
                }
            }
            .ds {
                right: 176px;
                top: 54px;
                .logos {
                    animation: logoAnimate 2.2s infinite alternate;
                }
                .shadow1 {
                    animation: logoShadowAnimate 2.2s infinite alternate;
                }
            }
            .cc {
                right: 72px;
                bottom: 160px;
                .logos {
                    animation: logoAnimate 2.5s 0.5s infinite alternate;
                }
                .shadow1 {
                    animation: logoShadowAnimate 2.5s 0.5s infinite alternate;
                }
            }
            .rp {
                left: 290px;
                bottom: 76px;
                .logos {
                    animation: logoAnimate 3s 0.9s infinite alternate;
                }
                .shadow1 {
                    animation: logoShadowAnimate 3s 0.9s infinite alternate;
                }
            }
            .cubes {
                display: block;
                width: 100%;
            }
            .cube1 {
                width: 48px;
                right: 60px;
                top: 180px;
                position: absolute;
                .cons {
                    height: 108px;
                    position: relative;
                    overflow: hidden;
                    .cubes {
                        animation: cube1LogoAnimate 2s infinite alternate;
                    }
                    .shadow2 {
                        position: absolute;
                        width: 56px;
                        left: 48%;
                        transform: translateX(-50%);
                        bottom: -16px;
                        animation: cube1ShadowAnimate 2s infinite alternate;
                    }
                }
            }
            .cube2 {
                position: absolute;
                width: 56px;
                left: 130px;
                bottom: 190px;
                .cons {
                    position: relative;
                    height: 126px;
                    overflow: hidden;
                    .cubes {
                        animation: cube2LogoAnimate 2s 0.3s infinite alternate;
                    }
                    .shadow3 {
                        position: absolute;
                        width: 64px;
                        left: 48%;
                        transform: translateX(-50%);
                        bottom: -16px;
                        animation: cube2ShadowAnimate 2s 0.3s infinite alternate;
                    }
                }
            }
            .logo {
                right: 260px;
                top: 190px;
                width: 150px;
                position: absolute;
                height: 160px;
                cursor: pointer;
                .a-cons {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .right-container {
        right: 18.667%;
        position: absolute;
        background: #ffffff;
        border-radius: 16px;
        transform: translateY(-50%);
        padding: 50px;
        width: 92%;
        top: 50%;
        max-width: 470px;
        margin: 0 auto;
        box-shadow: 0 21.2px 31.8px 0 rgba(26,26,26,0.12);
        .sign-list {
            position: relative;
            h1 {
                font-size: 40px;
                line-height: 48px;
                margin-bottom: 32px;
            }
            .title-tab {
                overflow: hidden;
                padding-bottom: 16px;
                div {
                    float: left;
                    line-height: 32px;
                    font-size: 20px;
                    color: #8C8889;
                    transition: 0.3s;
                    position: relative;
                    padding-top: 16px;
                    margin-left: 32px;
                    user-select: none;
                    &::before {
                        content: '';
                        width: 0;
                        height: 2px;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                        background: #1ECC95;
                        border-radius: 3px;
                        transition: 0.3s;
                    }
                    &:first-child {
                        margin-left: 0;
                    }
                    &:not(.active) {
                        cursor: pointer;
                    }
                    &.active {
                        color: #353030;
                        font-weight: bold;
                        &::before {
                            width: 100%;
                        }
                    }
                }
            }
            .form-box {
                position: relative;
                .el-input--large {
                    --el-input-height: 48px;
                    --el-input-border-radius: 8px;
                    font-size: 16px;
                    .el-input__wrapper {
                        padding: 1px 16px;
                    }
                }
                .clickable-text {
                    color: #686565;
                    cursor: pointer;
                    transition: 0.2s;
                    font-size: 14px;
                    &:hover {
                        color: #1ECC95
                    }
                }
                .el-button--large {
                    --el-button-size: 48px;
                    height: 48px;
                    padding: 12px 19px;
                    font-size: 16px;
                    border: 0;
                    border-radius: 6px;
                    background: linear-gradient(90deg,#1fd4af, #1ecc95 100%);
                }
            }
        }
    }
}

.right-title{
  font-size: 45px;
  position: absolute;
  top:-80px;
  font-weight: bold;
}

.login-submit {
  width: 100%;
  height: 45px;
  border: 1px solid #1ECC95;
  background: none;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 300;
  color: #FFF;
  cursor: pointer;
  margin-top: 60px;
  font-family: "neo";
  transition: 0.25s;
  background: #1ECC95;
  border-color: #1ECC95;
}
.login-submit.el-button--primary:hover {
    background: #1ECC95;
    border-color: #1ECC95;
    color: #FFF;
}

.remember-password{
  position: relative;
  top:-130px;

  .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #1ECC95;
    border-color: #1ECC95;
  }
  .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #1ECC95;
  }
}

.login-form{
  div.el-form-item:first-child{
    display: none;
  }

  .el-input--small .el-input__inner{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }

  .el-input__prefix{
    top: 5px;
  }

  [class^="icon-"]{
    font-size: 20px !important;
  }

  .el-input__icon{
    font-size: 16px !important;
  }
}


//动画效果
@keyframes logoAnimate {
    25% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}
@keyframes logoShadowAnimate {
    25% {
        width: 64px;
        margin-bottom: 0;
    }
    100% {
        width: 30px;
        margin-bottom: 20px;
    }
}
@keyframes cube1LogoAnimate {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
}
@keyframes cube1ShadowAnimate {
    0% {
        width: 20px;
        margin-bottom: 20px;
    }
    100% {
        width: 56px;
    }
}
@keyframes cube2LogoAnimate {
    0% {
        margin-top: 30px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes cube2ShadowAnimate {
    0% {
        width: 64px;
    }
    100% {
        width: 30px;
        margin-bottom: 20px;
    }
}

</style>